{"id":20,"date":"2026-07-26T12:27:39","date_gmt":"2026-07-26T10:27:39","guid":{"rendered":"https:\/\/www.edv-lehrbuch.de\/?page_id=20"},"modified":"2026-07-26T23:27:07","modified_gmt":"2026-07-26T21:27:07","slug":"20-2","status":"publish","type":"page","link":"https:\/\/www.edv-lehrbuch.de\/?page_id=20","title":{"rendered":"Startseite &#8211; In Entwicklung"},"content":{"rendered":"\n<div id=\"fox-strip\" style=\"position:relative; width:100%; height:140px; overflow:hidden;\">\n  <video id=\"fox-vid\"\n    src=\"http:\/\/www.edv-lehrbuch.de\/wp-content\/uploads\/2026\/07\/fox_transparent.webm\"\n    autoplay muted loop playsinline\n    style=\"position:absolute; top:0; left:0; height:100%; width:auto; transform:scaleX(1);\">\n  <\/video>\n<\/div>\n\n<script>\n(function () {\n  var strip = document.getElementById('fox-strip');\n  var vid = document.getElementById('fox-vid');\n  var pos = 0;\n  var dir = 1;\n  var paused = false;\n\n  \/\/ Aus dem Video gemessene Bewegungsintensit\u00e4t, Frame f\u00fcr Frame (24 fps, 193 Frames)\n  var motionCurve = [0.118, 0.135, 0.263, 0.382, 0.49, 0.462, 0.584, 0.582, 0.592, 0.494, 0.613, 0.582, 0.564, 0.449, 0.571, 0.549, 0.567, 0.473, 0.608, 0.59, 0.608, 0.501, 0.643, 0.618, 0.621, 0.504, 0.638, 0.603, 0.603, 0.498, 0.639, 0.626, 0.644, 0.544, 0.7, 0.685, 0.686, 0.566, 0.711, 0.646, 0.607, 0.486, 0.613, 0.55, 0.539, 0.445, 0.538, 0.493, 0.478, 0.394, 0.527, 0.572, 0.656, 0.581, 0.811, 0.866, 0.913, 0.745, 0.985, 0.949, 0.958, 0.767, 1.0, 0.925, 0.877, 0.686, 0.846, 0.704, 0.599, 0.449, 0.506, 0.372, 0.293, 0.221, 0.223, 0.162, 0.131, 0.108, 0.113, 0.11, 0.123, 0.117, 0.194, 0.275, 0.37, 0.356, 0.503, 0.543, 0.564, 0.473, 0.591, 0.524, 0.471, 0.368, 0.409, 0.31, 0.249, 0.187, 0.2, 0.159, 0.141, 0.121, 0.127, 0.112, 0.104, 0.097, 0.099, 0.093, 0.088, 0.083, 0.08, 0.092, 0.117, 0.122, 0.24, 0.377, 0.526, 0.514, 0.749, 0.832, 0.908, 0.754, 0.982, 0.928, 0.92, 0.72, 0.929, 0.848, 0.808, 0.631, 0.78, 0.698, 0.669, 0.539, 0.679, 0.634, 0.61, 0.487, 0.574, 0.514, 0.487, 0.383, 0.469, 0.44, 0.43, 0.35, 0.46, 0.458, 0.484, 0.408, 0.541, 0.545, 0.572, 0.483, 0.603, 0.567, 0.563, 0.454, 0.596, 0.591, 0.601, 0.498, 0.644, 0.616, 0.615, 0.513, 0.646, 0.61, 0.603, 0.494, 0.633, 0.614, 0.62, 0.517, 0.66, 0.64, 0.651, 0.538, 0.702, 0.673, 0.653, 0.525, 0.647, 0.588, 0.576, 0.475, 0.594, 0.558, 0.533, 0.427, 0.535, 0.4, 0.295];\n  var duration = 193 \/ 24; \/\/ Sekunden\n\nfunction motionAt(t) {\n    var frac = (t % duration) \/ duration;\n    var idxF = frac * motionCurve.length;\n    var i0 = Math.floor(idxF) % motionCurve.length;\n    var i1 = (i0 + 1) % motionCurve.length;\n    var mix = idxF - Math.floor(idxF);\n    var m = motionCurve[i0] * (1 - mix) + motionCurve[i1] * mix;\n\n    \/\/ Schwelle: alles darunter = echter Stillstand, kein Kriechen mehr\n    var threshold = 0.15;\n    m = Math.max(0, m - threshold) \/ (1 - threshold);\n    return m;\n}\n  var pxPerSecond = 24; \/\/ Grundtempo -- etwas h\u00f6her als zuletzt; hier weiter feintunen\n\n  var lastTime = performance.now();\n\n  function step(now) {\n    var dtSec = (now - lastTime) \/ 1000;\n    lastTime = now;\n\n    if (!paused) {\n      var containerWidth = strip.clientWidth;\n      var vidWidth = vid.offsetWidth || 200;\n      var minPos = -vidWidth;\n      var maxPos = containerWidth;\n\n      var m = motionAt(vid.currentTime);\n      pos += dir * pxPerSecond * m * dtSec;\n\n      if (pos > maxPos || pos < minPos) {\n        paused = true;\n        var waitMs = 1500 + Math.random() * 3000;\n        setTimeout(function () {\n          dir *= -1;\n          vid.style.transform = dir === 1 ? 'scaleX(1)' : 'scaleX(-1)';\n          pos = dir === 1 ? minPos : maxPos;\n          paused = false;\n        }, waitMs);\n      }\n      vid.style.left = pos + 'px';\n    }\n    requestAnimationFrame(step);\n  }\n  requestAnimationFrame(step);\n})();\n<\/script>\n\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@600;700&#038;display=swap\" rel=\"stylesheet\">\n\n<div style=\"text-align:center; padding: 2rem 1rem;\">\n  <h1 id=\"verein-hero-h1\" style=\"font-family:'Caveat', cursive; font-weight:700; font-size:3.2rem; margin:0; color:#D96B27; transition:opacity .4s ease; line-height:1.1;\">\n    Miteinander \u2013 F\u00fcreinander\n  <\/h1>\n  <h2 id=\"verein-hero-h2\" style=\"font-size:1.2rem; font-weight:400; margin:.2rem 0 0; color:#555; transition:opacity .4s ease;\">\n    Engagement im Stadtteil\n  <\/h2>\n\n  <p style=\"font-size:.85rem; letter-spacing:.03em; color:#888; margin:1.1rem 0 0; text-transform:uppercase;\">\n    D\u00fcnenf\u00fcchse Bonn-Tannenbusch e.V.\n  <\/p>\n\n  <p id=\"verein-hero-welcome\" style=\"font-size:1.4rem; font-weight:600; color:#D96B27; margin:.6rem 0 0; transition:opacity .4s ease;\">\n    Willkommen!\n  <\/p>\n<\/div>\n\n<script>\n(function () {\n  var slides = [\n    { h1: \"Miteinander \u2013 F\u00fcreinander\", h2: \"Engagement im Stadtteil\", welcome: \"Willkommen!\", dir: \"ltr\" },\n    { h1: \"Bi hev re \u2013 ji bo hev\", h2: \"Xebata civak\u00ee li tax\u00ea\", welcome: \"Bi x\u00ear hat\u00ee!\", dir: \"ltr\" },\n    { h1: \"\u0412\u043c\u0435\u0441\u0442\u0435 \u2013 \u0434\u0440\u0443\u0433 \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0430\", h2: \"\u0420\u0430\u0431\u043e\u0442\u0430 \u043d\u0430 \u0431\u043b\u0430\u0433\u043e \u0440\u0430\u0439\u043e\u043d\u0430\", welcome: \"\u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c!\", dir: \"ltr\" },\n    { h1: \"\u0645\u0639\u064b\u0627 \u2013 \u0645\u0646 \u0623\u062c\u0644 \u0628\u0639\u0636\u0646\u0627 \u0627\u0644\u0628\u0639\u0636\", h2: \"\u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u062a\u0637\u0648\u0639\u064a \u0641\u064a \u0627\u0644\u062d\u064a\", welcome: \"\u0623\u0647\u0644\u0627\u064b \u0648\u0633\u0647\u0644\u0627\u064b!\", dir: \"rtl\" },\n    { h1: \"Together \u2013 for each other\", h2: \"Community engagement\", welcome: \"Welcome!\", dir: \"ltr\" },\n    { h1: \"Unidos \u2013 el uno para el otro\", h2: \"Compromiso en el barrio\", welcome: \"\u00a1Bienvenidos!\", dir: \"ltr\" }\n  ];\n\n  var h1El = document.getElementById(\"verein-hero-h1\");\n  var h2El = document.getElementById(\"verein-hero-h2\");\n  var wEl  = document.getElementById(\"verein-hero-welcome\");\n  var i = 0;\n  var intervalMs = 3500;   \/\/ Sekunden pro Sprache\n  var fadeMs = 400;        \/\/ Dauer der \u00dcberblendung\n\n  function showSlide(index) {\n    h1El.style.opacity = 0;\n    h2El.style.opacity = 0;\n    wEl.style.opacity = 0;\n    setTimeout(function () {\n      var s = slides[index];\n      h1El.textContent = s.h1;\n      h2El.textContent = s.h2;\n      wEl.textContent = s.welcome;\n      h1El.dir = s.dir;\n      h2El.dir = s.dir;\n      wEl.dir = s.dir;\n      h1El.style.opacity = 1;\n      h2El.style.opacity = 1;\n      wEl.style.opacity = 1;\n    }, fadeMs);\n  }\n\n  setInterval(function () {\n    i = (i + 1) % slides.length;\n    showSlide(i);\n  }, intervalMs);\n})();\n<\/script>\n\n\n\n<style>\n  .fox-btn-row {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: clamp(1rem, 4vw, 2.5rem);\n    flex-wrap: wrap;\n    padding: 2rem 1rem;\n  }\n\n  .fox-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    width: clamp(90px, 12vw, 140px);\n    height: clamp(90px, 12vw, 140px);\n    border-radius: 50%;\n    background: #D96B27;\n    color: #fff;\n    font-family: inherit;\n    font-weight: 600;\n    font-size: clamp(0.8rem, 1.1vw, 1rem);\n    line-height: 1.25;\n    text-decoration: none;\n    box-shadow: 0 4px 12px rgba(217, 107, 39, 0.35);\n    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;\n    padding: 0.5rem;\n  }\n\n  .fox-btn:hover,\n  .fox-btn:focus-visible {\n    background: #C05A1B;\n    transform: translateY(-4px) scale(1.05);\n    box-shadow: 0 8px 18px rgba(217, 107, 39, 0.45);\n  }\n\n  .fox-btn.fox-btn-accent {\n    background: #2E7D46; \/* zweite Akzentfarbe zur Abhebung von \"Mitmachen\" -- optional, siehe Hinweis unten *\/\n  }\n\n  .fox-btn.fox-btn-accent:hover,\n  .fox-btn.fox-btn-accent:focus-visible {\n    background: #256238;\n  }\n<\/style>\n\n<div class=\"fox-btn-row\">\n  <a href=\"#\" class=\"fox-btn\">Ziele<\/a>\n  <a href=\"#\" class=\"fox-btn\">Veranstaltungen&nbsp;+<br>Projekte<\/a>\n  <a href=\"#\" class=\"fox-btn fox-btn-accent\">Mitmachen<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Miteinander \u2013 F\u00fcreinander Engagement im Stadtteil D\u00fcnenf\u00fcchse Bonn-Tannenbusch e.V. Willkommen! Ziele Veranstaltungen&nbsp;+Projekte Mitmachen<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.edv-lehrbuch.de\/index.php?rest_route=\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edv-lehrbuch.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.edv-lehrbuch.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.edv-lehrbuch.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edv-lehrbuch.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":8,"href":"https:\/\/www.edv-lehrbuch.de\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/www.edv-lehrbuch.de\/index.php?rest_route=\/wp\/v2\/pages\/20\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/www.edv-lehrbuch.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}