{"id":4666,"date":"2025-09-03T04:15:03","date_gmt":"2025-09-03T02:15:03","guid":{"rendered":"https:\/\/darteanavisions.art\/?page_id=4666"},"modified":"2025-09-10T06:30:37","modified_gmt":"2025-09-10T04:30:37","slug":"blog","status":"publish","type":"page","link":"https:\/\/darteanavisions.art\/index.php\/blog\/","title":{"rendered":"Blog"},"content":{"rendered":"\n<!-- === DarteanaVisions \u2022 BLOG-Index (KANONISCH, 1:1 Galerie-Design) === -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@300;400;500&#038;display=swap\" rel=\"stylesheet\">\n<style>\n:root{\n  --gold-ochre:#C19A6B; --gold-ochre-light:#D9B88F; --gold-ochre-dark:#9C7A4D;\n  --cream:#F9F3E9; --dark:#2D2A26; --shadow:rgba(193,154,107,.18);\n  --gap-salon:1.6rem; --col-width:240px; --ease:.28s cubic-bezier(.23,1,.32,1);\n}\n#dv-blogindex *{box-sizing:border-box}\n#dv-blogindex{\n  position:relative; min-height:100vh; overflow-x:hidden;\n  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;\n  color:var(--dark); line-height:1.7;\n  background:linear-gradient(135deg,#F9F3E9,rgba(249,243,233,.85));\n}\n\/* Orbs *\/\n#dv-blogindex .dynamic-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}\n#dv-blogindex .bg-circle{position:absolute;border-radius:50%;\n  background:radial-gradient(circle,rgba(193,154,107,.22),rgba(193,154,107,.06));\n  animation:floatAnimation 30s infinite alternate ease-in-out; filter:saturate(.95) brightness(1.02)}\n#dv-blogindex .bg-circle:nth-child(1){width:36vw;height:36vw;top:-6vh;left:-8vw}\n#dv-blogindex .bg-circle:nth-child(2){width:26vw;height:26vw;bottom:-4vh;right:-6vw;animation-direction:alternate-reverse;animation-duration:26s}\n#dv-blogindex .bg-circle:nth-child(3){width:22vw;height:22vw;top:48vh;left:14vw;animation-duration:34s}\n@keyframes floatAnimation{0%{transform:translate(0,0)}100%{transform:translate(2vw,2vh)}}\n\n#dv-blogindex .container{max-width:1200px;margin:0 auto;padding:0 2rem;position:relative;z-index:1}\n\n\/* Hero *\/\n#dv-blogindex .hero{padding:1.75rem 0 1.2rem;text-align:center}\n#dv-blogindex .hero h1{\n  font-family:'Playfair Display',Georgia,serif;font-weight:400;\n  font-size:clamp(1.8rem,4vw,2.2rem);margin:.2rem 0 .6rem;color:var(--dark)\n}\n\/* Intro-Quadrat *\/\n#dv-blogindex .intro-r1{display:inline-block;border:1px solid var(--gold-ochre-light);border-radius:22px;padding:8px;margin:.1rem auto 1.1rem;background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}\n#dv-blogindex .intro-r2{border:2px solid var(--gold-ochre-dark);border-radius:18px;padding:6px}\n#dv-blogindex .intro-r3{border:3px solid var(--gold-ochre-light);border-radius:14px;overflow:hidden;box-shadow:0 12px 30px var(--shadow)}\n#dv-blogindex .intro-r3 .stack{position:relative;width:min(220px,48vw);aspect-ratio:1\/1}\n#dv-blogindex .stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease}\n#dv-blogindex .stack img.show{opacity:1}\n#dv-blogindex .hero h2{\n  font-family:'Playfair Display',Georgia,serif;font-weight:400;font-style:italic;\n  font-size:clamp(1.12rem,3.2vw,1.45rem); color:var(--gold-ochre-dark); margin:.2rem 0 .2rem\n}\n\n\/* Suche (zentriert, schmal, sticky) *\/\n#dv-blogindex .toolbar{position:sticky;top:0;z-index:2;margin:.3rem auto .8rem;display:block}\n#dv-blogindex .searchbar{display:flex;align-items:center;gap:.55rem;border:1px solid rgba(193,154,107,.45);border-radius:999px;padding:.24rem .9rem;max-width:680px;margin:0 auto;background:rgba(255,255,255,.28);backdrop-filter:blur(6px)}\n#dv-blogindex .searchbar input{flex:1;border:none;background:transparent;outline:none;font-size:.96rem;line-height:1.1;color:var(--dark);padding:.05rem 0}\n\n\/* Panel (wie Galerie) *\/\n#dv-blogindex .panel{\n  background:linear-gradient(135deg, rgba(193,154,107,.10), rgba(193,154,107,.06));\n  border:1px solid rgba(193,154,107,.28);\n  border-radius:25px; padding:22px; margin:1rem 0 1rem; position:relative; overflow:hidden; backdrop-filter:blur(2px)\n}\n#dv-blogindex .panel::before{content:\"\";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold-ochre-light),var(--gold-ochre))}\n\n\/* Masonry \u2013 St.-Petersburger H\u00e4ngung *\/\n#dv-blogindex .grid{column-width:var(--col-width); column-gap:var(--gap-salon)}\n#dv-blogindex .card{display:inline-block;width:100%;margin:0 0 var(--gap-salon);break-inside:avoid}\n\n\/* Dreifach-Rahmen pro Karte *\/\n#dv-blogindex .r1{border:1px solid var(--gold-ochre-light);border-radius:20px;padding:8px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px)}\n#dv-blogindex .r2{border:2px solid var(--gold-ochre-dark);border-radius:16px;padding:7px}\n#dv-blogindex .r3{border:3px solid var(--gold-ochre-light);border-radius:12px;overflow:hidden;background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.10));box-shadow:0 12px 30px var(--shadow);transition:transform var(--ease),box-shadow var(--ease)}\n#dv-blogindex .card:hover .r3{transform:translateY(-2px);box-shadow:0 18px 44px rgba(193,154,107,.28)}\n\n\/* Bild-Stack + Label *\/\n#dv-blogindex .thumb{position:relative;width:100%;display:block;text-decoration:none}\n#dv-blogindex .ratio-1-1{aspect-ratio:1\/1} .ratio-3-4{aspect-ratio:3\/4} .ratio-4-3{aspect-ratio:4\/3}\n#dv-blogindex .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease}\n#dv-blogindex .thumb img.show{opacity:1}\n#dv-blogindex .label{\n  position:absolute;left:6px;right:6px;bottom:6px;height:36px;display:flex;align-items:center;padding:0 .7rem;\n  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); border:1px solid rgba(193,154,107,.60); border-radius:8px;\n  backdrop-filter:blur(8px) saturate(1.04) brightness(1.08); box-shadow:0 6px 12px rgba(193,154,107,.14);\n  font-weight:700;font-size:.9rem;letter-spacing:.18px;line-height:1;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; -webkit-text-stroke:.35px rgba(45,42,38,.35)\n}\n\n\/* Meta\/Weiterlesen: transparent & 3 Zeilen *\/\n#dv-blogindex .meta{margin:.55rem .6rem .75rem;padding:.55rem .7rem;border:1px solid rgba(193,154,107,.28);border-radius:10px;background:rgba(255,255,255,.18)}\n#dv-blogindex .blurb{margin:0;font-size:.95rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}\n#dv-blogindex .more{display:inline-block;margin-top:.45rem;font-size:.92rem;text-decoration:none;color:var(--gold-ochre-dark);padding:.35rem .7rem;border:1px solid rgba(193,154,107,.55);border-radius:999px;background:rgba(255,255,255,.28)}\n#dv-blogindex .more:hover{background:rgba(255,255,255,.45)}\n\n\/* Archiv-Karte (im Raster) *\/\n#dv-blogindex .archive-card h3{font-family:'Playfair Display',Georgia,serif;font-weight:500;color:var(--gold-ochre-dark);font-size:1.05rem;margin:.2rem 0 .4rem}\n#dv-blogindex .archive-list{list-style:none;margin:0;padding:0}\n#dv-blogindex .archive-list details{margin:.12rem 0;border-radius:12px}\n#dv-blogindex .archive-list summary{list-style:none;display:flex;justify-content:space-between;gap:.6rem;padding:.35rem .5rem;border-radius:12px;cursor:pointer;align-items:center}\n#dv-blogindex .archive-list summary::-webkit-details-marker{display:none}\n#dv-blogindex .archive-list details:hover summary{background:rgba(193,154,107,.12)}\n#dv-blogindex .archive-posts{list-style:none;margin:.3rem 0 0;padding:0}\n#dv-blogindex .archive-posts li a{display:block;padding:.32rem .5rem;border-radius:10px;text-decoration:none;color:var(--dark)}\n#dv-blogindex .archive-posts li a:hover{background:rgba(193,154,107,.12)}\n\n@media (prefers-reduced-motion:reduce){#dv-blogindex .thumb img,#dv-blogindex .stack img{transition:none}}\n@media (max-width:700px){:root{--col-width:210px;--gap-salon:1.2rem}}\n<\/style>\n\n<section id=\"dv-blogindex\" aria-label=\"Blog\">\n  <div class=\"dynamic-bg\"><div class=\"bg-circle\"><\/div><div class=\"bg-circle\"><\/div><div class=\"bg-circle\"><\/div><\/div>\n\n  <div class=\"container\">\n    <header class=\"hero\">\n      <h1>Blog<\/h1>\n      <div class=\"intro-r1\"><div class=\"intro-r2\"><div class=\"intro-r3\">\n        <div id=\"dvIntroStack\" class=\"stack\">\n          <img alt=\"Blog \u2013 Vorschau\"><img alt=\"Blog \u2013 Vorschau\">\n        <\/div>\n      <\/div><\/div><\/div>\n      <h2>Gedanken, die aus meinem Atelier entspringen.<\/h2>\n    <\/header>\n\n    <!-- Suche (zentriert, schmal, sticky) -->\n    <div class=\"toolbar\" id=\"dvTools\">\n      <form id=\"dvSearchForm\" class=\"searchbar\" role=\"search\" action=\"\/\" method=\"get\" aria-label=\"Blog durchsuchen\">\n        <input id=\"dvSearch\" type=\"search\" name=\"s\" placeholder=\"Suche im Blog...\" aria-label=\"Suche im Blog\">\n      <\/form>\n    <\/div>\n\n    <section class=\"panel\">\n      <div id=\"dvGrid\" class=\"grid\" aria-label=\"Blog-\u00dcbersicht\"><\/div>\n    <\/section>\n\n    <p class=\"note\" style=\"text-align:center;margin:.6rem auto 2rem;font-size:.86rem;color:rgba(45,42,38,.72)\">\n      Inhalte &#038; Bilder \u00a9 DarteanaVisions. Bitte keine Verwendung ohne Zustimmung.\n    <\/p>\n  <\/div>\n<\/section>\n\n<script>\nasync function j(u){try{const r=await fetch(u,{headers:{Accept:'application\/json'}});if(!r.ok)throw r.status;return r.json()}catch(_){return []}}\nfunction stripHTML(h){const d=document.createElement('div'); d.innerHTML=h||''; return d.textContent||d.innerText||''}\nfunction keyYM(s){const d=new Date(s); return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}`}\nfunction labelYM(ym){const [y,m]=ym.split('-').map(Number); return new Date(y,m-1,1).toLocaleDateString('de-DE',{month:'long',year:'numeric'})}\nfunction pickRatio(ix){const r=ix%7; if(r===0||r===3) return 'ratio-4-3'; if(r===2||r===5) return 'ratio-3-4'; return 'ratio-1-1'}\nfunction label3w(t){const c=(t||'').replace(\/[\u2013\u2014-]\/g,' ').replace(\/\\s+\/g,' ').trim();const w=c.split(' ').filter(Boolean);return (w.slice(0,3).join(' ')||c)+'...'}\nfunction fade(stack,srcs,base=12000,jitter=6000){\n  if(!stack||!srcs.length) return;\n  const a=stack.children[0], b=stack.children[1]; let i=0, top=true;\n  a.src=srcs[0]; a.classList.add('show'); if(srcs[1]) b.src=srcs[1];\n  const step=()=>{ if(srcs.length<2) return; i=(i+1)%srcs.length;\n    if(top){ b.src=srcs[i]; b.classList.add('show'); a.classList.remove('show'); }\n    else  { a.src=srcs[i]; a.classList.add('show'); b.classList.remove('show'); }\n    top=!top;\n  };\n  if('IntersectionObserver' in window){\n    let t=null; const run=()=>{ if(!t){ step(); t=setInterval(step, base+Math.random()*jitter);} }, stop=()=>{ if(t){clearInterval(t); t=null;} };\n    new IntersectionObserver(es=>es.forEach(e=>e.isIntersecting?run():stop()),{threshold:.2}).observe(stack);\n  }else{ step(); setInterval(step, base+Math.random()*jitter); }\n}\n\n\/* Daten holen *\/\nasync function loadPosts(){\n  const url=new URL('\/wp-json\/wp\/v2\/posts', location.origin);\n  url.searchParams.set('per_page','60');\n  url.searchParams.set('_embed','1');\n  const posts=await j(url.toString());\n  return (posts||[]).map(p=>{\n    const title=(p?.title?.rendered||'').replace(\/<[^>]+>\/g,' ').trim();\n    const url=p?.link||'#';\n    let imgs=[];\n    const feat=p?._embedded?.['wp:featuredmedia']?.[0]?.source_url; if(feat) imgs.push(feat);\n    const html=p?.content?.rendered||''; (html.match(\/https?:\\\/\\\/[^\"'()\\s]+?\\.(?:jpe?g|png|webp)\/gi)||[]).forEach(src=>imgs.push(src));\n    imgs=[...new Set(imgs)].slice(0,6);\n    return {title,url,images:imgs,excerpt:stripHTML(p?.excerpt?.rendered||''),date:p?.date||'',ym:keyYM(p?.date||'')};\n  }).filter(g=>g.images.length>0)\n}\n\n\/* Archiv-Karte (Monate untereinander, klick zum Aufklappen) *\/\nfunction makeArchiveCard(monthKeys, monthMap){\n  const art=document.createElement('article'); art.className='card';\n  art.innerHTML=`\n    <div class=\"r1\"><div class=\"r2\"><div class=\"r3\">\n      <div class=\"meta archive-card\">\n        <h3>Monats-Archiv<\/h3>\n        <ul class=\"archive-list\"><\/ul>\n      <\/div>\n    <\/div><\/div><\/div>`;\n  const ul=art.querySelector('.archive-list');\n  monthKeys.forEach(ym=>{\n    const det=document.createElement('details');\n    const sum=document.createElement('summary'); sum.textContent=labelYM(ym);\n    const cnt=document.createElement('span'); cnt.className='dv-count'; cnt.textContent=monthMap[ym].length; sum.appendChild(cnt);\n    det.appendChild(sum);\n    const postsUL=document.createElement('ul'); postsUL.className='archive-posts';\n    monthMap[ym].slice().sort((a,b)=>new Date(b.date)-new Date(a.date)).forEach(p=>{\n      const li=document.createElement('li'); const a=document.createElement('a'); a.href=p.url; a.target='_blank'; a.rel='noopener'; a.textContent=p.title; li.appendChild(a); postsUL.appendChild(li);\n    });\n    det.appendChild(postsUL); ul.appendChild(det);\n    det.addEventListener('toggle',()=>{ if(det.open){ ul.querySelectorAll('details[open]').forEach(d=>{if(d!==det)d.open=false}); } });\n  });\n  return art;\n}\n\n(async function init(){\n  const grid=document.getElementById('dvGrid');\n  const search=document.getElementById('dvSearch');\n  const searchForm=document.getElementById('dvSearchForm');\n\n  const posts = await loadPosts();\n  if(!posts.length){ grid.innerHTML='<p style=\"padding:.5rem 0\">Keine Blog-Beitr\u00e4ge gefunden.<\/p>'; return }\n\n  \/* Intro-Fotos *\/\n  const introStack=document.getElementById('dvIntroStack');\n  const pool=posts.flatMap(g=>g.images||[]); const uniquePool=[...new Set(pool)];\n  fade(introStack, uniquePool.length?uniquePool:pool, 12000, 6000);\n\n  \/* Archiv-Karte vorbereiten *\/\n  const byMonth={}; posts.forEach(p=>{ (byMonth[p.ym]=byMonth[p.ym]||[]).push(p); });\n  const months=Object.keys(byMonth).sort((a,b)=>b.localeCompare(a));\n\n  \/* Rendering *\/\n  let q=''; \/\/ Suchstring\n  render();\n\n  search.addEventListener('input', ()=>{ q=search.value.toLowerCase().trim(); render(); });\n  searchForm.addEventListener('submit', (e)=>{ e.preventDefault(); const s=search.value.trim(); if(s) location.href='\/?s='+encodeURIComponent(s); });\n\n  function render(){\n    const list = q\n      ? posts.filter(p=> p.title.toLowerCase().includes(q) || (p.excerpt||'').toLowerCase().includes(q))\n      : posts.slice();\n\n    const frag=document.createDocumentFragment();\n\n    \/\/ Archiv-Karte immer zuerst im Raster\n    frag.appendChild(makeArchiveCard(months, byMonth));\n\n    \/\/ Post-Karten\n    list.forEach((g,ix)=>{\n      const ratioClass=pickRatio(ix);\n      const art=document.createElement('article'); art.className='card';\n      art.innerHTML=`\n        <div class=\"r1\"><div class=\"r2\"><div class=\"r3\">\n          <a class=\"thumb ${ratioClass}\" href=\"${g.url}\" target=\"_blank\" rel=\"noopener\">\n            <img alt=\"${g.title} \u2013 Vorschau\"><img alt=\"${g.title} \u2013 Vorschau\">\n            <div class=\"label\">${label3w(g.title)}<\/div>\n          <\/a>\n          <div class=\"meta\">\n            <p class=\"blurb\"><\/p>\n            <a class=\"more\" href=\"${g.url}\" target=\"_blank\" rel=\"noopener\">Weiterlesen \u2192<\/a>\n          <\/div>\n        <\/div><\/div><\/div>`;\n      const stack=art.querySelector('.thumb');\n      (function fadeThumb(s,srcs){\n        if(!s||!srcs.length) return;\n        const a=s.children[0], b=s.children[1]; let i=0, top=true;\n        a.src=srcs[0]; a.classList.add('show'); if(srcs[1]) b.src=srcs[1];\n        const step=()=>{ if(srcs.length<2) return; i=(i+1)%srcs.length;\n          if(top){ b.src=srcs[i]; b.classList.add('show'); a.classList.remove('show'); }\n          else  { a.src=srcs[i]; a.classList.add('show'); b.classList.remove('show'); }\n          top=!top;\n        };\n        if('IntersectionObserver' in window){\n          let t=null; const run=()=>{ if(!t){ step(); t=setInterval(step, 16000+Math.random()*7000);} }, stop=()=>{ if(t){clearInterval(t); t=null;} };\n          new IntersectionObserver(es=>es.forEach(e=>e.isIntersecting?run():stop()),{threshold:.2}).observe(s);\n        }else{ step(); setInterval(step, 16000+Math.random()*7000); }\n      })(stack,g.images);\n      art.querySelector('.blurb').textContent = (g.excerpt||'').trim();\n      frag.appendChild(art);\n    });\n\n    grid.innerHTML=''; grid.appendChild(frag);\n  }\n})();\n<\/script>\n<!-- === \/BLOG-Index (KANONISCH) === -->\n\n","protected":false},"excerpt":{"rendered":"<p>Blog Gedanken, die aus meinem Atelier entspringen. Inhalte &#038; Bilder \u00a9 DarteanaVisions. Bitte keine Verwendung ohne Zustimmung.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"disabled","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"disabled","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-4666","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/darteanavisions.art\/index.php\/wp-json\/wp\/v2\/pages\/4666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/darteanavisions.art\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/darteanavisions.art\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/darteanavisions.art\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/darteanavisions.art\/index.php\/wp-json\/wp\/v2\/comments?post=4666"}],"version-history":[{"count":2,"href":"https:\/\/darteanavisions.art\/index.php\/wp-json\/wp\/v2\/pages\/4666\/revisions"}],"predecessor-version":[{"id":5298,"href":"https:\/\/darteanavisions.art\/index.php\/wp-json\/wp\/v2\/pages\/4666\/revisions\/5298"}],"wp:attachment":[{"href":"https:\/\/darteanavisions.art\/index.php\/wp-json\/wp\/v2\/media?parent=4666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}