{"id":2265,"date":"2026-07-05T12:44:56","date_gmt":"2026-07-05T10:44:56","guid":{"rendered":"https:\/\/cad-kompass.de\/?p=2265"},"modified":"2026-07-05T12:44:57","modified_gmt":"2026-07-05T10:44:57","slug":"boeschungs-explainer","status":"publish","type":"post","link":"https:\/\/cad-kompass.de\/?p=2265","title":{"rendered":"B\u00f6schungs-Explainer"},"content":{"rendered":"\n<style>\n    .bo-box {\n        --bo-primary: #3f5f75;\n        --bo-primary-dark: #2c4a5e;\n        --bo-primary-deep: #1e3548;\n        --bo-ink: #1e293b;\n        --bo-text: #334155;\n        --bo-muted: #64748b;\n        --bo-border: #c8d6e0;\n        --bo-surface: #f7f9fb;\n        --bo-good: #059669;\n        --bo-good-deep: #15803d;\n        --bo-warn: #d97706;\n        --bo-warn-deep: #92700c;\n        --bo-warn-border: #f4cf81;\n        --bo-warn-bg: #fffbeb;\n        --bo-error: #dc2626;\n        --bo-accent: #e8913a;\n        \/* tool-spezifische Linienfarben: Bestand\/DGM blaugrau, Planungsniveau gruen, Boeschung gold *\/\n        --bo-ground: #3f5f75;\n        --bo-plan: #059669;\n        --bo-slope: #e8913a;\n        background: var(--bo-surface);\n        border: 3px solid var(--bo-primary);\n        border-radius: 8px;\n        margin: 28px 0;\n        overflow: hidden;\n        position: relative;\n        font-family: inherit;\n        color: var(--bo-text);\n        line-height: 1.55;\n    }\n    .bo-box, .bo-box *, .bo-box *::before, .bo-box *::after { box-sizing: border-box; }\n\n    .bo-header {\n        background: linear-gradient(135deg, var(--bo-primary-deep) 0%, var(--bo-primary-dark) 100%);\n        padding: 20px 28px 18px;\n        position: relative;\n    }\n    .bo-header::after {\n        content: '';\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        height: 3px;\n        background: repeating-linear-gradient(90deg, var(--bo-primary) 0px, var(--bo-primary) 8px, transparent 8px, transparent 12px);\n    }\n    .bo-header-top { display: flex; align-items: center; gap: 14px; }\n    .bo-header-icon { width: 36px; height: 36px; flex-shrink: 0; }\n    .bo-box-title { font-size: 1.15rem; color: #fff; font-weight: 700; margin: 0; letter-spacing: -0.01em; }\n    .bo-box-desc { font-size: 0.85rem; color: rgba(255,255,255,0.68); margin: 6px 0 0; line-height: 1.55; }\n\n    .bo-body { padding: 22px 28px 24px; }\n    .bo-privacy {\n        background: #f0fdf4;\n        border: 1px solid #bbf7d0;\n        border-radius: 3px;\n        padding: 9px 14px;\n        margin-bottom: 16px;\n        font-size: 0.8rem;\n        color: var(--bo-good-deep);\n        line-height: 1.5;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n    }\n    .bo-privacy::before { content: '\\1F512'; flex-shrink: 0; font-size: 0.9rem; }\n    .bo-intro {\n        background: #f0f5fa;\n        border-left: 3px solid var(--bo-primary);\n        border-radius: 0 4px 4px 0;\n        padding: 11px 15px;\n        margin-bottom: 16px;\n        font-size: 0.86rem;\n        color: var(--bo-text);\n    }\n    .bo-intro strong { color: var(--bo-ink); }\n\n    .bo-focus-label {\n        font-size: 0.66rem;\n        font-weight: 800;\n        text-transform: uppercase;\n        letter-spacing: 0.1em;\n        color: var(--bo-muted);\n        margin-bottom: 6px;\n    }\n    .bo-focus {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px;\n        margin-bottom: 14px;\n    }\n    .bo-box .bo-focus-btn {\n        -webkit-appearance: none !important;\n        appearance: none !important;\n        border: 1px solid var(--bo-border) !important;\n        border-radius: 3px !important;\n        background: #fff !important;\n        color: var(--bo-text) !important;\n        min-height: 36px !important;\n        padding: 7px 12px !important;\n        font: inherit !important;\n        font-size: 0.78rem !important;\n        font-weight: 800 !important;\n        cursor: pointer !important;\n        box-shadow: none !important;\n        text-transform: none !important;\n        transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;\n    }\n    .bo-box .bo-focus-btn:hover { border-color: var(--bo-primary) !important; color: var(--bo-primary) !important; background: #fff !important; transform: translateY(-1px); }\n    .bo-box .bo-focus-btn:active { transform: translateY(1px); }\n    .bo-box .bo-focus-btn:focus-visible { outline: 2px solid var(--bo-primary) !important; outline-offset: 2px !important; border-color: var(--bo-primary) !important; color: var(--bo-primary) !important; }\n    .bo-box .bo-focus-btn.is-active { background: var(--bo-primary) !important; border-color: var(--bo-primary) !important; color: #fff !important; }\n    .bo-box .bo-focus-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }\n\n    .bo-topic { display: none; }\n    .bo-topic.is-active { display: block; }\n    .bo-topic-title {\n        font-size: 0.72rem;\n        font-weight: 800;\n        color: var(--bo-primary);\n        text-transform: uppercase;\n        letter-spacing: 0.08em;\n        margin: 0 0 9px;\n    }\n    .bo-stage-panel {\n        display: grid;\n        grid-template-columns: minmax(0, 1fr);\n        gap: 12px;\n        align-items: start;\n        margin-bottom: 14px;\n    }\n    .bo-svg-wrap, .bo-controls, .bo-verdict {\n        border: 1px solid var(--bo-border);\n        border-radius: 4px;\n        background: #fff;\n    }\n    .bo-svg-wrap { order: 2; padding: 12px 14px 10px; }\n    .bo-svg-wrap svg { width: 100%; height: auto; display: block; font-family: inherit; touch-action: none; user-select: none; }\n    .bo-controls {\n        order: 1;\n        background: var(--bo-surface);\n        padding: 14px 16px 16px;\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));\n        gap: 14px 16px;\n        align-items: start;\n    }\n    .bo-section-label {\n        font-size: 0.66rem;\n        font-weight: 800;\n        text-transform: uppercase;\n        letter-spacing: 0.1em;\n        color: var(--bo-muted);\n        margin: 0 0 8px;\n    }\n    .bo-control-block { min-width: 0; }\n    .bo-field { margin-bottom: 12px; padding-left: 9px; border-left: 3px solid var(--bo-border); }\n    .bo-field:last-child { margin-bottom: 0; }\n    .bo-field-label { display: flex; justify-content: space-between; gap: 8px; font-size: 0.76rem; font-weight: 800; color: var(--bo-ink); margin-bottom: 4px; }\n    .bo-field-unit { color: var(--bo-muted); font-size: 0.74rem; font-weight: 700; font-variant-numeric: tabular-nums; }\n\n    .bo-box .bo-range {\n        -webkit-appearance: none !important;\n        -moz-appearance: none !important;\n        appearance: none !important;\n        width: 100% !important;\n        height: 6px !important;\n        padding: 0 !important;\n        margin: 8px 0 2px !important;\n        background: #dbe4ec !important;\n        border: 0 !important;\n        border-radius: 3px !important;\n        outline: none !important;\n        box-shadow: none !important;\n        box-sizing: border-box !important;\n        accent-color: var(--bo-primary);\n    }\n    .bo-box .bo-range::-webkit-slider-runnable-track {\n        -webkit-appearance: none !important;\n        appearance: none !important;\n        height: 6px !important;\n        background: transparent !important;\n        border: 0 !important;\n        box-shadow: none !important;\n    }\n    .bo-box .bo-range::-webkit-slider-thumb {\n        -webkit-appearance: none !important;\n        appearance: none !important;\n        width: 18px !important;\n        height: 18px !important;\n        border-radius: 50% !important;\n        background: var(--bo-primary) !important;\n        border: 2px solid #fff !important;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;\n        margin-top: -6px !important;\n        cursor: pointer !important;\n    }\n    .bo-box .bo-range::-moz-range-track {\n        height: 6px !important;\n        background: transparent !important;\n        border: 0 !important;\n        box-shadow: none !important;\n    }\n    .bo-box .bo-range::-moz-range-thumb {\n        -moz-appearance: none !important;\n        appearance: none !important;\n        width: 18px !important;\n        height: 18px !important;\n        border-radius: 50% !important;\n        background: var(--bo-primary) !important;\n        border: 2px solid #fff !important;\n        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;\n        cursor: pointer !important;\n    }\n    .bo-box .bo-range::-moz-focus-outer { border: 0 !important; }\n    .bo-box .bo-range:focus-visible { outline: 2px solid var(--bo-primary) !important; outline-offset: 4px !important; border-radius: 3px !important; }\n    .bo-box .bo-range:disabled { opacity: 0.42 !important; cursor: not-allowed !important; }\n    .bo-box .bo-range:disabled::-webkit-slider-thumb { background: #aab8c2 !important; }\n    .bo-box .bo-range:disabled::-moz-range-thumb { background: #aab8c2 !important; }\n\n    .bo-box .bo-btn {\n        -webkit-appearance: none !important;\n        appearance: none !important;\n        font-family: inherit !important;\n        font-size: 0.78rem !important;\n        font-weight: 800 !important;\n        line-height: 1.2 !important;\n        color: #fff !important;\n        background: var(--bo-primary) !important;\n        border: 1px solid var(--bo-primary) !important;\n        border-radius: 3px !important;\n        min-height: 36px !important;\n        padding: 7px 12px !important;\n        cursor: pointer !important;\n        box-shadow: none !important;\n        text-transform: none !important;\n        white-space: nowrap !important;\n        transition: background-color 0.15s, border-color 0.15s, color 0.15s;\n    }\n    .bo-box .bo-btn:hover { background: var(--bo-primary-dark) !important; border-color: var(--bo-primary-dark) !important; color: #fff !important; }\n    .bo-box .bo-btn:active { background: var(--bo-primary-deep) !important; }\n    .bo-box .bo-btn:focus-visible { outline: 2px solid var(--bo-primary) !important; outline-offset: 2px !important; }\n    .bo-box .bo-btn:disabled { background: #aab8c2 !important; border-color: #aab8c2 !important; cursor: not-allowed !important; }\n    .bo-box .bo-btn.is-ghost { background: #fff !important; color: var(--bo-primary) !important; }\n    .bo-box .bo-btn.is-ghost:hover { background: var(--bo-primary) !important; color: #fff !important; }\n    .bo-box .bo-btn.is-ghost:focus-visible { background: var(--bo-primary) !important; color: #fff !important; outline: 2px solid var(--bo-primary) !important; outline-offset: 2px !important; }\n\n    .bo-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--bo-border); border-radius: 3px; overflow: hidden; background: #fff; }\n    .bo-box .bo-seg button {\n        -webkit-appearance: none !important;\n        appearance: none !important;\n        font-family: inherit !important;\n        font-size: 0.73rem !important;\n        font-weight: 800 !important;\n        line-height: 1.2 !important;\n        color: var(--bo-text) !important;\n        background: #fff !important;\n        border: none !important;\n        border-radius: 0 !important;\n        min-height: 34px !important;\n        padding: 6px 13px !important;\n        cursor: pointer !important;\n        box-shadow: none !important;\n        text-transform: none !important;\n        transition: background-color 0.15s, color 0.15s;\n    }\n    .bo-box .bo-seg button + button { border-left: 1px solid var(--bo-border) !important; }\n    .bo-box .bo-seg button.is-active { background: var(--bo-primary) !important; color: #fff !important; }\n    .bo-box .bo-seg button:hover:not(.is-active) { background: #edf4f8 !important; color: var(--bo-primary) !important; }\n    .bo-box .bo-seg button:active { background: #e2ecf2 !important; }\n    .bo-box .bo-seg button:focus-visible { outline: 2px solid var(--bo-primary) !important; outline-offset: -2px !important; }\n    .bo-box .bo-seg button:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }\n\n    .bo-mini-hint { font-size: 0.74rem; color: var(--bo-muted); line-height: 1.45; margin-top: 8px; }\n\n    .bo-verdict { padding: 12px 16px; margin-bottom: 14px; }\n    .bo-verdict.is-live { background: #fff; border-left: 3px solid var(--bo-primary); border-radius: 0 4px 4px 0; }\n    .bo-verdict-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }\n    .bo-verdict-title {\n        font-size: 0.66rem;\n        font-weight: 800;\n        text-transform: uppercase;\n        letter-spacing: 0.1em;\n        color: var(--bo-muted);\n    }\n    .bo-chip {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 2px 10px;\n        border-radius: 999px;\n        font-size: 0.72rem;\n        font-weight: 800;\n        background: #edf4f8;\n        border: 1px solid #cfe0ea;\n        color: var(--bo-primary-deep);\n        font-variant-numeric: tabular-nums;\n    }\n    .bo-chip.is-good { background: #f0fdf4; border-color: #bbf7d0; color: var(--bo-good-deep); }\n    .bo-chip.is-warn { background: #fffbeb; border-color: #f4cf81; color: var(--bo-warn-deep); }\n    .bo-chip.is-error { background: #fef2f2; border-color: #fac5c5; color: var(--bo-error); }\n    .bo-verdict-text { font-size: 0.85rem; line-height: 1.6; color: var(--bo-text); margin: 0; }\n    .bo-verdict-text strong { color: var(--bo-ink); }\n\n    .bo-tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }\n    .bo-tile {\n        background: #fff;\n        border: 1px solid #dde7ee;\n        border-radius: 3px;\n        padding: 8px 9px;\n        min-width: 0;\n    }\n    .bo-tile-label {\n        display: block;\n        color: var(--bo-muted);\n        font-size: 0.62rem;\n        font-weight: 800;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n    }\n    .bo-tile-value {\n        display: block;\n        color: var(--bo-ink);\n        font-size: 0.9rem;\n        font-weight: 800;\n        font-variant-numeric: tabular-nums;\n        margin-top: 2px;\n    }\n\n    .bo-legend {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 9px 14px;\n        align-items: center;\n        margin-top: 9px;\n        padding-top: 9px;\n        border-top: 1px solid #edf2f7;\n        font-size: 0.73rem;\n        color: var(--bo-muted);\n    }\n    .bo-legend-item { display: inline-flex; align-items: center; gap: 5px; }\n    .bo-line-swatch { width: 22px; height: 0; border-top: 3px solid currentColor; border-radius: 999px; }\n    .bo-line-swatch.is-dash {\n        height: 2px;\n        border-top: 0;\n        background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px);\n    }\n    .bo-area-swatch { width: 16px; height: 11px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.12); }\n\n    .bo-merksatz {\n        background: #f0fdf4;\n        border: 1px solid #bbf7d0;\n        border-left: 3px solid var(--bo-good);\n        border-radius: 0 4px 4px 0;\n        padding: 12px 16px;\n        margin-top: 14px;\n        font-size: 0.9rem;\n        color: var(--bo-text);\n    }\n    .bo-merksatz strong { color: var(--bo-good-deep); }\n\n    \/* SVG-Praesentation: Farben hartkodiert (Safari versteht keine CSS-Variablen in SVG-Attributen) *\/\n    .bo-svg-label { fill: #64748b; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }\n    .bo-svg-axis { stroke: #d9e4ec; stroke-width: 1.2; }\n\n    @media (max-width: 940px) {\n        .bo-stage-panel { grid-template-columns: 1fr; }\n    }\n    @media (max-width: 700px) {\n        .bo-header { padding: 16px 20px 14px; }\n        .bo-body { padding: 18px 18px 20px; }\n        .bo-tile-grid { grid-template-columns: 1fr; }\n    }\n    @media (max-width: 480px) {\n        .bo-focus { flex-direction: column; align-items: stretch; }\n        .bo-box .bo-focus-btn { text-align: left !important; }\n        .bo-seg { display: flex; flex-direction: column; }\n        .bo-box .bo-seg button + button { border-left: 0 !important; border-top: 1px solid var(--bo-border) !important; }\n    }\n    @media (prefers-reduced-motion: reduce) {\n        \/* !important noetig: Accessibility-Override muss beliebige Spezifitaeten der CSS-Box schlagen. *\/\n        .bo-box * { transition: none !important; animation: none !important; }\n    }\n<\/style>\n\n<div class=\"bo-box\" data-bo-root>\n    <div class=\"bo-header\">\n        <div class=\"bo-header-top\">\n            <svg class=\"bo-header-icon\" viewBox=\"0 0 36 36\" fill=\"none\" aria-hidden=\"true\">\n                <line x1=\"3\" y1=\"27\" x2=\"33\" y2=\"27\" stroke=\"rgba(255,255,255,0.55)\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/>\n                <polyline points=\"5,13 16,13 27,27\" stroke=\"rgba(255,255,255,0.92)\" stroke-width=\"2\" fill=\"none\" stroke-linejoin=\"round\" stroke-linecap=\"round\"\/>\n                <line x1=\"6\" y1=\"13\" x2=\"6\" y2=\"11\" stroke=\"rgba(255,255,255,0.7)\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/>\n                <line x1=\"11\" y1=\"13\" x2=\"11\" y2=\"11\" stroke=\"rgba(255,255,255,0.7)\" stroke-width=\"1.4\" stroke-linecap=\"round\"\/>\n                <line x1=\"20\" y1=\"19\" x2=\"22.5\" y2=\"20.5\" stroke=\"rgba(255,255,255,0.6)\" stroke-width=\"1.3\" stroke-linecap=\"round\"\/>\n                <line x1=\"23\" y1=\"24\" x2=\"25.5\" y2=\"25.5\" stroke=\"rgba(255,255,255,0.6)\" stroke-width=\"1.3\" stroke-linecap=\"round\"\/>\n                <circle cx=\"27\" cy=\"27\" r=\"2\" fill=\"rgba(255,255,255,0.92)\"\/>\n            <\/svg>\n            <div>\n                <h2 class=\"bo-box-title\">B\u00f6schungs-Explainer<\/h2>\n                <div class=\"bo-box-desc\">Neigung und Anatomie, Gel\u00e4ndeanschluss zum DGM, der Gebiets-Konflikt und eine grobe Massensch\u00e4tzung in einem interaktiven Querschnitt.<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"bo-body\">\n        <div class=\"bo-privacy\">L\u00e4uft komplett im Browser. Keine Daten verlassen deinen Rechner.<\/div>\n\n        <div class=\"bo-intro\">\n            Eine <strong>Verschneidung<\/strong> zieht eine B\u00f6schung von einer Kante bis zum Ziel. W\u00e4hl einen Modus und ver\u00e4ndere die Werte: Der Befund direkt darunter \u00fcbersetzt jede Reaktion in Civil-3D-Logik. Genau die Stellen, an denen Lernende scheitern, kannst du hier gefahrlos durchspielen.\n        <\/div>\n\n        <div class=\"bo-focus-label\">Modus<\/div>\n        <div class=\"bo-focus\" id=\"boFocus\" role=\"group\" aria-label=\"Modus w\u00e4hlen\">\n            <button type=\"button\" class=\"bo-focus-btn is-active\" data-bo-topic=\"anatomy\">Neigung &amp; Anatomie<\/button>\n            <button type=\"button\" class=\"bo-focus-btn\" data-bo-topic=\"gelaende\">Gel\u00e4ndeanschluss<\/button>\n            <button type=\"button\" class=\"bo-focus-btn\" data-bo-topic=\"site\">Gebiet &amp; Konflikt<\/button>\n            <button type=\"button\" class=\"bo-focus-btn\" data-bo-topic=\"volume\">Volumen<\/button>\n        <\/div>\n\n        <!-- MODUS A: Neigung & Anatomie -->\n        <div class=\"bo-topic is-active\" id=\"boTopicAnatomy\" data-topic=\"anatomy\">\n            <div class=\"bo-topic-title\">Neigung &amp; Anatomie<\/div>\n            <div class=\"bo-verdict is-live\">\n                <div class=\"bo-verdict-head\">\n                    <span class=\"bo-verdict-title\">Befund<\/span>\n                    <span class=\"bo-chip\" id=\"boChipAnatomy\" aria-hidden=\"true\">l\u00e4dt<\/span>\n                <\/div>\n                <p class=\"bo-verdict-text\" id=\"boTextAnatomy\" aria-live=\"polite\"><\/p>\n            <\/div>\n            <div class=\"bo-stage-panel\">\n                <div class=\"bo-svg-wrap\">\n                    <svg id=\"boSvgAnatomy\" viewBox=\"0 0 620 390\" preserveAspectRatio=\"xMidYMid meet\" role=\"img\" aria-labelledby=\"boAnatomyTitle\">\n                        <title id=\"boAnatomyTitle\">Querschnitt einer B\u00f6schung mit Anatomie und Neigungsangabe<\/title>\n                        <g id=\"boAnatDraw\"><\/g>\n                    <\/svg>\n                    <div class=\"bo-legend\">\n                        <span class=\"bo-legend-item\" style=\"color:#059669;\"><span class=\"bo-line-swatch\"><\/span> Planungsniveau<\/span>\n                        <span class=\"bo-legend-item\" style=\"color:#e8913a;\"><span class=\"bo-line-swatch\"><\/span> B\u00f6schung<\/span>\n                        <span class=\"bo-legend-item\" style=\"color:#3f5f75;\"><span class=\"bo-line-swatch\"><\/span> Bestand (DGM)<\/span>\n                        <span class=\"bo-legend-item\" style=\"color:#64748b;\"><span class=\"bo-line-swatch is-dash\"><\/span> Reichweite<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"bo-controls\">\n                    <div class=\"bo-control-block\">\n                        <div class=\"bo-section-label\">Fall<\/div>\n                        <span class=\"bo-seg\" id=\"boAnatMode\" role=\"group\" aria-label=\"Damm oder Einschnitt\">\n                            <button type=\"button\" data-anat-mode=\"damm\" class=\"is-active\">Damm (Auftrag)<\/button>\n                            <button type=\"button\" data-anat-mode=\"einschnitt\">Einschnitt (Abtrag)<\/button>\n                        <\/span>\n                        <div class=\"bo-field\" style=\"margin-top:12px;\">\n                            <label class=\"bo-field-label\" for=\"boAnatN\">Neigung <span class=\"bo-field-unit\" id=\"boAnatNText\">1 : 1,50<\/span><\/label>\n                            <input class=\"bo-range\" id=\"boAnatN\" type=\"range\" min=\"0.3\" max=\"4\" step=\"0.1\" value=\"1.5\">\n                        <\/div>\n                        <div class=\"bo-field\">\n                            <label class=\"bo-field-label\" for=\"boAnatH\">H\u00f6henunterschied <span class=\"bo-field-unit\" id=\"boAnatHText\">3,0 m<\/span><\/label>\n                            <input class=\"bo-range\" id=\"boAnatH\" type=\"range\" min=\"1\" max=\"5\" step=\"0.1\" value=\"3\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"bo-control-block\">\n                        <div class=\"bo-section-label\">Dieselbe Neigung, drei Einheiten<\/div>\n                        <div class=\"bo-tile-grid\" style=\"grid-template-columns:repeat(2,minmax(0,1fr));\">\n                            <div class=\"bo-tile\"><span class=\"bo-tile-label\">Verh\u00e4ltnis<\/span><span class=\"bo-tile-value\" id=\"boAnatRatio\">&#8211;<\/span><\/div>\n                            <div class=\"bo-tile\"><span class=\"bo-tile-label\">Prozent<\/span><span class=\"bo-tile-value\" id=\"boAnatPct\">&#8211;<\/span><\/div>\n                            <div class=\"bo-tile\"><span class=\"bo-tile-label\">Winkel<\/span><span class=\"bo-tile-value\" id=\"boAnatDeg\">&#8211;<\/span><\/div>\n                            <div class=\"bo-tile\"><span class=\"bo-tile-label\">Reichweite<\/span><span class=\"bo-tile-value\" id=\"boAnatReach\">&#8211;<\/span><\/div>\n                        <\/div>\n                        <div class=\"bo-mini-hint\">Verh\u00e4ltnis 1 : n, Prozent und Grad sind dieselbe Neigung. Verwechselt man die Einheit bei der Eingabe, wird die B\u00f6schung viel zu steil oder zu flach.<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- MODUS B: Gel\u00e4ndeanschluss -->\n        <div class=\"bo-topic\" id=\"boTopicGelaende\" data-topic=\"gelaende\">\n            <div class=\"bo-topic-title\">Gel\u00e4ndeanschluss<\/div>\n            <div class=\"bo-verdict is-live\">\n                <div class=\"bo-verdict-head\">\n                    <span class=\"bo-verdict-title\">Befund<\/span>\n                    <span class=\"bo-chip\" id=\"boChipGelaende\" aria-hidden=\"true\">l\u00e4dt<\/span>\n                <\/div>\n                <p class=\"bo-verdict-text\" id=\"boTextGelaende\" aria-live=\"polite\"><\/p>\n            <\/div>\n            <div class=\"bo-stage-panel\">\n                <div class=\"bo-svg-wrap\">\n                    <svg id=\"boSvgGelaende\" viewBox=\"0 0 620 390\" preserveAspectRatio=\"xMidYMid meet\" role=\"img\" aria-labelledby=\"boGelaendeTitle\">\n                        <title id=\"boGelaendeTitle\">B\u00f6schung wandert mit der Neigung \u00fcber das Gel\u00e4nde und trifft es oder nicht<\/title>\n                        <g id=\"boGelaendeDraw\"><\/g>\n                    <\/svg>\n                    <div class=\"bo-legend\">\n                        <span class=\"bo-legend-item\" style=\"color:#059669;\"><span class=\"bo-line-swatch\"><\/span> Planungsniveau<\/span>\n                        <span class=\"bo-legend-item\" style=\"color:#e8913a;\"><span class=\"bo-line-swatch\"><\/span> B\u00f6schung<\/span>\n                        <span class=\"bo-legend-item\" style=\"color:#3f5f75;\"><span class=\"bo-line-swatch\"><\/span> Bestand-DGM<\/span>\n                        <span class=\"bo-legend-item\" style=\"color:#dc2626;\"><span class=\"bo-line-swatch is-dash\"><\/span> kein Anschluss<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"bo-controls\">\n                    <div class=\"bo-control-block\">\n                        <div class=\"bo-section-label\">Fall<\/div>\n                        <span class=\"bo-seg\" id=\"boDlMode\" role=\"group\" aria-label=\"Damm oder Einschnitt\">\n                            <button type=\"button\" data-dl-mode=\"damm\" class=\"is-active\">Damm (Auftrag)<\/button>\n                            <button type=\"button\" data-dl-mode=\"einschnitt\">Einschnitt (Abtrag)<\/button>\n                        <\/span>\n                        <div class=\"bo-field\" style=\"margin-top:12px;\">\n                            <label class=\"bo-field-label\" for=\"boDlN\">Neigung <span class=\"bo-field-unit\" id=\"boDlNText\">1 : 1,60<\/span><\/label>\n                            <input class=\"bo-range\" id=\"boDlN\" type=\"range\" min=\"0.5\" max=\"5\" step=\"0.1\" value=\"1.6\">\n                        <\/div>\n                        <div class=\"bo-field\">\n                            <label class=\"bo-field-label\" for=\"boDlH\">H\u00f6he zum Gel\u00e4nde <span class=\"bo-field-unit\" id=\"boDlHText\">2,0 m<\/span><\/label>\n                            <input class=\"bo-range\" id=\"boDlH\" type=\"range\" min=\"0.5\" max=\"5\" step=\"0.1\" value=\"2\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"bo-control-block\">\n                        <div class=\"bo-section-label\">Ergebnis<\/div>\n                        <div class=\"bo-tile-grid\">\n                            <div class=\"bo-tile\"><span class=\"bo-tile-label\">Status<\/span><span class=\"bo-tile-value\" id=\"boDlStatus\">&#8211;<\/span><\/div>\n                            <div class=\"bo-tile\"><span class=\"bo-tile-label\">Reichweite<\/span><span class=\"bo-tile-value\" id=\"boDlReach\">&#8211;<\/span><\/div>\n                            <div class=\"bo-tile\"><span class=\"bo-tile-label\">Neigung<\/span><span class=\"bo-tile-value\" id=\"boDlRatio\">&#8211;<\/span><\/div>\n                        <\/div>\n                        <div class=\"bo-mini-hint\">Mach die B\u00f6schung flacher oder die H\u00f6he gr\u00f6\u00dfer und schau, wann die B\u00f6schung \u00fcber die DGM-Grenze hinausl\u00e4uft, statt das Gel\u00e4nde zu treffen. Dann meldet Civil 3D, dass die Verschneidung nicht ausl\u00e4uft. Funktioniert in beide Richtungen, bei Auftrag und Abtrag.<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- MODUS C: Gebiet & Konflikt -->\n        <div class=\"bo-topic\" id=\"boTopicSite\" data-topic=\"site\">\n            <div class=\"bo-topic-title\">Gebiet &amp; Konflikt<\/div>\n            <div class=\"bo-verdict is-live\">\n                <div class=\"bo-verdict-head\">\n                    <span class=\"bo-verdict-title\">Befund<\/span>\n                    <span class=\"bo-chip\" id=\"boChipSite\" aria-hidden=\"true\">l\u00e4dt<\/span>\n                <\/div>\n                <p class=\"bo-verdict-text\" id=\"boTextSite\" aria-live=\"polite\"><\/p>\n            <\/div>\n            <div class=\"bo-stage-panel\">\n                <div class=\"bo-svg-wrap\">\n                    <svg id=\"boSvgSite\" viewBox=\"0 0 620 390\" preserveAspectRatio=\"xMidYMid meet\" role=\"img\" aria-labelledby=\"boSiteTitle\">\n                        <title id=\"boSiteTitle\">Draufsicht: eine kreuzende Elementkante kapert die Verschneidung im selben Gebiet<\/title>\n                        <g id=\"boSiteDraw\"><\/g>\n                    <\/svg>\n                    <div class=\"bo-legend\">\n                        <span class=\"bo-legend-item\" style=\"color:#3f5f75;\"><span class=\"bo-line-swatch\"><\/span> Grundriss (Baugrube)<\/span>\n                        <span class=\"bo-legend-item\" style=\"color:#e8913a;\"><span class=\"bo-line-swatch is-dash\"><\/span> Projektionslinien<\/span>\n                        <span class=\"bo-legend-item\" style=\"color:#b45309;\"><span class=\"bo-line-swatch\"><\/span> B\u00f6schungsfu\u00df-Linie<\/span>\n                        <span class=\"bo-legend-item\" style=\"color:#0e7490;\"><span class=\"bo-line-swatch\"><\/span> kreuzende Kante<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"bo-controls\">\n                    <div class=\"bo-control-block\">\n                        <div class=\"bo-section-label\">Gebietszuordnung<\/div>\n                        <span class=\"bo-seg\" id=\"boSiteMode\" role=\"group\" aria-label=\"Gebiete getrennt oder gleich\">\n                            <button type=\"button\" data-site-mode=\"getrennt\" class=\"is-active\">getrennte Gebiete<\/button>\n                            <button type=\"button\" data-site-mode=\"gleich\">gleiches Gebiet<\/button>\n                        <\/span>\n                        <div class=\"bo-mini-hint\">Im selben Gebiet reagieren alle Verschneidungen und Elementkanten miteinander. Eine fremde Kante kann den B\u00f6schungsfu\u00df an der Kreuzung kapern.<\/div>\n                    <\/div>\n                    <div class=\"bo-control-block\">\n                        <div class=\"bo-section-label\">Ergebnis<\/div>\n                        <div class=\"bo-tile-grid\">\n                            <div class=\"bo-tile\"><span class=\"bo-tile-label\">Baugrube<\/span><span class=\"bo-tile-value\" id=\"boSiteG1\">&#8211;<\/span><\/div>\n                            <div class=\"bo-tile\"><span class=\"bo-tile-label\">Kreuz. Kante<\/span><span class=\"bo-tile-value\" id=\"boSiteG2\">&#8211;<\/span><\/div>\n                            <div class=\"bo-tile\"><span class=\"bo-tile-label\">Verschneidung<\/span><span class=\"bo-tile-value\" id=\"boSiteResult\">&#8211;<\/span><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- MODUS D: Volumen -->\n        <div class=\"bo-topic\" id=\"boTopicVolume\" data-topic=\"volume\">\n            <div class=\"bo-topic-title\">Volumen<\/div>\n            <div class=\"bo-verdict is-live\">\n                <div class=\"bo-verdict-head\">\n                    <span class=\"bo-verdict-title\">Befund<\/span>\n                    <span class=\"bo-chip\" id=\"boChipVolume\" aria-hidden=\"true\">l\u00e4dt<\/span>\n                <\/div>\n                <p class=\"bo-verdict-text\" id=\"boTextVolume\" aria-live=\"polite\"><\/p>\n            <\/div>\n            <div class=\"bo-stage-panel\">\n                <div class=\"bo-svg-wrap\">\n                    <svg id=\"boSvgVolume\" viewBox=\"0 0 620 390\" preserveAspectRatio=\"xMidYMid meet\" role=\"img\" aria-labelledby=\"boVolumeTitle\">\n                        <title id=\"boVolumeTitle\">Querschnitt mit Auftrags- oder Abtragsfl\u00e4che und grober Massensch\u00e4tzung<\/title>\n                        <g id=\"boVolDraw\"><\/g>\n                    <\/svg>\n                    <div class=\"bo-legend\">\n                        <span class=\"bo-legend-item\" style=\"color:#059669;\"><span class=\"bo-line-swatch\"><\/span> Planungsniveau<\/span>\n                        <span class=\"bo-legend-item\" style=\"color:#3f5f75;\"><span class=\"bo-line-swatch\"><\/span> Bestand<\/span>\n                        <span class=\"bo-legend-item\"><span class=\"bo-area-swatch\" style=\"background:#cdebd9;\"><\/span> Auftrag<\/span>\n                        <span class=\"bo-legend-item\"><span class=\"bo-area-swatch\" style=\"background:#f6d2c4;\"><\/span> Abtrag<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"bo-controls\">\n                    <div class=\"bo-control-block\">\n                        <div class=\"bo-section-label\">Fall &amp; Geometrie<\/div>\n                        <span class=\"bo-seg\" id=\"boVolMode\" role=\"group\" aria-label=\"Damm oder Einschnitt\">\n                            <button type=\"button\" data-vol-mode=\"damm\" class=\"is-active\">Damm (Auftrag)<\/button>\n                            <button type=\"button\" data-vol-mode=\"einschnitt\">Einschnitt (Abtrag)<\/button>\n                        <\/span>\n                        <div class=\"bo-field\" style=\"margin-top:12px;\">\n                            <label class=\"bo-field-label\" for=\"boVolH\">H\u00f6he <span class=\"bo-field-unit\" id=\"boVolHText\">2,5 m<\/span><\/label>\n                            <input class=\"bo-range\" id=\"boVolH\" type=\"range\" min=\"1\" max=\"6\" step=\"0.1\" value=\"2.5\">\n                        <\/div>\n                        <div class=\"bo-field\">\n                            <label class=\"bo-field-label\" for=\"boVolN\">Neigung <span class=\"bo-field-unit\" id=\"boVolNText\">1 : 1,50<\/span><\/label>\n                            <input class=\"bo-range\" id=\"boVolN\" type=\"range\" min=\"0.5\" max=\"4\" step=\"0.1\" value=\"1.5\">\n                        <\/div>\n                        <div class=\"bo-field\">\n                            <label class=\"bo-field-label\" for=\"boVolW\">Plateaubreite <span class=\"bo-field-unit\" id=\"boVolWText\">8,0 m<\/span><\/label>\n                            <input class=\"bo-range\" id=\"boVolW\" type=\"range\" min=\"3\" max=\"16\" step=\"0.5\" value=\"8\">\n                        <\/div>\n                        <div class=\"bo-field\">\n                            <label class=\"bo-field-label\" for=\"boVolL\">L\u00e4nge <span class=\"bo-field-unit\" id=\"boVolLText\">40 m<\/span><\/label>\n                            <input class=\"bo-range\" id=\"boVolL\" type=\"range\" min=\"5\" max=\"200\" step=\"5\" value=\"40\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"bo-control-block\">\n                        <div class=\"bo-section-label\">Grobe Sch\u00e4tzung<\/div>\n                        <div class=\"bo-tile-grid\">\n                            <div class=\"bo-tile\"><span class=\"bo-tile-label\">Querschnitt<\/span><span class=\"bo-tile-value\" id=\"boVolArea\">&#8211;<\/span><\/div>\n                            <div class=\"bo-tile\"><span class=\"bo-tile-label\">Volumen<\/span><span class=\"bo-tile-value\" id=\"boVolVol\">&#8211;<\/span><\/div>\n                            <div class=\"bo-tile\"><span class=\"bo-tile-label\">Art<\/span><span class=\"bo-tile-value\" id=\"boVolKind\">&#8211;<\/span><\/div>\n                        <\/div>\n                        <div class=\"bo-mini-hint\">Das ist eine Faustzahl \u00fcber Fl\u00e4che mal L\u00e4nge. Belastbare Massen liefert nur das Verschneidungs-DGM gegen eine Volumen-Basisoberfl\u00e4che.<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"bo-merksatz\" id=\"boRule\">\n            <strong>Merksatz:<\/strong> Verh\u00e4ltnis, Prozent und Grad beschreiben dieselbe Neigung. Je flacher die B\u00f6schung, desto weiter wandert der B\u00f6schungsfu\u00df.\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    (function () {\n        \"use strict\";\n        var ROOT = document.querySelector(\"[data-bo-root]\");\n        if (!ROOT) { return; }\n\n        \/\/ Farbpalette als JS-Konstanten. Safari versteht keine CSS-Variablen in\n        \/\/ SVG-Attributwerten, deshalb hier hartkodierte Hex-Werte.\n        var COLORS = {\n            primary: \"#3f5f75\",\n            primaryDeep: \"#1e3548\",\n            ink: \"#1e293b\",\n            muted: \"#64748b\",\n            border: \"#d9e4ec\",\n            accent: \"#e8913a\",\n            ground: \"#3f5f75\",      \/\/ Bestand\/DGM blaugrau\n            groundFill: \"#eef2f5\",\n            plan: \"#059669\",        \/\/ Planungsniveau gruen\n            planDeep: \"#15803d\",\n            slope: \"#e8913a\",       \/\/ Boeschung gold\n            slopeDeep: \"#b45309\",\n            error: \"#dc2626\",\n            warnDeep: \"#92700c\",\n            warnBorder: \"#f4cf81\",\n            warnBg: \"#fffbeb\",\n            lineB: \"#0e7490\",       \/\/ kreuzende Kante (Gebiet B)\n            fillArea: \"#cdebd9\",    \/\/ Auftrag hellgruen\n            cutArea: \"#f6d2c4\"      \/\/ Abtrag hellrot\n        };\n\n        var SVGNS = \"http:\/\/www.w3.org\/2000\/svg\";\n        function $(id) { return ROOT.querySelector(\"#\" + id); }\n        function el(tag, attrs) {\n            var n = document.createElementNS(SVGNS, tag);\n            Object.keys(attrs || {}).forEach(function (k) { n.setAttribute(k, attrs[k]); });\n            return n;\n        }\n        function clear(node) { while (node.firstChild) { node.removeChild(node.firstChild); } }\n        function round2(v) { return Math.round(v * 100) \/ 100; }\n        function fmt(v, d) {\n            var digits = typeof d === \"number\" ? d : 2;\n            return (isFinite(v) ? v : 0).toLocaleString(\"de-DE\", { minimumFractionDigits: digits, maximumFractionDigits: digits });\n        }\n        function pointString(points) {\n            return points.map(function (p) { return p.x.toFixed(1) + \",\" + p.y.toFixed(1); }).join(\" \");\n        }\n        function poly(group, pts, attrs) {\n            group.appendChild(el(\"polyline\", Object.assign({ points: pointString(pts) }, attrs || {})));\n        }\n        function line(group, x1, y1, x2, y2, attrs) {\n            group.appendChild(el(\"line\", Object.assign({ x1: x1, y1: y1, x2: x2, y2: y2 }, attrs || {})));\n        }\n        function text(group, x, y, content, attrs) {\n            \/\/ Safari erbt font-family im SVG nicht zuverlaessig vom Container, deshalb explizit.\n            var base = { x: x, y: y, \"font-family\": \"inherit\" };\n            var t = el(\"text\", Object.assign(base, attrs || {}));\n            t.textContent = content;\n            group.appendChild(t);\n            return t;\n        }\n        function rect(group, x, y, w, h, attrs) {\n            group.appendChild(el(\"rect\", Object.assign({ x: x, y: y, width: w, height: h }, attrs || {})));\n        }\n        function circle(group, x, y, r, attrs) {\n            group.appendChild(el(\"circle\", Object.assign({ cx: x, cy: y, r: r }, attrs || {})));\n        }\n        function path(group, d, attrs) {\n            group.appendChild(el(\"path\", Object.assign({ d: d, fill: \"none\" }, attrs || {})));\n        }\n        function card(group, x, y, w, h, title) {\n            rect(group, x, y, w, h, { fill: \"#fff\", stroke: \"#d9e4ec\", \"stroke-width\": 1.2, rx: 4 });\n            if (title) { text(group, x + 14, y + 23, title, { class: \"bo-svg-label\" }); }\n        }\n        function labelBox(group, x, y, label, opts) {\n            opts = opts || {};\n            var fs = opts.size || 9.5;\n            var pad = opts.pad || 6;\n            var w = opts.width || Math.max(34, label.length * fs * 0.56 + pad * 2);\n            var h = opts.height || 17;\n            rect(group, x - w \/ 2, y - h + 3, w, h, { fill: opts.fill || \"#fff\", stroke: opts.stroke || \"#d9e4ec\", \"stroke-width\": 1, rx: 3 });\n            text(group, x, y - 3, label, {\n                \"font-size\": fs,\n                fill: opts.color || \"#1e293b\",\n                \"text-anchor\": \"middle\",\n                \"font-weight\": opts.weight || 800\n            });\n        }\n        function dotMark(group, x, y, color) {\n            circle(group, x, y, 5.2, { fill: \"#fff\", stroke: color, \"stroke-width\": 2.6 });\n        }\n        function leader(group, ax, ay, lx, ly, color) {\n            line(group, ax, ay, lx, ly, { stroke: color, \"stroke-width\": 1, \"stroke-dasharray\": \"3 3\", opacity: 0.7 });\n        }\n        function angleArc(group, vx, vy, a1, a2, r, label, color) {\n            var b = a2;\n            while (b - a1 > Math.PI) { b -= 2 * Math.PI; }\n            while (b - a1 < -Math.PI) { b += 2 * Math.PI; }\n            var x0 = vx + r * Math.cos(a1), y0 = vy + r * Math.sin(a1);\n            var x1 = vx + r * Math.cos(b), y1 = vy + r * Math.sin(b);\n            var delta = b - a1;\n            var sweep = delta > 0 ? 1 : 0;\n            var large = Math.abs(delta) > Math.PI ? 1 : 0;\n            path(group, \"M \" + x0.toFixed(1) + \" \" + y0.toFixed(1) + \" A \" + r + \" \" + r + \" 0 \" + large + \" \" + sweep + \" \" + x1.toFixed(1) + \" \" + y1.toFixed(1), { stroke: color, \"stroke-width\": 1.6 });\n            var mid = (a1 + b) \/ 2;\n            text(group, vx + (r + 13) * Math.cos(mid), vy + (r + 13) * Math.sin(mid) + 3.2, label, { \"font-size\": 9.5, fill: color, \"text-anchor\": \"middle\", \"font-weight\": 800 });\n        }\n        function dimH(group, x1, x2, y, label, color) {\n            var c = color || COLORS.muted;\n            line(group, x1, y, x2, y, { stroke: c, \"stroke-width\": 1 });\n            line(group, x1, y - 4, x1, y + 4, { stroke: c, \"stroke-width\": 1 });\n            line(group, x2, y - 4, x2, y + 4, { stroke: c, \"stroke-width\": 1 });\n            labelBox(group, (x1 + x2) \/ 2, y + 3, label, { size: 8.5, color: COLORS.ink });\n        }\n        function dimV(group, x, y1, y2, label, color) {\n            var c = color || COLORS.muted;\n            line(group, x, y1, x, y2, { stroke: c, \"stroke-width\": 1 });\n            line(group, x - 4, y1, x + 4, y1, { stroke: c, \"stroke-width\": 1 });\n            line(group, x - 4, y2, x + 4, y2, { stroke: c, \"stroke-width\": 1 });\n            labelBox(group, x, (y1 + y2) \/ 2 + 3, label, { size: 8.5, color: COLORS.ink });\n        }\n        function mapLin(v, d0, d1, r0, r1) { return r0 + (v - d0) \/ (d1 - d0) * (r1 - r0); }\n        function pctOf(n) { return 100 \/ n; }\n        function degOf(n) { return Math.atan(1 \/ n) * 180 \/ Math.PI; }\n        function groundZ(x) {\n            \/\/ milde Wellen ohne Nettotrend, damit Auftrag und Abtrag symmetrisch anschliessen\/scheitern\n            var u = (x - 5) \/ 11;\n            return 100 + 0.85 * Math.sin(u * Math.PI * 1.1) + 0.32 * Math.sin(u * Math.PI * 2.6);\n        }\n        function syncSeg(containerId, attr, value) {\n            ROOT.querySelectorAll(\"#\" + containerId + \" button\").forEach(function (b) {\n                b.classList.toggle(\"is-active\", b.getAttribute(attr) === value);\n            });\n        }\n\n        var VERDICT_TARGETS = {\n            anatomy: { chip: \"boChipAnatomy\", text: \"boTextAnatomy\" },\n            gelaende: { chip: \"boChipGelaende\", text: \"boTextGelaende\" },\n            site: { chip: \"boChipSite\", text: \"boTextSite\" },\n            volume: { chip: \"boChipVolume\", text: \"boTextVolume\" }\n        };\n        function setVerdict(kind, chip, html, rule) {\n            var t = VERDICT_TARGETS[state.topic];\n            if (!t) { return; }\n            var c = $(t.chip);\n            c.className = \"bo-chip\" + (kind ? \" \" + kind : \"\");\n            c.textContent = chip;\n            $(t.text).innerHTML = html;\n            $(\"boRule\").innerHTML = rule;\n        }\n\n        var state = {\n            topic: \"anatomy\",\n            anatMode: \"damm\", anatN: 1.5, anatH: 3.0,\n            dlMode: \"damm\", dlN: 1.6, dlH: 2.0,\n            siteMode: \"getrennt\",\n            volMode: \"damm\", volN: 1.5, volH: 2.5, volW: 8, volL: 40\n        };\n\n        function renderAnatomy() {\n            var g = $(\"boAnatDraw\");\n            clear(g);\n            syncSeg(\"boAnatMode\", \"data-anat-mode\", state.anatMode);\n            var n = state.anatN, H = state.anatH, fill = state.anatMode === \"damm\";\n            var reachM = n * H;\n            $(\"boAnatNText\").textContent = \"1 : \" + fmt(n, 2);\n            $(\"boAnatHText\").textContent = fmt(H, 1) + \" m\";\n            $(\"boAnatRatio\").textContent = \"1 : \" + fmt(n, 2);\n            $(\"boAnatPct\").textContent = fmt(pctOf(n), 1) + \" %\";\n            $(\"boAnatDeg\").textContent = fmt(degOf(n), 1) + \"\u00b0\";\n            $(\"boAnatReach\").textContent = fmt(reachM, 2) + \" m\";\n\n            var pxPerM = 30;\n            var hPx0 = H * pxPerM, reachPx0 = n * hPx0;\n            var scale = Math.min(1, 300 \/ Math.max(1, reachPx0), 150 \/ Math.max(1, hPx0));\n            var hPx = hPx0 * scale, reachPx = reachPx0 * scale;\n            var xK = 222;\n            card(g, 24, 16, 572, 358, fill ? \"Querschnitt: Damm (Auftrag)\" : \"Querschnitt: Einschnitt (Abtrag)\");\n\n            if (fill) {\n                var yG = 318, yT = yG - hPx;\n                var fx = xK + reachPx;\n                \/\/ Boeschungsflaeche (Fl\u00e4che)\n                poly(g, [{ x: xK, y: yT }, { x: fx, y: yG }, { x: xK, y: yG }], { fill: \"#fbe7d3\", stroke: \"none\" });\n                \/\/ Bestand (DGM)\n                line(g, 64, yG, 588, yG, { stroke: COLORS.ground, \"stroke-width\": 2.8, \"stroke-linecap\": \"round\" });\n                text(g, 540, yG + 17, \"Bestand (DGM)\", { \"font-size\": 9.5, fill: COLORS.ground, \"text-anchor\": \"middle\", \"font-weight\": 700 });\n                \/\/ Planungsniveau (Plateau)\n                line(g, 70, yT, xK, yT, { stroke: COLORS.plan, \"stroke-width\": 3.2, \"stroke-linecap\": \"round\" });\n                text(g, 128, yT - 9, \"Planungsniveau\", { \"font-size\": 9.5, fill: COLORS.planDeep, \"text-anchor\": \"middle\", \"font-weight\": 700 });\n                \/\/ Reichweite (horizontale Projektion)\n                line(g, xK, yG, fx, yG, { stroke: COLORS.slopeDeep, \"stroke-width\": 1.4, \"stroke-dasharray\": \"5 4\" });\n                dimH(g, xK, fx, yG + 30, \"Reichweite \" + fmt(reachM, 2) + \" m\", COLORS.slopeDeep);\n                \/\/ Hoehe\n                line(g, xK, yT, xK, yG, { stroke: COLORS.muted, \"stroke-width\": 1.3, \"stroke-dasharray\": \"5 4\" });\n                dimV(g, xK - 34, yT, yG, \"H \" + fmt(H, 1) + \" m\");\n                \/\/ Boeschung\n                line(g, xK, yT, fx, yG, { stroke: COLORS.slope, \"stroke-width\": 4, \"stroke-linecap\": \"round\" });\n                text(g, (xK + fx) \/ 2 + 4, yG - 16, \"Fl\u00e4che\", { \"font-size\": 9, fill: COLORS.slopeDeep, \"text-anchor\": \"middle\", \"font-weight\": 700 });\n                \/\/ Winkel\n                angleArc(g, fx, yG, Math.PI, Math.atan2(yT - yG, xK - fx), 26, fmt(degOf(n), 1) + \"\u00b0\", COLORS.slopeDeep);\n                \/\/ Marker + Callouts\n                dotMark(g, xK, yT, COLORS.plan);\n                leader(g, xK, yT, xK + 4, yT - 26, COLORS.primaryDeep);\n                labelBox(g, xK + 4, yT - 26, \"Grundriss \u00b7 B\u00f6schungskopf\", { width: 168, size: 9, color: COLORS.primaryDeep });\n                dotMark(g, fx, yG, COLORS.slope);\n                leader(g, fx, yG, Math.min(fx + 6, 500), yG - 44, COLORS.slopeDeep);\n                labelBox(g, Math.min(fx + 6, 500), yG - 44, \"B\u00f6schungsfu\u00df\", { width: 108, size: 9, color: COLORS.slopeDeep });\n                var bmx = (xK + fx) \/ 2, bmy = (yT + yG) \/ 2;\n                leader(g, bmx, bmy, bmx - 72, bmy - 18, COLORS.slopeDeep);\n                labelBox(g, bmx - 72, bmy - 18, \"B\u00f6schung\", { width: 78, size: 9, color: COLORS.slopeDeep });\n            } else {\n                var yGr = 120, yF = yGr + hPx;\n                var fxc = xK + reachPx;\n                \/\/ Abtrag-Flaeche\n                poly(g, [{ x: xK, y: yGr }, { x: fxc, y: yGr }, { x: xK, y: yF }], { fill: \"#f9e3da\", stroke: \"none\" });\n                \/\/ Bestand: links als ausgehoben (gestrichelt), rechts intakt\n                line(g, 64, yGr, xK, yGr, { stroke: \"#9fb3c2\", \"stroke-width\": 1.8, \"stroke-dasharray\": \"5 4\", \"stroke-linecap\": \"round\" });\n                line(g, fxc, yGr, 588, yGr, { stroke: COLORS.ground, \"stroke-width\": 2.8, \"stroke-linecap\": \"round\" });\n                text(g, 540, yGr - 9, \"Bestand (DGM)\", { \"font-size\": 9.5, fill: COLORS.ground, \"text-anchor\": \"middle\", \"font-weight\": 700 });\n                \/\/ Sohle (Planungsniveau)\n                line(g, 70, yF, xK, yF, { stroke: COLORS.plan, \"stroke-width\": 3.2, \"stroke-linecap\": \"round\" });\n                text(g, 128, yF + 17, \"Planungsniveau (Sohle)\", { \"font-size\": 9.5, fill: COLORS.planDeep, \"text-anchor\": \"middle\", \"font-weight\": 700 });\n                \/\/ Reichweite\n                line(g, xK, yF, fxc, yF, { stroke: COLORS.slopeDeep, \"stroke-width\": 1.4, \"stroke-dasharray\": \"5 4\" });\n                dimH(g, xK, fxc, yF + 30, \"Reichweite \" + fmt(reachM, 2) + \" m\", COLORS.slopeDeep);\n                \/\/ Hoehe\n                line(g, fxc, yGr, fxc, yF, { stroke: COLORS.muted, \"stroke-width\": 1.3, \"stroke-dasharray\": \"5 4\" });\n                dimV(g, fxc + 34, yGr, yF, \"H \" + fmt(H, 1) + \" m\");\n                \/\/ Boeschung\n                line(g, xK, yF, fxc, yGr, { stroke: COLORS.slope, \"stroke-width\": 4, \"stroke-linecap\": \"round\" });\n                text(g, (xK + fxc) \/ 2 - 4, yGr + 24, \"Fl\u00e4che\", { \"font-size\": 9, fill: COLORS.slopeDeep, \"text-anchor\": \"middle\", \"font-weight\": 700 });\n                \/\/ Winkel am Fuss (Sohle)\n                angleArc(g, xK, yF, 0, Math.atan2(yGr - yF, fxc - xK), 26, fmt(degOf(n), 1) + \"\u00b0\", COLORS.slopeDeep);\n                \/\/ Marker + Callouts\n                dotMark(g, xK, yF, COLORS.slope);\n                leader(g, xK, yF, xK + 4, yF + 26, COLORS.primaryDeep);\n                labelBox(g, xK + 4, yF + 26, \"Grundriss \u00b7 Sohlkante\", { width: 142, size: 9, color: COLORS.primaryDeep });\n                dotMark(g, fxc, yGr, COLORS.slope);\n                leader(g, fxc, yGr, Math.min(fxc + 6, 500), yGr - 26, COLORS.slopeDeep);\n                labelBox(g, Math.min(fxc + 6, 500), yGr - 26, \"B\u00f6schungsfu\u00df\", { width: 108, size: 9, color: COLORS.slopeDeep });\n                var cmx = (xK + fxc) \/ 2, cmy = (yGr + yF) \/ 2;\n                leader(g, cmx, cmy, cmx - 64, cmy - 12, COLORS.slopeDeep);\n                labelBox(g, cmx - 64, cmy - 12, \"B\u00f6schung\", { width: 78, size: 9, color: COLORS.slopeDeep });\n            }\n            var lage = fill\n                ? \" Das Planungsniveau liegt \u00fcber dem Bestand, die B\u00f6schung l\u00e4uft nach unten zum Gel\u00e4nde.\"\n                : \" Das Planungsniveau liegt unter dem Bestand, die B\u00f6schung l\u00e4uft nach oben zum Gel\u00e4nde.\";\n            setVerdict(\"\", \"1 : \" + fmt(n, 2),\n                \"<strong>Neigung 1 : \" + fmt(n, 2) + \"<\/strong> sind \" + fmt(pctOf(n), 1) + \" % oder \" + fmt(degOf(n), 1) + \"\u00b0. Bei \" + fmt(H, 1) + \" m H\u00f6henunterschied wird die B\u00f6schung \" + fmt(reachM, 2) + \" m breit.\" + lage + \" Je flacher du b\u00f6schst, desto weiter wandert der B\u00f6schungsfu\u00df nach au\u00dfen.\",\n                \"<strong>Merksatz:<\/strong> 1 : \" + fmt(n, 2) + \" hei\u00dft: pro Meter H\u00f6he \" + fmt(n, 2) + \" Meter horizontal. Verh\u00e4ltnis, Prozent und Grad sind dieselbe Neigung, nur anders geschrieben.\");\n        }\n\n        function renderGelaende() {\n            var g = $(\"boGelaendeDraw\");\n            clear(g);\n            syncSeg(\"boDlMode\", \"data-dl-mode\", state.dlMode);\n            var n = state.dlN, dH = state.dlH, fill = state.dlMode === \"damm\";\n            var xK = 5, xEnd = 16, xShow = 20.5, step = 0.05;\n            var gK = groundZ(xK);\n            var niveau = fill ? (gK + dH) : (gK - dH);\n            \/\/ Anschluss-Suche entlang des Bestands-DGM\n            var hit = false, xF = xEnd, zF = groundZ(xEnd);\n            for (var x = xK + step; x <= xEnd + 0.0001; x += step) {\n                var ray = fill ? (niveau - (x - xK) \/ n) : (niveau + (x - xK) \/ n);\n                var gz = groundZ(x);\n                var diff = fill ? (ray - gz) : (gz - ray);\n                if (diff <= 0) { hit = true; xF = round2(x); zF = round2(gz); break; }\n            }\n            var reachM = xF - xK;\n            $(\"boDlNText\").textContent = \"1 : \" + fmt(n, 2);\n            $(\"boDlHText\").textContent = fmt(dH, 1) + \" m\";\n            $(\"boDlStatus\").textContent = hit ? \"trifft Gel\u00e4nde\" : \"kein Anschluss\";\n            $(\"boDlReach\").textContent = hit ? fmt(reachM, 1) + \" m\" : \"\u2013\";\n            $(\"boDlRatio\").textContent = \"1 : \" + fmt(n, 2) + \"  (\" + fmt(pctOf(n), 0) + \" %)\";\n\n            var zMin = 94, zMax = 106;\n            function mx(xx) { return mapLin(xx, 0, 22, 62, 586); }\n            function mz(z) { return mapLin(z, zMin, zMax, 332, 78); }\n            function mzc(z) { return mz(Math.max(zMin + 0.4, Math.min(zMax - 0.4, z))); }\n            card(g, 24, 16, 572, 358, fill ? \"Gel\u00e4ndeanschluss: Damm \u00fcber das Gel\u00e4nde\" : \"Gel\u00e4ndeanschluss: Einschnitt ins Gel\u00e4nde\");\n\n            \/\/ Bestands-DGM (gruen) + Fuellung\n            var gpts = [];\n            for (var sx = xK; sx <= xEnd + 0.0001; sx += 0.5) { gpts.push({ x: mx(sx), y: mz(groundZ(sx)) }); }\n            var fillPts = gpts.slice();\n            fillPts.push({ x: mx(xEnd), y: 356 });\n            fillPts.push({ x: mx(xK), y: 356 });\n            poly(g, fillPts, { fill: COLORS.groundFill, stroke: \"none\" });\n            poly(g, gpts, { fill: \"none\", stroke: COLORS.ground, \"stroke-width\": 2.8, \"stroke-linecap\": \"round\", \"stroke-linejoin\": \"round\" });\n            text(g, mx(11), mz(groundZ(11)) + 22, \"Bestand (DGM)\", { \"font-size\": 9.5, fill: COLORS.ground, \"text-anchor\": \"middle\", \"font-weight\": 700 });\n\n            \/\/ DGM-Grenze (Ziel-DGM reicht nur bis hier)\n            line(g, mx(xEnd), 70, mx(xEnd), 348, { stroke: \"#94a3b8\", \"stroke-width\": 1.4, \"stroke-dasharray\": \"4 4\" });\n            labelBox(g, mx(xEnd) - 46, 100, \"DGM-Grenze\", { width: 84, size: 8.5, color: COLORS.muted });\n\n            \/\/ Planungsniveau (rot)\n            line(g, mx(0), mz(niveau), mx(xK), mz(niveau), { stroke: COLORS.plan, \"stroke-width\": 3.4, \"stroke-linecap\": \"round\" });\n            text(g, mx(2.4), mzc(niveau) + (fill ? -10 : 18), \"Planungsniveau\", { \"font-size\": 9.5, fill: COLORS.planDeep, \"text-anchor\": \"middle\", \"font-weight\": 700 });\n\n            var kopf = { x: mx(xK), y: mzc(niveau) };\n            dotMark(g, kopf.x, kopf.y, COLORS.plan);\n            leader(g, kopf.x, kopf.y, kopf.x + 44, fill ? kopf.y - 16 : kopf.y + 18, COLORS.primaryDeep);\n            labelBox(g, kopf.x + 44, fill ? kopf.y - 16 : kopf.y + 18, \"Grundriss\", { width: 76, size: 8.7, color: COLORS.primaryDeep });\n\n            if (hit) {\n                var fuss = { x: mx(xF), y: mz(zF) };\n                line(g, kopf.x, kopf.y, fuss.x, fuss.y, { stroke: COLORS.slope, \"stroke-width\": 4, \"stroke-linecap\": \"round\" });\n                dotMark(g, fuss.x, fuss.y, COLORS.slope);\n                var flx = Math.min(fuss.x + 8, 470);\n                leader(g, fuss.x, fuss.y, flx, fuss.y + (fill ? 40 : -40), COLORS.slopeDeep);\n                labelBox(g, flx, fuss.y + (fill ? 40 : -40), \"B\u00f6schungsfu\u00df\", { width: 108, size: 9, color: COLORS.slopeDeep });\n                setVerdict(\"is-good\", \"trifft Gel\u00e4nde\",\n                    \"<strong>Die B\u00f6schung erreicht das Bestandsgel\u00e4nde.<\/strong> Der B\u00f6schungsfu\u00df sitzt rund \" + fmt(reachM, 1) + \" m vom Grundriss entfernt, noch innerhalb der DGM-Grenze. So entsteht eine saubere Verschneidung mit B\u00f6schungsfu\u00df und Fl\u00e4che.\",\n                    \"<strong>Merksatz:<\/strong> Eine B\u00f6schung l\u00e4uft nur aus, wenn das Ziel-DGM im Reichweitenbereich liegt. Steiler b\u00f6schen verk\u00fcrzt die Reichweite.\");\n            } else {\n                var zAtEnd = fill ? (niveau - (xEnd - xK) \/ n) : (niveau + (xEnd - xK) \/ n);\n                var zAtShow = fill ? (niveau - (xShow - xK) \/ n) : (niveau + (xShow - xK) \/ n);\n                \/\/ Boeschung bis zur DGM-Grenze (orange), danach Warn-Verlauf (Amber, gestrichelt)\n                line(g, kopf.x, kopf.y, mx(xEnd), mzc(zAtEnd), { stroke: COLORS.slope, \"stroke-width\": 4, \"stroke-linecap\": \"round\" });\n                line(g, mx(xEnd), mzc(zAtEnd), mx(xShow), mzc(zAtShow), { stroke: COLORS.error, \"stroke-width\": 2.6, \"stroke-dasharray\": \"6 5\", \"stroke-linecap\": \"round\" });\n                var bx = mx(18.4), by = mzc((zAtEnd + zAtShow) \/ 2) + (fill ? 20 : -20);\n                labelBox(g, bx, by, \"trifft Gel\u00e4nde nicht\", { width: 132, size: 9.5, fill: \"#fef2f2\", stroke: \"#fac5c5\", color: COLORS.error });\n                setVerdict(\"is-error\", \"kein Anschluss\",\n                    \"<strong>Kein B\u00f6schungsfu\u00df.<\/strong> Bei 1 : \" + fmt(n, 2) + \" und \" + fmt(dH, 1) + \" m H\u00f6he l\u00e4uft die B\u00f6schung \u00fcber die DGM-Grenze hinaus, bevor sie das Gel\u00e4nde trifft. Civil 3D meldet dann sinngem\u00e4\u00df \u201el\u00e4uft nicht aus\u201c. Steiler b\u00f6schen oder das Ziel-DGM weiter ausdehnen.\",\n                    \"<strong>Merksatz:<\/strong> Zu flach plus zu kleines Ziel-DGM, und die B\u00f6schung trifft den Bestand nicht. Das ist der Klassiker unter den Verschneidungsfehlern.\");\n            }\n        }\n\n\n        function segInt(p, e, k1, k2) {\n            var rx = e.x - p.x, ry = e.y - p.y;\n            var sx = k2.x - k1.x, sy = k2.y - k1.y;\n            var denom = rx * sy - ry * sx;\n            if (Math.abs(denom) < 0.0001) { return null; }\n            var qx = k1.x - p.x, qy = k1.y - p.y;\n            var t = (qx * sy - qy * sx) \/ denom;\n            var u = (qx * ry - qy * rx) \/ denom;\n            if (t <= 0.04) { return null; }\n            if (t > 1) { return null; }\n            if (u < 0) { return null; }\n            if (u > 1) { return null; }\n            return { x: p.x + t * rx, y: p.y + t * ry };\n        }\n        function renderSite() {\n            var g = $(\"boSiteDraw\");\n            clear(g);\n            syncSeg(\"boSiteMode\", \"data-site-mode\", state.siteMode);\n            var same = state.siteMode === \"gleich\";\n            $(\"boSiteG1\").textContent = \"Baugebiet\";\n            $(\"boSiteG2\").textContent = same ? \"Baugebiet\" : \"Gebiet 2\";\n            $(\"boSiteResult\").textContent = same ? \"gekapert\" : \"sauber\";\n            card(g, 24, 16, 572, 358, \"Draufsicht: Verschneidung im Gebiet\");\n\n            var fp = { l: 168, r: 330, t: 168, b: 296 };\n            var D = 50;\n            var r2 = Math.SQRT1_2;\n            var samples = [\n                { p: { x: fp.l, y: fp.t }, n: { x: -r2, y: -r2 } },\n                { p: { x: 215, y: fp.t }, n: { x: 0, y: -1 } },\n                { p: { x: 282, y: fp.t }, n: { x: 0, y: -1 } },\n                { p: { x: fp.r, y: fp.t }, n: { x: r2, y: -r2 } },\n                { p: { x: fp.r, y: 205 }, n: { x: 1, y: 0 } },\n                { p: { x: fp.r, y: 258 }, n: { x: 1, y: 0 } },\n                { p: { x: fp.r, y: fp.b }, n: { x: r2, y: r2 } },\n                { p: { x: 282, y: fp.b }, n: { x: 0, y: 1 } },\n                { p: { x: 215, y: fp.b }, n: { x: 0, y: 1 } },\n                { p: { x: fp.l, y: fp.b }, n: { x: -r2, y: r2 } },\n                { p: { x: fp.l, y: 258 }, n: { x: -1, y: 0 } },\n                { p: { x: fp.l, y: 205 }, n: { x: -1, y: 0 } }\n            ];\n            var k1 = { x: 470, y: 150 }, k2 = { x: 250, y: 355 };\n\n            \/\/ Grundriss (Baugrube)\n            poly(g, [{ x: fp.l, y: fp.t }, { x: fp.r, y: fp.t }, { x: fp.r, y: fp.b }, { x: fp.l, y: fp.b }, { x: fp.l, y: fp.t }], { fill: \"#eef3f7\", stroke: COLORS.primary, \"stroke-width\": 2.4, \"stroke-linejoin\": \"round\" });\n            labelBox(g, (fp.l + fp.r) \/ 2, fp.t + 38, \"Grundriss \u00b7 Baugrube\", { width: 150, size: 9, color: COLORS.primaryDeep, fill: \"#fff\" });\n\n            \/\/ Endpunkte + Erfassung\n            var ends = samples.map(function (s) {\n                var clean = { x: s.p.x + s.n.x * D, y: s.p.y + s.n.y * D };\n                if (same) {\n                    var hitp = segInt(s.p, clean, k1, k2);\n                    if (hitp) { return { p: s.p, e: hitp, captured: true }; }\n                }\n                return { p: s.p, e: clean, captured: false };\n            });\n\n            \/\/ Erfasste Flaeche (warn) zwischen Grundriss und gekaperten Fuesssen\n            if (same) {\n                var capPoly = [];\n                ends.forEach(function (it) { if (it.captured) { capPoly.push(it.p); } });\n                var capE = [];\n                ends.forEach(function (it) { if (it.captured) { capE.push(it.e); } });\n                if (capPoly.length > 1) {\n                    var wedge = capPoly.concat(capE.reverse());\n                    poly(g, wedge, { fill: \"#fff3e0\", stroke: \"none\", opacity: 0.9 });\n                }\n            }\n\n            \/\/ Projektionslinien (Spokes)\n            ends.forEach(function (it) {\n                line(g, it.p.x, it.p.y, it.e.x, it.e.y, {\n                    stroke: it.captured ? COLORS.error : COLORS.slope,\n                    \"stroke-width\": it.captured ? 1.8 : 1.4,\n                    \"stroke-dasharray\": \"5 4\",\n                    opacity: 0.95\n                });\n            });\n\n            \/\/ Boeschungsfuss-Linie (durch die Endpunkte, geschlossen)\n            var ring = ends.map(function (it) { return it.e; });\n            ring.push(ends[0].e);\n            for (var i = 0; i < ring.length - 1; i += 1) {\n                var capSeg = ends[i].captured ? ends[(i + 1) % ends.length].captured : false;\n                line(g, ring[i].x, ring[i].y, ring[i + 1].x, ring[i + 1].y, {\n                    stroke: capSeg ? COLORS.error : COLORS.slopeDeep,\n                    \"stroke-width\": capSeg ? 3 : 2.4,\n                    \"stroke-linecap\": \"round\"\n                });\n            }\n\n            \/\/ Kreuzende Elementkante\n            if (same) {\n                line(g, k1.x, k1.y, k2.x, k2.y, { stroke: COLORS.lineB, \"stroke-width\": 3.4, \"stroke-linecap\": \"round\" });\n                \/\/ Teilungspunkte\n                ends.forEach(function (it) { if (it.captured) { rect(g, it.e.x - 4, it.e.y - 4, 8, 8, { fill: COLORS.accent, stroke: \"#fff\", \"stroke-width\": 1.4 }); } });\n                labelBox(g, 470, 132, \"kreuzende Kante \u00b7 Baugebiet\", { width: 178, size: 8.7, color: COLORS.lineB, fill: \"#fff\" });\n                labelBox(g, 396, 332, \"Verschneidung gekapert\", { width: 156, size: 9, fill: \"#fff3e0\", stroke: \"#fed7aa\", color: \"#b45309\" });\n            } else {\n                line(g, k1.x, k1.y, k2.x, k2.y, { stroke: COLORS.lineB, \"stroke-width\": 3, \"stroke-dasharray\": \"7 5\", \"stroke-linecap\": \"round\", opacity: 0.85 });\n                labelBox(g, 470, 132, \"kreuzende Kante \u00b7 Gebiet 2\", { width: 178, size: 8.7, color: COLORS.lineB, fill: \"#fff\" });\n                labelBox(g, 470, 250, \"anderes Gebiet, keine Wirkung\", { width: 188, size: 8.7, fill: \"#f0fdf4\", stroke: \"#bbf7d0\", color: COLORS.planDeep });\n            }\n\n            if (same) {\n                setVerdict(\"is-error\", \"gekapert\",\n                    \"<strong>Gleiches Gebiet, Verschneidung gekapert.<\/strong> Die kreuzende Elementkante zwingt die Projektionslinien an der Kreuzung auf ihre Linie. Der B\u00f6schungsfu\u00df bricht dort ab statt sauber im Gel\u00e4nde auszulaufen. Das ist die h\u00e4ufigste Anf\u00e4ngerfalle bei Verschneidungen. Lege die st\u00f6rende Kante in ein eigenes Gebiet.\",\n                    \"<strong>Merksatz:<\/strong> Alles im selben Gebiet interagiert. Eine fremde Elementkante im Verschneidungsgebiet kapert die B\u00f6schung an der Kreuzung.\");\n            } else {\n                setVerdict(\"is-good\", \"saubere Trennung\",\n                    \"<strong>Getrennte Gebiete.<\/strong> Die kreuzende Elementkante liegt in einem anderen Gebiet, also reagiert sie nicht mit der Verschneidung. Die Projektionslinien laufen ungest\u00f6rt bis zur B\u00f6schungsfu\u00df-Linie. So h\u00e4ltst du unabh\u00e4ngige Bauteile auseinander.\",\n                    \"<strong>Merksatz:<\/strong> Gebiete sind keine Ordner. Sie entscheiden, ob sich kreuzende Objekte h\u00f6henm\u00e4\u00dfig beeinflussen.\");\n            }\n        }\n\n        function renderVolume() {\n            var g = $(\"boVolDraw\");\n            clear(g);\n            syncSeg(\"boVolMode\", \"data-vol-mode\", state.volMode);\n            var n = state.volN, H = state.volH, W = state.volW, L = state.volL, fill = state.volMode === \"damm\";\n            var reachM = n * H;\n            var area = W * H + 0.5 * n * H * H;\n            var vol = area * L;\n            $(\"boVolNText\").textContent = \"1 : \" + fmt(n, 2);\n            $(\"boVolHText\").textContent = fmt(H, 1) + \" m\";\n            $(\"boVolWText\").textContent = fmt(W, 1) + \" m\";\n            $(\"boVolLText\").textContent = fmt(L, 0) + \" m\";\n            $(\"boVolArea\").textContent = fmt(area, 1) + \" m\u00b2\";\n            $(\"boVolVol\").textContent = fmt(vol, 0) + \" m\u00b3\";\n            $(\"boVolKind\").textContent = fill ? \"Auftrag\" : \"Abtrag\";\n\n            var pxPerM = 22;\n            var hPx = H * pxPerM, reachPx = n * hPx, wPx = W * pxPerM;\n            var totalW = wPx + reachPx;\n            var scale = Math.min(1, 470 \/ Math.max(1, totalW), 150 \/ Math.max(1, hPx));\n            hPx *= scale; reachPx *= scale; wPx *= scale;\n            card(g, 24, 16, 572, 358, fill ? \"Querschnitt: Auftrag (Damm)\" : \"Querschnitt: Abtrag (Einschnitt)\");\n            var x0 = 84;\n\n            if (fill) {\n                var yG = 314, yT = yG - hPx;\n                var xK = x0 + wPx, fx = xK + reachPx;\n                poly(g, [{ x: x0, y: yT }, { x: xK, y: yT }, { x: fx, y: yG }, { x: x0, y: yG }], { fill: COLORS.fillArea, stroke: \"none\", opacity: 0.9 });\n                line(g, 70, yG, 588, yG, { stroke: COLORS.ground, \"stroke-width\": 2.8, \"stroke-linecap\": \"round\" });\n                text(g, 540, yG + 17, \"Bestand\", { \"font-size\": 9.5, fill: COLORS.ground, \"text-anchor\": \"middle\", \"font-weight\": 700 });\n                line(g, x0, yT, xK, yT, { stroke: COLORS.plan, \"stroke-width\": 3.2, \"stroke-linecap\": \"round\" });\n                line(g, xK, yT, fx, yG, { stroke: COLORS.slope, \"stroke-width\": 4, \"stroke-linecap\": \"round\" });\n                dimH(g, x0, xK, yT - 16, \"B = \" + fmt(W, 1) + \" m\");\n                dimV(g, x0 - 26, yT, yG, \"H \" + fmt(H, 1));\n                labelBox(g, (x0 + xK) \/ 2, (yT + yG) \/ 2 + 4, \"Auftrag\", { width: 78, size: 10, color: COLORS.planDeep, fill: \"#fff\" });\n            } else {\n                var yGr = 118, yF = yGr + hPx;\n                var xKc = x0 + wPx, fxc = xKc + reachPx;\n                poly(g, [{ x: x0, y: yGr }, { x: fxc, y: yGr }, { x: xKc, y: yF }, { x: x0, y: yF }], { fill: COLORS.cutArea, stroke: \"none\", opacity: 0.9 });\n                line(g, 70, yGr, x0, yGr, { stroke: \"#9fb3c2\", \"stroke-width\": 1.8, \"stroke-dasharray\": \"5 4\", \"stroke-linecap\": \"round\" });\n                line(g, fxc, yGr, 588, yGr, { stroke: COLORS.ground, \"stroke-width\": 2.8, \"stroke-linecap\": \"round\" });\n                line(g, xKc, yGr, fxc, yGr, { stroke: \"#9fb3c2\", \"stroke-width\": 1.8, \"stroke-dasharray\": \"5 4\", \"stroke-linecap\": \"round\" });\n                text(g, 540, yGr - 9, \"Bestand\", { \"font-size\": 9.5, fill: COLORS.ground, \"text-anchor\": \"middle\", \"font-weight\": 700 });\n                line(g, x0, yF, xKc, yF, { stroke: COLORS.plan, \"stroke-width\": 3.2, \"stroke-linecap\": \"round\" });\n                line(g, xKc, yF, fxc, yGr, { stroke: COLORS.slope, \"stroke-width\": 4, \"stroke-linecap\": \"round\" });\n                dimH(g, x0, xKc, yF + 16, \"B = \" + fmt(W, 1) + \" m\");\n                dimV(g, fxc + 26, yGr, yF, \"H \" + fmt(H, 1));\n                labelBox(g, (x0 + xKc) \/ 2, (yGr + yF) \/ 2 + 4, \"Abtrag\", { width: 78, size: 10, color: \"#b45309\", fill: \"#fff\" });\n            }\n\n            var kind = fill ? \"Auftrag\" : \"Abtrag\";\n            setVerdict(\"\", kind + \" \" + fmt(vol, 0) + \" m\u00b3\",\n                \"<strong>\" + kind + \" rund \" + fmt(vol, 0) + \" m\u00b3.<\/strong> Querschnitt \" + fmt(area, 1) + \" m\u00b2 mal \" + fmt(L, 0) + \" m L\u00e4nge (Reichweite der B\u00f6schung \" + fmt(reachM, 2) + \" m). Das ist eine Faustzahl. F\u00fcr belastbare Massen rechnest du das Verschneidungs-DGM gegen den Bestand.\",\n                \"<strong>Merksatz:<\/strong> Echte Massen kommen aus dem Verschneidungsgruppen-DGM gegen eine Volumen-Basisoberfl\u00e4che. Ist keine Basisoberfl\u00e4che gesetzt, bleiben Abtrag und Auftrag leer.\");\n        }\n\n        function renderTopic() {\n            if (state.topic === \"anatomy\") { renderAnatomy(); }\n            else if (state.topic === \"gelaende\") { renderGelaende(); }\n            else if (state.topic === \"site\") { renderSite(); }\n            else { renderVolume(); }\n        }\n        function setTopic(topic) {\n            state.topic = topic;\n            ROOT.querySelectorAll(\".bo-focus-btn\").forEach(function (btn) {\n                btn.classList.toggle(\"is-active\", btn.getAttribute(\"data-bo-topic\") === topic);\n            });\n            ROOT.querySelectorAll(\".bo-topic\").forEach(function (panel) {\n                panel.classList.toggle(\"is-active\", panel.getAttribute(\"data-topic\") === topic);\n            });\n            renderTopic();\n        }\n\n        ROOT.addEventListener(\"click\", function (e) {\n            var topicBtn = e.target.closest ? e.target.closest(\"[data-bo-topic]\") : null;\n            if (topicBtn ? ROOT.contains(topicBtn) : false) { setTopic(topicBtn.getAttribute(\"data-bo-topic\")); return; }\n            var am = e.target.closest ? e.target.closest(\"[data-anat-mode]\") : null;\n            if (am ? ROOT.contains(am) : false) { state.anatMode = am.getAttribute(\"data-anat-mode\"); renderAnatomy(); return; }\n            var dm = e.target.closest ? e.target.closest(\"[data-dl-mode]\") : null;\n            if (dm ? ROOT.contains(dm) : false) { state.dlMode = dm.getAttribute(\"data-dl-mode\"); renderGelaende(); return; }\n            var sm = e.target.closest ? e.target.closest(\"[data-site-mode]\") : null;\n            if (sm ? ROOT.contains(sm) : false) { state.siteMode = sm.getAttribute(\"data-site-mode\"); renderSite(); return; }\n            var vm = e.target.closest ? e.target.closest(\"[data-vol-mode]\") : null;\n            if (vm ? ROOT.contains(vm) : false) { state.volMode = vm.getAttribute(\"data-vol-mode\"); renderVolume(); return; }\n        });\n\n        ROOT.addEventListener(\"input\", function (e) {\n            var id = e.target.id;\n            var v = parseFloat(e.target.value);\n            if (isNaN(v)) { v = 0; }\n            if (id === \"boAnatN\") { state.anatN = v; renderAnatomy(); }\n            else if (id === \"boAnatH\") { state.anatH = v; renderAnatomy(); }\n            else if (id === \"boDlN\") { state.dlN = v; renderGelaende(); }\n            else if (id === \"boDlH\") { state.dlH = v; renderGelaende(); }\n            else if (id === \"boVolN\") { state.volN = v; renderVolume(); }\n            else if (id === \"boVolH\") { state.volH = v; renderVolume(); }\n            else if (id === \"boVolW\") { state.volW = v; renderVolume(); }\n            else if (id === \"boVolL\") { state.volL = v; renderVolume(); }\n        });\n\n        renderTopic();\n    })();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>B\u00f6schungs-Explainer Neigung und Anatomie, Gel\u00e4ndeanschluss zum DGM, der Gebiets-Konflikt und eine grobe Massensch\u00e4tzung in einem interaktiven Querschnitt. L\u00e4uft komplett im [&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":[42],"tags":[],"class_list":["post-2265","post","type-post","status-publish","format-standard","hentry","category-boeschungen"],"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":"B\u00f6schungs-Explainer Neigung und Anatomie, Gel\u00e4ndeanschluss zum DGM, der Gebiets-Konflikt und eine grobe Massensch\u00e4tzung in einem interaktiven Querschnitt. L\u00e4uft komplett im [&hellip;]","_links":{"self":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/posts\/2265","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=2265"}],"version-history":[{"count":1,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/posts\/2265\/revisions"}],"predecessor-version":[{"id":2266,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/posts\/2265\/revisions\/2266"}],"wp:attachment":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}