{"id":568,"date":"2026-02-12T11:47:00","date_gmt":"2026-02-12T11:47:00","guid":{"rendered":"https:\/\/schautdoch.ch\/?p=568"},"modified":"2026-02-12T12:25:53","modified_gmt":"2026-02-12T12:25:53","slug":"sonnenschein","status":"publish","type":"post","link":"https:\/\/schautdoch.ch\/?p=568","title":{"rendered":"Sonnenschein"},"content":{"rendered":"\n<p style=\"font-size:1.1em; font-weight:500; color:#555; text-align:center; margin-bottom:1.5em;\">\nKunst orientiert sich am Gegebenen oder am Ersehnten \u2013 nie am Gewohnten oder am Gef\u00e4lligen.<br>\nF\u00fcr manche ist alles in Bewegung; statisch bleibt einzig das Datum.\n<\/p>\n\n\n\n\n<!-- WordPress Custom HTML: Ball ohne JavaScript (nur CSS) -->\n<div class=\"qb-wrap\" role=\"region\" aria-label=\"Quadratischer Raum mit Himmelsrichtungen und springendem Ball\">\n  <style>\n    .qb-wrap{max-width:980px;margin:0 auto;padding:12px 0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}\n    .qb-frame{\n      width:100%;\n      aspect-ratio:16\/9;\n      display:grid;\n      place-items:center;\n      background:#f2f2f2;\n      border:1px solid #e1e1e1;\n      border-radius:18px;\n      box-shadow:0 10px 30px rgba(0,0,0,.06);\n      overflow:hidden;\n    }\n    .qb-room{\n      position:relative;\n      width:min(72vmin,680px);\n      height:min(72vmin,680px);\n      max-width:92%;\n      max-height:92%;\n      background:#ededed;\n      border:1px solid #d7d7d7;\n      border-radius:16px;\n      overflow:hidden;\n    }\n\n    \/* milde Grundatmosph\u00e4re + Sonne oben *\/\n    .qb-room::before{\n      content:\"\";\n      position:absolute; inset:-10%;\n      background:\n        radial-gradient(circle at 50% 8%, rgba(255,245,200,.55), transparent 45%),\n        radial-gradient(circle at 22% 18%, rgba(255,255,255,.35), transparent 45%),\n        radial-gradient(circle at 78% 24%, rgba(0,0,0,.06), transparent 55%);\n      opacity:.75;\n      pointer-events:none;\n    }\n    .qb-sun{\n      position:absolute; top:12px; left:50%; transform:translateX(-50%);\n      width:18px; height:18px; border-radius:50%;\n      background:radial-gradient(circle, rgba(255,255,230,1) 0%, rgba(255,210,80,1) 55%, rgba(255,210,80,0) 70%);\n      box-shadow:0 0 22px rgba(255,210,80,.7);\n      opacity:.85; pointer-events:none;\n      z-index:2;\n    }\n\n    \/* Richtungsetiketten *\/\n    .qb-label{\n      position:absolute;\n      font-weight:650; letter-spacing:.06em; font-size:13px;\n      color:rgba(25,25,25,.65);\n      padding:6px 10px; border-radius:999px;\n      background:rgba(255,255,255,.35);\n      border:1px solid rgba(0,0,0,.06);\n      backdrop-filter:blur(4px);\n      user-select:none;\n      z-index:3;\n    }\n    .qb-n{top:10px;left:50%;transform:translateX(-50%);}\n    .qb-s{bottom:10px;left:50%;transform:translateX(-50%);}\n    .qb-w{left:10px;top:50%;transform:translateY(-50%);}\n    .qb-e{right:10px;top:50%;transform:translateY(-50%);}\n\n    \/* Lichtzonen: werden per CSS-Keyframes ein\/ausgeblendet *\/\n    .qb-zone{position:absolute; inset:0; opacity:0; pointer-events:none; z-index:1;}\n    .zN{background:radial-gradient(circle at 50% 0%, rgba(255,240,180,.85), transparent 55%);}\n    .zE{background:radial-gradient(circle at 100% 50%, rgba(255,95,85,.85), transparent 60%);}\n    .zS{background:radial-gradient(circle at 50% 100%, rgba(255,220,80,.95), transparent 60%);}\n    .zW{background:radial-gradient(circle at 0% 50%, rgba(120,180,255,.75), transparent 60%);}\n\n    \/* Ball *\/\n    .qb-ball{\n      position:absolute;\n      width:18px; height:18px; border-radius:50%;\n      transform:translate(-50%,-50%);\n      box-shadow:0 10px 20px rgba(0,0,0,.18);\n      z-index:4;\n      \/* Startfarbe *\/\n      background:\n        radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,255,255,.12) 35%, rgba(0,0,0,.18) 80%),\n        #cfcfcf;\n\n      \/* Bewegung + Farbwechsel *\/\n      animation:\n        qbMove 12s linear infinite,\n        qbColor 12s linear infinite;\n    }\n\n    \/* \u201eUnbest\u00e4ndige\u201c Bahn (ohne JS): viele Richtungswechsel, nicht schnell *\/\n    @keyframes qbMove{\n      0%   {left:52%; top:58%;}\n      8%   {left:18%; top:22%;}  \/* NW *\/\n      16%  {left:94%; top:28%;}  \/* E (Hit) *\/\n      24%  {left:60%; top:90%;}  \/* S (Hit) *\/\n      32%  {left:10%; top:70%;}  \/* W (Hit) *\/\n      40%  {left:68%; top:12%;}  \/* N (Hit) *\/\n      48%  {left:92%; top:62%;}  \/* E (Hit) *\/\n      56%  {left:54%; top:92%;}  \/* S (Hit) *\/\n      64%  {left:26%; top:36%;}\n      72%  {left:8%;  top:18%;}  \/* W\/N nahe *\/\n      80%  {left:88%; top:14%;}  \/* N\/E nahe *\/\n      88%  {left:70%; top:86%;}  \/* S nahe *\/\n      100% {left:52%; top:58%;}\n    }\n\n    \/* Ballfarbe passend zum \u201eAufschlag\u201c *\/\n    @keyframes qbColor{\n      0%,7%   {background:\n        radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,255,255,.12) 35%, rgba(0,0,0,.18) 80%),\n        #cfcfcf;}\n      16%,23% {background:\n        radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,255,255,.12) 35%, rgba(0,0,0,.18) 80%),\n        #ff7a70;} \/* Osten rot *\/\n      24%,31% {b\n\n\n\n<style data-wp-block-html=\"css\">\n.qb-wrap{max-width:980px;margin:0 auto;padding:12px 0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}\n.qb-frame{\n  width:100%;\n  aspect-ratio:16\/9;\n  display:grid;\n  place-items:center;\n  background:#f2f2f2;\n  border:1px solid #e1e1e1;\n  border-radius:18px;\n  box-shadow:0 10px 30px rgba(0,0,0,.06);\n  overflow:hidden;\n}\n.qb-room{\n  position:relative;\n  width:min(72vmin,680px);\n  height:min(72vmin,680px);\n  max-width:92%;\n  max-height:92%;\n  background:#ededed;\n  border:1px solid #d7d7d7;\n  border-radius:16px;\n  overflow:hidden;\n}\n\n\/* Grundatmosph\u00e4re + \"Sonnenhauch\" *\/\n.qb-zone{position:absolute; inset:0; pointer-events:none; opacity:0; z-index:1;}\n.qb-zone.base{\n  opacity:.72;\n  background:\n    radial-gradient(circle at 50% 8%, rgba(255,245,200,.55), transparent 45%),\n    radial-gradient(circle at 22% 18%, rgba(255,255,255,.35), transparent 45%),\n    radial-gradient(circle at 78% 24%, rgba(0,0,0,.06), transparent 55%);\n}\n.qb-zone.north{ background: radial-gradient(circle at 50% 0%,   rgba(255,240,180,.90), transparent 55%); }\n.qb-zone.east { background: radial-gradient(circle at 100% 50%, rgba(255,95,85,.88),  transparent 60%); }\n.qb-zone.south{ background: radial-gradient(circle at 50% 100%, rgba(255,220,80,.98), transparent 60%); }\n.qb-zone.west { background: radial-gradient(circle at 0% 50%,   rgba(120,180,255,.78),transparent 60%); }\n\n\/* Sonne *\/\n.qb-sun{\n  position:absolute; top:12px; left:50%; transform:translateX(-50%);\n  width:18px; height:18px; border-radius:50%;\n  background:radial-gradient(circle, rgba(255,255,230,1) 0%, rgba(255,210,80,1) 55%, rgba(255,210,80,0) 70%);\n  box-shadow:0 0 22px rgba(255,210,80,.7);\n  opacity:.88; pointer-events:none;\n  z-index:3;\n}\n\n\/* Labels *\/\n.qb-label{\n  position:absolute;\n  font-weight:650; letter-spacing:.06em; font-size:13px;\n  color:rgba(25,25,25,.65);\n  padding:6px 10px; border-radius:999px;\n  background:rgba(255,255,255,.35);\n  border:1px solid rgba(0,0,0,.06);\n  backdrop-filter:blur(4px);\n  user-select:none;\n  z-index:4;\n}\n.qb-n{top:10px;left:50%;transform:translateX(-50%);}\n.qb-s{bottom:10px;left:50%;transform:translateX(-50%);}\n.qb-w{left:10px;top:50%;transform:translateY(-50%);}\n.qb-e{right:10px;top:50%;transform:translateY(-50%);}\n\n\/* Ball *\/\n.qb-ball{\n  position:absolute;\n  width:18px; height:18px; border-radius:50%;\n  transform:translate(-50%,-50%);\n  box-shadow:0 10px 20px rgba(0,0,0,.18);\n  z-index:5;\n  background:\n    radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,255,255,.12) 35%, rgba(0,0,0,.18) 80%),\n    #cfcfcf;\n  will-change:left, top, background;\n}\n\n.qb-caption{\n  margin-top:10px;\n  font-size:13px;\n  color:rgba(0,0,0,.58);\n  text-align:center;\n}\n\n\/* Mobile: mehr H\u00f6he, damit\u2019s sch\u00f6n bleibt *\/\n@media (max-width: 640px){\n  .qb-frame{ aspect-ratio: 4 \/ 5; }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(function () {\n  const room = document.getElementById(\"qbRoom\");\n  const ball = document.getElementById(\"qbBall\");\n  const zoneN = document.getElementById(\"qbZoneN\");\n  const zoneE = document.getElementById(\"qbZoneE\");\n  const zoneS = document.getElementById(\"qbZoneS\");\n  const zoneW = document.getElementById(\"qbZoneW\");\n\n  if (!room || !ball) return;\n\n  \/\/ Normierte Position 0..1\n  let x = 0.52, y = 0.58;\n\n  \/\/ Langsame Geschwindigkeit (px pro Frame sp\u00e4ter \u00fcber dt skaliert)\n  let vx = 0.08, vy = 0.10;\n\n  \/\/ Unbest\u00e4ndigkeit\n  const drift = 0.035;    \/\/ kleine Richtungsdrifts\n  const kickProb = 0.015; \/\/ seltene Launen\n  const kick = 0.18;      \/\/ St\u00e4rke der Laune\n\n  \/\/ Kollisionsr\u00e4nder (in Prozent der Fl\u00e4che)\n  const minX = 0.03, maxX = 0.97;\n  const minY = 0.05, maxY = 0.95;\n\n  let lastT = performance.now();\n  let lastHitT = 0;\n\n  function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }\n\n  function setBallTint(dir) {\n    let c = \"#cfcfcf\";\n    if (dir === \"S\") c = \"#ffd86a\"; \/\/ S\u00fcden gelb\n    if (dir === \"E\") c = \"#ff7a70\"; \/\/ Osten rot\n    if (dir === \"N\") c = \"#ffe7b8\"; \/\/ Norden warm\n    if (dir === \"W\") c = \"#8ab8ff\"; \/\/ Westen k\u00fchl\n\n    ball.style.background =\n      `radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,255,255,.12) 35%, rgba(0,0,0,.18) 80%), ${c}`;\n  }\n\n  function flashZone(dir) {\n    \/\/ reset\n    zoneN.style.opacity = 0;\n    zoneE.style.opacity = 0;\n    zoneS.style.opacity = 0;\n    zoneW.style.opacity = 0;\n\n    const target =\n      dir === \"N\" ? zoneN :\n      dir === \"E\" ? zoneE :\n      dir === \"S\" ? zoneS : zoneW;\n\n    const peak =\n      dir === \"S\" ? 0.95 :\n      dir === \"N\" ? 0.85 :\n      dir === \"E\" ? 0.80 : 0.75;\n\n    const t0 = performance.now();\n    const dur = 750;\n\n    function fade() {\n      const t = (performance.now() - t0) \/ dur;\n      const o = Math.max(0, 1 - t);\n      target.style.opacity = (peak * o).toFixed(3);\n      if (t < 1) requestAnimationFrame(fade);\n    }\n\n    target.style.opacity = peak;\n    requestAnimationFrame(fade);\n  }\n\n  function render() {\n    const r = room.getBoundingClientRect();\n    ball.style.left = (x * r.width) + \"px\";\n    ball.style.top  = (y * r.height) + \"px\";\n  }\n\n  function step() {\n    const t = performance.now();\n    const dt = Math.min(40, t - lastT); \/\/ ms, limit for stability\n    lastT = t;\n\n    \/\/ Drift (kleine Unruhe)\n    vx += (Math.random() - 0.5) * drift;\n    vy += (Math.random() - 0.5) * drift;\n\n    \/\/ Seltene \"Laune\"\n    if (Math.random() < kickProb) {\n      vx += (Math.random() - 0.5) * kick;\n      vy += (Math.random() - 0.5) * kick;\n    }\n\n    \/\/ Geschwindigkeit begrenzen (langsam!)\n    vx = clamp(vx, -0.22, 0.22);\n    vy = clamp(vy, -0.22, 0.22);\n\n    \/\/ Bewegung (dt-skalierend)\n    x += vx * (dt \/ 1000);\n    y += vy * (dt \/ 1000);\n\n    \/\/ Kollisionen + unberechenbarer Abprall\n    let hit = null;\n\n    if (x <= minX) { x = minX; vx = Math.abs(vx) + Math.random() * 0.06; hit = \"W\"; }\n    if (x >= maxX) { x = maxX; vx = -Math.abs(vx) - Math.random() * 0.06; hit = \"E\"; }\n    if (y <= minY) { y = minY; vy = Math.abs(vy) + Math.random() * 0.06; hit = \"N\"; }\n    if (y >= maxY) { y = maxY; vy = -Math.abs(vy) - Math.random() * 0.06; hit = \"S\"; }\n\n    \/\/ Aufschlag-Effekt\n    if (hit && (t - lastHitT) > 120) {\n      lastHitT = t;\n      flashZone(hit);\n      setBallTint(hit);\n    }\n\n    render();\n    requestAnimationFrame(step);\n  }\n\n  \/\/ Start: Ball sichtbar setzen\n  render();\n  requestAnimationFrame(step);\n\n  window.addEventListener(\"resize\", render, { passive: true });\n})();\n<\/script>\n\n<div class=\"qb-wrap\" role=\"region\" aria-label=\"Quadratischer Raum mit Sonne, Himmelsrichtungen und springendem Ball\">\n  <div class=\"qb-frame\">\n    <div class=\"qb-room\" id=\"qbRoom\">\n      <div class=\"qb-zone base\"><\/div>\n      <div class=\"qb-zone north\" id=\"qbZoneN\"><\/div>\n      <div class=\"qb-zone east\" id=\"qbZoneE\"><\/div>\n      <div class=\"qb-zone south\" id=\"qbZoneS\"><\/div>\n      <div class=\"qb-zone west\" id=\"qbZoneW\"><\/div>\n\n      <div class=\"qb-sun\" aria-hidden=\"true\" title=\"Sonne (Norden)\"><\/div>\n\n      <div class=\"qb-label qb-n\">NORDEN<\/div>\n      <div class=\"qb-label qb-e\">OSTEN<\/div>\n      <div class=\"qb-label qb-s\">S\u00dcDEN<\/div>\n      <div class=\"qb-label qb-w\">WESTEN<\/div>\n\n      <div class=\"qb-ball\" id=\"qbBall\" aria-label=\"Ball\"><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"qb-caption\">\n    Langsam, unbest\u00e4ndig. Wo der Ball aufschl\u00e4gt, ver\u00e4ndert sich die Wand: S\u00fcden gelb, Osten rot.\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Kunst orientiert sich am Gegebenen oder am Ersehnten \u2013 nie am Gewohnten oder am Gef\u00e4lligen. F\u00fcr manche ist alles in Bewegung; statisch bleibt einzig das Datum. NORDEN OSTEN S\u00dcDEN WESTEN Langsam, unbest\u00e4ndig. Wo der Ball aufschl\u00e4gt, ver\u00e4ndert sich die Wand: S\u00fcden gelb, Osten rot.<\/p>\n","protected":false},"author":1,"featured_media":574,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[8,4],"tags":[19],"class_list":["post-568","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aktuell","category-sachgebiete","tag-pinn-ball"],"_links":{"self":[{"href":"https:\/\/schautdoch.ch\/index.php?rest_route=\/wp\/v2\/posts\/568","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/schautdoch.ch\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/schautdoch.ch\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/schautdoch.ch\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/schautdoch.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=568"}],"version-history":[{"count":5,"href":"https:\/\/schautdoch.ch\/index.php?rest_route=\/wp\/v2\/posts\/568\/revisions"}],"predecessor-version":[{"id":576,"href":"https:\/\/schautdoch.ch\/index.php?rest_route=\/wp\/v2\/posts\/568\/revisions\/576"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/schautdoch.ch\/index.php?rest_route=\/wp\/v2\/media\/574"}],"wp:attachment":[{"href":"https:\/\/schautdoch.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/schautdoch.ch\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/schautdoch.ch\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}