{"id":518,"date":"2025-07-19T18:44:09","date_gmt":"2025-07-19T16:44:09","guid":{"rendered":"https:\/\/cad-kompass.de\/?page_id=518"},"modified":"2026-06-22T20:16:03","modified_gmt":"2026-06-22T18:16:03","slug":"klickspiel","status":"publish","type":"page","link":"https:\/\/cad-kompass.de\/?page_id=518","title":{"rendered":"Zen &amp; Zorn"},"content":{"rendered":"\n<!--\nCAD-Kompass: Zen-und-Zorn-Hub - neue Hub-Optik (Variante 4, Tool-Menue).\nKein Fortschritt, kein cad-check (Tool-Menue per CLAUDE.md).\nWP-sicher: kein Und-Operator, keine rohen Sonderzeichen im Skriptblock.\n-->\n\n<style>\n    .cad-page { max-width: 1240px; margin: 0 auto; padding: 8px 0 70px; font-family: inherit; color: #334155; line-height: 1.65; }\n    .cad-page *, .cad-page *::before, .cad-page *::after { box-sizing: border-box; }\n    .cad-page p { margin: 0 0 14px; }\n\n    \/* ===== Hero ===== *\/\n    .cad-hero {\n        --cad-grid-x: 0px;\n        --cad-grid-y: 0px;\n        position: relative;\n        background: #2f485b;\n        color: #fff;\n        border-radius: 2px;\n        padding: 17px 28px;\n        margin-bottom: 22px;\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        min-height: 96px;\n        border: 1px solid rgba(255,255,255,0.16);\n        box-shadow: inset 0 -1px 0 rgba(255,255,255,0.2);\n    }\n    .cad-hero::before {\n        content: \"\";\n        position: absolute; inset: -16px;\n        background-image:\n                linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),\n                linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);\n        background-size: 28px 28px;\n        opacity: 0.48;\n        pointer-events: none;\n        transform: translate3d(var(--cad-grid-x, 0px), var(--cad-grid-y, 0px), 0);\n        transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.4, 1);\n    }\n    .cad-hero-text { position: relative; z-index: 2; max-width: 760px; }\n    .cad-hero-eyebrow {\n        font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.18em;\n        font-weight: 600; color: rgba(255,255,255,0.72); margin-bottom: 8px;\n    }\n    .cad-hero-title {\n        font-size: 1.34rem; font-weight: 700; line-height: 1.25;\n        margin: 0; color: #fff; letter-spacing: -0.005em;\n    }\n    .cad-hero-meta {\n        margin-top: 8px;\n        font-family: ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n        font-size: 0.73rem; color: rgba(255,255,255,0.7); letter-spacing: 0.04em;\n    }\n    .cad-compass {\n        position: absolute; z-index: 1; right: -76px; top: 50%;\n        width: 320px; height: 320px; transform: translateY(-50%);\n        display: flex; align-items: center; justify-content: center;\n        opacity: 0.44; pointer-events: none;\n    }\n    .cad-compass svg { width: 100%; height: 100%; display: block; }\n    .cad-compass-rose, .cad-compass-secondary { transform-box: fill-box; transform-origin: center; }\n    .cad-compass-rose { transition: transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1); }\n    @media (prefers-reduced-motion: reduce) { .cad-compass-rose { transition: none; } }\n    @media (prefers-reduced-motion: no-preference) {\n        .cad-compass-secondary { animation: cadCompassSpinReverse 140s linear infinite; }\n        @keyframes cadCompassSpinReverse { to { transform: rotate(-360deg); } }\n    }\n\n    \/* ===== Briefing (sichtbar, kein Aufklapper) ===== *\/\n    .cad-brief {\n        background: #f8f9fa;\n        border: 1px solid #e2e8f0;\n        border-left: 3px solid #3f5f75;\n        border-radius: 2px;\n        padding: 20px 24px;\n        margin-bottom: 30px;\n    }\n    .cad-brief-lead { margin: 0; font-size: 1rem; color: #1e293b; line-height: 1.6; }\n\n    \/* ===== Kacheln ===== *\/\n    .cad-cards-titel { font-size: 0.78rem; font-weight: 600; color: #7f8c8d; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; padding-top: 20px; padding-left: 2px; border-top: 1px solid #e8e8e8; }\n    .cad-cards { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }\n    .cad-card { position: relative; max-width: 100%; border: 1px solid #d0d0d0; border-radius: 4px; background: #fff; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.03); transition: transform 0.22s ease, box-shadow 0.22s ease; }\n    .cad-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(63,95,117,0.10), 0 2px 6px rgba(0,0,0,0.04); }\n    .cad-card-header { padding: 22px 20px 0; text-align: center; }\n    .cad-card-step { font-size: 0.72rem; font-weight: 600; color: #7f8c8d; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }\n    .cad-card-title { font-size: 1.05rem; font-weight: 700; color: #1e293b; margin: 0 0 14px; }\n    .cad-card-divider { height: 1px; background: #ccc; margin: 0 20px; }\n    .cad-card-icon { text-align: center; padding: 18px 20px; }\n    .cad-card-icon svg { width: 64px; height: 64px; color: #3f5f75; }\n    .cad-card-body { padding: 0 20px; flex: 1; }\n    .cad-card-text { font-size: 0.85rem; line-height: 1.65; color: #334155; margin: 0; }\n    .cad-card-footer { padding: 20px 20px 24px; text-align: center; margin-top: auto; }\n    .cad-card-footer-divider { height: 1px; background: #ccc; margin: 0 0 20px; }\n    .cad-card-btn { display: inline-block; background: #3f5f75; color: #fff; text-decoration: none; padding: 10px 28px; font-size: 0.85rem; font-weight: 600; border-radius: 3px; transition: background 0.2s; min-height: 40px; }\n    .cad-card-btn:hover { background: #2a4a5c; color: #fff; text-decoration: none; }\n    .cad-card-btn:focus-visible { outline: 2px solid #3f5f75; outline-offset: 2px; }\n\n    \/* Desktop: Zorn 3er-Reihe, Zen 2er-Reihe (je Kachel 390px) *\/\n    @media (min-width: 901px) {\n        .cad-cards { grid-template-columns: repeat(3, 390px); justify-content: center; }\n        .cad-cards--zwei { grid-template-columns: repeat(2, 390px); }\n    }\n\n    @media (max-width: 900px) {\n        .cad-hero { padding: 16px 18px; }\n        .cad-compass { width: 220px; height: 220px; right: -64px; opacity: 0.34; }\n        .cad-cards { gap: 16px; }\n    }\n<\/style>\n\n<div class=\"cad-page\">\n\n    <section class=\"cad-hero\" aria-labelledby=\"cad-hub-title\">\n        <div class=\"cad-hero-text\">\n            <div class=\"cad-hero-eyebrow\">Zen &amp; Zorn &middot; Ausrasten &amp; Durchatmen<\/div>\n            <h1 class=\"cad-hero-title\" id=\"cad-hub-title\">Zen &amp; Zorn: Pause vom CAD-Alltag<\/h1>\n            <div class=\"cad-hero-meta\">3 Spiele &middot; 2 &Uuml;bungen &middot; direkt im Browser<\/div>\n        <\/div>\n        <div class=\"cad-compass\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 200 200\" fill=\"none\" stroke=\"currentColor\">\n                <defs>\n                    <filter id=\"cadZzNeedleGlow\" x=\"-60%\" y=\"-60%\" width=\"220%\" height=\"220%\">\n                        <feGaussianBlur stdDeviation=\"3\" result=\"cadGlow\"\/>\n                        <feMerge><feMergeNode in=\"cadGlow\"\/><feMergeNode in=\"SourceGraphic\"\/><\/feMerge>\n                    <\/filter>\n                <\/defs>\n                <circle cx=\"100\" cy=\"100\" r=\"96\" stroke=\"rgba(255,255,255,0.32)\" stroke-width=\"1.2\"\/>\n                <circle cx=\"100\" cy=\"100\" r=\"88\" stroke=\"rgba(255,255,255,0.18)\" stroke-width=\"0.8\"\/>\n                <g stroke=\"rgba(255,255,255,0.7)\" stroke-width=\"1.6\">\n                    <line x1=\"100\" y1=\"4\" x2=\"100\" y2=\"16\"\/>\n                    <line x1=\"184\" y1=\"100\" x2=\"196\" y2=\"100\"\/>\n                    <line x1=\"100\" y1=\"184\" x2=\"100\" y2=\"196\"\/>\n                    <line x1=\"4\" y1=\"100\" x2=\"16\" y2=\"100\"\/>\n                <\/g>\n                <g stroke=\"rgba(255,255,255,0.5)\" stroke-width=\"1.2\">\n                    <g transform=\"rotate(30 100 100)\"><line x1=\"100\" y1=\"4\" x2=\"100\" y2=\"13\"\/><\/g>\n                    <g transform=\"rotate(60 100 100)\"><line x1=\"100\" y1=\"4\" x2=\"100\" y2=\"13\"\/><\/g>\n                    <g transform=\"rotate(120 100 100)\"><line x1=\"100\" y1=\"4\" x2=\"100\" y2=\"13\"\/><\/g>\n                    <g transform=\"rotate(150 100 100)\"><line x1=\"100\" y1=\"4\" x2=\"100\" y2=\"13\"\/><\/g>\n                    <g transform=\"rotate(210 100 100)\"><line x1=\"100\" y1=\"4\" x2=\"100\" y2=\"13\"\/><\/g>\n                    <g transform=\"rotate(240 100 100)\"><line x1=\"100\" y1=\"4\" x2=\"100\" y2=\"13\"\/><\/g>\n                    <g transform=\"rotate(300 100 100)\"><line x1=\"100\" y1=\"4\" x2=\"100\" y2=\"13\"\/><\/g>\n                    <g transform=\"rotate(330 100 100)\"><line x1=\"100\" y1=\"4\" x2=\"100\" y2=\"13\"\/><\/g>\n                <\/g>\n                <g fill=\"rgba(255,255,255,0.92)\" stroke=\"none\" font-family=\"ui-monospace, monospace\" font-weight=\"700\" font-size=\"11\" text-anchor=\"middle\">\n                    <text x=\"100\" y=\"29\">N<\/text>\n                    <text x=\"171\" y=\"104\">O<\/text>\n                    <text x=\"100\" y=\"178\">S<\/text>\n                    <text x=\"29\" y=\"104\">W<\/text>\n                <\/g>\n                <g class=\"cad-compass-secondary\">\n                    <circle cx=\"100\" cy=\"100\" r=\"80\" stroke=\"rgba(255,255,255,0.18)\" stroke-width=\"0.6\" stroke-dasharray=\"2 6\"\/>\n                <\/g>\n                <g class=\"cad-compass-rose\">\n                    <circle cx=\"100\" cy=\"100\" r=\"72\" stroke=\"rgba(255,255,255,0.16)\" stroke-width=\"0.6\" stroke-dasharray=\"3 5\"\/>\n                    <g stroke=\"none\">\n                        <g filter=\"url(#cadZzNeedleGlow)\">\n                            <polygon points=\"100,18 105,96 100,100\" fill=\"#ffbe3d\"\/>\n                            <polygon points=\"100,18 100,100 95,96\" fill=\"#c47a1e\"\/>\n                        <\/g>\n                        <polygon points=\"182,100 104,105 100,100\" fill=\"rgba(255,255,255,0.85)\"\/>\n                        <polygon points=\"182,100 100,100 104,95\" fill=\"rgba(255,255,255,0.5)\"\/>\n                        <polygon points=\"100,182 105,104 100,100\" fill=\"rgba(255,255,255,0.45)\"\/>\n                        <polygon points=\"100,182 100,100 95,104\" fill=\"rgba(255,255,255,0.25)\"\/>\n                        <polygon points=\"18,100 96,105 100,100\" fill=\"rgba(255,255,255,0.85)\"\/>\n                        <polygon points=\"18,100 100,100 96,95\" fill=\"rgba(255,255,255,0.5)\"\/>\n                    <\/g>\n                    <g stroke=\"none\">\n                        <g transform=\"rotate(45 100 100)\"><polygon points=\"100,42 103,98 100,100\" fill=\"rgba(255,255,255,0.7)\"\/><polygon points=\"100,42 100,100 97,98\" fill=\"rgba(255,255,255,0.4)\"\/><\/g>\n                        <g transform=\"rotate(135 100 100)\"><polygon points=\"100,42 103,98 100,100\" fill=\"rgba(255,255,255,0.6)\"\/><polygon points=\"100,42 100,100 97,98\" fill=\"rgba(255,255,255,0.35)\"\/><\/g>\n                        <g transform=\"rotate(225 100 100)\"><polygon points=\"100,42 103,98 100,100\" fill=\"rgba(255,255,255,0.6)\"\/><polygon points=\"100,42 100,100 97,98\" fill=\"rgba(255,255,255,0.35)\"\/><\/g>\n                        <g transform=\"rotate(315 100 100)\"><polygon points=\"100,42 103,98 100,100\" fill=\"rgba(255,255,255,0.6)\"\/><polygon points=\"100,42 100,100 97,98\" fill=\"rgba(255,255,255,0.35)\"\/><\/g>\n                    <\/g>\n                <\/g>\n                <circle cx=\"100\" cy=\"100\" r=\"9\" fill=\"#2a4a5c\" stroke=\"rgba(255,255,255,0.95)\" stroke-width=\"1.4\"\/>\n                <circle cx=\"100\" cy=\"100\" r=\"2.8\" fill=\"#ffbe3d\"\/>\n            <\/svg>\n        <\/div>\n    <\/section>\n\n    <section class=\"cad-brief\" aria-label=\"Auf einen Blick\">\n        <p class=\"cad-brief-lead\">Civil 3D friert ein, und die F&uuml;llfl&auml;che, die gestern noch sauber funktioniert hat, will heute einfach nicht. Diese Momente kennst du. Zen &amp; Zorn ist die Rubrik f&uuml;r genau dann: drei Spiele, um den Wutpegel abzubauen, und zwei &Uuml;bungen ohne Punkte und ohne Ziel. Alles l&auml;uft direkt im Browser, kein Konto n&ouml;tig. Die Bordb&uuml;cher in der Zorn-Abteilung sind echte Bestenlisten. Eingetragen wird nur, wer das selbst m&ouml;chte, mit frei gew&auml;hltem Rufzeichen.<\/p>\n    <\/section>\n\n    <div class=\"cad-cards-titel\">Zorn &middot; Dampf ablassen<\/div>\n    <div class=\"cad-cards\">\n\n        <article class=\"cad-card\" id=\"zz-start\">\n            <div class=\"cad-card-header\">\n                <div class=\"cad-card-step\">Wutpegel<\/div>\n                <div class=\"cad-card-title\">Klick-Wut<\/div>\n            <\/div>\n            <div class=\"cad-card-divider\"><\/div>\n            <div class=\"cad-card-icon\">\n                <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <circle cx=\"24\" cy=\"26\" r=\"16\"\/>\n                    <line x1=\"24\" y1=\"10\" x2=\"24\" y2=\"14\"\/>\n                    <line x1=\"8\" y1=\"26\" x2=\"12\" y2=\"26\"\/>\n                    <line x1=\"36\" y1=\"26\" x2=\"40\" y2=\"26\"\/>\n                    <line x1=\"12.7\" y1=\"14.7\" x2=\"15.5\" y2=\"17.5\"\/>\n                    <line x1=\"35.3\" y1=\"14.7\" x2=\"32.5\" y2=\"17.5\"\/>\n                    <line x1=\"24\" y1=\"26\" x2=\"33\" y2=\"17.5\" stroke=\"#e8913a\" stroke-width=\"2.2\"\/>\n                    <circle cx=\"24\" cy=\"26\" r=\"2.2\" fill=\"currentColor\" stroke=\"none\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"cad-card-body\">\n                <p class=\"cad-card-text\">Civil 3D meldet &bdquo;Keine R&uuml;ckmeldung&ldquo;? Hier steht ein Fenster, das genau daf&uuml;r gebaut ist. Zehn Sekunden lang z&auml;hlt jeder Klick auf &bdquo;Programm schlie&szlig;en&ldquo;, die Windst&auml;rke-Skala misst deinen Wutpegel und das Bordbuch merkt sich die Besten.<\/p>\n            <\/div>\n            <div class=\"cad-card-footer\">\n                <div class=\"cad-card-footer-divider\"><\/div>\n                <a href=\"https:\/\/cad-kompass.de\/?p=2164\" class=\"cad-card-btn\">Spiel &ouml;ffnen<\/a>\n            <\/div>\n        <\/article>\n\n        <article class=\"cad-card\">\n            <div class=\"cad-card-header\">\n                <div class=\"cad-card-step\">Treffsicherheit<\/div>\n                <div class=\"cad-card-title\">Dialog-Versenken<\/div>\n            <\/div>\n            <div class=\"cad-card-divider\"><\/div>\n            <div class=\"cad-card-icon\">\n                <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <circle cx=\"24\" cy=\"21\" r=\"11\"\/>\n                    <line x1=\"24\" y1=\"5\" x2=\"24\" y2=\"12\"\/>\n                    <line x1=\"24\" y1=\"30\" x2=\"24\" y2=\"37\"\/>\n                    <line x1=\"8\" y1=\"21\" x2=\"15\" y2=\"21\"\/>\n                    <line x1=\"33\" y1=\"21\" x2=\"40\" y2=\"21\"\/>\n                    <circle cx=\"24\" cy=\"21\" r=\"2\" fill=\"currentColor\" stroke=\"none\"\/>\n                    <path d=\"M6 42 Q 10 39, 14 42 T 22 42 T 30 42 T 38 42 T 44 42\" stroke-width=\"1.5\" opacity=\"0.6\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"cad-card-body\">\n                <p class=\"cad-card-text\">30 Sekunden Wache auf der Seekarte: Nervmeldungen tauchen auf und werden per Klick versenkt. Nur die gr&uuml;nen Erfolgsmeldungen bleiben heil. Mit Dienstgraden vom Leichtmatrosen bis zum K&auml;pt&rsquo;n und eigenem Bordbuch.<\/p>\n            <\/div>\n            <div class=\"cad-card-footer\">\n                <div class=\"cad-card-footer-divider\"><\/div>\n                <a href=\"https:\/\/cad-kompass.de\/?p=2167\" class=\"cad-card-btn\">Spiel &ouml;ffnen<\/a>\n            <\/div>\n        <\/article>\n\n        <article class=\"cad-card\">\n            <div class=\"cad-card-header\">\n                <div class=\"cad-card-step\">Speicher-Reflex<\/div>\n                <div class=\"cad-card-title\">Rettungsring<\/div>\n            <\/div>\n            <div class=\"cad-card-divider\"><\/div>\n            <div class=\"cad-card-icon\">\n                <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <circle cx=\"24\" cy=\"24\" r=\"16\"\/>\n                    <circle cx=\"24\" cy=\"24\" r=\"7\"\/>\n                    <line x1=\"24\" y1=\"8\" x2=\"24\" y2=\"17\"\/>\n                    <line x1=\"24\" y1=\"31\" x2=\"24\" y2=\"40\"\/>\n                    <line x1=\"8\" y1=\"24\" x2=\"17\" y2=\"24\"\/>\n                    <line x1=\"31\" y1=\"24\" x2=\"40\" y2=\"24\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"cad-card-body\">\n                <p class=\"cad-card-text\">Die Zeichnung friert ein, du speicherst. Wie schnell, sagt dir der Reaktionstest in Millisekunden: f&uuml;nf Runden, Fehlstarts werden trocken kommentiert, die Bestzeit landet im Bordbuch. Strg+S funktioniert hier ganz ohne Risiko.<\/p>\n            <\/div>\n            <div class=\"cad-card-footer\">\n                <div class=\"cad-card-footer-divider\"><\/div>\n                <a href=\"https:\/\/cad-kompass.de\/?p=2171\" class=\"cad-card-btn\">Spiel &ouml;ffnen<\/a>\n            <\/div>\n        <\/article>\n\n    <\/div>\n\n    <div class=\"cad-cards-titel\">Zen &middot; Durchatmen<\/div>\n    <div class=\"cad-cards cad-cards--zwei\">\n\n        <article class=\"cad-card\">\n            <div class=\"cad-card-header\">\n                <div class=\"cad-card-step\">Atem&uuml;bung<\/div>\n                <div class=\"cad-card-title\">Ankerplatz<\/div>\n            <\/div>\n            <div class=\"cad-card-divider\"><\/div>\n            <div class=\"cad-card-icon\">\n                <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <line x1=\"24\" y1=\"8\" x2=\"24\" y2=\"32\"\/>\n                    <circle cx=\"24\" cy=\"11\" r=\"3\"\/>\n                    <line x1=\"16\" y1=\"18\" x2=\"32\" y2=\"18\"\/>\n                    <path d=\"M14 28 A 10 10 0 0 0 34 28\"\/>\n                    <path d=\"M6 40 Q 10 37, 14 40 T 22 40 T 30 40 T 38 40 T 44 40\" stroke-width=\"1.5\" opacity=\"0.6\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"cad-card-body\">\n                <p class=\"cad-card-text\">Eine ruhige Bucht, die deinen Atem f&uuml;hrt: Das Wasser steigt beim Einatmen und sinkt beim Ausatmen, der Leuchtturm gl&uuml;ht mit. Box-Atmung oder 4-7-8, ein bis f&uuml;nf Minuten. Keine Punkte, keine Eile.<\/p>\n            <\/div>\n            <div class=\"cad-card-footer\">\n                <div class=\"cad-card-footer-divider\"><\/div>\n                <a href=\"https:\/\/cad-kompass.de\/?p=2173\" class=\"cad-card-btn\">&Uuml;bung &ouml;ffnen<\/a>\n            <\/div>\n        <\/article>\n\n        <article class=\"cad-card\">\n            <div class=\"cad-card-header\">\n                <div class=\"cad-card-step\">Treiben lassen<\/div>\n                <div class=\"cad-card-title\">Ruhige See<\/div>\n            <\/div>\n            <div class=\"cad-card-divider\"><\/div>\n            <div class=\"cad-card-icon\">\n                <svg viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M34 8 A 8 8 0 1 0 38 19 A 6.5 6.5 0 0 1 34 8 Z\"\/>\n                    <circle cx=\"16\" cy=\"30\" r=\"1.6\" fill=\"currentColor\" stroke=\"none\"\/>\n                    <circle cx=\"16\" cy=\"30\" r=\"5\" opacity=\"0.6\"\/>\n                    <circle cx=\"16\" cy=\"30\" r=\"8.5\" opacity=\"0.3\"\/>\n                    <path d=\"M6 42 Q 10 39, 14 42 T 22 42 T 30 42 T 38 42 T 44 42\" stroke-width=\"1.5\" opacity=\"0.6\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"cad-card-body\">\n                <p class=\"cad-card-text\">Nachtmeer statt Modellraum: Jeder Klick setzt eine Leuchtboje mit Wellenringen aufs Wasser, auf Wunsch verbindet sich daraus ein Kurs. Mit etwas Geduld f&auml;llt eine Sternschnuppe. Die Ebbe r&auml;umt am Ende alles weg.<\/p>\n            <\/div>\n            <div class=\"cad-card-footer\">\n                <div class=\"cad-card-footer-divider\"><\/div>\n                <a href=\"https:\/\/cad-kompass.de\/?p=2175\" class=\"cad-card-btn\">&Uuml;bung &ouml;ffnen<\/a>\n            <\/div>\n        <\/article>\n\n    <\/div>\n\n<\/div>\n\n<script>\n    (function () {\n        'use strict';\n        var prefersReducedMotion = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;\n        var hasFinePointer = window.matchMedia ? window.matchMedia('(pointer: fine)').matches : false;\n\n        \/* === Kompassnadel als Wegweiser === *\/\n        (function compassWayfinder() {\n            var compass = document.querySelector('.cad-compass');\n            if (!compass) { return; }\n            var rose = compass.querySelector('.cad-compass-rose');\n            if (!rose) { return; }\n            var startCard = document.getElementById('zz-start');\n            var current = startCard;\n\n            function angleTo(el) {\n                if (!el) { return 0; }\n                var c = compass.getBoundingClientRect();\n                if (c.width === 0) { return 0; }\n                var t = el.getBoundingClientRect();\n                var cx = c.left + c.width \/ 2;\n                var cy = c.top + c.height \/ 2;\n                var tx = t.left + t.width \/ 2;\n                var ty = t.top + t.height \/ 2;\n                return Math.atan2(ty - cy, tx - cx) * 180 \/ Math.PI + 90;\n            }\n            function refresh() { rose.style.transform = 'rotate(' + angleTo(current).toFixed(2) + 'deg)'; }\n            refresh();\n\n            if (prefersReducedMotion) { return; }\n            if (!hasFinePointer) { return; }\n\n            var cards = Array.prototype.slice.call(document.querySelectorAll('.cad-card'));\n            cards.forEach(function (card) {\n                card.addEventListener('mouseenter', function () { current = card; refresh(); });\n                card.addEventListener('mouseleave', function () { current = startCard; refresh(); });\n            });\n            var ticking = false;\n            function onScroll() {\n                if (ticking) { return; }\n                ticking = true;\n                requestAnimationFrame(function () { ticking = false; refresh(); });\n            }\n            window.addEventListener('scroll', onScroll, { passive: true });\n            window.addEventListener('resize', onScroll, { passive: true });\n        })();\n\n        \/* === Hero-Raster leicht parallax === *\/\n        (function heroParallax() {\n            if (prefersReducedMotion) { return; }\n            if (!hasFinePointer) { return; }\n            var hero = document.querySelector('.cad-hero');\n            if (!hero) { return; }\n            var lastX = 0, lastY = 0, ticking = false;\n            function apply() {\n                hero.style.setProperty('--cad-grid-x', lastX.toFixed(1) + 'px');\n                hero.style.setProperty('--cad-grid-y', lastY.toFixed(1) + 'px');\n                ticking = false;\n            }\n            hero.addEventListener('mousemove', function (e) {\n                var rect = hero.getBoundingClientRect();\n                var nx = (e.clientX - rect.left) \/ rect.width - 0.5;\n                var ny = (e.clientY - rect.top) \/ rect.height - 0.5;\n                lastX = nx * -16;\n                lastY = ny * -16;\n                if (!ticking) { requestAnimationFrame(apply); ticking = true; }\n            }, { passive: true });\n            hero.addEventListener('mouseleave', function () {\n                lastX = 0; lastY = 0;\n                if (!ticking) { requestAnimationFrame(apply); ticking = true; }\n            });\n        })();\n\n    })();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Zen &amp; Zorn &middot; Ausrasten &amp; Durchatmen Zen &amp; Zorn: Pause vom CAD-Alltag 3 Spiele &middot; 2 &Uuml;bungen &middot; direkt [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"disabled","ast-main-header-display":"","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":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","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-518","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":false,"author_link":"https:\/\/cad-kompass.de\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Zen &amp; Zorn &middot; Ausrasten &amp; Durchatmen Zen &amp; Zorn: Pause vom CAD-Alltag 3 Spiele &middot; 2 &Uuml;bungen &middot; direkt [&hellip;]","_links":{"self":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/pages\/518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=518"}],"version-history":[{"count":30,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/pages\/518\/revisions"}],"predecessor-version":[{"id":2195,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/pages\/518\/revisions\/2195"}],"wp:attachment":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}