{"id":2625,"date":"2026-04-18T15:09:15","date_gmt":"2026-04-18T15:09:15","guid":{"rendered":"https:\/\/msbliefert.eu\/?page_id=2625"},"modified":"2026-06-03T10:18:43","modified_gmt":"2026-06-03T10:18:43","slug":"reisewetter-2026","status":"publish","type":"page","link":"https:\/\/msbliefert.eu\/reisewetter-2026\/","title":{"rendered":"Reisewetter 2026"},"content":{"rendered":"<!-- 1. Externe Bibliotheken laden -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/suncalc\"><\/script>\r\n\r\n<!-- 2. CSS-Styles f\u00fcr das Layout -->\r\n<style>\r\n.wp-weather-app {\r\n  font-family: system-ui, -apple-system, sans-serif;\r\n  color: #2c3e50;\r\n  max-width: 100%;\r\n  margin: 0 auto;\r\n}\r\n.wp-weather-app .topbar {\r\n  background: white;\r\n  padding: 10px;\r\n  box-shadow: 0 2px 8px rgba(0,0,0,0.08);\r\n  border-radius: 12px;\r\n  margin-bottom: 15px;\r\n}\r\n.wp-weather-app .select-wrap {\r\n  position: relative;\r\n}\r\n.wp-weather-app select {\r\n  width: 100%;\r\n  padding: 14px;\r\n  border: none;\r\n  border-radius: 12px;\r\n  background: #f4f6f7;\r\n  font-size: 16px;\r\n  font-weight: bold;\r\n  color: #2c3e50;\r\n  appearance: none;\r\n  outline: none;\r\n}\r\n.wp-weather-app .select-wrap::after {\r\n  content: \"\u25bc\";\r\n  position: absolute;\r\n  right: 14px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  pointer-events: none;\r\n  color: #2c3e50;\r\n}\r\n.wp-weather-app .chart-scroll-wrapper {\r\n  width: 100%;\r\n  overflow-x: auto;\r\n  background: white;\r\n  border-radius: 14px;\r\n  border: 1px solid #dfe6e9;\r\n  -webkit-overflow-scrolling: touch;\r\n  margin-bottom: 20px;\r\n}\r\n.wp-weather-app .chart-inner-container {\r\n  min-width: 900px;\r\n  width: max-content;\r\n  padding: 10px;\r\n  box-sizing: border-box;\r\n}\r\n.wp-weather-app .section-title {\r\n  margin: 15px 4px 10px;\r\n  font-size: 18px;\r\n  font-weight: bold;\r\n}\r\n.wp-weather-app .accordion-item {\r\n  background: white;\r\n  border-radius: 14px;\r\n  margin-bottom: 8px;\r\n  border: 1px solid #dfe6e9;\r\n  overflow: hidden;\r\n}\r\n.wp-weather-app .accordion-header {\r\n  padding: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  gap: 10px;\r\n}\r\n.wp-weather-app .accordion-header:active {\r\n  background: #f8fafc;\r\n}\r\n.wp-weather-app .acc-left-block {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  width: 95px;\r\n  flex-shrink: 0;\r\n}\r\n.wp-weather-app .acc-day {\r\n  font-weight: bold;\r\n  font-size: 14px;\r\n}\r\n.wp-weather-app .acc-weather {\r\n  font-size: 26px;\r\n  width: 35px;\r\n  text-align: center;\r\n  flex-shrink: 0;\r\n}\r\n.wp-weather-app .acc-temp {\r\n  width: 95px;\r\n  text-align: right;\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  flex-shrink: 0;\r\n}\r\n.wp-weather-app .acc-rain {\r\n  width: 85px;\r\n  text-align: right;\r\n  font-size: 13px;\r\n  color: #2980b9;\r\n  font-weight: 600;\r\n  flex-shrink: 0;\r\n}\r\n.wp-weather-app .acc-sun {\r\n  flex: 1;\r\n  text-align: right;\r\n  font-size: 11px;\r\n  color: #e67e22;\r\n  font-weight: 500;\r\n  white-space: nowrap;\r\n}\r\n.wp-weather-app .accordion-content {\r\n  max-height: 0;\r\n  transition: max-height 0.25s ease-out;\r\n  background: #fcfdfe;\r\n  border-top: 1px solid #f1f5f9;\r\n  overflow-x: auto;\r\n  -webkit-overflow-scrolling: touch;\r\n}\r\n.wp-weather-app .accordion-item.active .accordion-content {\r\n  max-height: 700px;\r\n}\r\n.wp-weather-app .detail-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, minmax(130px, 1fr));\r\n  gap: 6px;\r\n  padding: 10px;\r\n  min-width: 550px;\r\n}\r\n.wp-weather-app .detail-block {\r\n  background: #f1f5f9;\r\n  padding: 8px 4px;\r\n  border-radius: 10px;\r\n  text-align: center;\r\n  font-size: 11px;\r\n}\r\n.wp-weather-app .detail-time {\r\n  font-weight: bold;\r\n  color: #64748b;\r\n  margin-bottom: 4px;\r\n  text-transform: uppercase;\r\n  font-size: 9px;\r\n}\r\n.wp-weather-app .detail-emoji {\r\n  font-size: 22px;\r\n  margin: 4px 0;\r\n}\r\n.wp-weather-app .detail-temp {\r\n  font-weight: bold;\r\n  font-size: 13px;\r\n  margin-bottom: 4px;\r\n}\r\n.wp-weather-app .detail-sub {\r\n  font-size: 10px;\r\n  color: #475569;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 2px;\r\n  white-space: nowrap;\r\n}\r\n.wp-weather-app .loading {\r\n  text-align: center;\r\n  padding: 30px;\r\n}\r\n.wp-weather-app .error {\r\n  color: #c0392b;\r\n  text-align: center;\r\n  padding: 20px;\r\n}\r\n\r\n@media (max-width:700px) {\r\n  .wp-weather-app .accordion-header {\r\n    padding: 12px 10px;\r\n  }\r\n  .wp-weather-app .acc-left-block {\r\n    width: 75px;\r\n  }\r\n  .wp-weather-app .acc-day {\r\n    font-size: 13px;\r\n  }\r\n  .wp-weather-app .acc-sun {\r\n    text-align: left;\r\n    font-size: 9.5px;\r\n    margin-top: 2px;\r\n  }\r\n  .wp-weather-app .acc-weather { \r\n    width: 30px; \r\n    font-size: 22px; \r\n  }\r\n  .wp-weather-app .acc-temp { \r\n    width: 75px; \r\n    font-size: 12px; \r\n  }\r\n  .wp-weather-app .acc-rain { \r\n    width: 65px; \r\n    font-size: 12px; \r\n  }\r\n}\r\n<\/style>\r\n\r\n<!-- 3. HTML-Struktur der App -->\r\n<div class=\"wp-weather-app\">\r\n  <div class=\"topbar\">\r\n    <div class=\"select-wrap\">\r\n      <select id=\"citySelect\"><\/select>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"chart-scroll-wrapper\">\r\n    <div class=\"chart-inner-container\">\r\n      <canvas id=\"meteogram\" height=\"180\"><\/canvas>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div id=\"daily\"><\/div>\r\n<\/div>\r\n\r\n<!-- 4. JavaScript-Logik -->\r\n<script>\r\n(function() {\r\nconst cities = {\r\n  \"\ud83c\udde9\ud83c\uddea Deutschland\": {\r\n    \"Magdeburg\": { lat:52.1205, lon:11.6276 }\r\n  },\r\n  \"\ud83c\uddee\ud83c\uddf8 Island\": {\r\n    \"Akureyri\": { lat:65.6885, lon:-18.1262 },\r\n    \"Reykjav\u00edk\": { lat:64.1466, lon:-21.9426 },\r\n    \"\u00cdsafj\u00f6r\u00f0ur\": { lat:66.0755, lon:-23.1240 },\r\n    \"Sk\u00f3gafoss\": { lat:63.5321, lon:-19.5113 },\r\n    \"Seljalandsfoss\": { lat:63.6156, lon:-19.9886 },\r\n    \"Dimmuborgir\": { lat:65.5916, lon:-16.9130 },\r\n    \"Hlj\u00f3\u00f0aklettar\": { lat:65.9322, lon:-16.5516 },\r\n    \"H\u00fasav\u00edk\": { lat:66.0450, lon:-17.3383 }\r\n  },\r\n  \"\ud83c\uddec\ud83c\udde7 England\": {\r\n    \"Winchester\": { lat:51.0632, lon:-1.3085 },\r\n    \"Stonehenge\": { lat:51.1789, lon:-1.8262 },\r\n    \"Jurassic Coast\": { lat:50.6183, lon:-2.2469 },\r\n    \"Dartmoor\": { lat:50.5452, lon:-3.9822 },\r\n    \"Polperro\": { lat:50.3323, lon:-4.5193 },\r\n    \"St. Michael's Mount\": { lat:50.1160, lon:-5.4777 },\r\n    \"Land's End\": { lat:50.0657, lon:-5.7132 },\r\n    \"St. Ives\": { lat:50.2100, lon:-5.4800 },\r\n    \"Wells\": { lat:51.2093, lon:-2.6446 },\r\n    \"Bath\": { lat:51.3758, lon:-2.3599 },\r\n    \"Castle Combe\": { lat:51.4936, lon:-2.2289 },\r\n    \"Inverness\": { lat:57.4778, lon:-4.2247 },\r\n    \"Kirkwall\": { lat:58.9814, lon:-2.9605 }\r\n  },\r\n  \"\ud83c\udde9\ud83c\uddf0 D\u00e4nemark\": {\r\n    \"Henne Strand\": { lat:55.7354, lon:8.1278 },\r\n    \"Bl\u00e5vand\": { lat:55.5539, lon:8.1121 },\r\n    \"S\u00f8ndervig\": { lat:56.1215, lon:8.1154 }\r\n  },\r\n  \"\ud83c\uddf3\ud83c\uddf4 Norwegen\": {\r\n    \"Oslo\": { lat:59.9139, lon:10.7522 },\r\n    \"V\u00f8ringsfossen\": { lat:60.4273, lon:7.2514 },\r\n    \"Ulvik\": { lat:60.5670, lon:6.9177 },\r\n    \"Fl\u00e5m\": { lat:60.8608, lon:7.1134 },\r\n    \"Gudvangen\": { lat:60.8778, lon:6.8372 },\r\n    \"Utne\": { lat:60.4227, lon:6.6212 },\r\n    \"L\u00e5tefossen\": { lat:59.9479, lon:6.5841 },\r\n    \"Steinsdalsfossen\": { lat:60.3705, lon:6.0264 },\r\n    \"Bergen\": { lat:60.3913, lon:5.3221 }\r\n  }\r\n};\r\n\r\nconst weatherSymbols = {\r\n  clearsky_day:\"\u2600\ufe0f\", clearsky_night:\"\ud83c\udf19\", fair_day:\"\ud83c\udf24\ufe0f\", fair_night:\"\ud83c\udf19\",\r\n  partlycloudy_day:\"\u26c5\", partlycloudy_night:\"\u2601\ufe0f\", cloudy:\"\u2601\ufe0f\", fog:\"\ud83c\udf2b\ufe0f\",\r\n  rain:\"\ud83c\udf27\ufe0f\", lightrain:\"\ud83c\udf26\ufe0f\", heavyrain:\"\ud83c\udf27\ufe0f\", rainshowers_day:\"\ud83c\udf26\ufe0f\",\r\n  rainshowers_night:\"\ud83c\udf27\ufe0f\", heavyrainshowers_day:\"\u26c8\ufe0f\", heavyrainshowers_night:\"\u26c8\ufe0f\",\r\n  snow:\"\u2744\ufe0f\", snowshowers_day:\"\u2744\ufe0f\", snowshowers_night:\"\u2744\ufe0f\", sleet:\"\ud83c\udf28\ufe0f\"\r\n};\r\n\r\nfunction weatherEmoji(symbol){ return weatherSymbols[symbol] || \"\u2601\ufe0f\"; }\r\nfunction windDir(deg){ const dirs=[\"N\",\"NO\",\"O\",\"SO\",\"S\",\"SW\",\"W\",\"NW\"]; return dirs[Math.round(deg\/45)%8]; }\r\n\r\nwindow.toggleWpAccordion = function(element){\r\n  const item = element.parentElement;\r\n  const isActive = item.classList.contains(\"active\");\r\n  document.querySelectorAll(\".wp-weather-app .accordion-item\").forEach(i => i.classList.remove(\"active\"));\r\n  if(!isActive){ item.classList.add(\"active\"); }\r\n}\r\n\r\nfunction getSunTimes(lat, lon, date){\r\n  const times = SunCalc.getTimes(date, lat, lon);\r\n  return {\r\n    rise: times.sunrise ? times.sunrise.toLocaleTimeString(\"de-DE\", {hour:\"2-digit\", minute:\"2-digit\"}) : \"--:--\",\r\n    set: times.sunset ? times.sunset.toLocaleTimeString(\"de-DE\", {hour:\"2-digit\", minute:\"2-digit\"}) : \"--:--\"\r\n  };\r\n}\r\n\r\nconst select = document.getElementById(\"citySelect\");\r\nObject.keys(cities).forEach(country=>{\r\n  const group = document.createElement(\"optgroup\");\r\n  group.label = country;\r\n  Object.keys(cities[country]).forEach(city=>{\r\n    const option = document.createElement(\"option\");\r\n    option.value = city;\r\n    option.textContent = city;\r\n    group.appendChild(option);\r\n  });\r\n  select.appendChild(group);\r\n});\r\n\r\nasync function loadCity(cityName){\r\n  let city = null;\r\n  Object.keys(cities).forEach(country=>{ if(cities[country][cityName]){ city = cities[country][cityName]; } });\r\n  if(!city) return;\r\n\r\n  const daily = document.getElementById(\"daily\");\r\n  const ctx = document.getElementById(\"meteogram\");\r\n  daily.innerHTML = `<div class=\"loading\">Lade Wetterdaten...<\/div>`;\r\n\r\n  try {\r\n    \/\/ Absoluter Pfad f\u00fcr WordPress-Strukturen\r\n    const res = await fetch(`\/weatherappproxy.php?lat=${city.lat}&lon=${city.lon}`);\r\n    if(!res.ok) throw new Error(\"API Fehler\");\r\n    const data = await res.json();\r\n\r\n    const hours24 = data.properties.timeseries.slice(0,24);\r\n    const labels = hours24.map(e=> new Date(e.time).toLocaleTimeString(\"de-DE\", {hour:\"2-digit\", minute:\"2-digit\"}));\r\n    const tempsChart = hours24.map(e => e.data.instant.details.air_temperature);\r\n    const maxTempOnChart = Math.max(...tempsChart);\r\n\r\n    const partMin = []; const partProbableDiff = []; const partMaxDiff = []; const totalMaxForScale = [];\r\n\r\n    hours24.forEach(e=>{\r\n      const p = e.data.next_1_hours?.details;\r\n      const amount = p?.precipitation_amount || 0;\r\n      const minVal = p?.precipitation_amount_min ?? amount;\r\n      const maxVal = p?.precipitation_amount_max ?? amount;\r\n      partMin.push(minVal);\r\n      partProbableDiff.push(Math.max(0, amount - minVal));\r\n      partMaxDiff.push(Math.max(0, maxVal - amount));\r\n      totalMaxForScale.push(maxVal);\r\n    });\r\n\r\n    const maxRainOnChart = Math.max(...totalMaxForScale);\r\n    if(window.meteoChart){ window.meteoChart.destroy(); }\r\n\r\n    window.meteoChart = new Chart(ctx,{\r\n      type:\"bar\",\r\n      data:{\r\n        labels:labels,\r\n        datasets:[\r\n          { type:\"line\", label:\"Temperatur\", data:tempsChart, yAxisID:\"y\", tension:0.3, borderColor:\"#e74c3c\", backgroundColor:\"#e74c3c\", borderWidth:3, pointRadius:3, order:1 },\r\n          { label:\"Minimal\", data:partMin, yAxisID:\"y1\", backgroundColor:\"#1c3d5a\", order:2 },\r\n          { label:\"Wahrscheinlich\", data:partProbableDiff, yAxisID:\"y1\", backgroundColor:\"#3498db\", order:2 },\r\n          { label:\"Maximal\", data:partMaxDiff, yAxisID:\"y1\", backgroundColor:\"#90caf9\", order:2 }\r\n        ]\r\n      },\r\n      options:{\r\n        responsive:true,\r\n        maintainAspectRatio:false,\r\n        plugins:{ legend:{ display:false } },\r\n        scales:{\r\n          y:{ position:\"left\", suggestedMax: maxTempOnChart + 3, ticks:{ callback:v => v + \"\u00b0\" } },\r\n          y1:{ position:\"right\", beginAtZero:true, stacked:true, suggestedMax: maxRainOnChart > 0 ? maxRainOnChart * 1.25 : 2, grid:{ drawOnChartArea:false }, ticks:{ callback:v => Number(v).toFixed(1) + \" mm\" } },\r\n          x:{ stacked:true }\r\n        }\r\n      },\r\n      plugins:[{\r\n        id:\"valueLabels\",\r\n        afterDatasetsDraw(chart){\r\n          const {ctx} = chart;\r\n          chart.data.datasets.forEach((dataset, i)=>{\r\n            if(dataset.label !== \"Maximal\") return;\r\n            const meta = chart.getDatasetMeta(i);\r\n            meta.data.forEach((element, index)=>{\r\n              ctx.save(); ctx.font = \"bold 9px system-ui\";\r\n              const realMax = totalMaxForScale[index];\r\n              if(realMax > 0) { ctx.fillStyle = \"#2980b9\"; ctx.textAlign = \"center\"; ctx.fillText(realMax.toFixed(1), element.x, element.y - 6); }\r\n              ctx.restore();\r\n            });\r\n          });\r\n          const lineMeta = chart.getDatasetMeta(0);\r\n          lineMeta.data.forEach((element, index)=>{\r\n            if(index % 2 === 0){\r\n              ctx.save(); ctx.font = \"bold 10px system-ui\"; ctx.fillStyle = \"#c0392b\"; ctx.textAlign = \"center\";\r\n              ctx.fillText(tempsChart[index].toFixed(0)+\"\u00b0\", element.x, element.y - 10); ctx.restore();\r\n            }\r\n          });\r\n        }\r\n      }]\r\n    });\r\n\r\n    const dailyBuckets = {};\r\n    data.properties.timeseries.forEach(entry=>{\r\n      const t = new Date(entry.time);\r\n      const dayKey = t.getFullYear() + \"-\" + String(t.getMonth()+1).padStart(2,\"0\") + \"-\" + String(t.getDate()).padStart(2,\"0\");\r\n      if(!dailyBuckets[dayKey]){ dailyBuckets[dayKey] = []; }\r\n      dailyBuckets[dayKey].push(entry);\r\n    });\r\n\r\n    daily.innerHTML = `<div class=\"section-title\">10-Tage Vorhersage<\/div>`;\r\n\r\n    Object.keys(dailyBuckets).slice(0,10).forEach((dayKey,index)=>{\r\n      const arr = dailyBuckets[dayKey];\r\n      const temps = arr.map(e => e.data.instant.details.air_temperature);\r\n      let totalPrecip = 0; const usedSlots = new Set();\r\n      const slots = {\r\n        0:{ label:\"0-6 Uhr\", temps:[], probableR:0, windS:0, windD:0, symbol:\"cloudy\" },\r\n        6:{ label:\"6-12 Uhr\", temps:[], probableR:0, windS:0, windD:0, symbol:\"cloudy\" },\r\n        12:{ label:\"12-18 Uhr\", temps:[], probableR:0, windS:0, windD:0, symbol:\"cloudy\" },\r\n        18:{ label:\"18-24 Uhr\", temps:[], probableR:0, windS:0, windD:0, symbol:\"cloudy\" }\r\n      };\r\n\r\n      arr.forEach(e=>{\r\n        const localHour = new Date(e.time).getHours();\r\n        let slotKey = localHour < 6 ? 0 : localHour < 12 ? 6 : localHour < 18 ? 12 : 18;\r\n        const slot = slots[slotKey];\r\n        const details = e.data.instant.details;\r\n        slot.temps.push(details.air_temperature);\r\n\r\n        if(!usedSlots.has(slotKey) && e.data.next_6_hours?.details){\r\n          usedSlots.add(slotKey);\r\n          slot.probableR = e.data.next_6_hours.details.precipitation_amount ?? 0;\r\n          totalPrecip += slot.probableR;\r\n        }\r\n        slot.windS = details.wind_speed || 0; slot.windD = details.wind_from_direction || 0;\r\n        if(e.data.next_6_hours?.summary?.symbol_code){ slot.symbol = e.data.next_6_hours.summary.symbol_code; }\r\n      });\r\n\r\n      const date = new Date(dayKey);\r\n      const label = date.toLocaleDateString(\"de-DE\", {weekday:\"short\", day:\"2-digit\", month:\"2-digit\"});\r\n      const sun = getSunTimes(city.lat, city.lon, date);\r\n\r\n      let gridHtml = `<div class=\"detail-grid\">`;\r\n      [0,6,12,18].forEach(h=>{\r\n        const slot = slots[h];\r\n        const sTemp = slot.temps.length ? (slot.temps.reduce((a,b)=>a+b,0) \/ slot.temps.length).toFixed(0) : \"--\";\r\n        gridHtml += `\r\n          <div class=\"detail-block\">\r\n            <div class=\"detail-time\">${slot.label}<\/div>\r\n            <div class=\"detail-emoji\">${weatherEmoji(slot.symbol)}<\/div>\r\n            <div class=\"detail-temp\">${sTemp}\u00b0C<\/div>\r\n            <div class=\"detail-sub\" style=\"color:#2980b9;\">\ud83d\udca7 ${slot.probableR.toFixed(1)} mm<\/div>\r\n            <div class=\"detail-sub\" style=\"color:#7f8c8d;\">\ud83d\udca8 ${slot.windS.toFixed(0)} m\/s ${windDir(slot.windD)}<\/div>\r\n          <\/div>`;\r\n      });\r\n      gridHtml += `<\/div>`;\r\n\r\n      const daySymbol = arr[0].data.next_6_hours?.summary?.symbol_code || \"cloudy\";\r\n\r\n      daily.innerHTML += `\r\n        <div class=\"accordion-item ${index===0 ? \"active\" : \"\"}\">\r\n          <div class=\"accordion-header\" onclick=\"toggleWpAccordion(this)\">\r\n            <div class=\"acc-left-block\">\r\n              <div class=\"acc-day\">${label}<\/div>\r\n              <div class=\"acc-sun\">\u2600\ufe0f ${sun.rise} \/ \ud83c\udf19 ${sun.set}<\/div>\r\n            <\/div>\r\n            <div class=\"acc-weather\">${weatherEmoji(daySymbol)}<\/div>\r\n            <div class=\"acc-temp\">\ud83c\udf21\ufe0f ${Math.min(...temps).toFixed(0)}\u00b0 \/ ${Math.max(...temps).toFixed(0)}\u00b0<\/div>\r\n            <div class=\"acc-rain\">\ud83c\udf27\ufe0f ${totalPrecip.toFixed(1)} mm<\/div>\r\n          <\/div>\r\n          <div class=\"accordion-content\">${gridHtml}<\/div>\r\n        <\/div>`;\r\n    });\r\n  } catch(err) {\r\n    console.error(err);\r\n    daily.innerHTML = `<div class=\"error\">Fehler beim Laden der Wetterdaten<\/div>`;\r\n  }\r\n}\r\n\r\nselect.addEventListener(\"change\",()=>{ loadCity(select.value); });\r\nselect.value = \"Magdeburg\";\r\nloadCity(\"Magdeburg\");\r\n})();\r\n<\/script>\n\n\n<h3>Ort ausw\u00e4hlen:<\/h3>\r\n\r\n<select id=\"ortAuswahl\">\r\n\r\n  <optgroup label=\"Niederlande\">\r\n    <option value=\"2-2749330\">Oostvoorne<\/option>\r\n    <option value=\"2-2759794\">Amsterdam<\/option>\r\n    <option value=\"2-2756431\">Edam<\/option>\r\n    <option value=\"2-2745340\">Volendam<\/option>\r\n    <option value=\"2-2752950\">Marken<\/option>\r\n  <\/optgroup>\r\n\r\n  <optgroup label=\"Schottland\">\r\n    <option value=\"2-2645198\">Kirkwall<\/option>\r\n    <option value=\"2-2646115\">Invergordon<\/option>\r\n    <option value=\"2-2641805\">Loch Ness<\/option>\r\n  <\/optgroup>\r\n\r\n  <optgroup label=\"Island\">\r\n    <option value=\"2-3413829\">Reykjavik<\/option>\r\n    <option value=\"2-3415667\">Isafj\u00f6rdur<\/option>\r\n    <option value=\"2-2633274\">Akureyri<\/option>\r\n  <\/optgroup>\r\n\r\n  <optgroup label=\"Norwegen\">\r\n    <option value=\"1-92416\">Bergen<\/option>\r\n    <option value=\"1-72837\">Oslo<\/option>\r\n    <option value=\"1-110450\">Ulvik<\/option>\r\n    <option value=\"1-64935\">Hardangerfjord<\/option>\r\n  <\/optgroup>\r\n\r\n  <optgroup label=\"England\">\r\n    <option value=\"2-2633858\">Winchester<\/option>\r\n    <option value=\"2-2638664\">Stonehenge<\/option>\r\n    <option value=\"2-8740092\">Jurassic Coast<\/option>\r\n    <option value=\"2-10244122\">Dartmoor<\/option>\r\n    <option value=\"2-2640152\">Polperro<\/option>\r\n    <option value=\"2-2643076\">St. Michael's Mount<\/option>\r\n    <option value=\"2-2638204\">Lands End<\/option>\r\n    <option value=\"2-2638778\">St. Ives<\/option>\r\n    <option value=\"2-2634569\">Wells<\/option>\r\n    <option value=\"2-2656173\">Bath<\/option>\r\n    <option value=\"2-2653597\">Castle Combe<\/option>\r\n  <\/optgroup>\r\n\r\n  <optgroup label=\"D\u00e4nemark\">\r\n    <option value=\"2-2620440\">Henne<\/option>\r\n    <option value=\"2-2623928\">Blavand<\/option>\r\n    <option value=\"2-2612930\">S\u00f8ndervig<\/option>\r\n  <\/optgroup>\r\n\r\n<\/select>\r\n\r\n<br><br>\r\n\r\n<!-- iFrame 1 -->\r\n<iframe id=\"frame1\"\r\n  style=\"width: 100%; height: 372px; border: 0; border-radius: 8px;\"\r\n  title=\"24h Wetter\">\r\n<\/iframe>\r\n\r\n<br><br>\r\n\r\n<!-- iFrame 2 -->\r\n<iframe id=\"frame2\"\r\n  style=\"width: 100%; height: 506px; border: 0; border-radius: 8px;\"\r\n  title=\"8 Tage Wetter\">\r\n<\/iframe>\r\n\r\n<br><br>\r\n\r\n<!-- iFrame 3 -->\r\n<iframe id=\"frame3\"\r\n  style=\"width: 100%; height: 391px; border: 0; border-radius: 8px;\"\r\n  title=\"Meteogramm\">\r\n<\/iframe>\r\n\r\n<script>\r\nconst select = document.getElementById(\"ortAuswahl\");\r\n\r\n\/\/ letzten Ort laden\r\nconst saved = localStorage.getItem(\"ort\");\r\nif (saved) select.value = saved;\r\n\r\nfunction updateIframes() {\r\n  const id = select.value;\r\n\r\n  \/\/ speichern\r\n  localStorage.setItem(\"ort\", id);\r\n\r\n  document.getElementById(\"frame1\").src =\r\n    \"https:\/\/www.yr.no\/en\/content\/\" + id + \"\/card.html?mode=light\";\r\n\r\n  document.getElementById(\"frame2\").src =\r\n    \"https:\/\/www.yr.no\/en\/content\/\" + id + \"\/table.html?mode=light\";\r\n\r\n  document.getElementById(\"frame3\").src =\r\n    \"https:\/\/www.yr.no\/en\/content\/\" + id + \"\/meteogram.svg?mode=light\";\r\n}\r\n\r\n\/\/ initial laden\r\nupdateIframes();\r\n\r\n\/\/ bei \u00c4nderung\r\nselect.addEventListener(\"change\", updateIframes);\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":{"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-2625","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/msbliefert.eu\/wp-json\/wp\/v2\/pages\/2625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/msbliefert.eu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/msbliefert.eu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/msbliefert.eu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/msbliefert.eu\/wp-json\/wp\/v2\/comments?post=2625"}],"version-history":[{"count":5,"href":"https:\/\/msbliefert.eu\/wp-json\/wp\/v2\/pages\/2625\/revisions"}],"predecessor-version":[{"id":3554,"href":"https:\/\/msbliefert.eu\/wp-json\/wp\/v2\/pages\/2625\/revisions\/3554"}],"wp:attachment":[{"href":"https:\/\/msbliefert.eu\/wp-json\/wp\/v2\/media?parent=2625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}