{"id":551,"date":"2026-03-26T00:56:51","date_gmt":"2026-03-25T23:56:51","guid":{"rendered":"https:\/\/dev.katharina-salanga.de\/?page_id=551"},"modified":"2026-04-08T00:06:41","modified_gmt":"2026-04-07T22:06:41","slug":"blog","status":"publish","type":"page","link":"https:\/\/dev.katharina-salanga.de\/?page_id=551","title":{"rendered":"Blog"},"content":{"rendered":"\n<style>\n\/* Grundlayout der Blog-Seite *\/\n.blog-page {\n  max-width: 1200px;\n  margin: 80px auto;\n  padding: 0 20px;\n  display: grid;\n  grid-template-columns: 3fr 1fr;\n  gap: 60px;\n}\n\n\/* Kopfbereich: Headline + Subhead + Intro *\/\n.blog-header {\n  grid-column: 1 \/ -1;\n  margin-bottom: 40px;\n}\n\n.blog-subhead {\n  font-family: \"Crimson Text\", serif;\n  font-size: 16px;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  color: #777;\n  margin-bottom: 8px;\n}\n\n.blog-title {\n  font-family: \"Cormorant Garamond\", serif;\n  font-size: 46px;\n  line-height: 1.1;\n  margin: 0 0 18px 0;\n  color: #111;\n}\n\n.blog-intro {\n  font-family: \"Crimson Text\", serif;\n  font-size: 18px;\n  line-height: 1.6;\n  color: #444;\n  max-width: 720px;\n}\n\n\/* Hauptbereich: Grid + Sidebar *\/\n.blog-main {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 32px;\n}\n\n\/* Karten *\/\n.blog-card {\n  background: #2a2a2a;\n  border: 1px solid #111;\n  padding: 22px 22px 24px;\n  color: #fff;\n  cursor: pointer;\n  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;\n}\n\n.blog-card:hover {\n  background: #4a4a4a;\n  border-color: #444;\n  transform: translateY(-2px);\n}\n\n.blog-card img {\n  width: 100%;\n  height: auto;\n  aspect-ratio: 5 \/ 3;\n  object-fit: cover;\n  margin-bottom: 18px;\n}\n\n.blog-card-title {\n  font-family: \"Cormorant Garamond\", serif;\n  font-size: 26px;\n  margin: 0 0 10px 0;\n}\n\n.blog-card-excerpt {\n  font-family: \"Crimson Text\", serif;\n  font-size: 17px;\n  line-height: 1.5;\n  color: #e6e6e6;\n  margin-bottom: 16px;\n}\n\n.blog-card-tags {\n  font-family: \"Crimson Text\", serif;\n  font-size: 13px;\n  color: #aaa;\n  margin-bottom: 10px;\n}\n\n.blog-card-tags span {\n  margin-right: 6px;\n}\n\n\/* Weiterlesen-Button in der Karte *\/\n.blog-card-readmore {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 14px;\n  border: 1px solid #fff;\n  text-decoration: none;\n  color: #fff;\n  font-size: 11px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  font-family: \"Crimson Text\", serif;\n  transition: all 0.3s ease;\n}\n\n.blog-card-readmore span {\n  font-size: 14px;\n  position: relative;\n  top: -1px;\n}\n\n.blog-card:hover .blog-card-readmore {\n  background: #fff;\n  color: #000;\n}\n\n\/* Sidebar \u2013 minimalistisch, ruhig *\/\n.blog-sidebar {\n  font-family: \"Crimson Text\", serif;\n  font-size: 15px;\n  color: #444;\n}\n\n.blog-sidebar-section {\n  margin-bottom: 32px;\n}\n\n.blog-sidebar-title {\n  font-family: \"Cormorant Garamond\", serif;\n  font-size: 20px;\n  margin-bottom: 10px;\n  color: #111;\n}\n\n.blog-sidebar ul {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.blog-sidebar li {\n  margin-bottom: 6px;\n}\n\n.blog-sidebar a {\n  color: #444;\n  text-decoration: none;\n}\n\n.blog-sidebar a:hover {\n  text-decoration: underline;\n}\n\n\/* Mehr laden *\/\n.blog-load-more {\n  grid-column: 1 \/ 3;\n  text-align: center;\n  margin-top: 20px;\n}\n\n.blog-load-more button {\n  padding: 10px 22px;\n  border: 1px solid #111;\n  background: #fff;\n  font-family: \"Crimson Text\", serif;\n  font-size: 13px;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.blog-load-more button:hover {\n  background: #111;\n  color: #fff;\n}\n\n\/* Overlay f\u00fcr Artikel *\/\n.blog-overlay-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.7);\n  display: none;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n}\n\n.blog-overlay-backdrop.active {\n  display: flex;\n}\n\n.blog-overlay {\n  background: #f7f7f7;\n  max-width: 800px;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 32px 36px;\n  box-shadow: 0 20px 60px rgba(0,0,0,0.4);\n}\n\n.blog-overlay-close {\n  text-align: right;\n  margin-bottom: 10px;\n}\n\n.blog-overlay-close button {\n  background: none;\n  border: none;\n  font-size: 20px;\n  cursor: pointer;\n}\n\n.blog-overlay-title {\n  font-family: \"Cormorant Garamond\", serif;\n  font-size: 32px;\n  margin: 0 0 10px 0;\n  color: #111;\n}\n\n.blog-overlay-meta {\n  font-family: \"Crimson Text\", serif;\n  font-size: 14px;\n  color: #777;\n  margin-bottom: 18px;\n}\n\n.blog-overlay-content {\n  font-family: \"Crimson Text\", serif;\n  font-size: 17px;\n  line-height: 1.7;\n  color: #333;\n}\n\n\/* Responsive *\/\n@media (max-width: 1000px) {\n  .blog-page {\n    grid-template-columns: 1fr;\n    gap: 40px;\n  }\n  .blog-main {\n    grid-template-columns: 1fr;\n  }\n  .blog-load-more {\n    grid-column: 1 \/ 2;\n  }\n}\n\n@media (max-width: 600px) {\n  .blog-title {\n    font-size: 36px;\n  }\n}\n<\/style>\n\n<div class=\"blog-page\">\n\n  <!-- Kopfbereich -->\n  <div class=\"blog-header\">\n    <div class=\"blog-subhead\">Blindtext Subhead<\/div>\n    <h1 class=\"blog-title\">Blindtext Blog-\u00dcberschrift<\/h1>\n    <p class=\"blog-intro\">\n      Hier steht sp\u00e4ter dein kurzer, klarer Introtext zum Blog. Zwei bis drei S\u00e4tze, die erkl\u00e4ren, was Leserinnen und Leser hier erwartet \u2013 ohne Floskeln, ohne \u201eWillkommen\u201c, einfach du.\n    <\/p>\n  <\/div>\n\n  <!-- Hauptbereich: Grid -->\n  <div class=\"blog-main\" id=\"blogMain\">\n    <!-- Karten werden per JavaScript eingef\u00fcgt -->\n    <div class=\"blog-load-more\" id=\"blogLoadMoreWrapper\" style=\"display:none;\">\n      <button type=\"button\" id=\"blogLoadMoreBtn\">Mehr laden<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Sidebar -->\n  <aside class=\"blog-sidebar\">\n    <div class=\"blog-sidebar-section\">\n      <div class=\"blog-sidebar-title\">Kategorien<\/div>\n      <ul id=\"blogSidebarCategories\">\n        <!-- Kategorien werden automatisch geladen -->\n      <\/ul>\n    <\/div>\n\n    <div class=\"blog-sidebar-section\">\n      <div class=\"blog-sidebar-title\">Schlagworte<\/div>\n      <ul id=\"blogSidebarTags\">\n        <!-- Schlagworte werden automatisch geladen -->\n      <\/ul>\n    <\/div>\n  <\/aside>\n\n<\/div>\n\n<!-- Overlay -->\n<div class=\"blog-overlay-backdrop\" id=\"blogOverlay\">\n  <div class=\"blog-overlay\">\n    <div class=\"blog-overlay-close\">\n      <button type=\"button\" id=\"blogOverlayClose\">\u00d7<\/button>\n    <\/div>\n    <h2 class=\"blog-overlay-title\" id=\"blogOverlayTitle\">Blindtext-Artikel-Titel<\/h2>\n    <div class=\"blog-overlay-meta\" id=\"blogOverlayMeta\"><\/div>\n    <div class=\"blog-overlay-content\" id=\"blogOverlayContent\">\n      <!-- Volltext kommt hier rein -->\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  const apiBase = window.location.origin + '\/wp-json\/wp\/v2';\n  const postsPerPage = 6;\n  let currentPage = 1;\n  let isLoading = false;\n  let allPosts = [];\n  let allCategories = {};\n  let allTags = {};\n  let activeCategory = null;\n  let activeTag = null;\n\n  const mainContainer = document.getElementById('blogMain');\n  const loadMoreWrapper = document.getElementById('blogLoadMoreWrapper');\n  const loadMoreBtn = document.getElementById('blogLoadMoreBtn');\n  const sidebarCategories = document.getElementById('blogSidebarCategories');\n  const sidebarTags = document.getElementById('blogSidebarTags');\n\n  const overlayBackdrop = document.getElementById('blogOverlay');\n  const overlayClose = document.getElementById('blogOverlayClose');\n  const overlayTitle = document.getElementById('blogOverlayTitle');\n  const overlayMeta = document.getElementById('blogOverlayMeta');\n  const overlayContent = document.getElementById('blogOverlayContent');\n\n  function fetchPosts(page = 1) {\n    if (isLoading) return;\n    isLoading = true;\n\n    const url = apiBase + '\/posts?per_page=' + postsPerPage +\n      '&page=' + page +\n      '&orderby=date&order=desc&_embed';\n\n    fetch(url)\n      .then(res => {\n        if (!res.ok) throw new Error('Keine weiteren Beitr\u00e4ge');\n        return res.json();\n      })\n      .then(data => {\n        if (data.length > 0) {\n          allPosts = allPosts.concat(data);\n          buildTaxonomies(data);\n          renderPosts();\n          loadMoreWrapper.style.display = 'block';\n        } else {\n          loadMoreWrapper.style.display = 'none';\n        }\n      })\n      .catch(() => {\n        loadMoreWrapper.style.display = 'none';\n      })\n      .finally(() => {\n        isLoading = false;\n      });\n  }\n\n  function buildTaxonomies(posts) {\n    posts.forEach(post => {\n      const terms = post._embedded && post._embedded['wp:term'] ? post._embedded['wp:term'] : [];\n      const cats = terms[0] || [];\n      const tags = terms[1] || [];\n\n      cats.forEach(cat => {\n        allCategories[cat.id] = cat;\n      });\n\n      tags.forEach(tag => {\n        allTags[tag.id] = tag;\n      });\n    });\n\n    renderSidebar();\n  }\n\n  function renderSidebar() {\n    sidebarCategories.innerHTML = '';\n    Object.values(allCategories).forEach(cat => {\n      const li = document.createElement('li');\n      const a = document.createElement('a');\n      a.href = '#';\n      a.textContent = cat.name;\n      a.addEventListener('click', (e) => {\n        e.preventDefault();\n        activeCategory = (activeCategory === cat.id) ? null : cat.id;\n        renderPosts();\n      });\n      li.appendChild(a);\n      sidebarCategories.appendChild(li);\n    });\n\n    sidebarTags.innerHTML = '';\n    Object.values(allTags).forEach(tag => {\n      const li = document.createElement('li');\n      const a = document.createElement('a');\n      a.href = '#';\n      a.textContent = '#' + tag.name;\n      a.addEventListener('click', (e) => {\n        e.preventDefault();\n        activeTag = (activeTag === tag.id) ? null : tag.id;\n        renderPosts();\n      });\n      li.appendChild(a);\n      sidebarTags.appendChild(li);\n    });\n  }\n\n  function renderPosts() {\n    \/\/ Karten (ohne Load-More-Wrapper) leeren\n    const existingCards = mainContainer.querySelectorAll('.blog-card');\n    existingCards.forEach(card => card.remove());\n\n    let filtered = allPosts.slice();\n\n    if (activeCategory) {\n      filtered = filtered.filter(post => {\n        const terms = post._embedded && post._embedded['wp:term'] ? post._embedded['wp:term'] : [];\n        const cats = terms[0] || [];\n        return cats.some(c => c.id === activeCategory);\n      });\n    }\n\n    if (activeTag) {\n      filtered = filtered.filter(post => {\n        const terms = post._embedded && post._embedded['wp:term'] ? post._embedded['wp:term'] : [];\n        const tags = terms[1] || [];\n        return tags.some(t => t.id === activeTag);\n      });\n    }\n\n    filtered.forEach(post => {\n      const card = document.createElement('article');\n      card.className = 'blog-card';\n\n      \/\/ Bild\n      let imgHtml = '';\n      if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\n        const media = post._embedded['wp:featuredmedia'][0];\n        const src = media.source_url;\n        const alt = media.alt_text || media.title?.rendered || '';\n        imgHtml = '<img decoding=\"async\" src=\"' + src + '\" alt=\"' + alt.replace(\/\"\/g, '&quot;') + '\">';\n      }\n\n      \/\/ Tags (f\u00fcr Anzeige unter der Karte)\n      let tagHtml = '';\n      const terms = post._embedded && post._embedded['wp:term'] ? post._embedded['wp:term'] : [];\n      const tags = terms[1] || [];\n      if (tags.length > 0) {\n        tagHtml = '<div class=\"blog-card-tags\">' +\n          tags.map(t => '<span>#' + t.name + '<\/span>').join('') +\n          '<\/div>';\n      }\n\n      const title = post.title?.rendered || '';\n      const excerpt = post.excerpt?.rendered || '';\n\n      card.innerHTML = `\n        ${imgHtml}\n        <h2 class=\"blog-card-title\">${title}<\/h2>\n        <div class=\"blog-card-excerpt\">${excerpt}<\/div>\n        ${tagHtml}\n        <a href=\"#\" class=\"blog-card-readmore\">Weiterlesen <span>\u203a<\/span><\/a>\n      `;\n\n      card.addEventListener('click', (e) => {\n        e.preventDefault();\n        openOverlay(post);\n      });\n\n      const loadMoreNode = document.getElementById('blogLoadMoreWrapper');\n      mainContainer.insertBefore(card, loadMoreNode);\n    });\n  }\n\n  function openOverlay(post) {\n    const title = post.title?.rendered || '';\n    const content = post.content?.rendered || '';\n\n    overlayTitle.innerHTML = title;\n    overlayMeta.innerHTML = ''; \/\/ kein Datum anzeigen\n    overlayContent.innerHTML = content;\n\n    overlayBackdrop.classList.add('active');\n  }\n\n  function closeOverlay() {\n    overlayBackdrop.classList.remove('active');\n  }\n\n  loadMoreBtn.addEventListener('click', () => {\n    currentPage += 1;\n    fetchPosts(currentPage);\n  });\n\n  overlayClose.addEventListener('click', closeOverlay);\n  overlayBackdrop.addEventListener('click', (e) => {\n    if (e.target === overlayBackdrop) {\n      closeOverlay();\n    }\n  });\n\n  \/\/ Initial laden\n  fetchPosts(currentPage);\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Blindtext Subhead Blindtext Blog-\u00dcberschrift Hier steht sp\u00e4ter dein kurzer, klarer Introtext zum Blog. Zwei bis drei S\u00e4tze, die erkl\u00e4ren, was Leserinnen und Leser hier erwartet \u2013 ohne Floskeln, ohne \u201eWillkommen\u201c, einfach du. Mehr laden Kategorien Schlagworte \u00d7 Blindtext-Artikel-Titel<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-551","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=\/wp\/v2\/pages\/551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=551"}],"version-history":[{"count":6,"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=\/wp\/v2\/pages\/551\/revisions"}],"predecessor-version":[{"id":723,"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=\/wp\/v2\/pages\/551\/revisions\/723"}],"wp:attachment":[{"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}