{"id":60,"date":"2025-05-10T17:24:16","date_gmt":"2025-05-10T15:24:16","guid":{"rendered":"https:\/\/cad-kompass.de\/?page_id=60"},"modified":"2026-08-31T13:46:59","modified_gmt":"2026-08-31T11:46:59","slug":"level-01","status":"publish","type":"page","link":"https:\/\/cad-kompass.de\/?page_id=60","title":{"rendered":"Trockendock"},"content":{"rendered":"\n<!--\nCAD-Kompass: Men\u00fc-Hauptseite (Hub), Variante 4 \"Kapit\u00e4n-Stil\" (EMPFOHLEN)\nHero exakt wie 10-Kapit\u00e4n\/html\/kapit\u00e4n.html (Graublau #2f485b = Banner). Kompassnadel = Messing-Funken.\nZwischen Hero und Kacheln: sichtbare \"Auf einen Blick\"-Briefing-Leiste (kein Aufklapper).\nGimmicks: (1) Fortschritt pro Karte via localStorage (kein Server, kein Cookie),\n(2) Messing-Funken bei Karten-Hover NUR auf dieser Seite, (3) Kompassnadel als Wegweiser\n(zeigt im Ruhezustand auf \"Hier starten\", beim Hover auf die jeweilige Karte).\nSprache: kollegialer Kaffee-Ton (CLAUDE.md). Zeitangaben sind Sch\u00e4tz-Lesezeiten, beim Einsatz anpassen.\nWordPress-tauglich: Custom-HTML-Block, font-family: inherit, keine externen Dienste.\nJS WP-sicher: keine UND-Operatoren (Ternaries statt Kurzschluss), keine rohen Sonderzeichen in Strings.\nDemo-Inhalt: Trockendock (5 Unterkapitel).\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: exakt nach kapit\u00e4n.html ===== *\/\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    \/* ===== \"Auf einen Blick\"-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 0 16px; font-size: 1rem; color: #1e293b; line-height: 1.6; max-width: 840px; }\n    .cad-brief-facts {\n        display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;\n        margin: 0; padding-top: 16px; border-top: 1px solid #e2e8f0;\n    }\n    .cad-brief-facts > div { min-width: 0; }\n    .cad-brief-facts dt { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #7f8c8d; margin-bottom: 4px; }\n    .cad-brief-facts dd { margin: 0; font-size: 0.9rem; font-weight: 600; color: #334155; line-height: 1.4; }\n    .cad-brief-facts dd a { color: #3f5f75; text-decoration: none; border-bottom: 1px solid rgba(63,95,117,0.4); }\n    .cad-brief-facts dd a:hover { color: #2a4a5c; border-color: #2a4a5c; }\n\n    \/* ===== Fortschritt (lokal im Browser) ===== *\/\n    .cad-progress { margin: 0 0 18px; }\n    .cad-progress-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }\n    .cad-progress-count { font-size: 0.8rem; font-weight: 700; color: #1e293b; }\n    .cad-progress-note { font-size: 0.74rem; color: #94a3b8; }\n    .cad-progress-bar { height: 6px; background: #e9eef2; border-radius: 999px; overflow: hidden; }\n    .cad-progress-bar span { display: block; height: 100%; width: 0; background: #059669; border-radius: 999px; transition: width 0.3s ease; }\n\n    \/* ===== Kacheln: 1:1 aus den Fahrwasser-Kapitel\u00fcbersichten ===== *\/\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--start { border-color: #3f5f75; }\n    .cad-card-badge { position: absolute; top: 12px; right: 12px; z-index: 3; background: #3f5f75; color: #fff; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }\n    \/* Erledigt-Haken *\/\n    .cad-check { position: absolute; top: 12px; left: 12px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #cbd5e1; background: #fff; color: transparent; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease; }\n    .cad-check svg { width: 14px; height: 14px; }\n    .cad-check:hover { border-color: #059669; color: #c8e6c9; }\n    .cad-check:focus-visible { outline: 2px solid #3f5f75; outline-offset: 2px; }\n    .cad-card--done .cad-check { background: #059669; border-color: #059669; color: #fff; }\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: 44px; height: 44px; 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; }\n    .cad-card-btn:visited { color: #fff; }\n    .cad-card-btn:hover { background: #2a4a5c; color: #fff; text-decoration: none; }\n\n    \/* Desktop: hart max. 3 Kacheln pro Reihe, untere 2 zentriert.\n       6-Spalten-Raster, jede Karte spannt 2 Spalten (2x185 + 20 Gap = 390px). *\/\n    @media (min-width: 901px) {\n        .cad-cards { grid-template-columns: repeat(6, 185px); justify-content: center; }\n        .cad-card { grid-column: span 2; }\n        .cad-card:nth-child(4) { grid-column: 2 \/ span 2; }\n        .cad-card:nth-child(5) { grid-column: 4 \/ span 2; }\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-brief-facts { grid-template-columns: 1fr 1fr; }\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\">Trockendock \u00b7 Einrichten<\/div>\n            <h1 class=\"cad-hero-title\" id=\"cad-hub-title\">Im Trockendock machst du AutoCAD und Civil 3D startklar<\/h1>\n            <div class=\"cad-hero-meta\">5 Schritte &middot; AutoCAD + Civil 3D startklar<\/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=\"cadNeedleGlow\" 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                        <!-- Norden = leuchtender Messing-Funken, Rest wei\u00df -->\n                        <g filter=\"url(#cadNeedleGlow)\">\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\">Bevor du mit Civil&nbsp;3D in ein Projekt startest, sollte die Basis stimmen. Sonst k\u00e4mpfst du mitten in der Arbeit mit Rucklern, Lizenzmeldungen oder einer Oberfl\u00e4che, in der du nichts findest. Hier richtest du Rechner, Lizenz und Programm einmal sauber ein, danach hast du Ruhe.<\/p>\n        <dl class=\"cad-brief-facts\">\n            <div><dt>F\u00fcr wen<\/dt><dd>Einsteiger, frische Einrichtung<\/dd><\/div>\n            <div><dt>Voraussetzung<\/dt><dd>nur ein Rechner<\/dd><\/div>\n            <div><dt>Umfang<\/dt><dd>5 Schritte &middot; ca. 55 Min<\/dd><\/div>\n            <div><dt>Wo anfangen<\/dt><dd><a href=\"https:\/\/cad-kompass.de\/?p=107\">Schritt 01: Hardware<\/a><\/dd><\/div>\n        <\/dl>\n    <\/section>\n\n    <div class=\"cad-cards-titel\">Die f\u00fcnf Schritte<\/div>\n\n    <div class=\"cad-progress\" role=\"status\" aria-live=\"polite\">\n        <div class=\"cad-progress-head\">\n            <span class=\"cad-progress-count\" data-progress-count>0 von 5 erledigt<\/span>\n            <span class=\"cad-progress-note\">Dein Haken bleibt nur in deinem Browser, das sieht sonst niemand.<\/span>\n        <\/div>\n        <div class=\"cad-progress-bar\" aria-hidden=\"true\"><span data-progress-bar><\/span><\/div>\n    <\/div>\n\n    <div class=\"cad-cards\" data-hub=\"trockendock\">\n\n        <div class=\"cad-card cad-card--start\" id=\"dock-start\" data-step=\"01\">\n            <button type=\"button\" class=\"cad-check\" data-check aria-pressed=\"false\" aria-label=\"Hardware als erledigt markieren\" title=\"Als erledigt markieren\">\n                <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 10l3.5 3.5L15 6\"\/><\/svg>\n            <\/button>\n            <span class=\"cad-card-badge\">Hier starten<\/span>\n            <div class=\"cad-card-header\">\n                <div class=\"cad-card-step\">Maschinenraum<\/div>\n                <div class=\"cad-card-title\">Hardware<\/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\"><rect x=\"14\" y=\"14\" width=\"20\" height=\"20\" rx=\"3\"\/><path d=\"M20 6v8M28 6v8M20 34v8M28 34v8M6 20h8M6 28h8M34 20h8M34 28h8\"\/><\/svg>\n            <\/div>\n            <div class=\"cad-card-body\">\n                <p class=\"cad-card-text\">Welcher Rechner tr\u00e4gt Civil&nbsp;3D wirklich? Einstieg, Mittelklasse, High-End mit ehrlichen Preisrahmen statt Hochglanz-Spec-Listen.<\/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=107\" class=\"cad-card-btn\">Zur Kaufberatung<\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"cad-card\" data-step=\"02\">\n            <button type=\"button\" class=\"cad-check\" data-check aria-pressed=\"false\" aria-label=\"Lizenzierung und Konto als erledigt markieren\" title=\"Als erledigt markieren\">\n                <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 10l3.5 3.5L15 6\"\/><\/svg>\n            <\/button>\n            <div class=\"cad-card-header\">\n                <div class=\"cad-card-step\">Papiere an Bord<\/div>\n                <div class=\"cad-card-title\">Lizenzierung &amp; Konto<\/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\"><circle cx=\"16\" cy=\"24\" r=\"8\"\/><path d=\"M24 24h18M36 24v7M42 24v5\"\/><\/svg>\n            <\/div>\n            <div class=\"cad-card-body\">\n                <p class=\"cad-card-text\">Welches Lizenzmodell zu dir passt, was es kostet und worauf du beim Autodesk-Konto achtest, bevor das erste Update anklopft.<\/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=120\" class=\"cad-card-btn\">Lizenzmodelle ansehen<\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"cad-card\" data-step=\"03\">\n            <button type=\"button\" class=\"cad-check\" data-check aria-pressed=\"false\" aria-label=\"Installation und Updates als erledigt markieren\" title=\"Als erledigt markieren\">\n                <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 10l3.5 3.5L15 6\"\/><\/svg>\n            <\/button>\n            <div class=\"cad-card-header\">\n                <div class=\"cad-card-step\">An Deck holen<\/div>\n                <div class=\"cad-card-title\">Installation &amp; Updates<\/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\"><path d=\"M24 6v20M16 18l8 8 8-8\"\/><path d=\"M8 30v6a4 4 0 0 0 4 4h24a4 4 0 0 0 4-4v-6\"\/><\/svg>\n            <\/div>\n            <div class=\"cad-card-body\">\n                <p class=\"cad-card-text\">Der saubere Ablauf von der ersten Installation bis zum Update, ohne dass dir sp\u00e4ter Altlasten das System zustellen.<\/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=124\" class=\"cad-card-btn\">Ablauf \u00f6ffnen<\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"cad-card\" data-step=\"04\">\n            <button type=\"button\" class=\"cad-check\" data-check aria-pressed=\"false\" aria-label=\"Einstellungen und Ersteinrichtung als erledigt markieren\" title=\"Als erledigt markieren\">\n                <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 10l3.5 3.5L15 6\"\/><\/svg>\n            <\/button>\n            <div class=\"cad-card-header\">\n                <div class=\"cad-card-step\">Kurs einstellen<\/div>\n                <div class=\"cad-card-title\">Einstellungen &amp; Ersteinrichtung<\/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\"><path d=\"M8 14h16M34 14h6M8 24h6M24 24h16M8 34h20M38 34h2\"\/><circle cx=\"29\" cy=\"14\" r=\"4.5\"\/><circle cx=\"19\" cy=\"24\" r=\"4.5\"\/><circle cx=\"33\" cy=\"34\" r=\"4.5\"\/><\/svg>\n            <\/div>\n            <div class=\"cad-card-body\">\n                <p class=\"cad-card-text\">Die Grundeinstellungen, die man einmal richtig setzt und danach nie wieder anfassen muss. Spart auf jedem Projekt Nerven.<\/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=2116\" class=\"cad-card-btn\">Ersteinrichtung starten<\/a>\n            <\/div>\n        <\/div>\n\n        <div class=\"cad-card\" data-step=\"05\">\n            <button type=\"button\" class=\"cad-check\" data-check aria-pressed=\"false\" aria-label=\"Benutzeroberfl\u00e4che als erledigt markieren\" title=\"Als erledigt markieren\">\n                <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 10l3.5 3.5L15 6\"\/><\/svg>\n            <\/button>\n            <div class=\"cad-card-header\">\n                <div class=\"cad-card-step\">Br\u00fccke kennenlernen<\/div>\n                <div class=\"cad-card-title\">Die Benutzeroberfl\u00e4che<\/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\"><rect x=\"6\" y=\"8\" width=\"36\" height=\"32\" rx=\"3\"\/><path d=\"M6 18h36M18 18v22\"\/><\/svg>\n            <\/div>\n            <div class=\"cad-card-body\">\n                <p class=\"cad-card-text\">Was wo sitzt: Men\u00fcband, Werkzeugkasten, Bereichswechsel und Ansichten. Damit du dich vom ersten Klick an zurechtfindest.<\/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=398\" class=\"cad-card-btn\">Oberfl\u00e4che erkunden<\/a>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n<script>\n    (function () {\n        'use strict';\n        const prefersReducedMotion = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;\n        const hasFinePointer = window.matchMedia ? window.matchMedia('(pointer: fine)').matches : false;\n\n        \/* === Fortschritt: lokal im Browser (kein Server, kein Cookie) === *\/\n        (function progress() {\n            const wrap = document.querySelector('.cad-cards[data-hub]');\n            if (!wrap) { return; }\n            const hub = wrap.getAttribute('data-hub') || 'hub';\n            const key = 'cadk_hub_' + hub + '_v1';\n            const cards = Array.prototype.slice.call(wrap.querySelectorAll('.cad-card'));\n            const countEl = document.querySelector('[data-progress-count]');\n            const barEl = document.querySelector('[data-progress-bar]');\n\n            function load() {\n                try {\n                    const raw = localStorage.getItem(key);\n                    if (!raw) { return []; }\n                    const arr = JSON.parse(raw);\n                    if (Object.prototype.toString.call(arr) === '[object Array]') { return arr; }\n                    return [];\n                } catch (e) { return []; }\n            }\n            function save(arr) {\n                try { localStorage.setItem(key, JSON.stringify(arr)); } catch (e) {}\n            }\n            const done = load();\n\n            function update() {\n                const total = cards.length;\n                let n = 0;\n                cards.forEach(function (card) {\n                    const step = card.getAttribute('data-step');\n                    const on = done.indexOf(step) !== -1;\n                    if (on) { n = n + 1; }\n                    card.classList.toggle('cad-card--done', on);\n                    const btn = card.querySelector('[data-check]');\n                    if (btn) { btn.setAttribute('aria-pressed', on ? 'true' : 'false'); }\n                });\n                if (countEl) { countEl.textContent = n + ' von ' + total + ' erledigt'; }\n                if (barEl) { barEl.style.width = total ? Math.round(n \/ total * 100) + '%' : '0%'; }\n            }\n\n            cards.forEach(function (card) {\n                const btn = card.querySelector('[data-check]');\n                if (!btn) { return; }\n                btn.addEventListener('click', function () {\n                    const step = card.getAttribute('data-step');\n                    if (!step) { return; }\n                    const i = done.indexOf(step);\n                    if (i === -1) { done.push(step); } else { done.splice(i, 1); }\n                    save(done);\n                    update();\n                });\n            });\n            update();\n        })();\n\n        \/* === Kompassnadel als Wegweiser === *\/\n        (function compassWayfinder() {\n            const compass = document.querySelector('.cad-compass');\n            if (!compass) { return; }\n            const rose = compass.querySelector('.cad-compass-rose');\n            if (!rose) { return; }\n            const startCard = document.getElementById('dock-start');\n            let current = startCard;\n\n            function angleTo(el) {\n                if (!el) { return 0; }\n                const c = compass.getBoundingClientRect();\n                if (c.width === 0) { return 0; }\n                const t = el.getBoundingClientRect();\n                const cx = c.left + c.width \/ 2;\n                const cy = c.top + c.height \/ 2;\n                const tx = t.left + t.width \/ 2;\n                const 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            const 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            let 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);\n        })();\n\n        \/* === Hero-Raster leicht parallax === *\/\n        (function heroParallax() {\n            if (prefersReducedMotion) { return; }\n            if (!hasFinePointer) { return; }\n            const hero = document.querySelector('.cad-hero');\n            if (!hero) { return; }\n            let 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                const rect = hero.getBoundingClientRect();\n                const nx = (e.clientX - rect.left) \/ rect.width - 0.5;\n                const 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<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Trockendock \u00b7 Einrichten Im Trockendock machst du AutoCAD und Civil 3D startklar 5 Schritte &middot; AutoCAD + Civil 3D startklar [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":11,"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-60","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":"Trockendock \u00b7 Einrichten Im Trockendock machst du AutoCAD und Civil 3D startklar 5 Schritte &middot; AutoCAD + Civil 3D startklar [&hellip;]","_links":{"self":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/pages\/60","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=60"}],"version-history":[{"count":11,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":2481,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/pages\/60\/revisions\/2481"}],"wp:attachment":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}