{"id":2175,"date":"2026-06-15T07:14:30","date_gmt":"2026-06-15T05:14:30","guid":{"rendered":"https:\/\/cad-kompass.de\/?p=2175"},"modified":"2026-06-26T17:59:40","modified_gmt":"2026-06-26T15:59:40","slug":"ruhige-see","status":"publish","type":"post","link":"https:\/\/cad-kompass.de\/?p=2175","title":{"rendered":"Ruhige See"},"content":{"rendered":"\n<!--\n    (c) CAD-Kompass. Alle Rechte vorbehalten.\n    Dieses Tool einschliesslich Quellcode, Design und Logik ist geistiges\n    Eigentum von CAD-Kompass. Jegliche Vervielfaeltigung, Weitergabe oder\n    Einbindung auf fremden Webseiten ist ohne ausdrueckliche schriftliche\n    Genehmigung untersagt.\n-->\n<style>\n    .zz-box {\n        --zz-primary: #3f5f75;\n        --zz-primary-dark: #2c4a5e;\n        --zz-primary-deep: #1e3548;\n        --zz-accent: #e8913a;\n        --zz-ink: #1e293b;\n        --zz-text: #334155;\n        --zz-muted: #64748b;\n        --zz-faint: #94a3b8;\n        --zz-border: #c8d6e0;\n        --zz-surface: #f7f9fb;\n        background: var(--zz-surface);\n        border: 2px solid var(--zz-primary);\n        border-radius: 2px;\n        margin: 28px 0;\n        overflow: hidden;\n        position: relative;\n        font-family: inherit;\n        color: var(--zz-text);\n        line-height: 1.6;\n    }\n\n    \/* Top bar (Tool-Lab-Standard) *\/\n    .zz-header {\n        background: linear-gradient(135deg, var(--zz-primary-deep) 0%, var(--zz-primary-dark) 100%);\n        padding: 20px 28px 18px;\n        position: relative;\n        overflow: hidden;\n    }\n    .zz-header::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        height: 3px;\n        background: repeating-linear-gradient(\n                90deg,\n                var(--zz-primary) 0px,\n                var(--zz-primary) 8px,\n                transparent 8px,\n                transparent 12px\n        );\n    }\n    .zz-header-top {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        margin-bottom: 6px;\n    }\n    .zz-header-icon {\n        width: 36px;\n        height: 36px;\n        flex-shrink: 0;\n        opacity: 0.85;\n    }\n    .zz-box .zz-box-title {\n        font-size: 1.15rem;\n        font-weight: 700;\n        color: #fff;\n        margin: 0;\n        padding: 0;\n        letter-spacing: 0.02em;\n        display: inline;\n    }\n    .zz-box .zz-box-desc {\n        font-size: 0.85rem;\n        color: rgba(255,255,255,0.65);\n        margin: 0;\n        padding: 0;\n        line-height: 1.5;\n        display: block;\n    }\n\n    \/* Body *\/\n    .zz-body {\n        padding: 22px 28px 24px;\n    }\n\n    \/* Privacy *\/\n    .zz-privacy {\n        background: #f0fdf4;\n        border: 1px solid #bbf7d0;\n        border-radius: 3px;\n        padding: 9px 14px;\n        margin-bottom: 20px;\n        font-size: 0.8rem;\n        color: #15803d;\n        line-height: 1.5;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n    }\n    .zz-privacy::before {\n        content: '\\1F512';\n        flex-shrink: 0;\n        font-size: 0.9rem;\n    }\n\n    \/* Section label *\/\n    .zz-section-label {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        margin-bottom: 14px;\n        font-size: 0.72rem;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 0.1em;\n        color: var(--zz-muted);\n    }\n    .zz-section-label::before,\n    .zz-section-label::after {\n        content: '';\n        height: 1px;\n        background: var(--zz-border);\n        flex: 1;\n    }\n    .zz-section-label::before {\n        max-width: 20px;\n    }\n\n    \/* Buttons (Tool-Lab-Standard) *\/\n    .zz-btn {\n        padding: 10px 24px;\n        font-size: 0.9rem;\n        font-family: inherit;\n        background: var(--zz-primary);\n        color: #fff;\n        border: none;\n        border-radius: 2px;\n        cursor: pointer;\n        white-space: nowrap;\n        font-weight: 600;\n        letter-spacing: 0.02em;\n        transition: background 0.15s;\n        position: relative;\n    }\n    .zz-btn:hover {\n        background: var(--zz-primary-dark);\n        color: #fff;\n    }\n    .zz-btn:disabled {\n        background: var(--zz-faint);\n        cursor: not-allowed;\n    }\n    .zz-btn::before {\n        content: '';\n        position: absolute;\n        left: 0;\n        top: 0;\n        bottom: 0;\n        width: 3px;\n        background: rgba(255,255,255,0.25);\n        border-radius: 2px 0 0 2px;\n    }\n    .zz-btn:focus-visible {\n        outline: 2px solid var(--zz-primary);\n        outline-offset: 2px;\n    }\n    .zz-btn--secondary {\n        background: #fff;\n        color: var(--zz-primary);\n        border: 1px solid var(--zz-primary);\n    }\n    .zz-btn--secondary:hover {\n        background: #eef3f7;\n        color: var(--zz-primary);\n    }\n    .zz-btn--secondary::before {\n        display: none;\n    }\n    .zz-btn--secondary.zz-on {\n        background: var(--zz-primary);\n        color: #fff;\n    }\n\n    \/* Steuerleiste *\/\n    .zz-controls {\n        display: flex;\n        gap: 10px;\n        flex-wrap: wrap;\n        align-items: center;\n        margin-bottom: 16px;\n    }\n    .zz-buoy-count {\n        margin-left: auto;\n        font-size: 0.78rem;\n        color: var(--zz-muted);\n        font-variant-numeric: tabular-nums;\n    }\n\n    \/* ====== Nachtmeer ====== *\/\n    .zz-sea {\n        position: relative;\n        border: 1px solid var(--zz-border);\n        border-radius: 2px;\n        overflow: hidden;\n        cursor: crosshair;\n        background: linear-gradient(180deg, #14283a 0%, #1e3548 45%, #24405a 100%);\n    }\n    .zz-sea svg {\n        display: block;\n        width: 100%;\n        height: auto;\n    }\n    .zz-sea-msg {\n        position: absolute;\n        bottom: 10px;\n        left: 0;\n        right: 0;\n        text-align: center;\n        font-size: 0.78rem;\n        font-style: italic;\n        color: rgba(255,255,255,0.55);\n        pointer-events: none;\n        transition: opacity 0.8s ease;\n    }\n    .zz-sea-msg.zz-fade {\n        opacity: 0;\n    }\n\n    \/* Bojen und Ringe (per JS gesetzt) *\/\n    .zz-buoy-glow {\n        animation: zzGlimmer 3.2s ease-in-out infinite alternate;\n    }\n    @keyframes zzGlimmer {\n        from { opacity: 0.14; }\n        to { opacity: 0.3; }\n    }\n    .zz-buoy-bob {\n        animation: zzBobBuoy 3.6s ease-in-out infinite alternate;\n        transform-box: fill-box;\n        transform-origin: center;\n    }\n    @keyframes zzBobBuoy {\n        from { transform: translateY(0); }\n        to { transform: translateY(-2px); }\n    }\n    #zzCoursePath {\n        animation: zzDrift 14s linear infinite;\n    }\n    @keyframes zzDrift {\n        to { stroke-dashoffset: -100; }\n    }\n    .zz-drop {\n        animation: zzDrop 0.9s cubic-bezier(0.2, 0.6, 0.4, 1) both;\n        transform-box: fill-box;\n        transform-origin: center;\n    }\n    @keyframes zzDrop {\n        0% { opacity: 0; transform: scale(0.15); }\n        18% { opacity: 0.55; }\n        100% { opacity: 0; transform: scale(1.6); }\n    }\n    .zz-refl-shimmer {\n        animation: zzShimmer 4s ease-in-out infinite alternate;\n    }\n    @keyframes zzShimmer {\n        from { opacity: 0.14; }\n        to { opacity: 0.34; }\n    }\n    .zz-shooting {\n        animation: zzShoot 1.5s ease-out forwards;\n    }\n    @keyframes zzShoot {\n        0% { opacity: 0; transform: translate(0, 0); }\n        15% { opacity: 0.85; }\n        100% { opacity: 0; transform: translate(-95px, 40px); }\n    }\n    .zz-wavedrift1 {\n        animation: zzWave1 16s ease-in-out infinite alternate;\n    }\n    .zz-wavedrift2 {\n        animation: zzWave2 22s ease-in-out infinite alternate;\n    }\n    @keyframes zzWave1 {\n        from { transform: translateX(0); }\n        to { transform: translateX(-22px); }\n    }\n    @keyframes zzWave2 {\n        from { transform: translateX(0); }\n        to { transform: translateX(18px); }\n    }\n    .zz-ring {\n        animation: zzRing 2.8s cubic-bezier(0.2, 0.6, 0.4, 1) both;\n        transform-origin: center;\n        transform-box: fill-box;\n    }\n    @keyframes zzRing {\n        0% { transform: scale(0.2); opacity: 0; }\n        12% { opacity: 0.45; }\n        100% { transform: scale(2.6); opacity: 0; }\n    }\n    .zz-star-twinkle {\n        animation: zzTwinkle 4s ease-in-out infinite alternate;\n    }\n    @keyframes zzTwinkle {\n        from { opacity: 0.25; }\n        to { opacity: 0.85; }\n    }\n    .zz-ebb #zzMarks {\n        transition: opacity 2.2s ease;\n        opacity: 0;\n    }\n\n    .zz-hint {\n        font-size: 0.8rem;\n        color: var(--zz-muted);\n        line-height: 1.5;\n        margin: 14px 2px 0;\n    }\n\n    \/* Disclaimer *\/\n    .zz-disclaimer {\n        font-size: 0.76rem;\n        color: var(--zz-faint);\n        font-style: italic;\n        margin: 20px 0 0;\n        line-height: 1.5;\n        padding-top: 14px;\n        border-top: 1px solid #eef2f6;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n        .zz-buoy-glow, .zz-star-twinkle, .zz-buoy-bob, #zzCoursePath,\n        .zz-refl-shimmer, .zz-wavedrift1, .zz-wavedrift2 { animation: none; }\n        .zz-ring, .zz-drop, .zz-shooting { animation-duration: 0.01s; }\n    }\n    @media (max-width: 600px) {\n        .zz-header { padding: 16px 20px 14px; }\n        .zz-body { padding: 18px 20px 20px; }\n        .zz-buoy-count { margin-left: 0; width: 100%; }\n    }\n<\/style>\n\n<div class=\"zz-box\">\n    <div class=\"zz-header\">\n        <div class=\"zz-header-top\">\n            <svg class=\"zz-header-icon\" viewBox=\"0 0 36 36\" fill=\"none\">\n                <circle cx=\"26\" cy=\"9\" r=\"4\" stroke=\"rgba(255,255,255,0.7)\" stroke-width=\"1.2\"\/>\n                <circle cx=\"10\" cy=\"20\" r=\"1.6\" fill=\"rgba(255,255,255,0.85)\"\/>\n                <circle cx=\"10\" cy=\"20\" r=\"4.5\" stroke=\"rgba(255,255,255,0.4)\" stroke-width=\"1\"\/>\n                <circle cx=\"10\" cy=\"20\" r=\"7.5\" stroke=\"rgba(255,255,255,0.2)\" stroke-width=\"1\"\/>\n                <path d=\"M4 30 Q 8 27, 12 30 T 20 30 T 28 30 T 34 30\" stroke=\"rgba(255,255,255,0.5)\" stroke-width=\"1\" fill=\"none\"\/>\n                <circle cx=\"22\" cy=\"22\" r=\"1.2\" fill=\"rgba(255,255,255,0.7)\"\/>\n                <circle cx=\"30\" cy=\"18\" r=\"1\" fill=\"rgba(255,255,255,0.5)\"\/>\n            <\/svg>\n            <span class=\"zz-box-title\">Ruhige See<\/span>\n        <\/div>\n        <span class=\"zz-box-desc\">Nachtfahrt ohne Termindruck: Jeder Klick setzt eine Leuchtboje aufs Wasser. Wenn du magst, verbindet sich daraus ein Kurs. Die Ebbe r\u00e4umt am Ende alles weg.<\/span>\n    <\/div>\n\n    <div class=\"zz-body\">\n        <div class=\"zz-privacy\">L\u00e4uft komplett in deinem Browser. Es wird nichts gespeichert, nicht mal deine Bojen.<\/div>\n\n        <div class=\"zz-section-label\">Nachtmeer<\/div>\n\n        <div class=\"zz-controls\">\n            <button type=\"button\" class=\"zz-btn zz-btn--secondary\" id=\"zzCourse\">Kurs zeichnen<\/button>\n            <button type=\"button\" class=\"zz-btn zz-btn--secondary\" id=\"zzEbb\">Ebbe<\/button>\n            <span class=\"zz-buoy-count\" id=\"zzCount\">0 Bojen gesetzt<\/span>\n        <\/div>\n\n        <div class=\"zz-sea\" id=\"zzSea\">\n            <svg id=\"zzSeaSvg\" viewBox=\"0 0 560 320\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\">\n                <!-- Sterne -->\n                <g fill=\"#fff\">\n                    <circle cx=\"40\" cy=\"30\" r=\"1\" opacity=\"0.6\"\/>\n                    <circle cx=\"95\" cy=\"55\" r=\"0.8\" opacity=\"0.4\"\/>\n                    <circle cx=\"150\" cy=\"22\" r=\"1.1\" class=\"zz-star-twinkle\"\/>\n                    <circle cx=\"210\" cy=\"48\" r=\"0.7\" opacity=\"0.5\"\/>\n                    <circle cx=\"262\" cy=\"18\" r=\"0.9\" opacity=\"0.6\"\/>\n                    <circle cx=\"318\" cy=\"40\" r=\"1.2\" class=\"zz-star-twinkle\"\/>\n                    <circle cx=\"372\" cy=\"25\" r=\"0.8\" opacity=\"0.4\"\/>\n                    <circle cx=\"455\" cy=\"50\" r=\"0.7\" opacity=\"0.5\"\/>\n                    <circle cx=\"520\" cy=\"28\" r=\"1\" class=\"zz-star-twinkle\"\/>\n                    <circle cx=\"65\" cy=\"75\" r=\"0.7\" opacity=\"0.35\"\/>\n                    <circle cx=\"245\" cy=\"68\" r=\"0.8\" opacity=\"0.45\"\/>\n                    <circle cx=\"410\" cy=\"72\" r=\"0.9\" opacity=\"0.5\"\/>\n                    <circle cx=\"490\" cy=\"85\" r=\"0.7\" opacity=\"0.35\"\/>\n                <\/g>\n\n                <!-- Mond + Spiegelung -->\n                <circle cx=\"448\" cy=\"56\" r=\"18\" fill=\"#f3e8d4\" opacity=\"0.9\"\/>\n                <circle cx=\"441\" cy=\"50\" r=\"15\" fill=\"#1e3548\" opacity=\"0.35\"\/>\n                <g opacity=\"0.18\" fill=\"#f3e8d4\">\n                    <ellipse cx=\"448\" cy=\"150\" rx=\"9\" ry=\"2\"\/>\n                    <ellipse cx=\"444\" cy=\"170\" rx=\"12\" ry=\"2.4\"\/>\n                    <ellipse cx=\"450\" cy=\"192\" rx=\"8\" ry=\"2\"\/>\n                    <ellipse cx=\"446\" cy=\"216\" rx=\"13\" ry=\"2.6\"\/>\n                    <ellipse cx=\"449\" cy=\"245\" rx=\"10\" ry=\"2.2\"\/>\n                    <ellipse cx=\"445\" cy=\"278\" rx=\"14\" ry=\"2.8\"\/>\n                <\/g>\n\n                <!-- Horizontlinie -->\n                <line x1=\"0\" y1=\"110\" x2=\"560\" y2=\"110\" stroke=\"#3f5f75\" stroke-width=\"1\" opacity=\"0.5\"\/>\n\n                <!-- Sanft driftende Wellenlinien -->\n                <path class=\"zz-wavedrift1\" d=\"M-30 160 Q 30 156, 90 160 T 210 160 T 330 160 T 450 160 T 590 160\" fill=\"none\" stroke=\"#cfe0ec\" stroke-width=\"0.8\" opacity=\"0.12\"\/>\n                <path class=\"zz-wavedrift2\" d=\"M-30 220 Q 40 216, 110 220 T 250 220 T 390 220 T 590 220\" fill=\"none\" stroke=\"#cfe0ec\" stroke-width=\"0.8\" opacity=\"0.10\"\/>\n                <path class=\"zz-wavedrift1\" d=\"M-30 275 Q 35 271, 100 275 T 230 275 T 360 275 T 590 275\" fill=\"none\" stroke=\"#cfe0ec\" stroke-width=\"0.8\" opacity=\"0.08\"\/>\n\n                <!-- Kurslinie + Bojen (per JS gef\u00fcllt) -->\n                <g id=\"zzMarks\">\n                    <path id=\"zzCoursePath\" d=\"\" fill=\"none\" stroke=\"#f3e8d4\" stroke-width=\"1.2\" stroke-dasharray=\"5 5\" opacity=\"0.55\"\/>\n                    <g id=\"zzBuoys\"><\/g>\n                    <g id=\"zzRings\"><\/g>\n                <\/g>\n            <\/svg>\n            <p class=\"zz-sea-msg\" id=\"zzMsg\">Klick aufs Wasser, um die erste Boje zu setzen.<\/p>\n        <\/div>\n\n        <p class=\"zz-hint\">Es gibt nichts zu gewinnen und nichts zu verlieren. Bojen setzen, den Ringen nachsehen, vielleicht einen Kurs legen. Mit etwas Geduld zeigt sich sogar eine Sternschnuppe. Wenn es reicht, einmal Ebbe dr\u00fccken und zur\u00fcck an die Arbeit.<\/p>\n\n        <p class=\"zz-disclaimer\">Kein Ziel, keine Punkte, keine Deadline. Genau das ist die Idee.<\/p>\n    <\/div>\n<\/div>\n\n<script>\n(function () {\n    'use strict';\n\n    var SVG_NS = 'http:\/\/www.w3.org\/2000\/svg';\n    var MAX_BUOYS = 40;\n    var WATER_TOP = 112;\n\n    var MESSAGES = [\n        'Die See bleibt ruhig.',\n        'Boje gesetzt. Niemand fragt nach einem Liefertermin.',\n        'Sch\u00f6ner Kurs. Ganz ohne \u00dcbergangsbogen-Warnung.',\n        'Das Wasser hat keine Ereignisanzeige.',\n        'Hier rechnet niemand ein DGM neu auf.',\n        'Weiter so. Oder auch nicht. Ganz egal.',\n        'Leuchtfeuer an. Gedanken aus.'\n    ];\n\n    var sea = document.getElementById('zzSea');\n    var svg = document.getElementById('zzSeaSvg');\n    var buoysG = document.getElementById('zzBuoys');\n    var ringsG = document.getElementById('zzRings');\n    var coursePath = document.getElementById('zzCoursePath');\n    var msgEl = document.getElementById('zzMsg');\n    var countEl = document.getElementById('zzCount');\n    var courseBtn = document.getElementById('zzCourse');\n    var ebbBtn = document.getElementById('zzEbb');\n\n    var points = [];\n    var courseOn = false;\n    var msgCount = 0;\n    var ebbRunning = false;\n\n    function svgPoint(evt) {\n        var rect = svg.getBoundingClientRect();\n        var x = (evt.clientX - rect.left) \/ rect.width * 560;\n        var y = (evt.clientY - rect.top) \/ rect.height * 320;\n        return { x: Math.round(x * 10) \/ 10, y: Math.round(y * 10) \/ 10 };\n    }\n\n    function makeCircle(cx, cy, r, fill, opacity) {\n        var c = document.createElementNS(SVG_NS, 'circle');\n        c.setAttribute('cx', cx);\n        c.setAttribute('cy', cy);\n        c.setAttribute('r', r);\n        c.setAttribute('fill', fill);\n        if (opacity) { c.setAttribute('opacity', opacity); }\n        return c;\n    }\n\n    function addRing(x, y, delayMs) {\n        var ring = document.createElementNS(SVG_NS, 'circle');\n        ring.setAttribute('cx', x);\n        ring.setAttribute('cy', y);\n        ring.setAttribute('r', 14);\n        ring.setAttribute('fill', 'none');\n        ring.setAttribute('stroke', '#cfe0ec');\n        ring.setAttribute('stroke-width', '0.8');\n        ring.setAttribute('class', 'zz-ring');\n        ring.style.animationDelay = delayMs + 'ms';\n        ringsG.appendChild(ring);\n        setTimeout(function () { ring.remove(); }, 3400 + delayMs);\n    }\n\n    function buildPath(pts) {\n        if (pts.length < 2) { return ''; }\n        var d = 'M ' + pts[0].x + ' ' + pts[0].y;\n        if (pts.length === 2) {\n            d += ' L ' + pts[1].x + ' ' + pts[1].y;\n            return d;\n        }\n        var i;\n        for (i = 1; i < pts.length - 1; i++) {\n            var mx = (pts[i].x + pts[i + 1].x) \/ 2;\n            var my = (pts[i].y + pts[i + 1].y) \/ 2;\n            d += ' Q ' + pts[i].x + ' ' + pts[i].y + ' ' + mx + ' ' + my;\n        }\n        d += ' Q ' + pts[pts.length - 1].x + ' ' + pts[pts.length - 1].y + ' ' + pts[pts.length - 1].x + ' ' + pts[pts.length - 1].y;\n        return d;\n    }\n\n    function updateCourse() {\n        coursePath.setAttribute('d', courseOn ? buildPath(points) : '');\n    }\n\n    function updateCount() {\n        var n = points.length;\n        countEl.textContent = n === 1 ? '1 Boje gesetzt' : n + ' Bojen gesetzt';\n    }\n\n    function rotateMsg() {\n        msgCount += 1;\n        if (msgCount % 3 !== 0) { return; }\n        msgEl.classList.add('zz-fade');\n        setTimeout(function () {\n            msgEl.textContent = MESSAGES[Math.floor(Math.random() * MESSAGES.length)];\n            msgEl.classList.remove('zz-fade');\n        }, 800);\n    }\n\n    function addBuoy(p) {\n        var g = document.createElementNS(SVG_NS, 'g');\n        g.setAttribute('class', 'zz-buoy-bob');\n        g.style.animationDelay = (Math.random() * 3.6).toFixed(2) + 's';\n        var glowOuter = makeCircle(p.x, p.y, 9, '#e8913a', '0.2');\n        glowOuter.setAttribute('class', 'zz-buoy-glow');\n        glowOuter.style.animationDelay = (Math.random() * 3).toFixed(2) + 's';\n        g.appendChild(glowOuter);\n        g.appendChild(makeCircle(p.x, p.y, 3.2, '#b8704a', null));\n        g.appendChild(makeCircle(p.x, p.y - 1, 1.6, '#ffd9a8', null));\n        var refl = document.createElementNS(SVG_NS, 'ellipse');\n        refl.setAttribute('cx', p.x);\n        refl.setAttribute('cy', p.y + 7);\n        refl.setAttribute('rx', 5);\n        refl.setAttribute('ry', 1.2);\n        refl.setAttribute('fill', '#e8913a');\n        refl.setAttribute('class', 'zz-refl-shimmer');\n        refl.style.animationDelay = (Math.random() * 4).toFixed(2) + 's';\n        g.appendChild(refl);\n        buoysG.appendChild(g);\n\n        \/* Heller Aufsetz-Puls *\/\n        var drop = makeCircle(p.x, p.y, 11, '#ffd9a8', null);\n        drop.setAttribute('class', 'zz-drop');\n        ringsG.appendChild(drop);\n        setTimeout(function () { drop.remove(); }, 1000);\n\n        points.push(p);\n        if (points.length > MAX_BUOYS) {\n            points.shift();\n            if (buoysG.firstChild) { buoysG.firstChild.remove(); }\n        }\n\n        addRing(p.x, p.y, 0);\n        addRing(p.x, p.y, 450);\n        addRing(p.x, p.y, 900);\n        updateCourse();\n        updateCount();\n        rotateMsg();\n    }\n\n    sea.addEventListener('click', function (e) {\n        if (ebbRunning) { return; }\n        var onControl = e.target.closest ? e.target.closest('button') : null;\n        if (onControl) { return; }\n        var p = svgPoint(e);\n        if (p.y < WATER_TOP) { p.y = WATER_TOP + 4; }\n        if (p.y > 312) { p.y = 312; }\n        addBuoy(p);\n    });\n\n    courseBtn.addEventListener('click', function () {\n        courseOn = !courseOn;\n        if (courseOn) { courseBtn.classList.add('zz-on'); } else { courseBtn.classList.remove('zz-on'); }\n        updateCourse();\n    });\n\n    \/* Gelegentliche Sternschnuppe am Nachthimmel *\/\n    function shootStar() {\n        var x = 140 + Math.random() * 360;\n        var y = 14 + Math.random() * 55;\n        var line = document.createElementNS(SVG_NS, 'line');\n        line.setAttribute('x1', x);\n        line.setAttribute('y1', y);\n        line.setAttribute('x2', x + 38);\n        line.setAttribute('y2', y - 15);\n        line.setAttribute('stroke', '#f3e8d4');\n        line.setAttribute('stroke-width', '1');\n        line.setAttribute('stroke-linecap', 'round');\n        line.setAttribute('class', 'zz-shooting');\n        svg.appendChild(line);\n        setTimeout(function () { line.remove(); }, 1600);\n        setTimeout(shootStar, 16000 + Math.random() * 22000);\n    }\n    setTimeout(shootStar, 9000);\n\n    ebbBtn.addEventListener('click', function () {\n        if (ebbRunning) { return; }\n        if (points.length === 0) { return; }\n        ebbRunning = true;\n        sea.classList.add('zz-ebb');\n        msgEl.textContent = 'Die Ebbe nimmt alles mit. Auch die Gedanken.';\n        setTimeout(function () {\n            points = [];\n            buoysG.textContent = '';\n            ringsG.textContent = '';\n            coursePath.setAttribute('d', '');\n            sea.classList.remove('zz-ebb');\n            updateCount();\n            ebbRunning = false;\n            msgEl.textContent = 'Freie See. Klick, wenn du wieder eine Boje brauchst.';\n        }, 2300);\n    });\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Ruhige See Nachtfahrt ohne Termindruck: Jeder Klick setzt eine Leuchtboje aufs Wasser. Wenn du magst, verbindet sich daraus ein Kurs. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","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":""},"categories":[41],"tags":[],"class_list":["post-2175","post","type-post","status-publish","format-standard","hentry","category-zen-zorn"],"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":"Ruhige See Nachtfahrt ohne Termindruck: Jeder Klick setzt eine Leuchtboje aufs Wasser. Wenn du magst, verbindet sich daraus ein Kurs. [&hellip;]","_links":{"self":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/posts\/2175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"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=2175"}],"version-history":[{"count":1,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/posts\/2175\/revisions"}],"predecessor-version":[{"id":2176,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/posts\/2175\/revisions\/2176"}],"wp:attachment":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}