{"id":1978,"date":"2026-04-21T07:17:21","date_gmt":"2026-04-21T05:17:21","guid":{"rendered":"https:\/\/cad-kompass.de\/?p=1978"},"modified":"2026-05-22T06:57:53","modified_gmt":"2026-05-22T04:57:53","slug":"gradienten-explainer","status":"publish","type":"post","link":"https:\/\/cad-kompass.de\/?p=1978","title":{"rendered":"Gradienten-Explainer"},"content":{"rendered":"\n<style>\n    .g2-box {\n        --gx-primary: #3f5f75;\n        --gx-primary-dark: #2c4a5e;\n        --gx-primary-deep: #1e3548;\n        --gx-ink: #1e293b;\n        --gx-text: #334155;\n        --gx-muted: #64748b;\n        --gx-border: #c8d6e0;\n        --gx-surface: #f7f9fb;\n        --gx-accent: #e8913a;\n        --gx-auftrag: #059669;\n        --gx-abtrag: #8b4513;\n        background: var(--gx-surface);\n        border: 3px solid var(--gx-primary);\n        border-radius: 8px;\n        margin: 28px 0;\n        overflow: hidden;\n        position: relative;\n        font-family: inherit;\n        color: var(--gx-text);\n        line-height: 1.55;\n    }\n    .g2-box *, .g2-box *::before, .g2-box *::after { box-sizing: border-box; }\n    .g2-header { background: linear-gradient(135deg, var(--gx-primary-deep) 0%, var(--gx-primary-dark) 100%); padding: 20px 28px 18px; position: relative; overflow: hidden; }\n    .g2-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--gx-primary) 0px, var(--gx-primary) 8px, transparent 8px, transparent 12px); }\n    .g2-header-top { display: flex; align-items: center; gap: 12px; }\n    .g2-header-icon { width: 36px; height: 36px; flex-shrink: 0; color: #fff; opacity: 0.9; }\n    .g2-box .g2-box-title { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0; }\n    .g2-box .g2-box-desc { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin: 0; line-height: 1.5; display: block; }\n\n    .g2-body { padding: 22px 28px 24px; }\n    .g2-privacy { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 3px; padding: 9px 14px; margin-bottom: 16px; font-size: 0.8rem; color: #15803d; line-height: 1.5; display: flex; align-items: center; gap: 8px; }\n    .g2-privacy::before { content: '\\1F512'; flex-shrink: 0; font-size: 0.9rem; }\n\n    .g2-viz-panel, .g2-control, .g2-stat, .g2-formula, .g2-note, .g2-compare, .g2-live, .g2-notes-row > .g2-note {\n        background: #fff;\n        border: 1px solid var(--gx-border);\n        border-radius: 4px;\n    }\n    .g2-viz-panel { padding: 12px; }\n    .g2-svg-wrap { position: relative; }\n    .g2-viz-panel svg#g2Svg { width: 100%; height: auto; display: block; }\n\n    \/* Live-Auswertung als horizontaler Streifen *\/\n    .g2-live {\n        display: grid;\n        grid-template-columns: minmax(150px, auto) 1fr;\n        gap: 12px 20px;\n        padding: 14px 18px;\n        margin-bottom: 12px;\n    }\n    .g2-live-head {\n        grid-column: 1 \/ 2;\n        grid-row: 1 \/ 3;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        gap: 9px;\n        padding-right: 18px;\n        border-right: 1px solid var(--gx-border);\n        align-self: stretch;\n    }\n    .g2-live-head h4 {\n        margin: 0;\n        color: var(--gx-muted);\n        font-size: 0.68rem;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 0.06em;\n    }\n    .g2-live-head .g2-chip {\n        align-self: flex-start;\n        font-size: 0.82rem;\n        padding: 4px 11px;\n        min-height: 26px;\n    }\n    .g2-live-stats {\n        grid-column: 2 \/ 3;\n        grid-row: 1 \/ 2;\n        display: grid;\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n        gap: 8px;\n    }\n    .g2-live-stats .g2-stat {\n        background: #f7f9fb;\n        border: 1px solid #dde7ee;\n        padding: 8px 10px;\n    }\n    .g2-live-formula {\n        grid-column: 2 \/ 3;\n        grid-row: 2 \/ 3;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: baseline;\n        gap: 4px 14px;\n        padding-top: 10px;\n        border-top: 1px dashed var(--gx-border);\n        font-size: 0.8rem;\n        font-variant-numeric: tabular-nums;\n        color: var(--gx-text);\n        font-weight: 600;\n    }\n    .g2-live-formula-label {\n        color: var(--gx-muted);\n        font-size: 0.66rem;\n        font-weight: 800;\n        text-transform: uppercase;\n        letter-spacing: 0.06em;\n        margin-right: 4px;\n    }\n    .g2-live-sep { color: #cbd5e1; font-weight: 700; }\n\n    \/* Lesart + Richtwert nebeneinander *\/\n    .g2-notes-row {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 10px;\n        margin-bottom: 14px;\n    }\n    .g2-notes-row .g2-note { margin-top: 0; }\n\n    \/* Export-Button als Overlay in der SVG-Ecke *\/\n    .g2-export-btn {\n        position: absolute;\n        top: 8px;\n        right: 8px;\n        appearance: none;\n        background: rgba(255,255,255,0.96);\n        backdrop-filter: blur(2px);\n        border: 1px solid var(--gx-border);\n        border-radius: 3px;\n        padding: 5px 9px 5px 8px;\n        font: inherit;\n        font-size: 0.72rem;\n        font-weight: 700;\n        color: var(--gx-text);\n        cursor: pointer;\n        display: inline-flex;\n        align-items: center;\n        gap: 5px;\n        box-shadow: 0 1px 4px rgba(15,30,45,0.09);\n        transition: border-color 0.15s, color 0.15s, transform 0.1s;\n        z-index: 2;\n    }\n    .g2-export-btn:hover, .g2-export-btn:focus-visible {\n        border-color: var(--gx-primary);\n        color: var(--gx-primary);\n        outline: none;\n    }\n    .g2-export-btn:active { transform: translateY(1px); }\n    .g2-export-btn svg { width: 13px; height: 13px; flex-shrink: 0; }\n    .g2-export-btn.is-busy { opacity: 0.6; cursor: wait; }\n    .g2-export-btn.is-done { color: var(--gx-auftrag); border-color: #bbf7d0; background: #f0fdf4; }\n    .g2-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gx-border); font-size: 0.78rem; color: var(--gx-muted); }\n    .g2-legend-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }\n    .g2-swatch { width: 15px; height: 10px; border-radius: 2px; border: 1px solid rgba(30,41,59,0.15); }\n    .g2-swatch-line { width: 24px; height: 0; border-top: 3px solid currentColor; border-radius: 99px; }\n    .g2-swatch-dash { width: 24px; height: 0; border-top: 2px dashed currentColor; }\n\n    .g2-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }\n    .g2-readout-cell { background: #f7f9fb; border: 1px solid #dde7ee; border-radius: 3px; padding: 8px 10px; min-width: 0; }\n    .g2-readout-label { display: block; color: var(--gx-muted); font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }\n    .g2-readout-value { display: block; color: var(--gx-ink); font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }\n\n    .g2-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; background: #edf4f8; border: 1px solid #cfe0ea; color: var(--gx-primary-deep); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }\n    .g2-chip.is-warn { background: #fffbeb; border-color: #f4cf81; color: #92700c; }\n    .g2-chip.is-good { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }\n\n    .g2-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }\n    .g2-stat { padding: 9px 10px; }\n    .g2-stat-label { color: var(--gx-muted); font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }\n    .g2-stat-value { color: var(--gx-ink); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }\n    .g2-stat-sub { color: var(--gx-muted); font-size: 0.72rem; margin-top: 1px; min-height: 1.1em; }\n\n    .g2-formula { margin-top: 10px; padding: 10px 12px; }\n    .g2-formula-label { color: var(--gx-muted); font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px; }\n    .g2-formula-line { color: var(--gx-ink); font-size: 0.86rem; font-weight: 700; font-variant-numeric: tabular-nums; }\n    .g2-formula-line + .g2-formula-line { margin-top: 3px; }\n\n    .g2-note { margin-top: 10px; padding: 10px 12px; background: #f0f5fa; border-left: 3px solid var(--gx-primary); font-size: 0.82rem; color: var(--gx-text); border-radius: 0 4px 4px 0; }\n    .g2-note strong { color: var(--gx-ink); }\n    .g2-note.is-warn { background: #fffbeb; border-left-color: #d97706; color: #92700c; }\n\n    .g2-compare { margin-top: 12px; padding: 12px 14px; }\n    .g2-compare-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }\n    .g2-compare-title { color: var(--gx-ink); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }\n    .g2-compare-status { color: var(--gx-muted); font-size: 0.72rem; font-weight: 700; white-space: nowrap; flex: 1; text-align: left; }\n    .g2-compare-actions { display: flex; gap: 7px; flex-wrap: wrap; }\n    .g2-compare-actions .g2-tool { padding: 0 14px; min-height: 32px; }\n    .g2-compare-actions .g2-tool[aria-label] svg { width: 14px; height: 14px; }\n    .g2-tool {\n        appearance: none;\n        min-height: 34px;\n        border: 1px solid var(--gx-border);\n        border-radius: 3px;\n        background: #fff;\n        color: var(--gx-text);\n        font: inherit;\n        font-size: 0.78rem;\n        font-weight: 800;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        cursor: pointer;\n        transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;\n    }\n    .g2-tool svg { width: 15px; height: 15px; flex-shrink: 0; }\n    .g2-tool:hover, .g2-tool:focus-visible { border-color: var(--gx-primary); outline: none; }\n    .g2-tool.is-primary { background: var(--gx-primary); color: #fff; border-color: var(--gx-primary); }\n    .g2-tool:disabled { opacity: 0.48; cursor: not-allowed; }\n    .g2-compare-grid {\n        display: grid;\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n        gap: 7px;\n        margin-top: 10px;\n        padding-top: 10px;\n        border-top: 1px dashed var(--gx-border);\n    }\n    .g2-compare-cell { background: #f7f9fb; border: 1px solid #dde7ee; border-radius: 3px; padding: 7px 9px; min-width: 0; }\n    .g2-compare-label { color: var(--gx-muted); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }\n    .g2-compare-value { color: var(--gx-ink); font-size: 0.86rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 1px; }\n    .g2-compare-empty {\n        color: var(--gx-muted);\n        font-size: 0.78rem;\n        line-height: 1.45;\n        margin-top: 10px;\n        padding-top: 10px;\n        border-top: 1px dashed var(--gx-border);\n    }\n\n    .g2-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0 12px; }\n    .g2-preset {\n        appearance: none;\n        border: 1px solid var(--gx-border);\n        background: #fff;\n        color: var(--gx-text);\n        border-radius: 3px;\n        min-height: 38px;\n        padding: 7px 9px;\n        font: inherit;\n        font-size: 0.82rem;\n        font-weight: 700;\n        cursor: pointer;\n        transition: background-color 0.15s, border-color 0.15s, color 0.15s;\n    }\n    .g2-preset:hover, .g2-preset:focus-visible { border-color: var(--gx-primary); outline: none; }\n    .g2-preset.is-active { background: var(--gx-primary); color: #fff; border-color: var(--gx-primary); }\n\n    .g2-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }\n    .g2-control { padding: 11px 12px; min-width: 0; }\n    .g2-control-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 7px; min-width: 0; }\n    .g2-control-label { flex: 1; min-width: 0; font-size: 0.8rem; font-weight: 700; color: var(--gx-ink); }\n    .g2-num-wrap { display: inline-flex; align-items: baseline; gap: 3px; flex-shrink: 0; }\n    .g2-num-input {\n        background: transparent;\n        border: none;\n        border-bottom: 1.5px solid transparent;\n        outline: none;\n        color: var(--gx-primary);\n        font: inherit;\n        font-size: 0.86rem;\n        font-weight: 800;\n        font-variant-numeric: tabular-nums;\n        text-align: right;\n        width: 64px;\n        padding: 0 0 1px;\n        border-radius: 2px 2px 0 0;\n        -moz-appearance: textfield;\n    }\n    .g2-num-input::-webkit-outer-spin-button,\n    .g2-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n    .g2-num-input:hover { border-bottom-color: var(--gx-border); }\n    .g2-num-input:focus { border-bottom-color: var(--gx-primary); background-color: rgba(63,95,117,0.05); }\n    .g2-num-unit { color: var(--gx-muted); font-size: 0.73rem; font-weight: 600; }\n    .g2-box .g2-slider {\n        -webkit-appearance: none !important;\n        -moz-appearance: none !important;\n        appearance: none !important;\n        width: 100% !important;\n        height: 5px !important;\n        padding: 0 !important;\n        margin: 0 !important;\n        background: #e2e8f0 !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        display: block !important;\n    }\n    .g2-box .g2-slider::-webkit-slider-runnable-track {\n        -webkit-appearance: none !important;\n        appearance: none !important;\n        height: 5px !important;\n        background: transparent !important;\n        border: 0 !important;\n        box-shadow: none !important;\n    }\n    .g2-box .g2-slider::-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(--gx-primary) !important;\n        border: 2px solid #fff !important;\n        box-shadow: 0 1px 3px rgba(0,0,0,0.22) !important;\n        margin-top: -6.5px !important;\n        cursor: pointer !important;\n    }\n    .g2-box .g2-slider::-moz-range-track {\n        height: 5px !important;\n        background: transparent !important;\n        border: 0 !important;\n        box-shadow: none !important;\n    }\n    .g2-box .g2-slider::-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(--gx-primary) !important;\n        border: 2px solid #fff !important;\n        box-shadow: 0 1px 3px rgba(0,0,0,0.22) !important;\n        cursor: pointer !important;\n    }\n    .g2-box .g2-slider::-moz-focus-outer { border: 0 !important; }\n    .g2-range-bounds { display: flex; justify-content: space-between; color: var(--gx-muted); font-size: 0.68rem; margin-top: 3px; font-variant-numeric: tabular-nums; }\n\n    .g2-segmented { display: flex; gap: 6px; }\n    .g2-radio { flex: 1; min-width: 0; }\n    .g2-radio input { position: absolute; opacity: 0; pointer-events: none; }\n    .g2-radio label { display: block; text-align: center; padding: 6px 8px; border: 1px solid var(--gx-border); border-radius: 3px; font-size: 0.8rem; font-weight: 700; cursor: pointer; background: #fff; color: var(--gx-text); transition: all 0.15s; }\n    .g2-radio input:focus-visible + label { outline: 2px solid rgba(63,95,117,0.28); outline-offset: 2px; }\n    .g2-radio input:checked + label { background: var(--gx-primary); color: #fff; border-color: var(--gx-primary); }\n\n    .g2-bottom-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }\n    .g2-bottom-info .g2-note { margin-top: 0; }\n\n    @media (max-width: 1024px) {\n        .g2-live { grid-template-columns: 1fr; gap: 12px; padding: 13px 16px; }\n        .g2-live-head {\n            grid-column: 1 \/ 2; grid-row: auto;\n            flex-direction: row; align-items: center; gap: 12px;\n            padding-right: 0; padding-bottom: 10px;\n            border-right: 0; border-bottom: 1px solid var(--gx-border);\n        }\n        .g2-live-head h4 { flex: 1; }\n        .g2-live-stats, .g2-live-formula { grid-column: 1 \/ 2; grid-row: auto; }\n        .g2-live-formula { padding-top: 8px; }\n    }\n    @media (max-width: 920px) {\n        .g2-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        .g2-readout { grid-template-columns: 1fr; }\n        .g2-notes-row { grid-template-columns: 1fr; }\n        .g2-live-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        .g2-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        .g2-export-btn .g2-export-label { display: none; }\n        .g2-export-btn { padding: 6px; }\n    }\n    @media (max-width: 700px) {\n        .g2-header { padding: 16px 20px 14px; }\n        .g2-body { padding: 18px 20px 20px; }\n        .g2-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n        .g2-controls, .g2-bottom-info { grid-template-columns: 1fr; }\n        .g2-num-input { width: 58px; }\n        .g2-compare-status { flex: 1 1 100%; }\n    }\n    @media (max-width: 430px) {\n        .g2-live-stats { grid-template-columns: 1fr; }\n        .g2-compare-grid { grid-template-columns: 1fr; }\n    }\n<\/style>\n\n<div class=\"g2-box\">\n    <div class=\"g2-header\">\n        <div class=\"g2-header-top\">\n            <svg class=\"g2-header-icon\" viewBox=\"0 0 36 36\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M4 24 Q 10 22, 14 24 Q 18 26, 22 24 Q 26 20, 32 22\" opacity=\"0.6\"\/>\n                <path d=\"M4 26 L 14 20 Q 18 14, 22 20 L 32 16\" stroke-width=\"2\"\/>\n            <\/svg>\n            <div>\n                <h3 class=\"g2-box-title\">Gradiente-Explainer<\/h3>\n                <span class=\"g2-box-desc\">Verstehe, wie Neigung, Halbmesser und H\u00f6henlage die Gradiente formen &#8211; und wo daraus Auftrag oder Abtrag entsteht.<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"g2-body\">\n        <div class=\"g2-privacy\">L\u00e4uft komplett im Browser. Keine Daten verlassen deinen Rechner.<\/div>\n\n        <div class=\"g2-live\">\n            <div class=\"g2-live-head\">\n                <h4>Live-Auswertung<\/h4>\n                <span class=\"g2-chip\" id=\"g2TypeChip\">Kuppe<\/span>\n            <\/div>\n            <div class=\"g2-live-stats\">\n                <div class=\"g2-stat\">\n                    <div class=\"g2-stat-label\">\u0394s<\/div>\n                    <div class=\"g2-stat-value\" id=\"g2StatDs\">3,50 %<\/div>\n                    <div class=\"g2-stat-sub\">Neigungswechsel<\/div>\n                <\/div>\n                <div class=\"g2-stat\">\n                    <div class=\"g2-stat-label\">L\u00e4nge L<\/div>\n                    <div class=\"g2-stat-value\" id=\"g2StatL\">175,0 m<\/div>\n                    <div class=\"g2-stat-sub\">TA bis TE<\/div>\n                <\/div>\n                <div class=\"g2-stat\">\n                    <div class=\"g2-stat-label\">Tangente T<\/div>\n                    <div class=\"g2-stat-value\" id=\"g2StatT\">87,5 m<\/div>\n                    <div class=\"g2-stat-sub\">TS bis TA\/TE<\/div>\n                <\/div>\n                <div class=\"g2-stat\">\n                    <div class=\"g2-stat-label\">Stichma\u00df f<\/div>\n                    <div class=\"g2-stat-value\" id=\"g2StatF\">1,53 m<\/div>\n                    <div class=\"g2-stat-sub\">TS zur Kurve<\/div>\n                <\/div>\n            <\/div>\n            <div class=\"g2-live-formula\">\n                <span class=\"g2-live-formula-label\">Rechenweg<\/span>\n                <span id=\"g2FormulaA\">A = |s\u2082 &#8211; s\u2081| = 3,50 %<\/span>\n                <span class=\"g2-live-sep\">\u00b7<\/span>\n                <span id=\"g2FormulaL\">L = H x A \/ 100 = 175,0 m<\/span>\n                <span class=\"g2-live-sep\">\u00b7<\/span>\n                <span id=\"g2FormulaF\">f = T x A \/ 400 = 1,53 m<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"g2-notes-row\">\n            <div class=\"g2-note\" id=\"g2Narrative\">\n                <strong>Lesart:<\/strong> Die Gradiente geht von steigender in fallende Neigung \u00fcber. Der h\u00f6chste Punkt liegt innerhalb der Ausrundung.\n            <\/div>\n            <div class=\"g2-note\" id=\"g2HminNote\">\n                <strong>Richtwert:<\/strong> Der gew\u00e4hlte Halbmesser ist f\u00fcr die gew\u00e4hlte Geschwindigkeit plausibel.\n            <\/div>\n        <\/div>\n\n        <div class=\"g2-presets\" aria-label=\"Beispiel-Szenarien\">\n            <button type=\"button\" class=\"g2-preset is-active\" data-preset=\"kuppe\">Kuppe<\/button>\n            <button type=\"button\" class=\"g2-preset\" data-preset=\"wanne\">Wanne<\/button>\n            <button type=\"button\" class=\"g2-preset\" data-preset=\"flach\">Flach<\/button>\n            <button type=\"button\" class=\"g2-preset\" data-preset=\"kritisch\">Knapper H<\/button>\n        <\/div>\n\n        <div class=\"g2-viz-panel\">\n            <div class=\"g2-svg-wrap\">\n                <button type=\"button\" class=\"g2-export-btn\" id=\"g2ExportPng\" title=\"Visualisierung als PNG-Bild speichern\">\n                    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/>\n                        <polyline points=\"7 10 12 15 17 10\"\/>\n                        <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/>\n                    <\/svg>\n                    <span class=\"g2-export-label\">PNG speichern<\/span>\n                <\/button>\n                <svg id=\"g2Svg\" viewBox=\"0 0 960 420\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"Interaktive Gradientenvisualisierung mit Gel\u00e4nde, Tangenten, Ausrundung, Auftrag und Abtrag\">\n                        <defs>\n                            <marker id=\"g2Arrow\" viewBox=\"0 0 10 10\" refX=\"8\" refY=\"5\" markerWidth=\"7\" markerHeight=\"7\" orient=\"auto-start-reverse\">\n                                <path d=\"M 0 0 L 10 5 L 0 10 z\" fill=\"#64748b\"\/>\n                            <\/marker>\n                            <pattern id=\"g2AbtragPattern\" patternUnits=\"userSpaceOnUse\" width=\"6\" height=\"6\" patternTransform=\"rotate(45)\">\n                                <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"6\" stroke=\"#8b4513\" stroke-width=\"1.5\"\/>\n                            <\/pattern>\n                            <pattern id=\"g2AuftragPattern\" patternUnits=\"userSpaceOnUse\" width=\"6\" height=\"6\" patternTransform=\"rotate(-45)\">\n                                <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"6\" stroke=\"#059669\" stroke-width=\"1.5\"\/>\n                            <\/pattern>\n                            <clipPath id=\"g2PlotClip\">\n                                <rect x=\"70\" y=\"36\" width=\"840\" height=\"274\"\/>\n                            <\/clipPath>\n                        <\/defs>\n\n                        <rect x=\"70\" y=\"36\" width=\"840\" height=\"274\" fill=\"#fff\"\/>\n                        <g stroke=\"#eef2f6\" stroke-width=\"0.7\">\n                            <line x1=\"70\" y1=\"82\" x2=\"910\" y2=\"82\"\/>\n                            <line x1=\"70\" y1=\"128\" x2=\"910\" y2=\"128\"\/>\n                            <line x1=\"70\" y1=\"174\" x2=\"910\" y2=\"174\"\/>\n                            <line x1=\"70\" y1=\"220\" x2=\"910\" y2=\"220\"\/>\n                            <line x1=\"70\" y1=\"266\" x2=\"910\" y2=\"266\"\/>\n                            <line x1=\"238\" y1=\"36\" x2=\"238\" y2=\"310\"\/>\n                            <line x1=\"406\" y1=\"36\" x2=\"406\" y2=\"310\"\/>\n                            <line x1=\"574\" y1=\"36\" x2=\"574\" y2=\"310\"\/>\n                            <line x1=\"742\" y1=\"36\" x2=\"742\" y2=\"310\"\/>\n                        <\/g>\n                        <line x1=\"70\" y1=\"36\" x2=\"70\" y2=\"310\" stroke=\"#1e293b\" stroke-width=\"2\"\/>\n                        <line x1=\"70\" y1=\"310\" x2=\"910\" y2=\"310\" stroke=\"#1e293b\" stroke-width=\"2\"\/>\n                        <text transform=\"rotate(-90)\" x=\"-172\" y=\"48\" font-family=\"sans-serif\" font-size=\"10\" fill=\"#1e293b\" text-anchor=\"middle\">H\u00f6he<\/text>\n                        <text x=\"858\" y=\"328\" font-family=\"sans-serif\" font-size=\"10\" fill=\"#1e293b\">Station<\/text>\n                        <g id=\"g2StationTicks\" font-family=\"sans-serif\" font-size=\"9\" fill=\"#64748b\" text-anchor=\"middle\">\n                            <text x=\"70\" y=\"328\">0<\/text>\n                            <text x=\"238\" y=\"328\">100<\/text>\n                            <text x=\"406\" y=\"328\">200<\/text>\n                            <text x=\"574\" y=\"328\">300<\/text>\n                            <text x=\"742\" y=\"328\">400<\/text>\n                            <text x=\"910\" y=\"328\">500 m<\/text>\n                        <\/g>\n\n                        <g clip-path=\"url(#g2PlotClip)\">\n                            <path id=\"g2TerrainFill\" d=\"\" fill=\"#16a34a12\" stroke=\"none\"\/>\n                            <path id=\"g2AbtragBase\" d=\"\" fill=\"#8b451326\" stroke=\"none\"\/>\n                            <path id=\"g2AuftragBase\" d=\"\" fill=\"#05966924\" stroke=\"none\"\/>\n                            <path id=\"g2AbtragHatch\" d=\"\" fill=\"#8b451312\" stroke=\"none\"\/>\n                            <path id=\"g2AuftragHatch\" d=\"\" fill=\"#05966912\" stroke=\"none\"\/>\n                            <line id=\"g2Tangent1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"0\" stroke=\"#3f5f75\" stroke-width=\"1.6\" stroke-dasharray=\"7 5\" opacity=\"0.72\"\/>\n                            <line id=\"g2Tangent2\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"0\" stroke=\"#3f5f75\" stroke-width=\"1.6\" stroke-dasharray=\"7 5\" opacity=\"0.72\"\/>\n                            <path id=\"g2Terrain\" d=\"\" stroke=\"#16a34a\" stroke-width=\"2.8\" fill=\"none\" stroke-linecap=\"round\"\/>\n                            <path id=\"g2CompareGradient\" d=\"\" stroke=\"#e8913a\" stroke-width=\"2.5\" fill=\"none\" stroke-linecap=\"round\" stroke-dasharray=\"9 6\" opacity=\"0\"\/>\n                            <path id=\"g2Gradient\" d=\"\" stroke=\"#3f5f75\" stroke-width=\"3\" fill=\"none\" stroke-linecap=\"round\"\/>\n                            <path id=\"g2GradientCurve\" d=\"\" stroke=\"#e8913a\" stroke-width=\"3.4\" fill=\"none\" stroke-linecap=\"round\"\/>\n                            <line id=\"g2ProbeLine\" x1=\"0\" y1=\"36\" x2=\"0\" y2=\"310\" stroke=\"#e8913a\" stroke-width=\"1.4\" stroke-dasharray=\"4 4\"\/>\n                            <circle id=\"g2ProbeTerrain\" cx=\"0\" cy=\"0\" r=\"4\" fill=\"#16a34a\" stroke=\"#fff\" stroke-width=\"1.2\"\/>\n                            <circle id=\"g2ProbeGradient\" cx=\"0\" cy=\"0\" r=\"4\" fill=\"#3f5f75\" stroke=\"#fff\" stroke-width=\"1.2\"\/>\n                        <\/g>\n\n                        <line id=\"g2DimL\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"0\" stroke=\"#64748b\" stroke-width=\"0.9\"\/>\n                        <line id=\"g2DimT\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"0\" stroke=\"#64748b\" stroke-width=\"0.9\"\/>\n                        <line id=\"g2DimDh\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"0\" stroke=\"#64748b\" stroke-width=\"0.9\"\/>\n                        <line id=\"g2DimDhGuide1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"0\" stroke=\"#94a3b8\" stroke-width=\"0.7\" stroke-dasharray=\"2 2\"\/>\n                        <line id=\"g2DimDhGuide2\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"0\" stroke=\"#94a3b8\" stroke-width=\"0.7\" stroke-dasharray=\"2 2\"\/>\n\n                        <line id=\"g2TickTA\" x1=\"0\" y1=\"310\" x2=\"0\" y2=\"319\" stroke=\"#94a3b8\" stroke-width=\"1.5\"\/>\n                        <line id=\"g2TickTS\" x1=\"0\" y1=\"310\" x2=\"0\" y2=\"319\" stroke=\"#e8913a\" stroke-width=\"1.5\"\/>\n                        <line id=\"g2TickTE\" x1=\"0\" y1=\"310\" x2=\"0\" y2=\"319\" stroke=\"#94a3b8\" stroke-width=\"1.5\"\/>\n\n                        <circle id=\"g2PointTA\" cx=\"0\" cy=\"0\" r=\"4.5\" fill=\"#3f5f75\" stroke=\"#fff\" stroke-width=\"1.2\"\/>\n                        <circle id=\"g2PointTE\" cx=\"0\" cy=\"0\" r=\"4.5\" fill=\"#3f5f75\" stroke=\"#fff\" stroke-width=\"1.2\"\/>\n                        <circle id=\"g2PointTS\" cx=\"0\" cy=\"0\" r=\"5.5\" fill=\"#fff\" stroke=\"#3f5f75\" stroke-width=\"2\"\/>\n                        <circle id=\"g2PointPeak\" cx=\"0\" cy=\"0\" r=\"5\" fill=\"#e8913a\" stroke=\"#fff\" stroke-width=\"1.2\"\/>\n\n                        <g id=\"g2LabelTA\">\n                            <rect x=\"-15\" y=\"-8\" width=\"30\" height=\"16\" rx=\"3\" fill=\"#fff\" stroke=\"#c8d6e0\" stroke-width=\"0.8\"\/>\n                            <text y=\"4\" font-family=\"sans-serif\" font-size=\"10\" font-weight=\"700\" fill=\"#1e3548\" text-anchor=\"middle\">TA<\/text>\n                        <\/g>\n                        <g id=\"g2LabelTS\">\n                            <rect x=\"-15\" y=\"-8\" width=\"30\" height=\"16\" rx=\"3\" fill=\"#fff\" stroke=\"#3f5f75\" stroke-width=\"0.8\"\/>\n                            <text y=\"4\" font-family=\"sans-serif\" font-size=\"10\" font-weight=\"700\" fill=\"#3f5f75\" text-anchor=\"middle\">TS<\/text>\n                        <\/g>\n                        <g id=\"g2LabelTE\">\n                            <rect x=\"-15\" y=\"-8\" width=\"30\" height=\"16\" rx=\"3\" fill=\"#fff\" stroke=\"#c8d6e0\" stroke-width=\"0.8\"\/>\n                            <text y=\"4\" font-family=\"sans-serif\" font-size=\"10\" font-weight=\"700\" fill=\"#1e3548\" text-anchor=\"middle\">TE<\/text>\n                        <\/g>\n                        <g id=\"g2LabelPeak\">\n                            <rect x=\"-30\" y=\"-8\" width=\"60\" height=\"16\" rx=\"3\" fill=\"#fff\" stroke=\"#e8913a\" stroke-width=\"0.8\"\/>\n                            <text id=\"g2PeakText\" y=\"4\" font-family=\"sans-serif\" font-size=\"10\" font-weight=\"700\" fill=\"#e8913a\" text-anchor=\"middle\">Scheitel<\/text>\n                        <\/g>\n                        <g id=\"g2LabelL\">\n                            <rect x=\"-38\" y=\"-8\" width=\"76\" height=\"16\" rx=\"3\" fill=\"#fff\" stroke=\"#c8d6e0\" stroke-width=\"0.8\"\/>\n                            <text id=\"g2LabelLText\" y=\"4\" font-family=\"sans-serif\" font-size=\"10\" font-weight=\"700\" fill=\"#1e3548\" text-anchor=\"middle\">L<\/text>\n                        <\/g>\n                        <g id=\"g2LabelT\">\n                            <rect x=\"-36\" y=\"-8\" width=\"72\" height=\"16\" rx=\"3\" fill=\"#fff\" stroke=\"#c8d6e0\" stroke-width=\"0.8\"\/>\n                            <text id=\"g2LabelTText\" y=\"4\" font-family=\"sans-serif\" font-size=\"10\" font-weight=\"700\" fill=\"#1e3548\" text-anchor=\"middle\">T<\/text>\n                        <\/g>\n                        <g id=\"g2LabelDh\">\n                            <rect x=\"-38\" y=\"-8\" width=\"76\" height=\"16\" rx=\"3\" fill=\"#fff\" stroke=\"#c8d6e0\" stroke-width=\"0.8\"\/>\n                            <text id=\"g2LabelDhText\" y=\"4\" font-family=\"sans-serif\" font-size=\"10\" font-weight=\"700\" fill=\"#1e3548\" text-anchor=\"middle\">f<\/text>\n                        <\/g>\n                        <g id=\"g2ProbeLabel\">\n                            <rect x=\"-46\" y=\"-11\" width=\"92\" height=\"22\" rx=\"11\" fill=\"#fff\" stroke=\"#e8913a\" stroke-width=\"1.2\"\/>\n                            <text id=\"g2ProbeLabelText\" y=\"4\" font-family=\"sans-serif\" font-size=\"10\" font-weight=\"700\" fill=\"#e8913a\" text-anchor=\"middle\">Sta. \u2013<\/text>\n                        <\/g>\n                    <\/svg>\n                <\/div>\n\n                <div class=\"g2-legend\">\n                    <span class=\"g2-legend-item\"><span class=\"g2-swatch-line\" style=\"color:#16a34a\"><\/span>Gel\u00e4nde<\/span>\n                    <span class=\"g2-legend-item\"><span class=\"g2-swatch-line\" style=\"color:#3f5f75\"><\/span>Gradiente<\/span>\n                    <span class=\"g2-legend-item\"><span class=\"g2-swatch-line\" style=\"color:#e8913a\"><\/span>Ausrundung TA\u2192TE<\/span>\n                    <span class=\"g2-legend-item\"><span class=\"g2-swatch-dash\" style=\"color:#3f5f75\"><\/span>Tangenten<\/span>\n                    <span class=\"g2-legend-item\"><span class=\"g2-swatch-dash\" style=\"color:#e8913a\"><\/span>Vorher-Vergleich<\/span>\n                    <span class=\"g2-legend-item\"><span class=\"g2-swatch\" style=\"background:#8b451326\"><\/span>Abtrag<\/span>\n                    <span class=\"g2-legend-item\"><span class=\"g2-swatch\" style=\"background:#05966924\"><\/span>Auftrag<\/span>\n                    <span class=\"g2-legend-item\"><span class=\"g2-swatch\" style=\"background:#e8913a\"><\/span>Messstation<\/span>\n                <\/div>\n\n            <div class=\"g2-readout\">\n                <div class=\"g2-readout-cell\">\n                    <span class=\"g2-readout-label\">Station<\/span>\n                    <span class=\"g2-readout-value\" id=\"g2ProbeStation\">250 m<\/span>\n                <\/div>\n                <div class=\"g2-readout-cell\">\n                    <span class=\"g2-readout-label\">Gel\u00e4nde \/ Gradiente<\/span>\n                    <span class=\"g2-readout-value\" id=\"g2ProbeHeights\">211,2 \/ 212,2 m<\/span>\n                <\/div>\n                <div class=\"g2-readout-cell\">\n                    <span class=\"g2-readout-label\">Differenz<\/span>\n                    <span class=\"g2-readout-value\" id=\"g2ProbeDelta\">Auftrag 1,00 m<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"g2-compare\">\n            <div class=\"g2-compare-head\">\n                <span class=\"g2-compare-title\">Vergleich vorher \/ nachher<\/span>\n                <span class=\"g2-compare-status\" id=\"g2CompareStatus\">kein Vergleich<\/span>\n                <div class=\"g2-compare-actions\">\n                    <button type=\"button\" class=\"g2-tool is-primary\" id=\"g2SaveCompare\">\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                            <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z\"\/>\n                            <path d=\"M17 21v-8H7v8\"\/>\n                            <path d=\"M7 3v5h8\"\/>\n                        <\/svg>\n                        Vergleich merken\n                    <\/button>\n                    <button type=\"button\" class=\"g2-tool\" id=\"g2ClearCompare\" title=\"Vergleich l\u00f6schen\" aria-label=\"Vergleich l\u00f6schen\" disabled>\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                            <path d=\"M3 6h18\"\/>\n                            <path d=\"M8 6V4h8v2\"\/>\n                            <path d=\"M19 6l-1 14H6L5 6\"\/>\n                            <path d=\"M10 11v5\"\/>\n                            <path d=\"M14 11v5\"\/>\n                        <\/svg>\n                        L\u00f6schen\n                    <\/button>\n                <\/div>\n            <\/div>\n            <div id=\"g2CompareEmpty\" class=\"g2-compare-empty\">Merke eine Ausgangslage und bewege danach die Regler. Die alte Gradiente bleibt orange gestrichelt stehen.<\/div>\n            <div id=\"g2CompareGrid\" class=\"g2-compare-grid\" hidden>\n                <div class=\"g2-compare-cell\">\n                    <div class=\"g2-compare-label\">\u0394 H\u00f6he Messstation<\/div>\n                    <div class=\"g2-compare-value\" id=\"g2CmpProbe\">0,00 m<\/div>\n                <\/div>\n                <div class=\"g2-compare-cell\">\n                    <div class=\"g2-compare-label\">\u0394 L\u00e4nge L<\/div>\n                    <div class=\"g2-compare-value\" id=\"g2CmpL\">0,0 m<\/div>\n                <\/div>\n                <div class=\"g2-compare-cell\">\n                    <div class=\"g2-compare-label\">\u0394 Halbmesser<\/div>\n                    <div class=\"g2-compare-value\" id=\"g2CmpH\">0 m<\/div>\n                <\/div>\n                <div class=\"g2-compare-cell\">\n                    <div class=\"g2-compare-label\">\u0394 TS-H\u00f6henlage<\/div>\n                    <div class=\"g2-compare-value\" id=\"g2CmpOffset\">0,00 m<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"g2-controls\">\n            <div class=\"g2-control\">\n                <div class=\"g2-control-header\">\n                    <span class=\"g2-control-label\">Anfangsneigung s<sub>1<\/sub><\/span>\n                    <span class=\"g2-num-wrap\"><input type=\"number\" class=\"g2-num-input\" id=\"g2NumS1\" min=\"-10\" max=\"10\" step=\"0.1\" value=\"2.0\"><span class=\"g2-num-unit\">%<\/span><\/span>\n                <\/div>\n                <input type=\"range\" class=\"g2-slider\" id=\"g2S1\" min=\"-10\" max=\"10\" step=\"0.1\" value=\"2.0\">\n                <div class=\"g2-range-bounds\"><span>-10 %<\/span><span>+10 %<\/span><\/div>\n            <\/div>\n\n            <div class=\"g2-control\">\n                <div class=\"g2-control-header\">\n                    <span class=\"g2-control-label\">Endneigung s<sub>2<\/sub><\/span>\n                    <span class=\"g2-num-wrap\"><input type=\"number\" class=\"g2-num-input\" id=\"g2NumS2\" min=\"-10\" max=\"10\" step=\"0.1\" value=\"-1.5\"><span class=\"g2-num-unit\">%<\/span><\/span>\n                <\/div>\n                <input type=\"range\" class=\"g2-slider\" id=\"g2S2\" min=\"-10\" max=\"10\" step=\"0.1\" value=\"-1.5\">\n                <div class=\"g2-range-bounds\"><span>-10 %<\/span><span>+10 %<\/span><\/div>\n            <\/div>\n\n            <div class=\"g2-control\">\n                <div class=\"g2-control-header\">\n                    <span class=\"g2-control-label\">Halbmesser H<\/span>\n                    <span class=\"g2-num-wrap\"><input type=\"number\" class=\"g2-num-input\" id=\"g2NumH\" min=\"500\" max=\"20000\" step=\"100\" value=\"5000\"><span class=\"g2-num-unit\">m<\/span><\/span>\n                <\/div>\n                <input type=\"range\" class=\"g2-slider\" id=\"g2H\" min=\"500\" max=\"20000\" step=\"100\" value=\"5000\">\n                <div class=\"g2-range-bounds\"><span>500 m<\/span><span>20 000 m<\/span><\/div>\n            <\/div>\n\n            <div class=\"g2-control\">\n                <div class=\"g2-control-header\">\n                    <span class=\"g2-control-label\">TS-Station<\/span>\n                    <span class=\"g2-num-wrap\"><input type=\"number\" class=\"g2-num-input\" id=\"g2NumSts\" min=\"100\" max=\"400\" step=\"5\" value=\"250\"><span class=\"g2-num-unit\">m<\/span><\/span>\n                <\/div>\n                <input type=\"range\" class=\"g2-slider\" id=\"g2Sts\" min=\"100\" max=\"400\" step=\"5\" value=\"250\">\n                <div class=\"g2-range-bounds\"><span>100 m<\/span><span>400 m<\/span><\/div>\n            <\/div>\n\n            <div class=\"g2-control\">\n                <div class=\"g2-control-header\">\n                    <span class=\"g2-control-label\">H\u00f6henlage bei TS<\/span>\n                    <span class=\"g2-num-wrap\"><input type=\"number\" class=\"g2-num-input\" id=\"g2NumOffset\" min=\"-3\" max=\"4\" step=\"0.1\" value=\"1.0\"><span class=\"g2-num-unit\">m<\/span><\/span>\n                <\/div>\n                <input type=\"range\" class=\"g2-slider\" id=\"g2Offset\" min=\"-3\" max=\"4\" step=\"0.1\" value=\"1.0\">\n                <div class=\"g2-range-bounds\"><span>-3 m<\/span><span>+4 m<\/span><\/div>\n            <\/div>\n\n            <div class=\"g2-control\">\n                <div class=\"g2-control-header\">\n                    <span class=\"g2-control-label\">Messstation<\/span>\n                    <span class=\"g2-num-wrap\"><input type=\"number\" class=\"g2-num-input\" id=\"g2NumProbe\" min=\"0\" max=\"500\" step=\"5\" value=\"250\"><span class=\"g2-num-unit\">m<\/span><\/span>\n                <\/div>\n                <input type=\"range\" class=\"g2-slider\" id=\"g2Probe\" min=\"0\" max=\"500\" step=\"5\" value=\"250\">\n                <div class=\"g2-range-bounds\"><span>0 m<\/span><span>500 m<\/span><\/div>\n            <\/div>\n\n            <div class=\"g2-control\">\n                <div class=\"g2-control-header\">\n                    <span class=\"g2-control-label\">Ausrundungstyp<\/span>\n                <\/div>\n                <div class=\"g2-segmented\">\n                    <span class=\"g2-radio\">\n                        <input type=\"radio\" name=\"g2Form\" id=\"g2FormPar\" value=\"parabel\" checked>\n                        <label for=\"g2FormPar\">Parabel<\/label>\n                    <\/span>\n                    <span class=\"g2-radio\">\n                        <input type=\"radio\" name=\"g2Form\" id=\"g2FormKreis\" value=\"kreis\">\n                        <label for=\"g2FormKreis\">Kreisbogen<\/label>\n                    <\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"g2-control\">\n                <div class=\"g2-control-header\">\n                    <span class=\"g2-control-label\">Entwurfsgeschwindigkeit V<sub>e<\/sub><\/span>\n                    <span class=\"g2-num-wrap\"><input type=\"number\" class=\"g2-num-input\" id=\"g2NumVe\" min=\"30\" max=\"120\" step=\"10\" value=\"70\"><span class=\"g2-num-unit\">km\/h<\/span><\/span>\n                <\/div>\n                <input type=\"range\" class=\"g2-slider\" id=\"g2Ve\" min=\"30\" max=\"120\" step=\"10\" value=\"70\">\n                <div class=\"g2-range-bounds\"><span>30 km\/h<\/span><span>120 km\/h<\/span><\/div>\n            <\/div>\n\n        <\/div>\n\n        <div class=\"g2-bottom-info\">\n            <div class=\"g2-note\">\n                <strong>Was ich anders l\u00f6sen w\u00fcrde:<\/strong> Erst die geometrische Kette sichtbar machen: TS ist der Tangentenschnitt, TA\/TE begrenzen die Ausrundung, L und T entstehen direkt aus \u0394s und H. Die Erdbewegung ist danach nur noch die Differenz zwischen Gel\u00e4nde und Gradiente.\n            <\/div>\n            <div class=\"g2-note\">\n                <strong>Merksatz:<\/strong> Gr\u00f6\u00dferer Halbmesser macht die Kurve l\u00e4nger und weicher. Gr\u00f6\u00dfere Neigungsdifferenz macht die Ausrundung l\u00e4nger und das Stichma\u00df gr\u00f6\u00dfer. Die H\u00f6henlage verschiebt nur Auftrag und Abtrag, nicht die Form.\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    var STATION_MIN = 0;\n    var STATION_MAX = 500;\n    var HEIGHT_MIN = 204;\n    var HEIGHT_MAX = 218;\n    var GROUND = [\n        [0, 206.2], [25, 207.0], [50, 206.4], [75, 207.2], [100, 208.5],\n        [125, 209.3], [150, 210.1], [175, 211.0], [200, 211.4], [225, 211.7],\n        [250, 211.2], [275, 210.8], [300, 210.6], [325, 211.1], [350, 212.0],\n        [375, 213.1], [400, 213.9], [425, 214.3], [450, 214.6], [475, 214.9], [500, 215.2]\n    ];\n    var VB = { x0: 70, x1: 910, y0: 36, y1: 310 };\n    var presets = {\n        kuppe:   { s1: 2.0,  s2: -1.5, H: 5000,  sts: 250, offset: 1.0, probe: 250, ve: 70, form: \"parabel\" },\n        wanne:   { s1: -2.4, s2: 1.8,  H: 3200,  sts: 255, offset: 0.4, probe: 255, ve: 70, form: \"parabel\" },\n        flach:   { s1: 0.8,  s2: 0.1,  H: 9000,  sts: 245, offset: 0.6, probe: 245, ve: 80, form: \"parabel\" },\n        kritisch:{ s1: 4.2,  s2: -3.8, H: 1400,  sts: 230, offset: 1.3, probe: 230, ve: 80, form: \"parabel\" }\n    };\n    var compareModel = null;\n\n    function el(id) { return document.getElementById(id); }\n    function clamp(v, min, max) { return Math.max(min, Math.min(max, v)); }\n    function sign(v) { return v >= 0 ? \"+\" : \"\"; }\n    function de(value, digits) { return Number(value).toFixed(digits).replace(\".\", \",\"); }\n    function deInt(value) { return Math.round(value).toLocaleString(\"de-DE\"); }\n    function deSigned(value, digits, unit) {\n        var threshold = Math.pow(10, -digits) \/ 2;\n        var normalized = Math.abs(value) < threshold ? 0 : value;\n        return (normalized > 0 ? \"+\" : \"\") + de(normalized, digits) + (unit ? \" \" + unit : \"\");\n    }\n    function toX(station) { return VB.x0 + (station - STATION_MIN) \/ (STATION_MAX - STATION_MIN) * (VB.x1 - VB.x0); }\n    function toY(height) { return VB.y1 - (height - HEIGHT_MIN) \/ (HEIGHT_MAX - HEIGHT_MIN) * (VB.y1 - VB.y0); }\n    function setAttrs(id, attrs) {\n        var node = el(id);\n        for (var key in attrs) node.setAttribute(key, attrs[key]);\n    }\n    function move(id, x, y) {\n        el(id).setAttribute(\"transform\", \"translate(\" + deDot(x, 1) + \",\" + deDot(y, 1) + \")\");\n    }\n    function deDot(value, digits) { return Number(value).toFixed(digits); }\n\n    function groundH(station) {\n        if (station <= GROUND[0][0]) return GROUND[0][1];\n        for (var i = 0; i < GROUND.length - 1; i++) {\n            var a = GROUND[i];\n            var b = GROUND[i + 1];\n            if (station >= a[0]) {\n                if (station <= b[0]) {\n                    var t = (station - a[0]) \/ (b[0] - a[0]);\n                    return a[1] + t * (b[1] - a[1]);\n                }\n            }\n        }\n        return GROUND[GROUND.length - 1][1];\n    }\n\n    function linePath(points, yAccessor) {\n        var d = \"\";\n        for (var i = 0; i < points.length; i++) {\n            d += (i ? \" L \" : \"M \") + deDot(toX(points[i][0]), 1) + \" \" + deDot(toY(yAccessor(points[i])), 1);\n        }\n        return d;\n    }\n\n    function terrainPath() {\n        return linePath(GROUND, function(point) { return point[1]; });\n    }\n\n    function makeModel() {\n        var s1 = parseFloat(el(\"g2S1\").value);\n        var s2 = parseFloat(el(\"g2S2\").value);\n        var H = parseFloat(el(\"g2H\").value);\n        var sTS = parseFloat(el(\"g2Sts\").value);\n        var offset = parseFloat(el(\"g2Offset\").value);\n        var ve = parseFloat(el(\"g2Ve\").value);\n        var probe = parseFloat(el(\"g2Probe\").value);\n        var form = document.querySelector(\"input[name='g2Form']:checked\").value;\n        var ds = Math.abs(s1 - s2);\n        var L = 0;\n        var T = 0;\n\n        if (ds > 0.001) {\n            if (form === \"kreis\") {\n                var a1 = Math.atan(s1 \/ 100);\n                var a2 = Math.atan(s2 \/ 100);\n                var delta = Math.abs(a1 - a2);\n                L = H * delta;\n                T = H * Math.tan(delta \/ 2);\n            } else {\n                L = H * ds \/ 100;\n                T = L \/ 2;\n            }\n        }\n\n        var hTS = groundH(sTS) + offset;\n        var hTA = hTS - T * s1 \/ 100;\n        var hTE = hTS + T * s2 \/ 100;\n        return { s1: s1, s2: s2, H: H, sTS: sTS, offset: offset, ve: ve, probe: probe, form: form, ds: ds, L: L, T: T, hTS: hTS, hTA: hTA, hTE: hTE, sTA: sTS - T, sTE: sTS + T };\n    }\n\n    function gradientH(station, model) {\n        var m1 = model.s1 \/ 100;\n        var m2 = model.s2 \/ 100;\n        if (model.L <= 0.001) {\n            return model.hTS + (station - model.sTS) * m1;\n        }\n        if (station < model.sTA) {\n            return model.hTA - (model.sTA - station) * m1;\n        }\n        if (station > model.sTE) {\n            return model.hTE + (station - model.sTE) * m2;\n        }\n\n        var x = station - model.sTA;\n        return model.hTA + m1 * x + (m2 - m1) \/ (2 * model.L) * x * x;\n    }\n\n    function tangentH(station, model, which) {\n        if (which === 1) return model.hTS + (station - model.sTS) * model.s1 \/ 100;\n        return model.hTS + (station - model.sTS) * model.s2 \/ 100;\n    }\n\n    function sampleGradient(model, steps) {\n        var pts = [];\n        for (var i = 0; i <= steps; i++) {\n            var station = STATION_MIN + (STATION_MAX - STATION_MIN) * i \/ steps;\n            pts.push([station, gradientH(station, model)]);\n        }\n        return pts;\n    }\n\n    function curveSegmentPath(model, steps) {\n        if (model.L <= 0.001) return \"\";\n        var pts = [];\n        for (var i = 0; i <= steps; i++) {\n            var s = model.sTA + model.L * i \/ steps;\n            pts.push([s, gradientH(s, model)]);\n        }\n        return linePath(pts, function(point) { return point[1]; });\n    }\n\n    function areaPaths(model, steps) {\n        var abtrag = [];\n        var auftrag = [];\n        var current = null;\n        var kind = \"\";\n\n        function flush() {\n            if (!current) return;\n            if (!current.length) return;\n            if (kind === \"abtrag\") abtrag.push(current);\n            if (kind === \"auftrag\") auftrag.push(current);\n            current = null;\n            kind = \"\";\n        }\n\n        for (var i = 0; i <= steps; i++) {\n            var s = STATION_MIN + (STATION_MAX - STATION_MIN) * i \/ steps;\n            var g = groundH(s);\n            var gr = gradientH(s, model);\n            var nextKind = g > gr ? \"abtrag\" : (gr > g ? \"auftrag\" : \"\");\n            if (!nextKind) {\n                flush();\n                continue;\n            }\n            if (kind) {\n                if (kind !== nextKind) flush();\n            }\n            kind = nextKind;\n            if (!current) current = [];\n            current.push([s, g, gr]);\n        }\n        flush();\n\n        function segToPath(seg) {\n            if (!seg.length) return \"\";\n            var d = \"M \" + deDot(toX(seg[0][0]), 1) + \" \" + deDot(toY(seg[0][1]), 1);\n            for (var j = 1; j < seg.length; j++) {\n                d += \" L \" + deDot(toX(seg[j][0]), 1) + \" \" + deDot(toY(seg[j][1]), 1);\n            }\n            for (var k = seg.length - 1; k >= 0; k--) {\n                d += \" L \" + deDot(toX(seg[k][0]), 1) + \" \" + deDot(toY(seg[k][2]), 1);\n            }\n            return d + \" Z\";\n        }\n\n        return {\n            abtrag: abtrag.map(segToPath).join(\" \"),\n            auftrag: auftrag.map(segToPath).join(\" \")\n        };\n    }\n\n    function peakPoint(model) {\n        var m1 = model.s1 \/ 100;\n        var m2 = model.s2 \/ 100;\n        var degenerate = false;\n        if (Math.abs(m2 - m1) < 0.000001) degenerate = true;\n        if (model.L <= 0.001) degenerate = true;\n        if (degenerate) {\n            return { s: model.sTS, h: model.hTS, inside: false };\n        }\n        var x = -m1 * model.L \/ (m2 - m1);\n        var s = model.sTA + x;\n        var inside = false;\n        if (s >= model.sTA) {\n            if (s <= model.sTE) inside = true;\n        }\n        if (!inside) s = model.s1 > model.s2 ? Math.min(model.sTA, model.sTE) : Math.max(model.sTA, model.sTE);\n        return { s: s, h: gradientH(s, model), inside: inside };\n    }\n\n    function setSvgVisibility(ids, show) {\n        for (var i = 0; i < ids.length; i++) el(ids[i]).setAttribute(\"opacity\", show ? \"1\" : \"0\");\n    }\n\n    function updatePresetState() {\n        var model = makeModel();\n        var buttons = document.querySelectorAll(\".g2-preset\");\n        var matched = \"\";\n        Object.keys(presets).forEach(function(name) {\n            var p = presets[name];\n            if (Math.abs(model.s1 - p.s1) >= 0.01) return;\n            if (Math.abs(model.s2 - p.s2) >= 0.01) return;\n            if (Math.abs(model.H - p.H) >= 0.01) return;\n            if (Math.abs(model.sTS - p.sts) >= 0.01) return;\n            if (Math.abs(model.offset - p.offset) >= 0.01) return;\n            if (Math.abs(model.probe - p.probe) >= 0.01) return;\n            if (Math.abs(model.ve - p.ve) >= 0.01) return;\n            if (model.form !== p.form) return;\n            matched = name;\n        });\n        for (var i = 0; i < buttons.length; i++) {\n            buttons[i].classList.toggle(\"is-active\", buttons[i].getAttribute(\"data-preset\") === matched);\n        }\n    }\n\n    function updateComparison(model) {\n        var clearButton = el(\"g2ClearCompare\");\n        if (!compareModel) {\n            setAttrs(\"g2CompareGradient\", { d: \"\", opacity: \"0\" });\n            el(\"g2CompareStatus\").textContent = \"kein Vergleich\";\n            el(\"g2CompareEmpty\").hidden = false;\n            el(\"g2CompareGrid\").hidden = true;\n            clearButton.disabled = true;\n            return;\n        }\n\n        var comparePath = linePath(sampleGradient(compareModel, 120), function(point) { return point[1]; });\n        setAttrs(\"g2CompareGradient\", { d: comparePath, opacity: \"0.88\" });\n        el(\"g2CompareStatus\").textContent = \"Referenz aktiv\";\n        el(\"g2CompareEmpty\").hidden = true;\n        el(\"g2CompareGrid\").hidden = false;\n        clearButton.disabled = false;\n\n        var probe = clamp(model.probe, STATION_MIN, STATION_MAX);\n        var probeDelta = gradientH(probe, model) - gradientH(probe, compareModel);\n        el(\"g2CmpProbe\").textContent = deSigned(probeDelta, 2, \"m\");\n        el(\"g2CmpL\").textContent = deSigned(model.L - compareModel.L, 1, \"m\");\n        el(\"g2CmpH\").textContent = deSigned(model.H - compareModel.H, 0, \"m\");\n        el(\"g2CmpOffset\").textContent = deSigned(model.offset - compareModel.offset, 2, \"m\");\n    }\n\n    function update() {\n        var model = makeModel();\n        var gradientPts = sampleGradient(model, 120);\n        var gradientD = linePath(gradientPts, function(point) { return point[1]; });\n        var terrainD = terrainPath();\n        var firstX = deDot(toX(GROUND[0][0]), 1);\n        var lastX = deDot(toX(GROUND[GROUND.length - 1][0]), 1);\n        var areas = areaPaths(model, 120);\n        var peak = peakPoint(model);\n        var isKuppe = model.s1 > model.s2;\n        var isWanne = model.s1 < model.s2;\n        var typeLabel = isKuppe ? \"Kuppe\" : (isWanne ? \"Wanne\" : \"Gerade\");\n\n        el(\"g2Terrain\").setAttribute(\"d\", terrainD);\n        el(\"g2TerrainFill\").setAttribute(\"d\", terrainD + \" L \" + lastX + \" 310 L \" + firstX + \" 310 Z\");\n        el(\"g2Gradient\").setAttribute(\"d\", gradientD);\n        el(\"g2GradientCurve\").setAttribute(\"d\", curveSegmentPath(model, 80));\n        el(\"g2AbtragBase\").setAttribute(\"d\", areas.abtrag);\n        el(\"g2AbtragHatch\").setAttribute(\"d\", areas.abtrag);\n        el(\"g2AuftragBase\").setAttribute(\"d\", areas.auftrag);\n        el(\"g2AuftragHatch\").setAttribute(\"d\", areas.auftrag);\n        updateComparison(model);\n\n        var xTA = toX(clamp(model.sTA, STATION_MIN, STATION_MAX));\n        var xTS = toX(clamp(model.sTS, STATION_MIN, STATION_MAX));\n        var xTE = toX(clamp(model.sTE, STATION_MIN, STATION_MAX));\n        var yTA = toY(gradientH(clamp(model.sTA, STATION_MIN, STATION_MAX), model));\n        var yTE = toY(gradientH(clamp(model.sTE, STATION_MIN, STATION_MAX), model));\n        var yTS = toY(model.hTS);\n        var xPeak = toX(clamp(peak.s, STATION_MIN, STATION_MAX));\n        var yPeak = toY(peak.h);\n\n        setAttrs(\"g2Tangent1\", { x1: toX(STATION_MIN), y1: toY(tangentH(STATION_MIN, model, 1)), x2: xTS, y2: yTS });\n        setAttrs(\"g2Tangent2\", { x1: xTS, y1: yTS, x2: toX(STATION_MAX), y2: toY(tangentH(STATION_MAX, model, 2)) });\n\n        setAttrs(\"g2PointTA\", { cx: xTA, cy: yTA, opacity: model.L > 0.001 ? \"1\" : \"0\" });\n        setAttrs(\"g2PointTE\", { cx: xTE, cy: yTE, opacity: model.L > 0.001 ? \"1\" : \"0\" });\n        setAttrs(\"g2PointTS\", { cx: xTS, cy: yTS });\n        setAttrs(\"g2PointPeak\", { cx: xPeak, cy: yPeak, opacity: peak.inside ? \"1\" : \"0\" });\n        setAttrs(\"g2TickTA\", { x1: xTA, x2: xTA, opacity: model.L > 0.001 ? \"1\" : \"0\" });\n        setAttrs(\"g2TickTE\", { x1: xTE, x2: xTE, opacity: model.L > 0.001 ? \"1\" : \"0\" });\n        setAttrs(\"g2TickTS\", { x1: xTS, x2: xTS });\n\n        move(\"g2LabelTA\", xTA, 334);\n        move(\"g2LabelTS\", xTS, 355);\n        move(\"g2LabelTE\", xTE, 334);\n        setSvgVisibility([\"g2LabelTA\", \"g2LabelTE\"], model.L > 0.001);\n        move(\"g2LabelPeak\", xPeak, yPeak + (isKuppe ? 23 : -23));\n        el(\"g2PeakText\").textContent = isKuppe ? \"Hochpunkt\" : \"Tiefpunkt\";\n        setSvgVisibility([\"g2LabelPeak\"], peak.inside);\n\n        var showDim = model.L > 12;\n        setSvgVisibility([\"g2DimL\", \"g2DimT\", \"g2LabelL\", \"g2LabelT\"], showDim);\n        if (showDim) {\n            setAttrs(\"g2DimL\", { x1: xTA + 5, y1: 298, x2: xTE - 5, y2: 298 });\n            move(\"g2LabelL\", (xTA + xTE) \/ 2, 284);\n            el(\"g2LabelLText\").textContent = \"L = \" + de(model.L, 1) + \" m\";\n\n            setAttrs(\"g2DimT\", { x1: Math.min(xTA, xTS) + 5, y1: 58, x2: Math.max(xTA, xTS) - 5, y2: 58 });\n            move(\"g2LabelT\", (xTA + xTS) \/ 2, 44);\n            el(\"g2LabelTText\").textContent = \"T = \" + de(model.T, 1) + \" m\";\n        }\n\n        var f = Math.abs(model.T * (model.s1 - model.s2) \/ 400);\n        var yCurveAtTS = toY(gradientH(model.sTS, model));\n        var showF = false;\n        if (Math.abs(yTS - yCurveAtTS) > 14) {\n            if (model.L > 0.001) showF = true;\n        }\n        setSvgVisibility([\"g2DimDh\", \"g2DimDhGuide1\", \"g2DimDhGuide2\", \"g2LabelDh\"], showF);\n        if (showF) {\n            var dimX = xTS + (xTS < 820 ? 55 : -55);\n            setAttrs(\"g2DimDh\", { x1: dimX, y1: yTS, x2: dimX, y2: yCurveAtTS });\n            setAttrs(\"g2DimDhGuide1\", { x1: xTS, y1: yTS, x2: dimX, y2: yTS });\n            setAttrs(\"g2DimDhGuide2\", { x1: xTS, y1: yCurveAtTS, x2: dimX, y2: yCurveAtTS });\n            move(\"g2LabelDh\", dimX + (dimX > xTS ? 48 : -48), (yTS + yCurveAtTS) \/ 2);\n            el(\"g2LabelDhText\").textContent = \"f = \" + de(f, 2) + \" m\";\n        }\n\n        var probe = clamp(model.probe, STATION_MIN, STATION_MAX);\n        var gH = groundH(probe);\n        var grH = gradientH(probe, model);\n        var delta = grH - gH;\n        var px = toX(probe);\n        var pyG = toY(gH);\n        var pyGr = toY(grH);\n        setAttrs(\"g2ProbeLine\", { x1: px, x2: px });\n        setAttrs(\"g2ProbeTerrain\", { cx: px, cy: pyG });\n        setAttrs(\"g2ProbeGradient\", { cx: px, cy: pyGr });\n        move(\"g2ProbeLabel\", clamp(px, 120, 860), VB.y1 + 20);\n        el(\"g2ProbeLabelText\").textContent = \"Sta. \" + deInt(probe) + \" m\";\n\n        el(\"g2ProbeStation\").textContent = deInt(probe) + \" m\";\n        el(\"g2ProbeHeights\").textContent = de(gH, 2) + \" \/ \" + de(grH, 2) + \" m\";\n        el(\"g2ProbeDelta\").textContent = (delta >= 0 ? \"Auftrag \" : \"Abtrag \") + de(Math.abs(delta), 2) + \" m\";\n        el(\"g2ProbeDelta\").style.color = delta >= 0 ? \"#059669\" : \"#8b4513\";\n\n        el(\"g2TypeChip\").textContent = typeLabel;\n        el(\"g2TypeChip\").className = \"g2-chip\";\n        el(\"g2StatDs\").textContent = de(model.ds, 2) + \" %\";\n        el(\"g2StatL\").textContent = de(model.L, 1) + \" m\";\n        el(\"g2StatT\").textContent = de(model.T, 1) + \" m\";\n        el(\"g2StatF\").textContent = de(f, 2) + \" m\";\n        el(\"g2FormulaA\").textContent = \"A = |s\u2082 - s\u2081| = \" + de(model.ds, 2) + \" %\";\n        if (model.form === \"kreis\") {\n            el(\"g2FormulaL\").textContent = \"Kreisbogen: L \u2248 H x \u0394\u03b1 = \" + de(model.L, 1) + \" m\";\n        } else {\n            el(\"g2FormulaL\").textContent = \"L = H x A \/ 100 = \" + de(model.L, 1) + \" m\";\n        }\n        el(\"g2FormulaF\").textContent = \"f = T x A \/ 400 = \" + de(f, 2) + \" m\";\n\n        var relation = delta >= 0 ? \"liegt die Gradiente \u00fcber dem Gel\u00e4nde: Auftrag.\" : \"liegt das Gel\u00e4nde \u00fcber der Gradiente: Abtrag.\";\n        var centerText = peak.inside ? \"Der \" + (isKuppe ? \"Hochpunkt\" : \"Tiefpunkt\") + \" liegt innerhalb von TA bis TE.\" : \"Der rechnerische Extrempunkt liegt au\u00dferhalb der sichtbaren Ausrundung.\";\n        var typeText = isKuppe ? \"Die Neigung nimmt ab, dadurch entsteht eine Kuppe. \" : (isWanne ? \"Die Neigung nimmt zu, dadurch entsteht eine Wanne. \" : \"Die Neigung bleibt gleich, dadurch entsteht rechnerisch keine Ausrundung. \");\n        el(\"g2Narrative\").innerHTML = \"<strong>Lesart:<\/strong> \" + typeText + centerText + \" An der Messstation \" + relation;\n\n        updateHmin(model, typeLabel);\n        updatePresetState();\n    }\n\n    function updateHmin(model, typeLabel) {\n        var table = {\n            Kuppe: [[50,1500],[60,2500],[70,4000],[80,6500],[90,9000],[100,12000],[110,16000]],\n            Wanne: [[50,500],[60,800],[70,1200],[80,1700],[90,2200],[100,3000],[110,4000]]\n        };\n        var data = table[typeLabel] ? table[typeLabel] : table.Kuppe;\n        var hmin = data[0][1];\n        for (var i = 0; i < data.length; i++) {\n            if (model.ve >= data[i][0]) hmin = data[i][1];\n        }\n        var node = el(\"g2HminNote\");\n        if (model.H < hmin) {\n            node.className = \"g2-note is-warn\";\n            node.innerHTML = \"<strong>Richtwert:<\/strong> Bei V<sub>e<\/sub> = \" + deInt(model.ve) + \" km\/h liegt H unter ca. \" + deInt(hmin) + \" m f\u00fcr eine \" + typeLabel + \". F\u00fcr die Bemessung Sichtweiten und aktuelles Regelwerk pr\u00fcfen.\";\n        } else {\n            node.className = \"g2-note\";\n            node.innerHTML = \"<strong>Richtwert:<\/strong> Bei V<sub>e<\/sub> = \" + deInt(model.ve) + \" km\/h ist H = \" + deInt(model.H) + \" m gegen\u00fcber dem Tabellenwert ca. \" + deInt(hmin) + \" m plausibel.\";\n        }\n    }\n\n    function linkControl(sliderId, numId) {\n        var slider = el(sliderId);\n        var num = el(numId);\n        var stepAttr = slider.getAttribute(\"step\");\n        var step = stepAttr ? stepAttr : \"1\";\n        var decimals = step.indexOf(\".\") >= 0 ? step.split(\".\")[1].length : 0;\n        slider.addEventListener(\"input\", function() {\n            num.value = parseFloat(slider.value).toFixed(decimals);\n            update();\n        });\n        num.addEventListener(\"input\", function() {\n            var value = parseFloat(num.value);\n            if (isNaN(value)) return;\n            value = clamp(value, parseFloat(slider.min), parseFloat(slider.max));\n            slider.value = value;\n            update();\n        });\n        num.addEventListener(\"change\", function() {\n            var value = parseFloat(num.value);\n            if (isNaN(value)) value = parseFloat(slider.value);\n            value = clamp(value, parseFloat(slider.min), parseFloat(slider.max));\n            slider.value = value;\n            num.value = value.toFixed(decimals);\n            update();\n        });\n    }\n\n    function setControl(sliderId, numId, value) {\n        var slider = el(sliderId);\n        var num = el(numId);\n        var stepAttr = slider.getAttribute(\"step\");\n        var step = stepAttr ? stepAttr : \"1\";\n        var decimals = step.indexOf(\".\") >= 0 ? step.split(\".\")[1].length : 0;\n        slider.value = value;\n        num.value = Number(value).toFixed(decimals);\n    }\n\n    function applyPreset(name) {\n        var p = presets[name];\n        if (!p) return;\n        setControl(\"g2S1\", \"g2NumS1\", p.s1);\n        setControl(\"g2S2\", \"g2NumS2\", p.s2);\n        setControl(\"g2H\", \"g2NumH\", p.H);\n        setControl(\"g2Sts\", \"g2NumSts\", p.sts);\n        setControl(\"g2Offset\", \"g2NumOffset\", p.offset);\n        setControl(\"g2Probe\", \"g2NumProbe\", p.probe);\n        setControl(\"g2Ve\", \"g2NumVe\", p.ve);\n        el(p.form === \"kreis\" ? \"g2FormKreis\" : \"g2FormPar\").checked = true;\n        update();\n    }\n\n    linkControl(\"g2S1\", \"g2NumS1\");\n    linkControl(\"g2S2\", \"g2NumS2\");\n    linkControl(\"g2H\", \"g2NumH\");\n    linkControl(\"g2Sts\", \"g2NumSts\");\n    linkControl(\"g2Offset\", \"g2NumOffset\");\n    linkControl(\"g2Probe\", \"g2NumProbe\");\n    linkControl(\"g2Ve\", \"g2NumVe\");\n\n    document.querySelectorAll(\"input[name='g2Form']\").forEach(function(input) {\n        input.addEventListener(\"change\", update);\n    });\n    document.querySelectorAll(\".g2-preset\").forEach(function(button) {\n        button.addEventListener(\"click\", function() {\n            applyPreset(button.getAttribute(\"data-preset\"));\n        });\n    });\n    el(\"g2SaveCompare\").addEventListener(\"click\", function() {\n        compareModel = makeModel();\n        update();\n    });\n    el(\"g2ClearCompare\").addEventListener(\"click\", function() {\n        compareModel = null;\n        update();\n    });\n\n    function pad2(n) { return n < 10 ? \"0\" + n : \"\" + n; }\n\n    function buildExportCells(model) {\n        var f = Math.abs(model.T * (model.s1 - model.s2) \/ 400);\n        var typeLabel = model.s1 > model.s2 ? \"Kuppe\" : (model.s1 < model.s2 ? \"Wanne\" : \"Gerade\");\n        var formLabel = model.form === \"kreis\" ? \"Kreisbogen\" : \"Parabel\";\n        return [\n            { label: \"Typ\", value: typeLabel + \" \u00b7 \" + formLabel },\n            { label: \"Anfangsneigung s\u2081\", value: deSigned(model.s1, 1, \"%\") },\n            { label: \"Endneigung s\u2082\", value: deSigned(model.s2, 1, \"%\") },\n            { label: \"Neigungswechsel \u0394s\", value: de(model.ds, 2) + \" %\" },\n            { label: \"Halbmesser H\", value: deInt(model.H) + \" m\" },\n            { label: \"L\u00e4nge L (TA\u2013TE)\", value: de(model.L, 1) + \" m\" },\n            { label: \"Tangente T\", value: de(model.T, 1) + \" m\" },\n            { label: \"Stichma\u00df f\", value: de(f, 2) + \" m\" },\n            { label: \"TS-Station\", value: deInt(model.sTS) + \" m\" },\n            { label: \"TS-H\u00f6henlage\", value: deSigned(model.offset, 2, \"m\") },\n            { label: \"Entwurfsgeschwindigkeit\", value: deInt(model.ve) + \" km\/h\" }\n        ];\n    }\n\n    function drawExportFooter(ctx, model, vbW, vbH, scale) {\n        var cells = buildExportCells(model);\n        var pad = 24;\n        var titleY = vbH + 26;\n        var rowH = 30;\n        var cols = 4;\n        var rows = Math.ceil(cells.length \/ cols);\n        var cellW = (vbW - 2 * pad) \/ cols;\n\n        ctx.save();\n        ctx.scale(scale, scale);\n\n        ctx.strokeStyle = \"#c8d6e0\";\n        ctx.lineWidth = 0.8;\n        ctx.beginPath();\n        ctx.moveTo(pad, vbH + 6);\n        ctx.lineTo(vbW - pad, vbH + 6);\n        ctx.stroke();\n\n        ctx.textBaseline = \"alphabetic\";\n        ctx.textAlign = \"left\";\n        ctx.fillStyle = \"#1e3548\";\n        ctx.font = \"700 13px sans-serif\";\n        ctx.fillText(\"Gradiente \u2013 Auswertung\", pad, titleY);\n\n        var date = new Date();\n        var dateStr = pad2(date.getDate()) + \".\" + pad2(date.getMonth() + 1) + \".\" + date.getFullYear() + \" \u00b7 \" + pad2(date.getHours()) + \":\" + pad2(date.getMinutes());\n        ctx.fillStyle = \"#64748b\";\n        ctx.font = \"10px sans-serif\";\n        ctx.textAlign = \"right\";\n        ctx.fillText(\"CAD-Kompass \u00b7 \" + dateStr, vbW - pad, titleY);\n        ctx.textAlign = \"left\";\n\n        var startY = titleY + 18;\n        for (var i = 0; i < cells.length; i++) {\n            var col = i % cols;\n            var row = Math.floor(i \/ cols);\n            var x = pad + col * cellW;\n            var y = startY + row * rowH;\n            ctx.fillStyle = \"#64748b\";\n            ctx.font = \"700 8.5px sans-serif\";\n            ctx.fillText(cells[i].label.toUpperCase(), x, y);\n            ctx.fillStyle = \"#1e3548\";\n            ctx.font = \"700 13px sans-serif\";\n            ctx.fillText(cells[i].value, x, y + 16);\n        }\n\n        ctx.restore();\n        return rows * rowH + 30;\n    }\n\n    function exportSvgToPng() {\n        var btn = el(\"g2ExportPng\");\n        var svgEl = el(\"g2Svg\");\n        if (!svgEl) return;\n        if (btn.classList.contains(\"is-busy\")) return;\n\n        btn.classList.add(\"is-busy\");\n\n        var serializer = new XMLSerializer();\n        var svgString = serializer.serializeToString(svgEl);\n        if (svgString.indexOf(\"xmlns=\\\"http:\/\/www.w3.org\/2000\/svg\\\"\") < 0) {\n            svgString = svgString.replace(\/^<svg\/, \"<svg xmlns=\\\"http:\/\/www.w3.org\/2000\/svg\\\"\");\n        }\n\n        var vb = svgEl.viewBox.baseVal;\n        var vbW = vb.width > 0 ? vb.width : 960;\n        var vbH = vb.height > 0 ? vb.height : 420;\n        var scale = 2;\n        var model = makeModel();\n        var footerH = 30 + Math.ceil(buildExportCells(model).length \/ 4) * 30 + 30;\n\n        var blob = new Blob([svgString], { type: \"image\/svg+xml;charset=utf-8\" });\n        var url = URL.createObjectURL(blob);\n        var img = new Image();\n\n        img.onload = function() {\n            var canvas = document.createElement(\"canvas\");\n            canvas.width = Math.round(vbW * scale);\n            canvas.height = Math.round((vbH + footerH) * scale);\n            var ctx = canvas.getContext(\"2d\");\n            ctx.fillStyle = \"#ffffff\";\n            ctx.fillRect(0, 0, canvas.width, canvas.height);\n            ctx.drawImage(img, 0, 0, vbW * scale, vbH * scale);\n            URL.revokeObjectURL(url);\n\n            drawExportFooter(ctx, model, vbW, vbH, scale);\n\n            try {\n                var pngUrl = canvas.toDataURL(\"image\/png\");\n                var a = document.createElement(\"a\");\n                a.href = pngUrl;\n                a.download = \"gradiente-\" + Date.now() + \".png\";\n                document.body.appendChild(a);\n                a.click();\n                document.body.removeChild(a);\n                btn.classList.remove(\"is-busy\");\n                btn.classList.add(\"is-done\");\n                setTimeout(function() { btn.classList.remove(\"is-done\"); }, 1600);\n            } catch (e) {\n                btn.classList.remove(\"is-busy\");\n            }\n        };\n        img.onerror = function() {\n            URL.revokeObjectURL(url);\n            btn.classList.remove(\"is-busy\");\n        };\n        img.src = url;\n    }\n\n    el(\"g2ExportPng\").addEventListener(\"click\", exportSvgToPng);\n\n    update();\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Gradiente-Explainer Verstehe, wie Neigung, Halbmesser und H\u00f6henlage die Gradiente formen &#8211; und wo daraus Auftrag oder Abtrag entsteht. L\u00e4uft komplett [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","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":[27],"tags":[],"class_list":["post-1978","post","type-post","status-publish","format-standard","hentry","category-hoehenplan"],"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":"Gradiente-Explainer Verstehe, wie Neigung, Halbmesser und H\u00f6henlage die Gradiente formen &#8211; und wo daraus Auftrag oder Abtrag entsteht. L\u00e4uft komplett [&hellip;]","_links":{"self":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/posts\/1978","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=1978"}],"version-history":[{"count":5,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/posts\/1978\/revisions"}],"predecessor-version":[{"id":2008,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=\/wp\/v2\/posts\/1978\/revisions\/2008"}],"wp:attachment":[{"href":"https:\/\/cad-kompass.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cad-kompass.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}