:root{
  --bg:#eef2f4;--surface:#fff;--surface-2:#f7f9fa;--text:#17212b;--muted:#65717d;
  --border:#dce2e7;--accent:#ef8b23;--accent-strong:#d8730c;--focus:#1b6fb8;
  --shadow:0 10px 30px rgba(24,35,45,.08);--radius:18px;--radius-sm:12px;--max:1180px;
}
*{box-sizing:border-box}
html{height:auto;min-height:0;background:var(--bg);scroll-behavior:smooth}
body{margin:0;min-height:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.45}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
.app-shell{min-height:0;display:flex;flex-direction:column}
.app-header{height:76px;padding:0 max(20px,calc((100vw - var(--max))/2));display:flex;align-items:center;justify-content:space-between;background:var(--surface);border-bottom:1px solid var(--border);position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#263744,#0f1720);color:#fff;font-weight:900;letter-spacing:-1px}.brand strong,.brand span{display:block}.brand strong{font-size:16px}.brand span{color:var(--muted);font-size:13px}
.icon-button{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;font-size:21px}
.app-main{width:min(var(--max),calc(100% - 32px));margin:28px auto 110px;flex:1}
.hero-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 28px 22px;box-shadow:var(--shadow)}
.progress-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.eyebrow{margin:0 0 6px;color:var(--accent-strong);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.hero-panel h1{margin:0;font-size:clamp(26px,3.3vw,42px);line-height:1.08;letter-spacing:-.025em}.hero-panel p:not(.eyebrow){margin:10px 0 0;color:var(--muted);max-width:780px}.progress-count{white-space:nowrap;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:9px 13px;color:var(--muted);font-size:14px;font-weight:700}.progress-track{height:8px;background:#e6ebef;border-radius:999px;overflow:hidden;margin-top:22px}.progress-track span{display:block;width:12.5%;height:100%;background:var(--accent);border-radius:inherit;transition:width .28s ease}
.content-card{margin-top:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);min-height:390px}
.section-intro{margin:0 0 22px;color:var(--muted)}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.choice-card{position:relative;text-align:left;border:2px solid var(--border);border-radius:16px;background:var(--surface);padding:20px;min-height:265px;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;color:inherit}.choice-card:hover{transform:translateY(-2px);border-color:#b7c2ca;box-shadow:0 12px 24px rgba(24,35,45,.08)}.choice-card:focus-visible{outline:3px solid color-mix(in srgb,var(--focus) 35%,transparent);outline-offset:3px}.choice-card.is-selected{border-color:var(--accent);background:#fff9f2;box-shadow:0 0 0 3px rgba(239,139,35,.14)}
.choice-check{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--border);background:var(--surface);font-weight:900;color:transparent}.choice-card.is-selected .choice-check{background:var(--accent);border-color:var(--accent);color:#fff}
.choice-visual{height:95px;display:flex;align-items:center;justify-content:center;margin:10px 0 16px}.choice-card h2{margin:0;font-size:22px;letter-spacing:-.01em}.choice-card p{margin:7px 0 0;color:var(--muted)}.choice-card ul{margin:14px 0 0;padding:0;list-style:none;color:var(--muted);font-size:14px}.choice-card li{display:flex;gap:8px;margin-top:7px}.choice-card li::before{content:"✓";color:var(--accent-strong);font-weight:900}
.fence-icon,.gate-icon{position:relative;display:block}.fence-icon{width:130px;height:72px;border-left:8px solid #263744;border-right:8px solid #263744}.fence-icon::before{content:"";position:absolute;inset:8px 6px;background:repeating-linear-gradient(90deg,#7b8a95 0 3px,transparent 3px 17px),repeating-linear-gradient(0deg,#7b8a95 0 3px,transparent 3px 17px)}.gate-icon{width:92px;height:82px;border:8px solid #263744;border-bottom-width:10px}.gate-icon::before{content:"";position:absolute;inset:5px;background:repeating-linear-gradient(90deg,#7b8a95 0 3px,transparent 3px 15px),repeating-linear-gradient(0deg,#7b8a95 0 3px,transparent 3px 15px)}.combo-icon{display:flex;align-items:flex-end;gap:5px;transform:scale(.9)}
.placeholder{display:grid;place-items:center;min-height:330px;text-align:center}.placeholder-inner{max-width:560px}.placeholder-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#edf3f7;color:#49606f;font-weight:800;font-size:13px}.placeholder h2{font-size:30px;margin:14px 0 8px}.placeholder p{color:var(--muted)}
.app-footer{position:fixed;left:0;right:0;bottom:0;z-index:5;min-height:82px;padding:14px max(20px,calc((100vw - var(--max))/2));background:rgba(255,255,255,.96);border-top:1px solid var(--border);display:flex;align-items:center;gap:16px;backdrop-filter:blur(10px)}.footer-meta{flex:1;text-align:center;color:var(--muted);font-size:13px}.button{min-height:48px;border-radius:12px;padding:0 22px;border:1px solid transparent;font-weight:800;cursor:pointer}.button:disabled{opacity:.42;cursor:not-allowed}.button-primary{background:var(--accent);color:#fff}.button-primary:not(:disabled):hover{background:var(--accent-strong)}.button-secondary{background:var(--surface);border-color:var(--border);color:var(--text)}
[data-theme="dark"]{--bg:#11161b;--surface:#1a2026;--surface-2:#222a31;--text:#f2f5f7;--muted:#aab4bd;--border:#303941;--shadow:none}[data-theme="dark"] .choice-card.is-selected{background:#2a231c}[data-theme="dark"] .app-footer{background:rgba(26,32,38,.96)}[data-theme="dark"] .placeholder-badge{background:#28343d;color:#c8d3da}
@media(max-width:820px){.app-header{height:68px;padding:0 16px}.app-main{width:min(100% - 20px,var(--max));margin-top:12px;margin-bottom:105px}.hero-panel,.content-card{padding:20px}.progress-head{display:block}.progress-count{display:inline-flex;margin-top:16px}.choice-grid{grid-template-columns:1fr}.choice-card{min-height:auto}.choice-visual{height:80px}.app-footer{padding:12px 10px;min-height:74px}.footer-meta{display:none}.button{flex:1;padding:0 14px}}
@media(max-width:430px){.brand span{display:none}.hero-panel h1{font-size:27px}.hero-panel p:not(.eyebrow){font-size:14px}.hero-panel,.content-card{border-radius:14px;padding:17px}.choice-card{padding:17px}.choice-card h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Meilenstein 2 – Zaunmodul */
.error-box{margin:0 0 20px;padding:15px 17px;border:1px solid #d88d86;border-radius:12px;background:#fff4f2;color:#7f2921}.error-box ul{margin:8px 0 0;padding-left:20px}.toolbar{display:grid;gap:15px;margin-bottom:20px}.search-field{display:grid;gap:7px}.search-field span,label>span{font-size:14px;font-weight:800}.search-field input,input,select,textarea{width:100%;min-height:48px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);padding:10px 12px}.search-field input:focus,input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--focus) 24%,transparent);border-color:var(--focus)}.filter-row{display:flex;gap:8px;flex-wrap:wrap}.filter-chip{border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);padding:9px 13px;font-weight:800;cursor:pointer}.filter-chip.is-active{background:#263744;color:#fff;border-color:#263744}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.product-card{position:relative;min-height:170px;text-align:left;border:2px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);padding:18px;cursor:pointer}.product-card:hover{border-color:#aeb9c1}.product-card.is-selected{border-color:var(--accent);background:#fff9f2;box-shadow:0 0 0 3px rgba(239,139,35,.12)}.product-card h2{margin:7px 0 4px;font-size:19px}.product-card p{margin:0;color:var(--muted)}.product-card small{display:block;margin-top:11px;color:var(--muted);line-height:1.35}.product-family{display:inline-block;color:var(--accent-strong);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.product-check{position:absolute;top:12px;right:12px;width:28px;height:28px;border:2px solid var(--border);border-radius:50%;display:grid;place-items:center;color:transparent}.product-card.is-selected .product-check{color:#fff;background:var(--accent);border-color:var(--accent)}.empty-state{padding:40px;text-align:center;color:var(--muted)}
.run-list,.form-stack{display:grid;gap:18px}.run-card,.form-card{border:1px solid var(--border);border-radius:15px;background:var(--surface-2);padding:19px}.run-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px}.run-head h2,.form-card h2{margin:0;font-size:20px}.run-kicker{font-size:12px;font-weight:900;color:var(--accent-strong);text-transform:uppercase}.text-button{border:0;background:none;color:var(--focus);font-weight:800;cursor:pointer}.text-button.danger,.circle-button.danger{color:#a4372e}.section-list{display:grid;gap:10px}.section-card{position:relative;display:grid;grid-template-columns:42px 1fr auto;gap:13px;align-items:end;border:1px solid var(--border);border-radius:13px;background:var(--surface);padding:14px}.section-number{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#263744;color:#fff;font-weight:900}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-grid label,.form-card label,.height-row label{display:grid;gap:7px}.input-suffix{display:flex;align-items:stretch}.input-suffix input{border-radius:11px 0 0 11px}.input-suffix em{display:grid;place-items:center;min-width:48px;border:1px solid var(--border);border-left:0;border-radius:0 11px 11px 0;background:var(--surface-2);font-style:normal;font-weight:800;color:var(--muted)}.circle-button{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--surface);font-size:25px;line-height:1;cursor:pointer}.add-button,.add-run-button{width:100%;min-height:48px;border:1px dashed #aeb9c1;border-radius:12px;background:var(--surface);color:var(--text);font-weight:900;cursor:pointer;margin-top:12px}.add-button span,.add-run-button span{font-size:21px;margin-right:6px}.add-run-button{margin-top:18px;background:#f7fafc}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.segmented button{min-height:48px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);font-weight:800;cursor:pointer}.segmented button.is-active{background:#263744;color:#fff;border-color:#263744}.individual-heights{display:grid;gap:12px;margin-top:14px}.height-row{display:grid;grid-template-columns:130px 1fr 1fr;gap:12px;align-items:end;border-top:1px solid var(--border);padding-top:12px}.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.color-card{position:relative;display:grid;grid-template-columns:46px 1fr 25px;gap:10px;align-items:center;text-align:left;border:2px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);padding:10px;cursor:pointer}.color-card.is-selected{border-color:var(--accent);background:#fff9f2}.color-swatch{width:42px;height:42px;border-radius:10px;border:1px solid rgba(0,0,0,.15)}.color-card strong,.color-card small{display:block}.color-card small{color:var(--muted)}.mini-check{color:transparent;font-weight:900}.color-card.is-selected .mini-check{color:var(--accent-strong)}.mount-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.mount-card{text-align:left;display:grid;gap:5px;min-height:110px;border:2px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);padding:16px;cursor:pointer}.mount-card span{color:var(--muted)}.mount-card.is-selected{border-color:var(--accent);background:#fff9f2}.help-text{display:block;margin-top:7px;color:var(--muted)}
[data-theme="dark"] .product-card.is-selected,[data-theme="dark"] .color-card.is-selected,[data-theme="dark"] .mount-card.is-selected{background:#2a231c}[data-theme="dark"] .error-box{background:#321f1d;color:#ffd2cc;border-color:#7f403a}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.height-row{grid-template-columns:1fr 1fr}.height-row>strong{grid-column:1/-1}.field-grid{grid-template-columns:1fr}}
@media(max-width:600px){.product-grid,.color-grid,.mount-grid,.segmented{grid-template-columns:1fr}.section-card{grid-template-columns:38px 1fr}.section-card .circle-button{grid-column:2;justify-self:end}.run-head{align-items:flex-start}.height-row{grid-template-columns:1fr}.height-row>strong{grid-column:auto}.run-card,.form-card{padding:14px}.content-card{min-height:0}}

/* Meilenstein 3 – Tormodul */
.gate-list{display:grid;gap:18px}.gate-card{border:1px solid var(--border);border-radius:15px;background:var(--surface-2);padding:19px}.gate-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gate-type-card{display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto;column-gap:13px;align-items:center;text-align:left;border:2px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);padding:15px;cursor:pointer}.gate-type-card>strong{align-self:end;font-size:18px}.gate-type-card>span:last-child{color:var(--muted);align-self:start}.gate-type-card.is-selected{border-color:var(--accent);background:#fff9f2}.gate-symbol{grid-row:1/3;width:52px;height:58px;border:4px solid #5d6870;border-radius:4px;position:relative}.gate-symbol.swing:after{content:"";position:absolute;inset:4px;border-left:2px solid #88939b;transform:skewY(-28deg)}.gate-symbol.sliding{width:62px}.gate-symbol.sliding:after{content:"↔";position:absolute;inset:auto 0 -21px;text-align:center;font-weight:900;color:var(--accent-strong)}.gate-position{margin-top:15px}.gate-detail{display:grid;gap:15px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}.option-group{display:grid;gap:8px}.option-label{font-size:14px;font-weight:800}.segmented.three{grid-template-columns:repeat(3,1fr)}.gate-subsection{display:grid;gap:14px}.gate-subsection h3{margin:8px 0 0;font-size:18px}.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.check-row{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;min-height:48px;border:1px solid var(--border);border-radius:11px;background:var(--surface);padding:10px 12px}.check-row input{width:20px;min-height:20px;margin:0;flex:0 0 auto}.check-row span{font-size:14px;font-weight:700}[data-theme="dark"] .gate-type-card.is-selected{background:#2a231c}
@media(max-width:720px){.gate-type-grid,.check-grid,.segmented.three{grid-template-columns:1fr}.gate-card{padding:14px}.gate-type-card{grid-template-columns:52px 1fr}}

/* Meilenstein 5 – Zeichnung und Projektübersicht */
.drawing-toolbar,.summary-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.drawing-toolbar div{display:grid;gap:4px}.drawing-toolbar span{color:var(--muted);font-size:14px}.drawing-scroll{overflow:auto;border:1px solid var(--border);border-radius:15px;background:var(--surface);padding:12px;-webkit-overflow-scrolling:touch}.project-drawing{display:block;width:100%;min-width:700px;height:auto}.draw-fence{stroke:#53616b;stroke-width:12;stroke-linecap:round}.draw-post{fill:#263744;stroke:#fff;stroke-width:2}.draw-gate rect{fill:#f7b45c;stroke:#8a541d;stroke-width:3}.draw-gate path{stroke:#8a541d;stroke-width:3}.draw-label rect{fill:var(--surface);stroke:var(--border);stroke-width:1.5}.draw-label text{fill:var(--text);font:700 14px system-ui,sans-serif}.drawing-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;color:var(--muted);font-size:14px}.drawing-legend span{display:flex;align-items:center;gap:7px}.legend-line{width:35px;height:8px;border-radius:5px;background:#53616b}.legend-gate{width:32px;height:20px;border:3px solid #8a541d;background:#f7b45c}.legend-post{width:14px;height:14px;border-radius:50%;background:#263744}.summary-card{border:1px solid var(--border);border-radius:15px;background:var(--surface-2);padding:20px;margin-top:16px}.summary-card h2{margin:0 0 14px}.summary-card h3{margin:16px 0 10px}.summary-list{margin:0;display:grid;gap:0}.summary-list>div{display:grid;grid-template-columns:minmax(160px,35%) 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--border)}.summary-list>div:last-child{border-bottom:0}.summary-list dt{font-weight:800;color:var(--muted)}.summary-list dd{margin:0;font-weight:700}.summary-list.compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}.summary-table{display:grid;border:1px solid var(--border);border-radius:12px;overflow:hidden}.summary-table-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:10px;padding:11px 13px;background:var(--surface);border-bottom:1px solid var(--border)}.summary-table-row:last-child{border-bottom:0}.summary-table-row span:first-child{font-weight:800}.summary-gate{padding:4px 0 14px;border-bottom:1px solid var(--border)}.summary-gate:last-child{border-bottom:0}.drawing-scroll.small .project-drawing{min-width:560px}.summary-actions{justify-content:flex-end}
@media(max-width:720px){.drawing-toolbar,.summary-actions{align-items:stretch;flex-direction:column}.drawing-toolbar .button,.summary-actions .button{width:100%}.summary-list>div{grid-template-columns:1fr;gap:3px}.summary-list.compact{grid-template-columns:1fr}.summary-table-row{grid-template-columns:1fr 1fr}.project-drawing{min-width:620px}.summary-card{padding:15px}}
@media print{.app-header,.hero-panel,.app-footer,.summary-actions,.drawing-toolbar .button{display:none!important}.app-main{width:100%;margin:0}.content-card{box-shadow:none;border:0;padding:0}.drawing-scroll{overflow:visible;border:0}.project-drawing{min-width:0}.summary-card{break-inside:avoid}}


/* Meilenstein 5: Kontakt, Versand und Abschluss */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.contact-layout h3{margin:24px 0 10px}.address-grid .wide{grid-column:1/-1}.segmented.three{grid-template-columns:repeat(3,minmax(0,1fr))}.check-row{display:flex!important;align-items:flex-start;gap:10px;margin:18px 0}.check-row input{width:20px;height:20px;flex:0 0 auto;margin-top:2px}.privacy-card{margin-top:18px}.privacy-note{margin:8px 30px 0;color:var(--muted);font-size:.9rem}.attachment-list{display:flex;flex-direction:column;gap:5px;margin-top:8px;font-size:.9rem;color:var(--muted)}.final-summary{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}.final-summary span{color:var(--muted)}.submit-status{margin-bottom:18px;padding:14px 16px;border-radius:12px;font-weight:700}.submit-status.is-working{background:#eef4f8;border:1px solid #b8cedc}.submit-status.is-success{background:#edf7ef;border:1px solid #9fc7a7;color:#245c30}.submit-status.is-error{background:#fff1f0;border:1px solid #e3aaa6;color:#8a2f28}textarea{width:100%;resize:vertical;min-height:110px}input[type=file]{padding:10px;background:var(--surface-soft)}
@media(max-width:800px){.contact-layout{grid-template-columns:1fr}.segmented.three{grid-template-columns:1fr}.final-summary{flex-direction:column;gap:6px}.privacy-note{margin-left:0}}


/* Meilenstein 7 – verbindliche Eingabe- und Touchgrößen */
input,select,textarea,button{font-size:16px}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select{min-height:52px;padding:12px 14px}
button{min-height:50px}
.field-grid-section{grid-template-columns:minmax(220px,1fr);max-width:560px}
.field-grid-section>label{width:100%}
.input-suffix{min-height:52px}
.input-suffix input{min-width:0;flex:1}
.input-suffix em{min-width:58px}
.option-group{margin-top:18px}
.mount-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mount-card{min-height:132px;padding:20px;align-content:center}
.mount-card strong{font-size:18px;line-height:1.25}
.mount-card span{font-size:15px;line-height:1.45}
.follow-gate{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.gate-follow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.gate-follow-card{display:grid;gap:6px;align-content:center;text-align:left;min-height:96px;padding:16px 18px;border:2px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);cursor:pointer}
.gate-follow-card strong{font-size:16px}
.gate-follow-card span{color:var(--muted);font-size:14px;line-height:1.4}
.gate-follow-card.is-active{border-color:var(--accent);background:#fff9f2}
.add-button,.add-run-button{min-height:56px;font-size:16px;border-width:2px}
.section-card-expanded{align-items:start}
.section-card-expanded>.section-number{margin-top:2px}
@media(max-width:700px){
  .field-grid-section{max-width:none}
  .mount-grid,.gate-follow-grid{grid-template-columns:1fr}
  .mount-card{min-height:108px}
  .gate-follow-card{min-height:88px}
  .section-card{grid-template-columns:36px minmax(0,1fr);padding:12px;gap:10px}
  .section-number{width:34px;height:34px}
  .option-label{font-size:15px}
}
[data-theme="dark"] .gate-follow-card.is-active{background:#2a231c}

/* Meilenstein 7.1 – robustes Streckenkarten-Layout */
.section-card.section-card-expanded{
  position:relative;
  grid-template-columns:42px minmax(0,1fr);
  align-items:start;
}
.section-card.section-card-expanded>.section-number{
  grid-column:1;
  grid-row:1;
}
.section-card.section-card-expanded>.field-grid,
.section-card.section-card-expanded>.option-group,
.section-card.section-card-expanded>.follow-gate{
  grid-column:2;
  width:100%;
  min-width:0;
}
.section-card.section-card-expanded>.field-grid{grid-row:1}
.section-card.section-card-expanded>.option-group{grid-row:2}
.section-card.section-card-expanded>.follow-gate{grid-row:3}
.section-card.section-card-expanded>.circle-button{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  min-width:42px;
  height:42px;
  min-height:42px;
  z-index:2;
}
.section-card.section-card-expanded:has(>.circle-button)>.field-grid{
  padding-right:54px;
}
.follow-gate,.gate-follow-grid,.gate-follow-card{
  min-width:0;
}
.gate-follow-card strong,.gate-follow-card span{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:auto;
}
@media(max-width:700px){
  .section-card.section-card-expanded{
    grid-template-columns:36px minmax(0,1fr);
  }
  .section-card.section-card-expanded>.field-grid,
  .section-card.section-card-expanded>.option-group,
  .section-card.section-card-expanded>.follow-gate{
    grid-column:1/-1;
  }
  .section-card.section-card-expanded>.section-number{
    grid-column:1;
    margin-bottom:2px;
  }
  .section-card.section-card-expanded>.field-grid{
    grid-row:2;
    padding-right:0;
  }
  .section-card.section-card-expanded>.option-group{grid-row:3}
  .section-card.section-card-expanded>.follow-gate{grid-row:4}
  .section-card.section-card-expanded>.circle-button{
    top:10px;
    right:10px;
  }
  .gate-follow-card{
    width:100%;
    min-height:96px;
  }
}


/* Meilenstein 8 – robuste Zustände und Bedienung */
.position-note{margin:14px 0;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--muted)}
.position-note strong{color:var(--text)}
input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid rgba(240,132,24,.28);outline-offset:2px}
input:invalid:not(:placeholder-shown){border-color:#b3261e}
@media(max-width:640px){.gate-detail .field-grid,.gate-position{grid-template-columns:1fr}.summary-table-row{grid-template-columns:1fr}.summary-table-row span{min-width:0;overflow-wrap:anywhere}}

/* Meilenstein 9 – Öffnungsrichtungen, Zaunanschlüsse und Zeichnung */
.direction-grid,.connection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}
.connection-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.direction-card,.connection-card{min-height:92px;padding:15px;border:2px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);display:grid;gap:5px;align-content:center;text-align:left;cursor:pointer}
.connection-card{text-align:center;justify-items:center}
.direction-card span{font-size:14px;color:var(--muted)}
.direction-card.is-active,.connection-card.is-active{border-color:var(--accent);background:#fff9f2}
.connection-icon{position:relative;width:66px;height:24px;display:block}
.connection-icon:before{content:"";position:absolute;left:25px;top:2px;width:16px;height:20px;border:2px solid #8a541d;background:#f7b45c;border-radius:3px}
.connection-icon.left:after,.connection-icon.both:after{content:"";position:absolute;left:0;top:10px;width:25px;height:5px;background:#53616b;border-radius:3px}
.connection-icon.right:after{content:"";position:absolute;right:0;top:10px;width:25px;height:5px;background:#53616b;border-radius:3px}
.connection-icon.both{background:linear-gradient(#53616b,#53616b) left 10px/25px 5px no-repeat,linear-gradient(#53616b,#53616b) right 10px/25px 5px no-repeat}
.draw-gate .gate-base{stroke:#8a541d;stroke-width:12;stroke-linecap:round}
.draw-gate .gate-leaf{stroke:#c76e16;stroke-width:6;stroke-linecap:round}
.draw-gate .gate-arc{fill:none;stroke:#c76e16;stroke-width:2.5;stroke-dasharray:6 5}
.draw-gate .gate-opening{stroke:#c76e16;stroke-width:4}
.draw-gate .gate-connection{stroke:#53616b;stroke-width:9;stroke-linecap:round}
[data-theme="dark"] .direction-card.is-active,[data-theme="dark"] .connection-card.is-active{background:#2a231c}
@media(max-width:760px){.connection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.direction-grid,.connection-grid{grid-template-columns:1fr}.direction-card,.connection-card{min-height:76px}.connection-card{grid-template-columns:80px 1fr;justify-items:start;text-align:left}}


/* Meilenstein 10 – Funktionsgleichheit, eindeutige Torbilder und Zeichnung */
.direction-card { min-height: 132px; align-items: flex-start; }
.direction-diagram { display:block; width:100%; max-width:180px; height:44px; margin:0 auto 10px; position:relative; border-bottom:3px solid var(--ink); }
.direction-diagram::before { content:""; position:absolute; width:48%; height:30px; left:26%; bottom:0; border:3px solid var(--ink); border-bottom:0; border-radius:4px 4px 0 0; }
.direction-diagram::after { content:""; position:absolute; width:30px; height:18px; top:2px; border-top:3px solid var(--orange); }
.direction-diagram.inward::after { left:30%; transform:rotate(-30deg); transform-origin:left center; }
.direction-diagram.outward::after { right:30%; transform:rotate(30deg); transform-origin:right center; }
.direction-diagram.slide-left::after { left:12%; border-top:0; border-left:3px solid var(--orange); border-bottom:3px solid var(--orange); transform:skewX(-35deg); }
.direction-diagram.slide-right::after { right:12%; border-top:0; border-right:3px solid var(--orange); border-bottom:3px solid var(--orange); transform:skewX(35deg); }
.derived-connection { min-height:96px; display:flex; align-items:center; gap:18px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.derived-connection > div { display:grid; gap:5px; }
.derived-connection span:last-child { color:var(--muted); line-height:1.45; }
.gate-area { fill:rgba(243,132,24,.22); stroke:var(--orange); stroke-width:2; }
.gate-area-line{stroke:rgba(243,132,24,.30);stroke-width:20;stroke-linecap:round}
.gate-direction-text { font-size:12px; font-weight:700; fill:var(--muted); }
.draw-marker circle { fill:var(--surface); stroke:var(--ink); stroke-width:2; }
.draw-marker text { font-size:11px; font-weight:800; fill:var(--ink); }
.draw-marker.corner circle { fill:var(--surface-soft); }
@media (max-width:680px){.direction-grid,.connection-grid{grid-template-columns:1fr}.direction-card{min-height:118px}.derived-connection{align-items:flex-start}}

/* Meilenstein 11: Höhenmodus, robuste Formulare und Fokusführung */
.height-mode-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:18px}.height-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}.height-mode-option{min-height:92px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:6px;color:var(--text);cursor:pointer}.height-mode-option span{color:var(--muted);line-height:1.45}.height-mode-option.is-selected{border-color:var(--orange);box-shadow:0 0 0 2px color-mix(in srgb,var(--orange) 22%,transparent);background:var(--orange-soft)}.global-height-row{display:grid;grid-template-columns:minmax(240px,420px) minmax(240px,420px);gap:14px;margin-top:16px;align-items:end}.global-height-row .inline-note{grid-column:1/-1;margin:0}.inherited-height{min-height:52px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;justify-content:center}.inherited-height span,.inherited-height small{color:var(--muted)}.inherited-height strong{font-size:1rem}.error-box:focus{outline:3px solid var(--orange)}@media(max-width:720px){.height-mode-grid,.global-height-row{grid-template-columns:1fr}.height-mode-card{padding:16px}.height-mode-option{min-height:88px}}

/* Meilenstein 12: Laufzeit- und Darstellungsabsicherung */
select,input,textarea,button{max-width:100%}
.gate-detail label,.gate-detail .option-group{min-width:0}
@media(max-width:560px){.gate-detail .field-grid,.field-grid-section{grid-template-columns:1fr!important}.segmented.three{grid-template-columns:1fr}.gate-direction-text{font-size:13px}}

/* Meilenstein 13 – rückkopplungsfreie iFrame-Höhensteuerung */
html.is-embedded,html.is-embedded body{height:auto!important;min-height:0!important;overflow:visible!important}
html.is-embedded .app-shell{height:auto!important;min-height:0!important}

/* Meilenstein 18 – Stabilität und verständliche Validierung */
.header-actions{display:flex;align-items:center;gap:10px}.header-text-button{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-weight:700;cursor:pointer}.header-text-button:hover{background:var(--surface-soft)}[aria-invalid="true"]{outline:3px solid rgba(190,48,48,.22)!important;border-color:#be3030!important}.submit-status.is-success{position:relative;padding-right:48px}@media(max-width:600px){.header-actions{gap:6px}.header-text-button{min-height:44px;padding:0 10px;font-size:14px}}

/* Meilenstein 22: Zeichnung direkt an jeder Zaunstrecke */
.section-sketch{grid-column:2 / -1;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);padding:12px;overflow:hidden}.section-sketch-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}.section-sketch-head span{color:var(--muted);font-size:13px}.section-sketch-svg{display:block;width:100%;height:auto;max-height:210px}.section-sketch-svg .draw-fence{stroke-width:8}.section-sketch-svg .draw-fence.next{opacity:.55;stroke-dasharray:8 7}.section-sketch-label{fill:var(--text);font:800 14px system-ui,sans-serif}.section-sketch-note{fill:var(--muted);font:700 12px system-ui,sans-serif}.corner-arrow{fill:none;stroke:var(--muted);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.section-sketch-note.gate{fill:#8a541d}.section-sketch-meta{fill:var(--muted);font:600 12px system-ui,sans-serif}
@media(max-width:720px){.section-sketch{grid-column:1 / -1;padding:9px}.section-sketch-head{align-items:flex-start;flex-direction:column;gap:2px}.section-sketch-svg{min-width:390px;max-height:180px}.section-sketch{overflow-x:auto;-webkit-overflow-scrolling:touch}}

.height-mode-option{position:relative;padding-right:48px}.height-mode-option.is-selected::after{content:"✓";position:absolute;right:15px;top:15px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#fff;font-weight:900}.height-mode-option:not(.is-selected)::after{content:"";position:absolute;right:15px;top:15px;width:25px;height:25px;border:2px solid var(--line);border-radius:50%}.section-sketch{margin-top:4px}.section-sketch-head span{white-space:normal;text-align:right}@media(max-width:720px){.section-sketch-head span{text-align:left}.height-mode-option{padding-right:46px}}


/* Meilenstein 25: direkte Torzeichnungen und editierbare Zusammenfassung */
.gate-sketch{margin-top:18px;border:1px solid var(--border);border-radius:13px;background:var(--surface);padding:12px;overflow:hidden}
.gate-sketch-head,.summary-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.gate-sketch-head span{color:var(--muted);font-size:13px;text-align:right}
.gate-sketch-svg{display:block;width:100%;height:auto;max-height:210px}
.gate-sketch-title{fill:var(--text);font:800 15px system-ui,sans-serif}
.gate-sketch-panel{fill:#f7d4a6;stroke:#8a541d;stroke-width:3}
.gate-sketch-leaf,.gate-sketch-arrow{fill:none;stroke:#8a541d;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.gate-sketch-meta{fill:var(--muted);font:700 13px system-ui,sans-serif}
.summary-card-head h2{margin:0}
@media(max-width:720px){.gate-sketch-head{align-items:flex-start;flex-direction:column;gap:3px}.gate-sketch-head span{text-align:left}.gate-sketch{overflow-x:auto;-webkit-overflow-scrolling:touch}.gate-sketch-svg{min-width:470px}.summary-card-head{align-items:center}}

/* Meilenstein 27: eindeutiger Leerzustand im Kombimodus */
.empty-state{padding:28px;border:1px dashed var(--line);border-radius:18px;background:var(--surface-soft);text-align:center;margin-bottom:20px}.empty-state h2{margin:0 0 8px}.empty-state p{max-width:650px;margin:0 auto 18px;color:var(--muted)}


/* Meilenstein 28 – technische Zeichenengine */
.section-sketch-svg.technical,.project-drawing.technical{background:#fff;shape-rendering:geometricPrecision}
.draw-post-square{fill:#fff;stroke:#1f2937;stroke-width:3}
.dimension-line,.dimension-extension,.dimension-tick{stroke:#667085;stroke-width:1.4;fill:none}
.dimension-extension{stroke-dasharray:3 3}
.dimension-text{font-size:13px;font-weight:750;fill:#344054;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.gate-area{fill:rgba(239,132,42,.12);stroke:#e67e22;stroke-width:2}
.gate-leaf{stroke:#111827;stroke-width:3;fill:none;stroke-linecap:round}
.gate-motion{stroke:#e67e22;stroke-width:3;fill:none;stroke-linecap:round}
.project-drawing.technical .draw-fence{stroke-width:6;stroke-linecap:round}
.project-drawing.technical .gate-base{stroke-width:5}
.project-drawing.technical .draw-label rect{fill:#fff;stroke:#d0d5dd;stroke-width:1.3}
.project-drawing.technical .draw-label text{font-size:13px;font-weight:700;fill:#1d2939}
.drawing-scroll{background:#f8fafc;border:1px solid #d8dee8;border-radius:16px;padding:14px}
.drawing-scroll .project-drawing{min-width:760px;width:100%;height:auto;display:block}
.drawing-scroll.small .project-drawing{min-width:680px}
@media(max-width:700px){.section-sketch-svg.technical{min-width:620px}.drawing-scroll{padding:8px}.drawing-scroll .project-drawing{min-width:720px}}

/* Meilenstein 29 – Funktionsumfang 12.2, Block 1 */
.product-options-card{margin-top:22px;border:2px solid var(--border-strong)}
.product-options-card .field-grid{align-items:start}
.header-actions{flex-wrap:wrap}
.header-actions .icon-button:disabled{opacity:.38;cursor:not-allowed}
.privacy-note a{font-weight:800;color:var(--primary)}
@media(max-width:680px){.product-options-card .field-grid{grid-template-columns:1fr}.header-actions{gap:6px}.header-actions .icon-button{min-width:46px}}

/* Meilenstein 34: zusammenhängende Verlaufszeichnungen */
.run-unified-drawing{margin:22px 0 18px;padding:18px;border:1px solid var(--border,#d7dee3);border-radius:16px;background:var(--surface-soft,#f7f9fa)}
.run-unified-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}.run-unified-head strong{display:block;font-size:1.05rem}.run-unified-head span{display:block;margin-top:4px;color:var(--muted,#5d6973);line-height:1.45}.run-drawing-scroll{background:var(--surface,#fff);border:1px solid var(--border,#d7dee3);border-radius:12px;padding:8px}.run-drawing-scroll .project-drawing{min-width:760px;max-height:440px}@media(max-width:720px){.run-unified-drawing{padding:14px;margin:18px 0}.run-drawing-scroll .project-drawing{min-width:680px;max-height:380px}}

/* Meilenstein 34: automatische Zeichenflächen-Anpassung */
.drawing-scroll .project-drawing,
.run-drawing-scroll .project-drawing,
.drawing-scroll.small .project-drawing{
  width:100%;
  min-width:520px;
  max-height:none;
  aspect-ratio:auto;
}
.project-drawing.technical line,
.project-drawing.technical path,
.project-drawing.technical rect,
.project-drawing.technical circle{
  vector-effect:non-scaling-stroke;
}
.run-drawing-scroll{overflow:auto;scrollbar-gutter:stable}
@media (max-width:720px){
  .drawing-scroll .project-drawing,
  .run-drawing-scroll .project-drawing,
  .drawing-scroll.small .project-drawing{min-width:620px}
}
@media print{
  .drawing-scroll .project-drawing,
  .run-drawing-scroll .project-drawing,
  .drawing-scroll.small .project-drawing{min-width:0;width:100%;max-width:100%}
}

/* Meilenstein 34: mehrere Zaunsysteme pro Verlauf */
.run-product-select{display:grid;gap:.35rem;margin-top:.65rem;max-width:420px}.run-product-select span{font-size:.82rem;font-weight:750}.run-product-select select{min-height:50px}.summary-run-product{margin:.2rem 0 .8rem;color:var(--muted);font-weight:650}@media(max-width:720px){.run-product-select{max-width:none;width:100%}}


/* Meilenstein 34 – Öffnungsrichtungen D1–D8 und Zaunanschlüsse O–K */
.detailed-selector{margin-top:1rem}
.option-help{margin:.3rem 0 .8rem;color:var(--muted);font-size:.95rem}
.visual-option-grid{display:grid;gap:.75rem;grid-template-columns:repeat(4,minmax(0,1fr))}
.connection-code-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.visual-option-card{min-height:156px;border:2px solid var(--border);border-radius:14px;background:var(--surface);padding:.65rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:.3rem;cursor:pointer;color:var(--text)}
.visual-option-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.visual-option-card.is-active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);background:var(--accent-soft)}
.visual-option-card svg{width:100%;height:82px;display:block}.combined-preview-panel .combined-preview-box{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:.5rem}.combined-preview-panel svg{width:100%;height:120px;display:block}
.visual-option-card strong{font-size:1rem}
.visual-option-card span{font-size:.82rem;line-height:1.25;color:var(--muted)}
.visual-option-card .connection-meta{display:flex;flex-direction:column;gap:.18rem;margin-top:.2rem;width:100%}
.visual-option-card .connection-meta .connection-meta-item{display:block;font-size:.78rem;line-height:1.2;color:var(--text-soft)}
.preview-road{stroke:#9aa7b2;stroke-width:2;stroke-dasharray:5 4}.preview-post{fill:#20384a}.preview-gate{stroke:#ed7d16;stroke-width:5;stroke-linecap:round}.preview-gate-box{fill:none;stroke:#ed7d16;stroke-width:4}.preview-fence{stroke:#31708e;stroke-width:5;stroke-linecap:round}.preview-handle{fill:#ed7d16;stroke:#20384a;stroke-width:1.2}.preview-handle-line{stroke:#20384a;stroke-width:1.6;stroke-linecap:round}.visual-option-card svg text,.combined-preview-panel svg text{font:11px system-ui,sans-serif;fill:var(--muted)}
.combined-preview-panel .preview-legend{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.65rem;font-size:.88rem;color:var(--muted)}
.combined-preview-panel .preview-legend span{display:inline-flex;align-items:center;gap:.4rem}
.legend-swatch{display:inline-block;width:18px;height:4px;border-radius:99px;background:var(--border)}
.legend-swatch.legend-gate{background:#ed7d16}
.legend-swatch.legend-fence{background:#31708e}
.legend-swatch.legend-handle{width:12px;height:12px;border-radius:999px;background:#ed7d16;border:2px solid #20384a}
.detail-link{display:inline-flex;margin-top:.7rem;color:var(--accent);font-weight:700;text-decoration:none}.detail-link:hover{text-decoration:underline}
@media(max-width:900px){.visual-option-grid,.connection-code-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.visual-option-grid,.connection-code-grid{grid-template-columns:1fr}.visual-option-card{min-height:132px;display:grid;grid-template-columns:120px 44px 1fr;text-align:left;align-items:center}.visual-option-card svg{height:72px}.visual-option-card span{font-size:.9rem}}

.gate-preview-placeholder{border:2px dashed var(--border);border-radius:14px;padding:1rem;display:flex;flex-direction:column;gap:.3rem;background:var(--surface-soft);color:var(--muted)}
.gate-preview-placeholder strong{color:var(--text);font-size:1rem}
.fill-chip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.fill-chip{min-height:52px;border:2px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);padding:.65rem .8rem;display:flex;align-items:center;gap:.65rem;text-align:left;font-weight:700;cursor:pointer;transition:border-color .2s ease,transform .2s ease,background .2s ease}
.fill-chip:hover{border-color:var(--accent);transform:translateY(-1px)}
.fill-chip.is-active{border-color:var(--accent);background:var(--accent-soft)}
.fill-check{width:24px;height:24px;border:2px solid var(--border);border-radius:6px;display:grid;place-items:center;flex:0 0 24px}
.fill-chip.is-active .fill-check{border-color:var(--accent);background:var(--accent);color:white}
@media(max-width:640px){.fill-chip-grid{grid-template-columns:1fr}}

/* M38 – Originalskizzen Öffnungsrichtungen / Zaunanschlüsse */
.preview-frame{stroke:#1f2d38;stroke-width:3.2;stroke-linecap:round}
.preview-post-outline{fill:#ffffff;stroke:#1f2d38;stroke-width:2.1}
.preview-hinge{fill:#ffffff;stroke:#1f2d38;stroke-width:1.4}
.preview-leaf{stroke:#ed7d16;stroke-width:4.5;stroke-linecap:round}
.preview-fence{stroke:#2f6f8f;stroke-width:4.4;stroke-linecap:round}
.preview-fence-dot{fill:#2f6f8f}
.preview-side-text{font:10px system-ui,sans-serif;fill:var(--text-soft)}
.visual-option-card svg,.combined-preview-panel svg{overflow:visible}
.visual-option-card strong{margin-top:.1rem}
.fill-chip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.fill-chip{justify-content:flex-start;text-align:left}
.fill-chip.is-active{border-color:var(--accent);background:var(--accent-soft)}


/* M39 – Zusammenfassung, Druck/PDF und Torvorschau */
.summary-gate.detailed{break-inside:avoid;page-break-inside:avoid}
.summary-gate-preview{border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);padding:.65rem;margin:.65rem 0 1rem}
.summary-gate-preview svg{display:block;width:100%;height:150px}
.gate-preview-placeholder.compact{margin:.65rem 0 1rem}
.print-drawing-section{break-inside:avoid;page-break-inside:avoid}
@media print{
  @page{size:A4 portrait;margin:12mm}
  body{background:#fff!important;color:#111!important;font-size:10pt}
  .site-header,.step-header,.bottom-nav,.summary-actions,.drawing-toolbar button,.text-button{display:none!important}
  main,.app-shell,.content-shell{max-width:none!important;width:100%!important;margin:0!important;padding:0!important}
  .summary-card{box-shadow:none!important;border:1px solid #bbb!important;margin:0 0 8mm!important;padding:5mm!important;background:#fff!important}
  .summary-gate-preview,.drawing-scroll{overflow:visible!important;border:0!important;background:#fff!important;padding:0!important}
  .summary-gate-preview svg,.project-drawing{max-width:100%!important;height:auto!important}
  .visual-option-card,.fill-chip{break-inside:avoid}
  .print-drawing-section{page-break-before:auto;page-break-after:auto}
}


/* M41 – klarere Tor- und Anschlussauswahl */
.connection-code-grid .visual-option-card{min-height:205px}
.connection-code-grid .visual-option-card svg{height:110px}
.connection-code-grid .connection-meta{padding-top:.25rem;border-top:1px solid var(--border)}
.combined-preview-panel .combined-preview-box{min-height:150px;display:flex;align-items:center;justify-content:center}
.combined-preview-panel svg{height:145px}
@media(max-width:720px){
 .connection-code-grid .visual-option-card{min-height:170px}
 .connection-code-grid .visual-option-card svg{height:92px}
 .combined-preview-panel svg{height:125px}
}


/* M43 – Druck/PDF und Tor-Datenvertrag */
.summary-gate-preview{max-width:720px;margin:.75rem auto 1rem}
.summary-gate-preview svg{width:100%;height:auto;min-height:150px}
@media print{
  .summary-gate-preview{max-width:170mm;margin:3mm auto 5mm}
  .summary-gate-preview svg{min-height:35mm}
  .combined-preview-panel,.summary-gate,.print-drawing-section{break-inside:avoid;page-break-inside:avoid}
  .visual-option-card,.fill-chip{box-shadow:none!important}
}

/* M44 – Sicherheit, Hilfetexte und responsive Wartbarkeit */
.bot-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.context-help{margin-top:1rem;border:1px solid var(--border);border-radius:12px;background:var(--surface-soft);padding:.75rem 1rem}
.context-help summary{cursor:pointer;font-weight:750;color:var(--text)}
.context-help p{margin:.65rem 0 0;color:var(--muted);line-height:1.5}
@media(max-width:720px){.header-actions{gap:.35rem}.header-text-button{padding-inline:.65rem}.app-footer{gap:.55rem}.app-footer .button{min-width:0;flex:1}.footer-meta{display:none}.content-card{padding:clamp(.8rem,3vw,1.25rem)}}
@media(min-width:1200px){.app-shell{max-width:1440px}.content-card{padding:1.75rem 2rem}.visual-option-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* M45 – kombinierte Eingabelogik nach Version 12.2 */
.inline-gate-config{margin-top:1rem;padding:1rem;border:2px solid #e5c4b3;border-radius:16px;background:#fdf8f4}
.inline-gate-head{margin-bottom:.85rem}
.inline-gate-head h3{margin:.15rem 0 .25rem;color:#8b472b}
.inline-gate-head p{margin:0;color:var(--muted);font-size:.92rem}
.inline-gate-types{margin-bottom:1rem}
.inline-gate-config .gate-detail{margin-top:.75rem}
@media(max-width:640px){.inline-gate-config{padding:.75rem;margin-inline:-.15rem}.inline-gate-types{grid-template-columns:1fr}}

/* M47 – Fortsetzen, Rückruf und sichere Löschbestätigung */
.resume-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:1rem;background:rgba(18,29,38,.58);backdrop-filter:blur(4px)}
.resume-card{width:min(520px,100%);border-radius:20px;background:var(--surface);color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.28);padding:clamp(1.25rem,4vw,2rem)}
.resume-card h2{margin:.2rem 0 .65rem}.resume-card p{line-height:1.55}.resume-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.25rem}
.header-text-button.is-warning{background:#fff3cd;border-color:#b7791f;color:#7a4b00}
.callback-help{margin-top:1rem}.callback-help[open]{padding-bottom:.75rem}.callback-help label{margin-top:.75rem}
@media(max-width:560px){.resume-actions{flex-direction:column-reverse}.resume-actions .button{width:100%}}


/* M54 – 12.2 Komfortfunktionen, responsive und barrierearm */
.attachment-list{display:flex;flex-direction:column;gap:.45rem;margin-top:.55rem}
.attachment-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .65rem;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.attachment-item>span{min-width:0;overflow-wrap:anywhere}
.attachment-remove{flex:0 0 36px;width:36px;height:36px;min-height:36px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);font-size:1.35rem;line-height:1;cursor:pointer}
.attachment-remove:hover,.attachment-remove:focus-visible{border-color:var(--danger,#b42318);color:var(--danger,#b42318)}
.submit-status.is-success{display:flex;flex-direction:column;gap:.3rem}
.submit-status.is-success span{font-size:.92rem}
@media(max-width:640px){.summary-actions{display:grid;grid-template-columns:1fr}.summary-actions .button{width:100%}.attachment-item{align-items:flex-start}.attachment-remove{flex-basis:42px;width:42px;height:42px;min-height:42px}}


/* Meilenstein 56 – UX-Refresh, Button-/Pflichtfeld-Klarheit und feinere Zeichnungen */

:root{
  --bg:#f4f7f8;--surface:#ffffff;--surface-2:#fbfcfd;--surface-soft:#f6f8fa;
  --text:#15202b;--muted:#61707d;--border:#d8e0e6;--line:#d8e0e6;
  --accent:#ef8b23;--accent-strong:#d97109;--orange:#ef8b23;--orange-soft:#fff4e7;
  --ink:#1d2a36;--focus:#0f6cbd;--shadow:0 14px 34px rgba(15,23,42,.07);
  --shadow-soft:0 8px 20px rgba(15,23,42,.05);--radius:20px;--radius-sm:14px;
}
html,body{font-size:16px}
body{letter-spacing:-.003em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.app-header{height:82px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(216,224,230,.85)}
.hero-panel,.content-card,.run-card,.form-card,.run-unified-drawing,.drawing-scroll,.gate-sketch,.section-sketch,.summary-card,.privacy-card,.automatic-connection-note,.derived-connection,.height-mode-card,.empty-state{box-shadow:var(--shadow-soft)}
.hero-panel,.content-card,.run-card,.form-card,.section-card,.choice-card,.product-card,.gate-detail,.section-sketch,.gate-sketch,.drawing-scroll,.summary-card,.privacy-card,.automatic-connection-note,.derived-connection,.height-mode-card,.empty-state{border-color:var(--border)}
.hero-panel{padding:30px 34px 24px}
.content-card{padding:30px;min-height:420px}
.hero-panel h1{letter-spacing:-.032em;line-height:1.03}
.hero-panel p:not(.eyebrow),.section-intro,.choice-card p,.product-card p,.run-meta,.inline-note,.hint,.muted,.empty-state p,.summary-card p{color:var(--muted)}
.progress-track{height:10px;background:#e8edf1;margin-top:24px}
.progress-track span{box-shadow:0 0 0 1px rgba(239,139,35,.08) inset}
.button,.header-text-button,.icon-button,.filter-chip,.text-button,.segmented button,.height-mode-option,.choice-card,.product-card,.direction-card,.connection-card{transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease}
.button,.header-text-button,.icon-button,.filter-chip,.text-button,.segmented button{min-height:52px}
.button,.header-text-button,.filter-chip,.segmented button{border-radius:14px}
.button{padding:0 20px;box-shadow:none}
.button-primary{background:linear-gradient(180deg,#f29a39,#e47f10);color:#fff;box-shadow:0 10px 18px rgba(228,127,16,.18)}
.button-primary:not(:disabled):hover,.button-primary:not(:disabled):focus-visible{transform:translateY(-1px);box-shadow:0 14px 22px rgba(228,127,16,.24)}
.button-secondary,.header-text-button,.icon-button,.filter-chip,.segmented button{background:var(--surface);border:1px solid var(--border);color:var(--text)}
.button-secondary:not(:disabled):hover,.header-text-button:hover,.icon-button:hover,.filter-chip:hover,.segmented button:hover{background:var(--surface-soft);border-color:#c6d0d8;transform:translateY(-1px)}
.button:focus-visible,.header-text-button:focus-visible,.icon-button:focus-visible,.filter-chip:focus-visible,.text-button:focus-visible,.segmented button:focus-visible,.choice-card:focus-visible,.product-card:focus-visible,.direction-card:focus-visible,.connection-card:focus-visible,input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--focus) 26%,transparent)!important;outline-offset:2px}
.button:disabled,.header-text-button:disabled,.icon-button:disabled{opacity:.5;transform:none;box-shadow:none}
input,select,textarea,.search-field input{min-height:54px;border-radius:14px;padding:13px 15px;background:var(--surface);border:1px solid var(--border);box-shadow:inset 0 1px 2px rgba(15,23,42,.02)}
textarea{min-height:132px;padding-top:14px}
label>span,.search-field span,.field-label,.option-group>legend{font-size:14px;font-weight:800;letter-spacing:.01em}
[aria-invalid="true"]{outline:3px solid rgba(190,48,48,.16)!important;border-color:#c2382b!important;background:#fffafa!important}
.error-box{border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-soft)}
.choice-grid,.product-grid,.field-grid,.field-grid-section,.summary-grid{gap:16px}
.choice-card,.product-card{border-width:1px;border-radius:18px;padding:20px 20px 18px;box-shadow:none}
.choice-card:hover,.product-card:hover{box-shadow:var(--shadow-soft)}
.choice-card.is-selected,.product-card.is-selected,.direction-card.is-active,.connection-card.is-active,.height-mode-option.is-selected{background:#fff8f1;border-color:#efb36d;box-shadow:0 0 0 3px rgba(239,139,35,.12)}
.run-card,.form-card,.section-card,.height-mode-card,.section-sketch,.gate-sketch,.drawing-scroll,.summary-card,.privacy-card,.automatic-connection-note,.derived-connection{background:var(--surface);border-radius:18px}
.section-card{grid-template-columns:44px 1fr auto;gap:14px;padding:16px}
.section-number{width:34px;height:34px;background:#243544;font-size:14px}
.section-sketch,.gate-sketch,.drawing-scroll,.run-unified-drawing{background:linear-gradient(180deg,#ffffff,#fbfcfd)}
.drawing-scroll{padding:16px}
.section-sketch-svg,.gate-sketch-svg,.drawing-scroll .project-drawing{filter:drop-shadow(0 1px 0 rgba(15,23,42,.02))}
.preview-post-outline{fill:#fff;stroke:#22313f;stroke-width:1.7}
.preview-frame{stroke:#22313f;stroke-width:2.4;stroke-linecap:round}
.preview-leaf{stroke:#e37e12;stroke-width:3.3;stroke-linecap:round}
.preview-fence{stroke:#467b97;stroke-width:3.1;stroke-linecap:round}
.preview-gate-box{fill:#fff7ef;stroke:#e37e12;stroke-width:2.5}
.preview-handle{fill:#e37e12;stroke:#22313f;stroke-width:1}
.preview-handle-line{stroke:#22313f;stroke-width:1.35;stroke-linecap:round}
.visual-option-card svg text,.combined-preview-panel svg text{font:11px system-ui,sans-serif;fill:#5c6b78}
.project-drawing.technical,.section-sketch-svg.technical{background:#fff}
.project-drawing.technical .draw-fence,.section-sketch-svg .draw-fence{stroke:#253746;stroke-width:4.2;stroke-linecap:round}
.project-drawing.technical .gate-base{stroke:#a5621a;stroke-width:3.8}
.project-drawing.technical .gate-area-line{stroke:rgba(239,132,42,.16);stroke-width:13;stroke-linecap:round}
.project-drawing.technical .gate-leaf{stroke:#334155;stroke-width:2.2}
.project-drawing.technical .gate-motion{stroke:#df7f1f;stroke-width:2.5}
.draw-post-square{fill:#fff;stroke:#1f2937;stroke-width:2.2}
.dimension-line,.dimension-extension,.dimension-tick{stroke:#8091a0;stroke-width:1.2}
.dimension-text{font-size:12px;font-weight:700;fill:#475467;stroke:#fff;stroke-width:4px}
.project-drawing.technical .draw-label rect{rx:10;fill:#fff;stroke:#d3dbe3;stroke-width:1}
.project-drawing.technical .draw-label text,.section-sketch-label,.gate-sketch-title{font-size:12px;font-weight:750;fill:#1f2f3d}
.section-sketch-note,.gate-sketch-meta,.section-sketch-meta{font-size:11px;fill:#6b7785}
.app-footer{min-height:86px;padding:14px max(20px,calc((100vw - var(--max))/2));background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 -8px 22px rgba(15,23,42,.06)}
.footer-meta{font-size:13px}
.header-actions{gap:8px}
.icon-button{width:46px;height:46px;font-size:20px;box-shadow:none}
.header-text-button.is-warning{border-color:#efb36d;background:#fff4e7;color:#91560f}
.attachment-list button,.attachment-remove{min-height:40px}
.submit-status{border-radius:14px;padding:15px 16px;box-shadow:var(--shadow-soft)}
.submit-status.is-success::after{content:"✓";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#2f8f4e;color:#fff;font-weight:900}
[data-theme="dark"]{--bg:#0f1419;--surface:#171d23;--surface-2:#1d252c;--surface-soft:#202a32;--text:#eef3f7;--muted:#a7b3bd;--border:#2d3842;--line:#2d3842;--ink:#f1f5f9;--shadow:0 14px 34px rgba(0,0,0,.22);--shadow-soft:0 8px 20px rgba(0,0,0,.2)}
[data-theme="dark"] .app-header,[data-theme="dark"] .app-footer{background:rgba(23,29,35,.94)}
[data-theme="dark"] .button-secondary,[data-theme="dark"] .header-text-button,[data-theme="dark"] .icon-button,[data-theme="dark"] .filter-chip,[data-theme="dark"] .segmented button,input,select,textarea{background:var(--surface)}
[data-theme="dark"] .choice-card.is-selected,[data-theme="dark"] .product-card.is-selected,[data-theme="dark"] .direction-card.is-active,[data-theme="dark"] .connection-card.is-active,[data-theme="dark"] .height-mode-option.is-selected{background:#2a231c}
[data-theme="dark"] .project-drawing.technical,[data-theme="dark"] .section-sketch-svg.technical{background:#141a20}
[data-theme="dark"] .project-drawing.technical .draw-label rect{fill:#1f2933;stroke:#415060}
[data-theme="dark"] .dimension-text{fill:#cbd5e1;stroke:#111827}
@media (max-width:1024px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-panel,.content-card{padding:24px}.app-main{margin-bottom:112px}}
@media (max-width:820px){.app-header{height:auto;padding:12px 14px;align-items:flex-start;gap:12px;flex-wrap:wrap}.brand{min-width:0}.header-actions{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}.app-main{width:min(100% - 16px,var(--max));margin-top:10px}.hero-panel{padding:22px 18px 18px}.content-card{padding:20px}.button,.header-text-button,.icon-button,.filter-chip,.segmented button,input,select,textarea{min-height:50px}.app-footer{padding:10px 10px calc(10px + env(safe-area-inset-bottom));gap:10px}.button{font-size:15px}}
@media (max-width:640px){.product-grid,.choice-grid,.field-grid,.field-grid-section,.summary-grid,.contact-layout,.address-grid{grid-template-columns:1fr!important}.run-head,.summary-card-head,.gate-sketch-head,.section-sketch-head{align-items:flex-start;flex-direction:column}.section-card{grid-template-columns:1fr}.section-number{margin-bottom:2px}.section-sketch,.gate-sketch,.drawing-scroll{padding:10px}.drawing-scroll .project-drawing{min-width:620px}.footer-meta{display:none}.button{flex:1}.hero-panel h1{font-size:clamp(24px,8vw,31px)}}
@media (max-width:430px){.app-main{width:min(100% - 10px,var(--max))}.hero-panel,.content-card{border-radius:16px;padding:16px}.choice-card,.product-card,.run-card,.form-card,.section-card{padding:15px}.button,.header-text-button{border-radius:13px}.brand-mark{width:40px;height:40px}}

/* Meilenstein 58 – zentrierte Einbindung */
html.is-embedded body{display:block;width:100%}.app-shell{width:100%;max-width:100%;margin-inline:auto}.app-main{margin-left:auto;margin-right:auto}


/* Meilenstein 59 – kompakter Verlauf, sichere Auswahlzustände und kollisionsarme Zeichnungen */
.flow-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px}.flow-guide>div{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.flow-guide b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#243544;color:#fff;font-size:13px}.flow-guide span{font-weight:750;font-size:14px}.run-card{padding:16px}.section-card{padding:14px}.field-grid-section{grid-template-columns:repeat(4,minmax(0,1fr))}.follow-gate{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.gate-follow-grid,.mount-grid{gap:10px}.gate-follow-card,.mount-card{min-height:76px;padding:12px 14px}.run-unified-drawing{padding:12px;margin:14px 0}.drawing-scroll{overflow:auto}.project-drawing.technical .draw-label rect{fill:rgba(255,255,255,.96)}.project-drawing.technical .draw-label text{font-size:11px}.project-drawing.technical .gate-direction-text{display:none}.dimension-text{font-size:11px}.segmented button.is-selected,.segmented button.is-active{background:#243544;color:#fff;border-color:#243544;box-shadow:0 0 0 2px rgba(36,53,68,.10)}.form-card h3{margin-top:18px}.summary-actions{gap:10px;flex-wrap:wrap}.summary-actions .button{min-width:220px}.choice-card{min-height:220px}.choice-visual{height:72px}.choice-card h2{font-size:20px}.product-card{min-height:145px}.content-card{min-height:340px}@media(max-width:900px){.field-grid-section{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.flow-guide{grid-template-columns:1fr}.field-grid-section{grid-template-columns:1fr}.choice-card{min-height:auto}.summary-actions .button{min-width:0;width:100%}.run-card,.section-card{padding:12px}.drawing-scroll .project-drawing{min-width:520px}}


/* Meilenstein 62 – stabile Datenlogik, kompaktere Oberfläche ohne Render-Umbau */
.run-list{gap:16px}.run-card{padding:17px;border-radius:16px}.run-head{margin-bottom:12px}.run-head h2{font-size:19px}
.section-list{gap:12px}.section-card{padding:14px;border-radius:14px;gap:12px}.section-card-expanded{background:var(--surface)}
.field-grid-section{gap:12px}.option-group{margin-top:12px}.mount-grid,.gate-follow-grid{gap:10px}.mount-card,.gate-follow-card{min-height:82px;padding:13px 14px;border-radius:13px}
.mount-card strong,.gate-follow-card strong{font-size:15px}.mount-card span,.gate-follow-card span{font-size:13px;line-height:1.35}
.flow-guide{padding:11px 14px;gap:10px;border-radius:14px}.flow-guide div{min-height:40px}.flow-guide b{width:26px;height:26px;font-size:12px}
.run-unified-drawing{padding:14px;margin:16px 0 14px}.drawing-scroll{padding:12px}.drawing-scroll .project-drawing{min-width:680px}
.project-drawing.technical .draw-fence{stroke-width:4}.project-drawing.technical .gate-base{stroke-width:3.5}.project-drawing.technical .gate-area-line{stroke-width:11}
.project-drawing.technical .gate-leaf{stroke-width:2}.project-drawing.technical .gate-motion{stroke-width:2.2}.draw-post-square{stroke-width:2}
.dimension-text{font-size:11px;stroke-width:4px}.project-drawing.technical .draw-label text{font-size:11px}.project-drawing.technical .draw-label rect{stroke-width:1}
.add-button,.add-run-button{min-height:50px;border-radius:14px}.circle-button{width:44px;height:44px;min-width:44px}
@media(max-width:720px){.run-card{padding:13px}.section-card{padding:12px;grid-template-columns:36px 1fr}.section-number{width:32px;height:32px}.field-grid-section{grid-template-columns:1fr!important}.mount-grid,.gate-follow-grid{grid-template-columns:1fr}.run-unified-drawing{padding:9px}.drawing-scroll .project-drawing{min-width:560px}.flow-guide{grid-template-columns:1fr}.run-head{align-items:flex-start}}


/* Meilenstein 63 – kompakter Kontaktbereich und stabile Versandanzeige */
.contact-layout{gap:16px}.contact-layout>.form-card{padding:20px}.contact-layout h2{margin-bottom:14px}.contact-layout h3{margin:18px 0 8px}.address-grid,.field-grid{gap:12px}.contact-layout input,.contact-layout select{min-height:50px}.contact-layout textarea{min-height:118px}.contact-layout .segmented button{min-height:48px;padding:8px 12px}.privacy-card{padding:18px 20px}.privacy-card .check-row{margin:0}.privacy-note{margin-top:10px}.final-summary{padding:13px 16px;margin-top:14px}.submit-status.is-error{white-space:normal;overflow-wrap:anywhere}.contact-layout input[type=file]{min-height:52px}@media(max-width:760px){.contact-layout>.form-card,.privacy-card{padding:16px}.contact-layout h3{margin-top:14px}.contact-layout .segmented.three{grid-template-columns:1fr}.final-summary{display:grid;gap:6px}}


/* M68 – kompakte, klare Kontaktseite */
.contact-layout{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:14px}
.contact-layout>.form-card{padding:18px}
.contact-layout h2{font-size:1.2rem;margin:0 0 12px}
.contact-layout h3{font-size:.98rem;margin:15px 0 7px}
.contact-layout label>span:first-child{font-size:.88rem;font-weight:760}
.contact-layout .field-grid,.contact-layout .address-grid{gap:10px 12px}
.contact-layout input,.contact-layout select{min-height:46px;padding-top:9px;padding-bottom:9px}
.contact-layout textarea{min-height:92px}
.contact-layout .segmented{gap:8px}
.contact-layout .segmented button{min-height:44px;padding:7px 10px;line-height:1.2}
.contact-layout .check-row{margin:12px 0}
.callback-help{margin-top:13px}
.callback-help summary,.privacy-card summary{min-height:42px;display:flex;align-items:center}
.privacy-card{padding:15px 18px;margin-top:14px}
.privacy-card .privacy-note{font-size:.86rem;line-height:1.45}
.final-summary{padding:11px 14px;margin-top:12px;gap:7px 16px;font-size:.9rem}
.submit-status{display:grid;gap:4px;margin-bottom:12px;padding:12px 14px}
.attachment-list:empty{display:none}
.attachment-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft)}
.contact-layout input:required:invalid:not(:placeholder-shown){border-color:#b65b52}
.contact-layout input:focus-visible,.contact-layout textarea:focus-visible{outline:3px solid rgba(36,53,68,.16);outline-offset:1px}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr}.contact-layout>.form-card{padding:16px}}
@media(max-width:640px){.contact-layout{gap:10px}.contact-layout>.form-card,.privacy-card{padding:14px}.contact-layout h2{font-size:1.1rem}.contact-layout input,.contact-layout select{min-height:48px}.final-summary{font-size:.86rem}}


/* Meilenstein 69 – Höhen-, Zeichnungs- und Bedienungsregression */
.segmented button[disabled]{opacity:.48;cursor:not-allowed;box-shadow:none}
.segmented button.is-selected{outline:2px solid rgba(36,53,68,.16);outline-offset:1px}
.contact-layout input[pattern="[0-9]{5}"]{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.circle-button,.attachment-remove{display:inline-grid;place-items:center;aspect-ratio:1/1;padding:0;line-height:1;border-radius:50%!important}
.drawing-scroll{scrollbar-gutter:stable both-edges;overscroll-behavior-inline:contain}
.project-drawing.technical{max-width:none;height:auto}
.run-unified-drawing:focus-within{box-shadow:0 0 0 3px rgba(36,53,68,.10)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:var(--surface);color:var(--text);border-color:var(--border)}
@media(max-width:640px){.app-footer .button{min-width:0}.segmented.two,.segmented.three{grid-template-columns:1fr}.drawing-scroll{scroll-snap-type:x proximity}.project-drawing.technical{scroll-snap-align:start}.circle-button{width:46px;height:46px;min-width:46px}}


/* Meilenstein 70 – Premium-Qualität, konsistente Bedienung und druckstabile Ausgabe */
:root{--control-h:52px;--control-radius:13px;--card-gap:18px}
.button,.header-text-button,.filter-chip,.segmented button{min-height:var(--control-h);border-radius:var(--control-radius);line-height:1.25}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding-inline:20px;white-space:normal;text-align:center}
.field-grid,.field-grid-section,.address-grid,.contact-layout{align-items:start}
.field-grid>label,.field-grid-section>label,.address-grid>label,.contact-layout>label{min-width:0}
input,select,textarea{width:100%;box-sizing:border-box;font-size:16px}
.form-card,.summary-card,.run-card{scroll-margin-top:92px}
.run-head,.summary-card-head{gap:12px}
.run-head h2,.summary-card-head h2{line-height:1.25}
.section-card{align-items:start}
.section-card .button,.run-head .button,.summary-card-head .button{flex:0 0 auto}
.choice-card,.product-card,.direction-card,.connection-card{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background-color .16s ease}
.choice-card:active,.product-card:active,.direction-card:active,.connection-card:active{transform:translateY(0)}
.drawing-scroll{overscroll-behavior-inline:contain;scrollbar-gutter:stable both-edges}
.drawing-scroll .project-drawing{display:block;margin-inline:auto;max-width:none}
.project-drawing.technical .draw-fence,.section-sketch-svg .draw-fence{vector-effect:non-scaling-stroke}
.project-drawing.technical .gate-base,.project-drawing.technical .gate-motion,.project-drawing.technical .gate-leaf,.dimension-line,.dimension-extension,.dimension-tick,.draw-post-square{vector-effect:non-scaling-stroke}
.drawing-legend{display:flex;flex-wrap:wrap;gap:10px 18px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}
.summary-table-row{align-items:start}
.summary-list>div{break-inside:avoid}
.submit-status{position:relative;padding-right:54px}
@media(max-width:700px){
 :root{--control-h:50px}
 .app-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .app-footer .button{width:100%;min-width:0}
 .header-actions{width:100%;justify-content:flex-end}
 .drawing-scroll{margin-inline:-4px}
 .drawing-scroll .project-drawing{min-width:500px}
 .summary-table-row{grid-template-columns:1fr;gap:4px;padding:13px 0}
 .summary-table-row>span:first-child{font-weight:800;color:var(--text)}
}
@media(max-width:430px){
 .app-footer{grid-template-columns:1fr 1fr;padding-inline:8px}
 .button{padding-inline:12px}
 .icon-button{min-width:46px;min-height:46px}
 .section-card .icon-button,.circle-button,.add-button,.remove-button{aspect-ratio:1/1;flex:0 0 auto}
}
@media print{
 .app-header,.app-footer,.drawing-toolbar,.summary-actions,.text-button{display:none!important}
 body,.app-shell,.app-main{background:#fff!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
 .content-card,.summary-card,.print-drawing-section{box-shadow:none!important;border:0!important;break-inside:avoid;padding:10mm 0!important}
 .drawing-scroll{overflow:visible!important;border:0!important;padding:0!important}
 .drawing-scroll .project-drawing{min-width:0!important;width:100%!important;max-width:100%!important;height:auto!important}
 .summary-card{page-break-inside:avoid}
}

/* M72 Produktionsreife: Fokus, Bewegung und Formularkonsistenz */
:where(button, input, select, textarea, summary, a):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
button[disabled], .segmented button[disabled] {
  cursor: not-allowed;
  opacity: .56;
}
input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown) {
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* Meilenstein 74 – vollständige Button-Größenprüfung */
:root{--button-height:52px;--button-height-mobile:50px;--button-icon-size:46px;--button-icon-size-mobile:48px;--button-pad-x:18px}
button,.button,.header-text-button,.filter-chip,.text-button,.segmented button,.add-button,.add-run-button,.mount-card,.gate-follow-card{box-sizing:border-box;font:inherit;overflow-wrap:anywhere;word-break:normal}
.button,.header-text-button,.filter-chip,.text-button,.segmented button,.add-button,.add-run-button{min-height:var(--button-height);height:auto;padding:10px var(--button-pad-x);display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.25;text-align:center;white-space:normal}
.button-primary,.button-secondary{min-width:136px}.app-footer .button{min-width:148px}.summary-actions .button{min-width:210px}.header-text-button{min-width:112px}.filter-chip{min-width:88px}.segmented button{width:100%;min-width:0}
.icon-button,.circle-button,.attachment-remove,.remove-button{width:var(--button-icon-size)!important;min-width:var(--button-icon-size)!important;height:var(--button-icon-size)!important;min-height:var(--button-icon-size)!important;max-width:var(--button-icon-size)!important;padding:0!important;display:inline-grid!important;place-items:center!important;flex:0 0 var(--button-icon-size)!important;aspect-ratio:1/1;border-radius:50%!important;line-height:1!important}
.choice-card,.product-card,.direction-card,.connection-card,.visual-option-card{min-height:148px;height:auto}.mount-card,.gate-follow-card{min-height:88px;height:auto}
.choice-card h2,.product-card h2,.direction-card strong,.connection-card strong,.mount-card strong,.gate-follow-card strong{overflow-wrap:anywhere}
button svg,button img{flex:0 0 auto;max-width:100%}button:active:not(:disabled){transform:translateY(0)}
@media(max-width:700px){:root{--button-height:var(--button-height-mobile);--button-pad-x:14px}.button,.header-text-button,.filter-chip,.text-button,.segmented button,.add-button,.add-run-button{font-size:15px}.app-footer .button,.summary-actions .button,.button-primary,.button-secondary{min-width:0;width:100%}.header-text-button,.filter-chip{min-width:0}.icon-button,.circle-button,.attachment-remove,.remove-button{width:var(--button-icon-size-mobile)!important;min-width:var(--button-icon-size-mobile)!important;height:var(--button-icon-size-mobile)!important;min-height:var(--button-icon-size-mobile)!important;max-width:var(--button-icon-size-mobile)!important;flex-basis:var(--button-icon-size-mobile)!important}.choice-card,.product-card,.direction-card,.connection-card,.visual-option-card{min-height:132px}}
@media(max-width:430px){.app-footer{gap:8px}.app-footer .button{padding-inline:10px;font-size:14px}.segmented.two,.segmented.three{grid-template-columns:1fr}}


/* Meilenstein 74 – Benutzerführung und eindeutige Validierung */
.progress-track{position:relative}
.error-box{scroll-margin-top:110px}
.error-box strong{display:block;font-size:16px}
.error-box li+li{margin-top:5px}
.error-help{margin:10px 0 0;font-size:13px;font-weight:700}
.is-invalid{border-color:#b53a32!important;box-shadow:0 0 0 3px rgba(181,58,50,.13)!important}
input.is-invalid,select.is-invalid,textarea.is-invalid{background:#fff8f7}
[data-theme="dark"] input.is-invalid,[data-theme="dark"] select.is-invalid,[data-theme="dark"] textarea.is-invalid{background:#2c2020}
.app-footer .button{max-width:340px}
#nextButton{flex:1.2}
#backButton{flex:.8}
@media(max-width:700px){.progress-count{font-size:13px}.app-footer .button{max-width:none}.app-footer{align-items:stretch}.app-footer .button{line-height:1.2}.hero-panel{scroll-margin-top:8px}}
@media(max-width:430px){#nextButton,#backButton{font-size:13.5px;padding-inline:8px}.progress-count{width:100%;justify-content:center;text-align:center}}

/* Meilenstein 76 – belastbares Responsive- und Button-System */
:root{
  --ui-control-height:54px;
  --ui-control-radius:13px;
  --ui-control-gap:12px;
  --ui-icon-size:46px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
.app-shell,.app-header,.app-main,.hero-panel,.content-card,.app-footer,
.run-card,.form-card,.summary-card,.section-card,.field-grid,.field-grid-section,
.choice-grid,.product-grid,.color-grid,.mount-grid,.contact-layout{min-width:0;max-width:100%}
img,svg,canvas,video{max-width:100%}

/* Alle normalen Aktionsbuttons verwenden dieselbe Geometrie. */
.button,.header-text-button,.filter-chip,.text-button,.segmented button,
.add-button,.add-run-button{
  min-height:var(--ui-control-height)!important;
  height:var(--ui-control-height);
  padding:0 18px!important;
  border-radius:var(--ui-control-radius)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px;
  font-size:15px;
  font-weight:800;
  line-height:1.15!important;
  white-space:nowrap!important;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
}
.icon-button,.circle-button,.attachment-remove,.remove-button{
  width:var(--ui-icon-size)!important;
  min-width:var(--ui-icon-size)!important;
  max-width:var(--ui-icon-size)!important;
  height:var(--ui-icon-size)!important;
  min-height:var(--ui-icon-size)!important;
  padding:0!important;
  border-radius:999px!important;
  display:inline-grid!important;
  place-items:center!important;
  line-height:1!important;
  aspect-ratio:1/1!important;
  flex:0 0 var(--ui-icon-size)!important;
}

/* Kopfzeile bleibt auch in schmalen iFrames vollständig bedienbar. */
.app-header{height:auto;min-height:76px;padding:10px max(14px,calc((100vw - var(--max))/2));gap:12px;flex-wrap:wrap}
.brand{min-width:0;flex:1 1 210px}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex:0 1 auto}
.header-text-button{height:46px!important;min-height:46px!important;padding-inline:14px!important}

/* Auswahlkarten sind kompakt, aber vollständig klickbar. */
.choice-card,.product-card,.direction-card,.connection-card,.visual-option-card{
  min-height:0!important;
  height:auto!important;
  padding:18px!important;
}
.choice-visual{height:76px;margin:4px 0 12px}
.color-card{min-height:68px;padding:10px 12px;grid-template-columns:50px minmax(0,1fr) 24px}
.color-swatch{width:46px;height:46px}
.mount-card,.gate-follow-card{min-height:86px!important;padding:14px 16px!important}

/* Fußnavigation: gleiche Breite, gleiche Höhe, keine abgeschnittenen Texte. */
.app-footer{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:center!important;
  gap:var(--ui-control-gap)!important;
  min-height:82px;
  padding:13px max(14px,calc((100vw - var(--max))/2)) calc(13px + env(safe-area-inset-bottom))!important;
}
.app-footer .footer-meta{display:none!important}
.app-footer .button,#backButton,#nextButton{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:56px!important;
  min-height:56px!important;
  padding-inline:14px!important;
  font-size:15px!important;
  white-space:nowrap!important;
}
#nextButton{flex:none}
#backButton{flex:none}

/* Zusammenfassungsaktionen werden gleich groß und umbrechen sauber. */
.summary-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important;align-items:stretch!important}
.summary-actions .button{width:100%!important;min-width:0!important;max-width:none!important;height:56px;white-space:normal!important;padding-block:8px!important}

/* Browser-Dateiauswahl optisch integrieren. */
input[type="file"]{min-height:58px;padding:6px!important;overflow:hidden}
input[type="file"]::file-selector-button{
  min-height:44px;border:1px solid var(--border);border-radius:10px;background:var(--surface-soft);
  color:var(--text);font:800 14px/1 system-ui,sans-serif;padding:0 14px;margin-right:10px;cursor:pointer
}
input[type="file"]::file-selector-button:hover{border-color:#b9c5ce;background:var(--surface)}

@media(max-width:700px){
  :root{--ui-control-height:52px;--ui-icon-size:46px}
  .app-main{width:calc(100% - 16px)!important;margin-inline:auto!important;margin-bottom:104px}
  .hero-panel,.content-card{padding:18px!important}
  .app-header{padding-inline:10px;min-height:68px;flex-wrap:nowrap}
  .brand{flex:1 1 auto}
  .brand-mark{width:42px;height:42px;min-width:42px}
  .header-actions{gap:6px;flex:0 0 auto}
  .header-text-button{width:46px!important;min-width:46px!important;max-width:46px!important;padding:0!important;font-size:0!important}
  .header-text-button::before{content:"↻";font-size:22px;line-height:1}
  .choice-card,.product-card,.direction-card,.connection-card,.visual-option-card{padding:16px!important}
  .choice-visual{height:68px}
  .color-grid,.mount-grid{grid-template-columns:1fr!important}
  .summary-actions{grid-template-columns:1fr!important}
  .summary-actions .button{height:auto;min-height:54px!important}
  .field-grid,.field-grid-section,.address-grid{grid-template-columns:1fr!important}
  .app-footer{padding-inline:8px!important;gap:8px!important}
}
@media(max-width:390px){
  .app-footer .button,#backButton,#nextButton{font-size:14px!important;padding-inline:8px!important}
  .hero-panel,.content-card{padding:15px!important}
  .header-actions .icon-button{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;flex-basis:42px!important}
}

/* Meilenstein 76 – Anfragearten vollständig und dauerhaft sichtbar */
.choice-grid[data-request-modes], .choice-grid{
  align-items:stretch;
}
.choice-card[data-mode]{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  flex-direction:column;
  width:100%;
  min-width:0;
}
.choice-card[data-mode="fence_only"]{order:1}
.choice-card[data-mode="fence_and_gates"]{order:2}
.choice-card[data-mode="gates_only"]{order:3}
.choice-card[data-mode] ul{margin-top:auto;padding-top:10px}
@media (max-width:820px){
  .choice-grid{grid-template-columns:1fr!important;gap:12px!important}
  .choice-card[data-mode]{
    display:grid!important;
    grid-template-columns:78px minmax(0,1fr);
    grid-template-rows:auto auto auto;
    column-gap:14px;
    min-height:0!important;
    padding:15px!important;
  }
  .choice-card[data-mode] .choice-check{top:10px;right:10px}
  .choice-card[data-mode] .choice-visual{grid-column:1;grid-row:1/4;height:auto;min-height:76px;margin:0;align-self:center}
  .choice-card[data-mode] .choice-visual .fence-icon{transform:scale(.52)}
  .choice-card[data-mode] .choice-visual .gate-icon{transform:scale(.58)}
  .choice-card[data-mode] .choice-visual .combo-icon{transform:scale(.55)}
  .choice-card[data-mode] h2{grid-column:2;margin:0;padding-right:32px;font-size:19px}
  .choice-card[data-mode] p{grid-column:2;margin:4px 0 0;font-size:14px}
  .choice-card[data-mode] ul{grid-column:2;margin:7px 0 0;padding-top:0;font-size:13px}
  .choice-card[data-mode] li{margin-top:3px}
}
@media (max-width:390px){
  .choice-card[data-mode]{grid-template-columns:60px minmax(0,1fr);column-gap:10px;padding:13px!important}
  .choice-card[data-mode] .choice-visual{min-height:64px}
  .choice-card[data-mode] h2{font-size:18px}
}


/* Meilenstein 82 – UX, Fokusführung und kompakte Navigation */
.footer-meta{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.save-dot{width:8px;height:8px;border-radius:50%;background:#2f7d4a;box-shadow:0 0 0 3px rgba(47,125,74,.12)}
.footer-step{color:var(--text);font-weight:750}
.app-footer .button-primary{min-width:210px;white-space:normal;line-height:1.2;padding-block:8px}
.is-invalid{scroll-margin-top:120px}
.form-card.is-invalid,.run-card.is-invalid,.gate-card.is-invalid,.section-card.is-invalid,.choice-card.is-invalid,.product-card.is-invalid,.final-summary.is-invalid{border-color:#b9453d!important;box-shadow:0 0 0 3px rgba(185,69,61,.10)!important}
[aria-invalid="true"]{border-color:#b9453d!important;box-shadow:0 0 0 3px rgba(185,69,61,.13)!important}
.error-box{position:relative;border-left:5px solid #b9453d}
.error-box ul{margin:.65rem 0 .35rem;padding-left:1.25rem}
.error-box li+li{margin-top:.35rem}
@media(max-width:820px){
 .app-footer .button-primary{min-width:0}
 .app-footer .button{min-height:54px}
 .app-main{margin-bottom:calc(110px + env(safe-area-inset-bottom))}
}
@media(max-width:430px){
 .app-footer .button{font-size:13px;line-height:1.15;padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}


/* Meilenstein 83 – Zeichnung 2.0 */
.drawing-grid{}
.drawing-grid-line{fill:none;stroke:#edf1f4;stroke-width:1}
.project-drawing.technical .draw-corner rect{fill:#243544;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.project-drawing.technical .draw-corner text{font-size:11px;font-weight:800;fill:#52606d;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.project-drawing.technical .gate-post{fill:#243544;stroke:#f4a340}
.project-drawing.technical .dimension-tick{stroke:#667684;stroke-width:1.2}
.project-drawing.technical .dimension-text{font-weight:800;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.project-drawing.technical .draw-marker.start circle{fill:#e8f4ec;stroke:#23643a}
.project-drawing.technical .draw-marker.end circle{fill:#eef3f8;stroke:#24415a}
@media print{.drawing-grid-line{stroke:#f1f1f1}.project-drawing.technical{max-height:175mm;page-break-inside:avoid}}

/* M84: produktspezifische Optionen je Zaunverlauf */
.run-product-options{margin-top:14px;padding:14px;border:1px solid var(--border,#d9dee5);border-radius:12px;background:var(--surface-2,#f7f8fa)}
.run-product-options h3{margin:0 0 10px;font-size:1rem}
.run-product-options .field-grid{margin:0}
@media (max-width:700px){.run-product-options{padding:12px}.run-product-select select{width:100%}}

/* Meilenstein 88 – Produktkatalog und Sichtschutzoptionen wie Version 12.2 */
.product-grid{align-items:stretch}.product-card{height:100%;display:flex;flex-direction:column;min-height:190px}.product-card small{margin-top:auto;padding-top:12px}.product-options-card{background:var(--surface);box-shadow:var(--shadow-soft)}.privacy-preview{display:grid;gap:8px}.privacy-preview-bars{display:grid;grid-template-columns:1fr 26px 1fr;gap:5px;min-height:64px;border:1px solid var(--border);border-radius:12px;padding:8px;background:var(--surface-2)}.privacy-preview-bars i{display:block;border-radius:7px;background:var(--bar-color,#d7dde2);border:1px solid rgba(0,0,0,.12)}.privacy-preview-bars i.accent{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--accent)}.privacy-preview small{color:var(--muted)}.field-grid .wide{grid-column:1/-1}@media(max-width:640px){.product-card{min-height:0}.privacy-preview-bars{min-height:52px}}


/* M94 - Druck/PDF-Optimierung nach realem Browser-PDF-Test */
@media print{
  html,body{width:210mm!important;min-width:0!important;background:#fff!important}
  .app-header,.site-header,.hero-panel,.step-header,.app-footer,.bottom-nav,
  .summary-actions,.drawing-toolbar,.text-button,#resetProject,#undo,#redo,#themeToggle{display:none!important}
  .app-main,.app-shell,.content-shell,#app,main{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
  .content-card{border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
  .summary-card{break-inside:auto!important;page-break-inside:auto!important;margin:0 0 5mm!important;padding:4mm!important}
  .summary-gate.detailed{break-inside:auto!important;page-break-inside:auto!important}
  .summary-gate-head,.summary-gate-preview,.summary-list>div{break-inside:avoid!important;page-break-inside:avoid!important}
  .summary-list.compact{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:7mm!important}
  .summary-list.compact>div{grid-template-columns:minmax(0,42%) minmax(0,58%)!important;gap:2.5mm!important;min-width:0!important;padding:2.2mm 0!important}
  .summary-list dt,.summary-list dd{min-width:0!important;overflow-wrap:anywhere!important;word-break:normal!important}
  .summary-gate-preview{margin:2mm 0 4mm!important;padding:0!important}
  .summary-gate-preview svg{display:block!important;width:100%!important;height:58mm!important;max-height:58mm!important}
  .print-drawing-section{break-before:auto!important;page-break-before:auto!important;break-inside:avoid!important;page-break-inside:avoid!important}
  .print-drawing-section .drawing-scroll{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:90mm!important}
  .print-drawing-section .project-drawing{display:block!important;width:100%!important;max-width:175mm!important;height:90mm!important;max-height:90mm!important}
  .gates-only-drawing .project-drawing{max-width:145mm!important;height:78mm!important;max-height:78mm!important}
}
html.is-printing .app-header,html.is-printing .site-header,html.is-printing .hero-panel,html.is-printing .step-header,
html.is-printing .app-footer,html.is-printing .bottom-nav,html.is-printing .summary-actions,html.is-printing .drawing-toolbar,
html.is-printing .text-button{display:none!important}

/* M96: sichere und verständliche Anhangsauswahl */
.attachment-summary{margin:.55rem 0 .35rem;color:var(--muted);font-size:.9rem;font-weight:700}
.attachment-list{display:grid;gap:.45rem;margin-top:.45rem}
.attachment-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-width:0;padding:.65rem .75rem;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}
.attachment-item>span{min-width:0;overflow-wrap:anywhere}
.attachment-remove{flex:0 0 36px;width:36px;height:36px;min-height:36px;border-radius:50%;padding:0;font-size:1.25rem;line-height:1}


/* Meilenstein 97 – Streckeneingabe, mobile Zeichnungen, eindeutige Türklinke und Farben */
.section-list-clear{gap:16px}
.section-card-clear{display:block!important;padding:0!important;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:15px}
.section-card-clear .section-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.section-identity{display:flex;align-items:center;gap:11px;min-width:0}.section-identity>span:last-child{display:grid;min-width:0}.section-identity strong{font-size:17px}.section-identity small{color:var(--muted);overflow-wrap:anywhere}
.section-card-clear .section-number{flex:0 0 38px}.section-card-clear .circle-button{position:static!important}
.section-block{display:grid;gap:10px;padding:16px;border-bottom:1px solid var(--border)}.section-block:last-child{border-bottom:0}
.section-measure-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}.section-measure-grid label{display:grid;gap:7px}.inherited-height.compact{min-height:78px}
.connection-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.connection-choice{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;text-align:left;min-height:82px;padding:10px 12px;border:2px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer}
.connection-choice.is-selected{border-color:var(--accent);background:#fff9f2;box-shadow:0 0 0 3px rgba(239,139,35,.10)}
.connection-choice-icon{width:38px;height:38px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;font-size:24px;font-weight:900;color:#263744}.connection-choice strong,.connection-choice small{display:block}.connection-choice small{margin-top:2px;color:var(--muted);font-size:12px;line-height:1.25}
.section-mount-grid{margin:0}.section-mount-grid .mount-card{min-height:86px!important}.wall-width-field{display:grid;gap:7px;max-width:560px}
.drawings-bottom{display:grid;gap:16px;margin-top:26px;padding-top:24px;border-top:2px solid var(--border)}.drawings-bottom-head h2{margin:4px 0 4px}.drawings-bottom-head p{margin:0;color:var(--muted)}
.run-unified-drawing{margin-top:0}.run-unified-head{margin-bottom:10px}.run-unified-head>div{display:grid;gap:3px}.run-unified-head strong{font-size:18px}.run-unified-head span:last-child{color:var(--muted);font-size:14px}
.drawing-scroll,.run-drawing-scroll{overflow:hidden!important;width:100%;max-width:100%;padding:8px}.project-drawing,.drawing-scroll.small .project-drawing{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;max-height:min(68vh,680px)}
.preview-handle{fill:#ef8b23!important;stroke:#17212b!important;stroke-width:2!important}.preview-handle-line{stroke:#17212b!important;stroke-width:2.4!important}.preview-handle-text{font:900 7px system-ui,sans-serif!important;fill:#fff!important;stroke:none!important}.legend-swatch.legend-handle{position:relative;width:18px;height:18px;background:#ef8b23;border:2px solid #17212b}.legend-swatch.legend-handle::after{content:"K";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:900}
.draw-handle-marker circle{fill:#ef8b23;stroke:#17212b;stroke-width:2;vector-effect:non-scaling-stroke}.draw-handle-marker text{font:900 9px system-ui,sans-serif;fill:#fff;stroke:none}
.color-selection-card{display:grid;gap:18px}.color-section h2{margin:4px 0 6px}.standard-color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.special-colors{border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}.special-colors summary{cursor:pointer;list-style:none;padding:15px 17px;display:flex;align-items:center;justify-content:space-between}.special-colors summary::-webkit-details-marker{display:none}.special-colors summary::after{content:"+";font-size:24px;font-weight:900}.special-colors[open] summary::after{content:"−"}.special-colors summary span{display:grid}.special-colors summary small{color:var(--muted);font-weight:500}.special-colors .color-grid{margin:0;padding:0 16px 16px}.custom-ral-field{display:grid;gap:7px;margin:0 16px 16px;max-width:420px}.custom-ral-field small{color:var(--muted)}
[data-theme="dark"] .connection-choice.is-selected{background:#2a231c}
@media(max-width:900px){.connection-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 .flow-guide.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
 .section-measure-grid{grid-template-columns:1fr}.connection-choice-grid{grid-template-columns:1fr 1fr;gap:8px}.connection-choice{grid-template-columns:34px minmax(0,1fr);min-height:72px;padding:9px}.connection-choice-icon{width:32px;height:32px;font-size:20px}.connection-choice small{display:none}
 .section-card-clear .section-card-head{padding:12px}.section-block{padding:13px 12px}.section-identity strong{font-size:16px}
 .drawing-scroll,.run-drawing-scroll{padding:4px;border-radius:12px}.project-drawing,.drawing-scroll.small .project-drawing{width:100%!important;min-width:0!important;max-height:none!important}
 .standard-color-grid,.special-color-grid{grid-template-columns:1fr}
}
@media(max-width:390px){.connection-choice-grid{grid-template-columns:1fr}.connection-choice small{display:block}.flow-guide.compact{grid-template-columns:1fr 1fr}}
@media print{
 .drawings-bottom{border-top:0!important;margin-top:0!important;padding-top:0!important}
 .drawings-bottom-head{display:none!important}
 .project-drawing,.drawing-scroll.small .project-drawing{width:100%!important;max-width:178mm!important;min-width:0!important;height:auto!important;max-height:82mm!important}
 .drawing-scroll,.run-drawing-scroll{overflow:hidden!important;padding:0!important;border:0!important}
 .run-unified-drawing,.print-drawing-section{break-inside:avoid!important;page-break-inside:avoid!important}
}

/* M97 Abschlusskorrektur: lange Hinzufuegen-Schaltflaechen duerfen mobil niemals abgeschnitten werden. */
.add-button,.add-run-button{
  width:100%;
  max-width:100%;
  min-width:0;
  height:auto!important;
  min-height:54px!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere;
  line-height:1.25!important;
  padding:12px 14px!important;
}
.add-button span,.add-run-button span{flex:0 0 auto}


/* Meilenstein 99 – adaptive Zeichnungen, kompakte Torübersicht und eindeutige Türklinke */
.summary-list dt,.summary-list dd{min-width:0;overflow-wrap:anywhere;word-break:normal}
.summary-gate .summary-list.compact>div.summary-item-wide{grid-column:1/-1;grid-template-columns:minmax(205px,30%) minmax(0,1fr)}
.summary-direction-row dd{line-height:1.4}
.summary-gate-preview{width:min(100%,600px);max-width:600px;margin:12px auto 16px;padding:12px;background:var(--surface);overflow:hidden}
.summary-gate-preview-canvas{height:220px;display:flex;align-items:center;justify-content:center}
.summary-gate-preview-canvas svg{display:block;width:100%;height:100%;max-width:100%}
.preview-handle{fill:#ef8b23!important;stroke:#17212b!important;stroke-width:1.8!important}
.preview-handle-line,.preview-handle-grip{stroke:#17212b!important;stroke-width:2.6!important;stroke-linecap:round}
.preview-handle-end{fill:#17212b;stroke:none}
.preview-handle-label{display:none;font:800 8px system-ui,sans-serif;fill:#17212b;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.summary-gate-preview .preview-handle-label{display:block}
.gate-handle-explanation{display:grid;grid-template-columns:34px auto;column-gap:10px;row-gap:1px;align-items:center;margin:8px 2px 0;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);font-size:13px}
.gate-handle-explanation>span:last-child{grid-column:2;color:var(--muted)}
.gate-handle-icon{position:relative;width:28px;height:28px;border-radius:50%;background:#ef8b23;border:2px solid #17212b;grid-row:1/3}
.gate-handle-icon i{position:absolute;left:13px;top:11px;width:13px;height:4px;border-radius:3px;background:#17212b}
.draw-handle-base{fill:#ef8b23;stroke:#17212b;stroke-width:2;vector-effect:non-scaling-stroke}
.draw-handle-grip{stroke:#17212b;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.draw-handle-end{fill:#17212b}
.draw-handle-label{font:800 10px system-ui,sans-serif;fill:#17212b;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.drawing-scroll,.run-drawing-scroll{overflow:hidden!important}
.drawing-scroll .project-drawing,.run-drawing-scroll .project-drawing,.drawing-scroll.small .project-drawing{width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;max-height:none!important;margin-inline:auto}
.project-drawing.drawing-landscape{aspect-ratio:auto}
@media(max-width:900px){.summary-gate .summary-list.compact{grid-template-columns:1fr}.summary-gate .summary-list.compact>div.summary-item-wide{grid-column:auto}}
@media(max-width:700px){
 .summary-gate-preview{padding:8px;margin:10px auto 14px}
 .summary-gate-preview-canvas{height:clamp(155px,48vw,190px)}
 .gate-handle-explanation{font-size:12px}
 .project-drawing.technical .draw-label text{font-size:12px}
 .draw-handle-label{font-size:11px}
}
@media print{
 .summary-gate .summary-list.compact{grid-template-columns:1fr 1fr!important;column-gap:6mm!important}
 .summary-gate .summary-list.compact>div.summary-item-wide{grid-column:1/-1!important;grid-template-columns:48mm minmax(0,1fr)!important}
 .summary-gate-preview{width:132mm!important;max-width:132mm!important;margin:2mm auto 3mm!important;padding:1.5mm!important}
 .summary-gate-preview-canvas{height:39mm!important}
 .summary-gate-preview svg{width:100%!important;height:100%!important;max-height:39mm!important}
 .gate-handle-explanation{margin:1mm 0 0!important;padding:1.5mm 2mm!important;font-size:8pt!important}
 .print-drawing-section .drawing-scroll{display:block!important;min-height:0!important;height:auto!important}
 .print-drawing-section .project-drawing,.project-drawing,.drawing-scroll.small .project-drawing{width:100%!important;max-width:178mm!important;height:auto!important;max-height:105mm!important;margin:0 auto!important}
 .print-drawing-section{break-inside:avoid!important;page-break-inside:avoid!important}
}

.project-drawing.technical .draw-corner .corner-post{fill:#243544;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.project-drawing.technical .draw-corner .corner-label-bg{fill:rgba(255,255,255,.97);stroke:#d3dbe3;stroke-width:1;vector-effect:non-scaling-stroke}
.project-drawing.technical .draw-corner .corner-label text{font-size:11px;font-weight:800;fill:#52606d;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}

/* Meilenstein 101: logischer Zaunverlauf, freie Winkel und klare Türklinke */
.flow-guide.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.run-height-mode-card{margin:14px 0 16px}
.connection-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.connection-choice:disabled{cursor:not-allowed;opacity:.48;filter:grayscale(.25)}
.angle-input-field{display:block;margin-top:12px;padding:13px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}
.angle-input-field>span{display:block;font-weight:800;margin-bottom:7px}
.angle-input-field small{display:block;margin-top:7px;color:var(--muted);line-height:1.4}
.continuation-choice{margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}
.continuation-choice-head{margin-bottom:10px}
.continuation-choice-head strong,.continuation-choice-head small{display:block}
.continuation-choice-head small{margin-top:4px;color:var(--muted)}
.continuation-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.continuation-choice-grid.single{grid-template-columns:1fr}
.continuation-end{padding:12px 14px;border:1px dashed var(--border);border-radius:13px;background:var(--surface);color:var(--muted)}
.inline-gate-config{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.preview-handle-letter{font:900 8px system-ui,sans-serif;fill:#fff;stroke:none;pointer-events:none}
.preview-handle-label{display:block!important;font:800 8px system-ui,sans-serif;fill:#17212b;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.draw-handle-letter{font:900 9px system-ui,sans-serif;fill:#fff;stroke:none;pointer-events:none}
[data-theme="dark"] .preview-handle-label{fill:#f4f7fa;stroke:#17212b}
@media(max-width:900px){.flow-guide.four{grid-template-columns:repeat(2,minmax(0,1fr))}.connection-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.flow-guide.four,.continuation-choice-grid{grid-template-columns:1fr}.connection-choice-grid{grid-template-columns:1fr 1fr}.connection-choice{min-height:78px}.connection-choice small{display:block}}
@media(max-width:390px){.connection-choice-grid{grid-template-columns:1fr}}

/* Meilenstein 101: beliebig fortsetzbare Zaun-/Tor-Ketten */
.gate-after-flow{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.gate-chain-level>.gate-chain-level{margin:22px 0 0 18px;border-left:4px solid var(--accent-soft)}
.inline-gate-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
@media(max-width:700px){.gate-chain-level>.gate-chain-level{margin-left:0}.inline-gate-head{align-items:center}.gate-after-flow{margin-top:18px}}


/* Meilenstein 102 – mobile Datenschutzbedienung, bedingte Lieferangaben und Fokusführung */
.privacy-consent-button{
 width:100%;min-height:64px;padding:12px 14px;border:2px solid var(--border);border-radius:14px;
 background:var(--surface);color:var(--text);display:flex;align-items:flex-start;gap:12px;text-align:left;
 font:750 15px/1.45 system-ui,sans-serif;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.privacy-consent-button:hover{border-color:#9cabb6;background:var(--surface-soft)}
.privacy-consent-button:focus-visible{outline:3px solid rgba(36,53,68,.22);outline-offset:3px}
.privacy-consent-button.is-selected{border-color:#2f7d4a;background:#eef8f0}
.privacy-consent-box{width:26px;height:26px;min-width:26px;border:2px solid #778690;border-radius:7px;display:grid;place-items:center;background:var(--surface);color:#fff;font-size:18px;font-weight:900;line-height:1;margin-top:1px}
.privacy-consent-button.is-selected .privacy-consent-box{background:#2f7d4a;border-color:#2f7d4a}
[data-theme="dark"] .privacy-consent-button.is-selected{background:#173622;border-color:#69a979}
.installation-material-note,.conditional-question-note{display:grid;gap:5px;margin-top:16px;padding:14px 16px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft)}
.installation-material-note{border-color:#9fc7a7;background:#edf7ef;color:#245c30}
.installation-material-note span,.conditional-question-note span{line-height:1.45;color:inherit}
[data-theme="dark"] .installation-material-note{background:#173622;border-color:#69a979;color:#d9f1df}
@media(max-width:640px){
 .privacy-consent-button{min-height:72px;padding:14px;font-size:15px}
 .privacy-consent-box{width:28px;height:28px;min-width:28px}
 .installation-material-note,.conditional-question-note{padding:13px 14px}
}


/* --- Meilenstein 105: deutlichere Pflichtfelder, größere mobile Torzeichnungen --- */
.error-box{border-width:2px!important;box-shadow:0 0 0 4px rgba(211,64,54,.10)!important}
.error-box strong{display:block;font-size:18px;line-height:1.35}
.error-primary{margin:10px 0 0;font-size:17px;font-weight:800;line-height:1.45}
.error-more{margin-top:10px}
.error-more summary{cursor:pointer;font-weight:700}
.error-box .error-help{margin:10px 0 0;font-weight:700}
.is-invalid,[aria-invalid="true"]{border-color:#d34036!important;box-shadow:0 0 0 4px rgba(211,64,54,.16)!important}
.run-card.is-invalid,.gate-card.is-invalid,.section-card.is-invalid,.form-card.is-invalid{border-color:#d34036!important;box-shadow:0 0 0 3px rgba(211,64,54,.12)!important}
.required-step-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:16px 16px 14px;margin-top:14px}
.required-step-card.is-current{border-color:#ef8b23;box-shadow:0 0 0 3px rgba(239,139,35,.12);background:#fffaf3}
.required-step-card.is-current.is-missing{border-color:#d34036;box-shadow:0 0 0 4px rgba(211,64,54,.12);background:#fff6f5}
.required-step-card.is-complete{border-color:#b9d1bf;background:#fbfdfb}
.required-step-card.is-locked{background:var(--surface-2);opacity:.9}
.required-step-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.required-step-head div{display:grid;gap:3px}
.required-step-head strong{font-size:17px}
.required-step-head small{color:var(--muted);font-size:13px;line-height:1.4}
.required-step-number{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#263744;color:#fff;font-weight:900;flex:0 0 auto}
.required-step-card.is-current .required-step-number{background:#d34036}
.required-step-card.is-complete .required-step-number{background:#2f7a44}
.required-step-placeholder{padding:10px 12px;border-radius:12px;background:var(--surface-2);color:var(--muted);font-weight:700;line-height:1.45}
.gate-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gate-type-card{grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;justify-items:center;text-align:center;row-gap:6px;padding:18px 16px!important;min-height:250px}
.gate-type-card>strong{align-self:auto!important;font-size:20px!important}
.gate-type-card>span:last-child{align-self:auto!important;font-size:14px;line-height:1.45}
.gate-type-visual{display:flex;align-items:center;justify-content:center;width:100%;min-height:126px}
.gate-type-visual svg{display:block;width:min(100%,220px);height:118px}
.gate-type-post{fill:#d9e0e5;stroke:#2b3845;stroke-width:2.2}.gate-type-frame{fill:#fffaf3;stroke:#2b3845;stroke-width:2.2}.gate-type-bar{stroke:#2b3845;stroke-width:2}.gate-type-leaf{stroke:#ef8b23;stroke-width:4;stroke-linecap:round}.gate-type-track{stroke:#7f8d98;stroke-width:3;stroke-linecap:round}.gate-type-arrow{stroke:#ef8b23;stroke-width:3.2;stroke-linecap:round}.gate-type-arrow-head{fill:#ef8b23}
.visual-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.visual-option-card{padding:12px;min-height:230px}
.visual-option-card svg{width:100%;height:120px;display:block}
.combined-preview-panel .combined-preview-box{padding:10px}
.combined-preview-panel svg{height:170px!important}
.combined-preview-panel .preview-legend{font-size:.95rem}
.continuation-locked{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:14px}
@media(max-width:720px){.gate-type-grid,.visual-option-grid{grid-template-columns:1fr}.gate-card{padding:16px}.gate-type-card{min-height:0;padding:20px 16px!important}.gate-type-visual{min-height:142px}.gate-type-visual svg{width:min(100%,280px);height:136px}.visual-option-card{min-height:0}.visual-option-card svg{height:138px}.combined-preview-panel svg{height:190px!important}}
@media(max-width:430px){.error-primary{font-size:16px}.required-step-card{padding:14px}.gate-type-card{padding:18px 14px!important}.gate-type-visual svg{width:min(100%,300px);height:142px}.visual-option-card svg{height:146px}.combined-preview-panel svg{height:200px!important}}


/* --- Meilenstein 106: globale Pflichtfeld-Hervorhebung --- */
.is-invalid-first{scroll-margin-top:120px}
.is-invalid-group{border-color:#d34036!important;box-shadow:0 0 0 4px rgba(211,64,54,.12)!important;border-radius:14px}
label.is-invalid-group{padding:10px 12px;background:#fff6f5}
.segmented.is-invalid-group,.direction-grid.is-invalid-group,.check-grid.is-invalid-group,.mount-grid.is-invalid-group,.connection-choice-grid.is-invalid-group,.visual-option-grid.is-invalid-group,.color-grid.is-invalid-group,.height-mode-grid.is-invalid-group,.gate-follow-grid.is-invalid-group,.field-grid.is-invalid-group,.option-group.is-invalid-group,.privacy-consent-card.is-invalid-group,.delivery-card-group.is-invalid-group{padding:10px;border:2px solid #d34036;background:#fff6f5}
.choice-card.is-invalid,.product-card.is-invalid,.color-card.is-invalid,.gate-type-card.is-invalid,.visual-option-card.is-invalid,.connection-choice.is-invalid,.gate-follow-card.is-invalid,.mount-card.is-invalid,.height-mode-option.is-invalid,.filter-chip.is-invalid{border-color:#d34036!important;box-shadow:0 0 0 4px rgba(211,64,54,.12)!important;background:#fff6f5!important}
button[aria-invalid="true"],input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{outline:none}
.required-step-card.is-invalid:not(.is-current){border-color:#d34036!important;box-shadow:0 0 0 4px rgba(211,64,54,.12)!important;background:#fff6f5!important}
.run-product-options.is-invalid{border:2px solid #d34036;border-radius:16px;padding:14px;background:#fff6f5}
.error-box ul{margin:10px 0 0 18px}.error-box li{margin:5px 0}

/* --- Meilenstein 108: Mobile UX, eindeutige Löschaktionen, iOS/Android --- */
.delete-action{
  min-height:46px;padding:9px 13px;border:1px solid #d8a6a1;border-radius:12px;
  background:#fff7f6;color:#9c3028;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;font-weight:850;line-height:1.15;cursor:pointer;white-space:normal;text-align:center
}
.delete-action:hover{border-color:#b9453d;background:#fff0ee}
.delete-action:focus-visible{outline:3px solid rgba(185,69,61,.22);outline-offset:3px}
.delete-action-icon{width:21px;height:21px;flex:0 0 21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.delete-action-compact{min-height:44px;padding:8px 11px;font-size:14px}
.panel-toggle{min-width:0;border:0;background:transparent;color:var(--text);padding:0;text-align:left;cursor:pointer}
.panel-toggle>span:first-child{min-width:0}
.panel-chevron{width:34px;height:34px;border:1px solid var(--border);border-radius:50%;display:grid;place-items:center;flex:0 0 34px;font-size:21px;font-weight:900;transition:transform .18s ease}
.section-panel-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:1}
.gate-panel-toggle,.inline-gate-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1}
.gate-panel-toggle strong,.inline-gate-toggle strong{display:block;font-size:19px}
.inline-gate-toggle small{display:block;margin-top:3px;color:var(--muted);font-size:13px;line-height:1.35}
.mobile-collapsible:not(.is-mobile-collapsed)>.section-card-head .panel-chevron,
.mobile-collapsible:not(.is-mobile-collapsed)>.run-head .panel-chevron,
.mobile-collapsible:not(.is-mobile-collapsed)>.inline-gate-head .panel-chevron{transform:rotate(180deg)}

/* Zeichnungen bekommen auf schmalen Displays deutlich mehr nutzbare Fläche. */
@media(max-width:720px){
  .hero-panel{padding:14px 15px!important}
  .hero-panel p:not(.eyebrow){margin-top:6px!important;line-height:1.35}
  .progress-count{margin-top:10px!important;padding:6px 10px!important}
  .progress-track{margin-top:12px!important;height:7px!important}
  .content-card{padding:13px!important}
  .run-card,.gate-card{padding:13px!important}
  .run-head{align-items:flex-start;gap:10px}
  .run-head>.delete-action{flex:0 0 auto}
  .delete-action:not(.delete-action-compact){width:100%;margin-top:8px}
  .run-head:has(>.delete-action:not(.delete-action-compact)){display:grid;grid-template-columns:1fr}

  .mobile-collapsible.is-mobile-collapsed>.mobile-collapsible-body{display:none!important}
  .mobile-collapsible.is-mobile-collapsed{background:var(--surface)!important}
  .section-card-head,.gate-card-head,.inline-gate-head{align-items:center!important}
  .section-card-clear .section-card-head{padding:10px 11px!important}
  .section-identity{gap:9px}
  .section-card-clear .section-number{flex-basis:34px;width:34px;height:34px}
  .section-identity strong{font-size:16px!important}
  .delete-action-compact{width:46px;min-width:46px;max-width:46px;height:46px;min-height:46px;padding:0;border-radius:50%}
  .delete-action-compact span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .delete-action-compact .delete-action-icon{width:22px;height:22px;flex-basis:22px}

  .height-mode-card{padding:13px!important;margin-bottom:13px!important}
  .height-mode-grid{grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:8px!important}
  .height-mode-option{min-height:72px!important;padding:11px 40px 11px 11px!important;gap:2px!important}
  .height-mode-option strong{font-size:14px;line-height:1.3}
  .height-mode-option span{display:none}
  .height-mode-option.is-selected::after,.height-mode-option:not(.is-selected)::after{right:9px;top:9px;width:24px;height:24px}
  .global-height-row{margin-top:11px!important;gap:8px!important}

  .gate-type-grid{grid-template-columns:1fr!important;gap:10px!important}
  .gate-type-card{display:grid!important;grid-template-columns:minmax(145px,46%) minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:14px!important;justify-items:stretch!important;text-align:left!important;padding:14px!important}
  .gate-type-visual{grid-row:1/3;min-height:112px!important}
  .gate-type-visual svg{width:100%!important;height:112px!important}
  .gate-type-card>strong{align-self:end!important;font-size:19px!important}
  .gate-type-card>span:last-child{align-self:start!important}

  .opening-code-grid,.connection-code-grid{grid-template-columns:1fr!important;gap:9px!important}
  .opening-code-grid .visual-option-card,.connection-code-grid .visual-option-card{
    display:grid!important;grid-template-columns:minmax(165px,56%) minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;column-gap:12px!important;row-gap:2px!important;
    align-items:center!important;text-align:left!important;min-height:150px!important;padding:10px!important
  }
  .opening-code-grid .visual-option-card svg,.connection-code-grid .visual-option-card svg{
    grid-row:1/3;width:100%!important;height:128px!important;min-width:0!important
  }
  .opening-code-grid .visual-option-card strong,.connection-code-grid .visual-option-card strong{font-size:20px!important;align-self:end}
  .opening-code-grid .visual-option-card span,.connection-code-grid .visual-option-card span{font-size:15px!important;line-height:1.3!important;align-self:start}
  .connection-code-grid .connection-meta{grid-column:2;align-self:start}
  .combined-preview-panel .combined-preview-box{padding:3px!important;min-height:210px!important}
  .combined-preview-panel svg{width:100%!important;height:220px!important}
  .preview-legend{gap:10px!important;font-size:14px!important}

  .drawing-scroll,.run-drawing-scroll{padding:0!important;margin-inline:0!important;border-radius:10px!important}
  .run-unified-drawing{margin-inline:-5px}
  .run-unified-head{padding-inline:5px}
  .run-unified-head span:last-child{display:none}
  .project-drawing,.drawing-scroll.small .project-drawing{width:100%!important;max-width:none!important;min-height:230px!important}
  .project-drawing.technical .draw-label text,.project-drawing.technical .dimension-text{font-size:13px!important}
  .project-drawing.technical .draw-corner .corner-label text{font-size:12px!important}

  .app-footer{padding-bottom:calc(10px + max(env(safe-area-inset-bottom),8px))!important}
  html.keyboard-open .app-footer{display:none!important}
  html.keyboard-open .app-main{margin-bottom:18px!important}
}
@media(max-width:380px){
  .height-mode-grid{grid-template-columns:1fr!important}
  .opening-code-grid .visual-option-card,.connection-code-grid .visual-option-card{grid-template-columns:1fr!important;text-align:center!important}
  .opening-code-grid .visual-option-card svg,.connection-code-grid .visual-option-card svg{grid-row:auto;height:150px!important}
  .connection-code-grid .connection-meta{grid-column:1}
  .gate-type-card{grid-template-columns:125px minmax(0,1fr)!important}
}
@media(max-width:720px){
  .opening-code-grid .visual-option-card,.connection-code-grid .visual-option-card{
    grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;text-align:center!important;min-height:205px!important
  }
  .opening-code-grid .visual-option-card svg,.connection-code-grid .visual-option-card svg{
    grid-row:auto!important;height:155px!important;width:100%!important
  }
  .opening-code-grid .visual-option-card strong,.connection-code-grid .visual-option-card strong{align-self:auto!important}
  .opening-code-grid .visual-option-card span,.connection-code-grid .visual-option-card span{align-self:auto!important}
  .connection-code-grid .connection-meta{grid-column:1!important}
  .drawings-bottom-head p{display:none}
}
@media(max-width:700px){
  .header-actions{width:auto!important;max-width:calc(100% - 52px);flex:0 0 auto!important;flex-wrap:nowrap!important}
  .brand{min-width:42px;overflow:hidden}
  .brand>div:last-child{min-width:0}
  .brand strong,.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:720px){
  .project-drawing,.drawing-scroll.small .project-drawing{min-height:0!important;width:100%!important;max-width:100%!important}
}
@media(max-width:720px){.drawing-scroll,.run-drawing-scroll{scrollbar-gutter:auto!important}}

/* --- Meilenstein 109: Zeichnungsparität, klare Türklinke, exakte Sprungpunkte --- */
.project-drawing .gate-connection,
.project-drawing .gate-area-line{display:none!important}
.preview-handle-line,.preview-handle-grip,.preview-handle-end,.preview-handle-label,
.draw-handle-grip,.draw-handle-end,.draw-handle-label{display:none!important}
.preview-handle-marker,.draw-handle-marker{pointer-events:none}
.preview-handle-base,.draw-handle-base{filter:none!important}
[data-section-card],[data-gate-card],.required-step-card,
input,select,textarea,button[aria-invalid="true"]{scroll-margin-top:120px;scroll-margin-bottom:120px}
@media(max-width:720px){
 [data-section-card],[data-gate-card],.required-step-card,
 input,select,textarea,button[aria-invalid="true"]{scroll-margin-top:96px;scroll-margin-bottom:112px}
}

/* M111 – klare Einstiegsgrafiken und kollisionsfreie Zeichnungslabels */
.request-mode-svg{display:block;width:min(100%,220px);height:112px;margin:0 auto;overflow:visible}
.request-mode-svg .mode-fence{fill:#273844;stroke:#70808e;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.request-mode-svg .mode-fence path{fill:none}
.request-mode-svg .mode-gate{fill:none;stroke:#ef841f;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.request-mode-svg .mode-gate rect:first-child,.request-mode-svg .mode-gate rect:nth-child(2){fill:#273844;stroke:#273844}
.request-mode-svg .mode-gate circle{fill:#273844;stroke:none}
.choice-card:hover .request-mode-svg,.choice-card:focus-visible .request-mode-svg{transform:scale(1.025)}
.request-mode-svg{transition:transform .18s ease}
.draw-label-leader{stroke:#82909b;stroke-width:1.25;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.project-drawing.technical .draw-label rect{fill:rgba(255,255,255,.98)}
.project-drawing.technical .draw-label text{font-size:11px}
@media(max-width:700px){.request-mode-svg{height:96px;width:min(100%,190px)}}
@media print{.draw-label-leader{stroke:#7b8790}}


/* M112 – Torformen, Sonstige-Füllung und hochwertige Tortyp-Grafiken */
.gate-execution-grid,.gate-shape-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gate-shape-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.gate-execution-card,.gate-shape-card{display:grid;gap:8px;justify-items:center;align-content:start;min-height:184px;padding:14px;border:1px solid var(--border);border-radius:15px;background:var(--surface);color:var(--text);cursor:pointer;text-align:center}
.gate-execution-card:hover,.gate-shape-card:hover{border-color:#aab7c2;transform:translateY(-1px)}
.gate-execution-card.is-active,.gate-shape-card.is-active{border-color:var(--accent);background:#fff9f2;box-shadow:0 0 0 3px rgba(239,139,35,.10)}
.gate-execution-card svg,.gate-shape-card svg{width:100%;max-width:230px;height:98px}
.gate-execution-card strong,.gate-shape-card strong{font-size:15px}
.gate-execution-card span,.gate-shape-card span{font-size:12px;color:var(--muted);line-height:1.35}
.gate-type-frame,.gate-shape-top{fill:none;stroke:#2b3b47;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.gate-shape-top{stroke:#ef8b23;stroke-width:4}
.gate-type-wheel{fill:#2b3b47}.gate-type-handle{fill:#ef8b23;stroke:#2b3b47;stroke-width:1.5}
.gate-fill-other{display:grid;gap:8px;margin-top:14px;padding:14px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:13px;background:#fffaf4}
.gate-fill-other input{background:var(--surface)}
@media(max-width:720px){.gate-execution-grid,.gate-shape-grid{grid-template-columns:1fr}.gate-execution-card,.gate-shape-card{min-height:auto}.gate-execution-card svg,.gate-shape-card svg{height:86px}}
/* M114 – hochwertigere Torausführungs- und Torformgrafiken */
.gate-execution-card svg,.gate-shape-card svg{overflow:visible;filter:drop-shadow(0 5px 8px rgba(35,55,70,.08))}
.gate-leaf-fill{fill:url(#gateFillOne);stroke:#304252;stroke-width:2.7}
.gate-execution-card:nth-child(2) .gate-leaf-fill{fill:url(#gateFillTwo)}
.gate-bars line{stroke:#526777;stroke-width:1.75;stroke-linecap:round}
.gate-ground{stroke:#c5cfd6;stroke-width:2.2;stroke-linecap:round}
.gate-brace{fill:none;stroke:#ef8618;stroke-width:3.1;stroke-linecap:round}
.gate-brace.subtle{stroke:#8fa0ad;stroke-width:2.2;opacity:.75}
.gate-center-line{stroke:#304252;stroke-width:2.2}
.gate-handle-mark{stroke:#304252;stroke-width:2.5;stroke-linecap:round}
.gate-execution-card .gate-type-handle,.gate-shape-card .gate-type-handle{fill:#f7931e;stroke:#304252;stroke-width:1.7}
.gate-shape-card .gate-shape-top{stroke-width:4;filter:drop-shadow(0 1px 0 rgba(255,255,255,.65))}
.gate-execution-card,.gate-shape-card{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease}
.gate-execution-card.is-active,.gate-shape-card.is-active{box-shadow:0 0 0 3px rgba(239,139,35,.10),0 10px 24px rgba(35,55,70,.08)}

/* M115 – hochwertige Torskizzen und eindeutiger Skizzenhinweis */
.gate-execution-card,.gate-shape-card{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%);box-shadow:0 8px 24px rgba(35,55,70,.055)}
.gate-execution-card::before,.gate-shape-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 20%,rgba(239,139,35,.055),transparent 48%);opacity:0;transition:opacity .18s ease}
.gate-execution-card:hover::before,.gate-shape-card:hover::before,.gate-execution-card.is-active::before,.gate-shape-card.is-active::before{opacity:1}
.gate-execution-card svg,.gate-shape-card svg{max-width:300px;height:128px;filter:none}
.gate-type-post.premium{fill:url(#gatePostGrad);stroke:#162631;stroke-width:1.8}
.gate-shape-card .gate-type-post.premium{fill:url(#shapePostGrad)}
.gate-post-cap{fill:#566875;stroke:#162631;stroke-width:1.5;stroke-linejoin:round}
.gate-leaf-fill.premium{fill:url(#gateLeafGrad);stroke:#233541;stroke-width:3}
.gate-type-frame.premium{stroke:#233541;stroke-width:3.2}
.gate-mid-rail{stroke:#4f6473;stroke-width:1.7;vector-effect:non-scaling-stroke}
.gate-brace.premium{stroke:#596f7e;stroke-width:2.2;opacity:.68}
.gate-center-seam{stroke:#233541;stroke-width:2.4}
.gate-hinges circle{fill:#c7d0d6;stroke:#263946;stroke-width:1.2}
.gate-lockset rect{fill:#293c49;stroke:#182831;stroke-width:1.1}
.gate-handle-mark.premium{stroke:#f28a16;stroke-width:3.2;stroke-linecap:round}
.gate-drop-bolt line,.gate-drop-bolt circle{stroke:#263946;fill:#263946;stroke-width:1.7}
.gate-plants path{fill:none;stroke:#83a34f;stroke-width:2.2;stroke-linecap:round}
.gate-shape-top.premium{stroke:#ef8618;stroke-width:4.2;filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
.gate-sketch-disclaimer{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:12px 14px;border:1px solid #d7e0e6;border-radius:13px;background:linear-gradient(180deg,#f8fafc,#f3f7fa);color:#405463}
.gate-sketch-disclaimer-icon{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#244e7a;color:#fff;font-weight:800;font-style:normal}
.gate-sketch-disclaimer p{margin:1px 0 0;font-size:13px;line-height:1.45}
.gate-sketch-disclaimer strong{color:#233541}
@media(max-width:720px){.gate-execution-card svg,.gate-shape-card svg{height:112px}.gate-sketch-disclaimer{padding:11px 12px}.gate-sketch-disclaimer p{font-size:12px}}


/* M116 – einheitliches Premium-SVG-Design für Tor, Schiebetor und Vorschauen */
.gate-type-card{overflow:hidden;isolation:isolate;background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%)}
.gate-type-card.is-selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(239,139,35,.12),0 14px 34px rgba(31,48,60,.10)}
.gate-type-visual{min-height:165px}
.gate-type-visual svg{width:min(100%,340px);height:165px;overflow:visible}
.m116-post{stroke:#1f2d37;stroke-width:2}.m116-cap{fill:#354753;stroke:#1f2d37;stroke-width:1.5}
.m116-leaf{stroke:#30424f;stroke-width:3}.m116-bars line{stroke:#526875;stroke-width:2;stroke-linecap:round}
.m116-mid,.m116-seam{stroke:#30424f;stroke-width:3}.m116-brace{fill:none;stroke:#ef8618;stroke-width:4;stroke-linecap:round}
.m116-lock{fill:#f5f7f8;stroke:#30424f;stroke-width:2}.m116-handle{fill:#ef8618;stroke:#30424f;stroke-width:1.5}.m116-handle-line{stroke:#30424f;stroke-width:3;stroke-linecap:round}
.m116-hinges circle{fill:#ef8618;stroke:#30424f;stroke-width:1.4}.m116-drop{stroke:#30424f;stroke-width:3;stroke-linecap:round}
.m116-ground{stroke:#c5cfd6;stroke-width:2.5;stroke-linecap:round}.m116-plants{fill:none;stroke:#7f9c82;stroke-width:2;stroke-linecap:round}
.m116-track{stroke:#7f8d98;stroke-width:4;stroke-linecap:round}.m116-wheel{fill:#30424f;stroke:#fff;stroke-width:1.5}.m116-arrow{stroke:#ef8618;stroke-width:4;stroke-linecap:round}.m116-arrow-head{fill:#ef8618}.m116-motor{fill:#dce4e8;stroke:#30424f;stroke-width:2}
.visual-option-card svg,.combined-preview-panel svg{filter:drop-shadow(0 5px 8px rgba(35,55,70,.07))}
.preview-post-outline.premium-post{fill:#344753;stroke:#1f2d37;stroke-width:2.2}
.preview-fence.premium-fence{stroke:#526875;stroke-width:5.5}
.preview-frame.premium-frame{stroke:#30424f;stroke-width:4}
.preview-leaf.premium-leaf,.preview-gate-box.premium-leaf{stroke:#ef8618;stroke-width:4.5}
.preview-handle-marker .preview-handle-base{fill:#ef8618;stroke:#30424f;stroke-width:1.5}
.gate-sketch-disclaimer{border-color:#d7dee3;background:#f7f9fa}
[data-theme="dark"] .gate-type-card{background:linear-gradient(180deg,var(--surface) 0%,#202c34 100%)}
[data-theme="dark"] .gate-sketch-disclaimer{background:#202b33;border-color:#42515d}
@media(max-width:720px){.gate-type-visual{min-height:155px}.gate-type-visual svg{height:155px;width:min(100%,360px)}}

/* M119 – feinere Planzeichnung / Zeichenengine 2.0 */
.project-drawing.technical .drawing-grid-line{stroke:#f3f5f7;stroke-width:.65}
.project-drawing.technical .draw-fence-rail{stroke:#53626d;stroke-width:1.55;stroke-linecap:round;vector-effect:non-scaling-stroke}
.project-drawing.technical .draw-fence-picket{stroke:#83909a;stroke-width:.85;stroke-linecap:round;vector-effect:non-scaling-stroke}
.project-drawing.technical .draw-post-plan{fill:#fff;stroke:#263744;stroke-width:1.55;vector-effect:non-scaling-stroke}
.project-drawing.technical .gate-base{stroke:#d97706;stroke-width:2.1;stroke-linecap:round}
.project-drawing.technical .gate-leaf{stroke:#334155;stroke-width:1.45;stroke-linecap:round}
.project-drawing.technical .gate-motion{stroke:#d97706;stroke-width:1.55}
.project-drawing.technical .draw-gate .draw-post-square{fill:#fff;stroke:#263744;stroke-width:1.45;rx:3}
.project-drawing.technical .draw-handle-base{fill:#f59e0b;stroke:#263744;stroke-width:1.2}
.project-drawing.technical .draw-handle-grip-plan{stroke:#263744;stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.project-drawing.technical .draw-label rect,.project-drawing.technical .corner-label-bg{fill:rgba(255,255,255,.96);stroke:#d7dde2;stroke-width:.8}
.project-drawing.technical .draw-label text{font-weight:650;font-size:12px}
.project-drawing.technical .dimension-line,.project-drawing.technical .dimension-extension,.project-drawing.technical .dimension-tick{stroke-width:.8}
.project-drawing.technical .dimension-text{font-size:11px;font-weight:650}
.project-drawing.technical .corner-post{fill:#fff;stroke:#263744;stroke-width:1.5}


/* M120 – SVG-Zeichenengine 3.0: feine Hersteller-Planzeichnung */
.drawing-engine-v3{background:#fff;font-family:Inter,Arial,sans-serif}.drawing-paper{fill:#fff}.draw-dimension-v3 line{fill:none}.dimension-extension-v3{stroke:#c7cdd2;stroke-width:.75;stroke-dasharray:3 3}.dimension-line-v3,.dimension-tick-v3{stroke:#7c8790;stroke-width:.9}.dimension-label-bg-v3,.label-v3 rect{fill:#fff;stroke:#e1e5e8;stroke-width:.75}.dimension-text-v3{font-size:11px;font-weight:650;fill:#39434b}.fence-rail-v3{stroke:#46515a;stroke-width:1.25;stroke-linecap:round}.fence-wire-v3{stroke:#929ba2;stroke-width:.65;stroke-linecap:round}.gate-frame-v3{stroke:#dc6b0b;stroke-width:2.1;stroke-linecap:round}.gate-leaf-rail-v3{stroke:#dc6b0b;stroke-width:2.05;stroke-linecap:round}.gate-infill-v3{stroke:#f09a4b;stroke-width:1.05;opacity:.95}.gate-motion-v3{stroke:#dc6b0b;stroke-width:1.15;stroke-dasharray:6 4;fill:none}.gate-motion-v3+path,.drawing-engine-v3 marker path{fill:#dc6b0b}.post-v3 rect{fill:#fff;stroke:#27333c;stroke-width:1.4}.post-v3 line{stroke:#c3c9ce;stroke-width:.7}.handle-v3 circle{fill:#fff3e7;stroke:#dc6b0b;stroke-width:1.2}.handle-grip-v3{stroke:#27333c;stroke-width:1.35;stroke-linecap:round}.angle-v3 path{fill:none;stroke:#a3abb1;stroke-width:.9;stroke-dasharray:2 2}.angle-v3 text{font-size:10px;font-weight:650;fill:#68727a}.label-v3 text{font-size:10.5px;font-weight:650;fill:#354049}.marker-v3 circle{fill:#fff;stroke:#5e6971;stroke-width:1.2}.marker-v3.start circle{stroke:#39734d}.marker-v3.end circle{stroke:#426478}.marker-v3 text{font-size:10px;font-weight:750;fill:#334149}

/* M123 */
.required-step-card{scroll-margin-top:112px}.required-step-card>summary{cursor:pointer;list-style:none}.required-step-card>summary::-webkit-details-marker{display:none}.required-step-chevron{margin-left:auto;transition:transform .2s}.required-step-card[open] .required-step-chevron{transform:rotate(180deg)}.required-step-card.is-current{border-color:#dc6b0b;box-shadow:0 0 0 2px rgba(220,107,11,.1)}.required-step-card.is-complete{background:#fafbfb}.gate-v3{filter:drop-shadow(0 1px 0 rgba(220,107,11,.15))}

/* M124: Tore in der Draufsicht bewusst als einfache, eindeutige Linien darstellen. */
.gate-opening-v3{stroke:#dc6b0b;stroke-width:4.2;stroke-linecap:round}
.gate-leaf-simple-v3{stroke:#f07b16;stroke-width:4.8;stroke-linecap:round}
.gate-motion-v3{stroke:#f07b16;stroke-width:1.8;stroke-dasharray:7 5;fill:none}
.gate-frame-v3,.gate-leaf-rail-v3,.gate-infill-v3{display:none}
.guided-step{margin-top:16px}
.guided-step.is-complete{opacity:.82}
.guided-step-badge{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:999px;background:#eef2f4;font-weight:800;margin-right:8px}
.guided-current{border:2px solid #d7dde1;border-radius:16px;padding:18px;background:#fff}
.guided-complete{border:1px solid #e2e6e9;border-radius:14px;padding:14px;background:#f8fafb}

/* M126 – eindeutige Auswahl- und Eingabeerkennung */
.guided-wait-note{margin-top:12px;padding:14px 16px;border:1px dashed var(--border);border-radius:12px;background:var(--surface);color:var(--muted);font-weight:700}
.height-mode-option[aria-pressed="true"],button.is-selected{touch-action:manipulation}
.guided-step input:valid:not(:placeholder-shown),.guided-step select:valid{border-color:#2f7d4a;box-shadow:0 0 0 2px rgba(47,125,74,.10)}
.guided-step input:focus,.guided-step select:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 24%,transparent)}

/* M130 – gemeinsame Torzeichnung klarer und mobil besser lesbar */
.gates-only-drawing .drawing-scroll{padding:14px;background:#fff}
.gates-only-drawing .project-drawing{width:100%!important;min-width:0!important;max-width:100%!important}
.gates-only-drawing .gate-opening-v3{stroke-width:7!important}
.gates-only-drawing .gate-leaf-simple-v3{stroke-width:5!important}
.gates-only-drawing .gate-motion-v3{stroke-width:3!important}
.gates-only-drawing .label-v3 text{font-size:14px!important;font-weight:800!important}
.gates-only-drawing .dimension-text-v3{font-size:13px!important;font-weight:800!important}
@media(max-width:700px){
 .gates-only-drawing .drawing-scroll{padding:6px}
 .gates-only-drawing .project-drawing{min-width:0!important;width:100%!important}
 .gates-only-drawing .label-v3 text{font-size:15px!important}
}
/* M136 – CAD-Zeichenengine 3.1: klare Hierarchie, konstante Strichstaerken */
.drawing-engine-v31{background:#fff;font-family:Inter,Arial,sans-serif;shape-rendering:geometricPrecision;text-rendering:geometricPrecision}
.drawing-engine-v31 .drawing-paper{fill:#fff}
.fence-rail-v31{stroke:#3f4d57;stroke-width:1.45;stroke-linecap:round}
.fence-wire-v31{stroke:#77858f;stroke-width:.8;stroke-linecap:round}
.gate-opening-v31{stroke:#d96a0a;stroke-width:2.8;stroke-linecap:round}
.gate-leaf-v31{stroke:#ee7d1a;stroke-width:2.6;stroke-linecap:round}
.gate-motion-v31{stroke:#d96a0a;stroke-width:1.25;stroke-dasharray:6 4;fill:none}
.drawing-engine-v31 marker path{fill:#d96a0a}
.post-v31 rect{fill:#fff;stroke:#253540;stroke-width:1.4}.post-v31 line{stroke:#aeb8bf;stroke-width:.65}
.gate-post-v31 rect{fill:#f6f8f9;stroke-width:2}.fence-post-v31 rect{fill:#fff}
.handle-v31 circle{fill:#fff3e7;stroke:#d96a0a;stroke-width:1.35}.handle-grip-v31{stroke:#253540;stroke-width:1.5;stroke-linecap:round}
.dimension-extension-v31{stroke:#b8c1c8;stroke-width:.75;stroke-dasharray:3 3}.dimension-line-v31,.dimension-tick-v31{stroke:#66737d;stroke-width:.95}
.dimension-label-bg-v31,.label-v31 rect{fill:#fff;stroke:#d5dce1;stroke-width:.8}.dimension-text-v31{font-size:11.5px;font-weight:700;fill:#28343d}
.angle-v31 path{fill:none;stroke:#87939c;stroke-width:.9;stroke-dasharray:2 2}.angle-v31 text{font-size:10.5px;font-weight:700;fill:#4f5d67}
.label-v31 text{font-size:11px;font-weight:700;fill:#28343d}.marker-v31 circle{fill:#fff;stroke:#53626d;stroke-width:1.25}.marker-v31.start circle{stroke:#2e7148}.marker-v31.end circle{stroke:#365f78}.marker-v31 text{font-size:10px;font-weight:800;fill:#2b3943}
@media (max-width:640px){.drawing-engine-v31 .dimension-text-v31{font-size:12.5px}.drawing-engine-v31 .label-v31 text{font-size:12px}.drawing-engine-v31{min-height:260px}}

/* M137 - CAD-Zeichenengine 3.2: sauberer Zaun-Tor-Uebergang */
.drawing-engine-v32{background:#fff;font-family:Inter,Arial,sans-serif;shape-rendering:geometricPrecision;text-rendering:geometricPrecision}
.drawing-engine-v32 .drawing-paper{fill:#fff}
.fence-rail-v32{stroke:#354550;stroke-width:1.55;stroke-linecap:round}
.fence-wire-v32{stroke:#71808a;stroke-width:.82;stroke-linecap:round}
.fence-socket-v32{stroke:#354550;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.gate-opening-v32{stroke:#d96809;stroke-width:3.15;stroke-linecap:round}
.gate-leaf-v32{stroke:#ef7e18;stroke-width:2.85;stroke-linecap:round}
.gate-motion-v32{stroke:#d96809;stroke-width:1.3;stroke-dasharray:6 4;fill:none}
.drawing-engine-v32 marker path{fill:#d96809}
.post-v32 rect{fill:#fff;stroke:#20313c;stroke-width:1.45}.post-v32 line{stroke:#a8b3ba;stroke-width:.65}
.gate-post-v32 rect{fill:#eef2f4;stroke-width:2.15}.fence-post-v32 rect{fill:#fff}
.handle-v32 circle{fill:#fff3e7;stroke:#d96809;stroke-width:1.35}.handle-grip-v32{stroke:#20313c;stroke-width:1.5;stroke-linecap:round}
.dimension-extension-v32{stroke:#b6c0c7;stroke-width:.75;stroke-dasharray:3 3}.dimension-line-v32,.dimension-tick-v32{stroke:#5f6d77;stroke-width:.95}
.dimension-label-bg-v32,.label-v32 rect{fill:#fff;stroke:#d2dae0;stroke-width:.8}.dimension-text-v32{font-size:11.5px;font-weight:700;fill:#26343d}
.angle-v32 path{fill:none;stroke:#84919a;stroke-width:.9;stroke-dasharray:2 2}.angle-v32 text{font-size:10.5px;font-weight:700;fill:#4b5a64}
.label-v32 text{font-size:11px;font-weight:700;fill:#26343d}.marker-v32 circle{fill:#fff;stroke:#50616c;stroke-width:1.25}.marker-v32.start circle{stroke:#2e7148}.marker-v32.end circle{stroke:#365f78}.marker-v32 text{font-size:10px;font-weight:800;fill:#2b3943}
@media(max-width:640px){.drawing-engine-v32 .dimension-text-v32{font-size:12.5px}.drawing-engine-v32 .label-v32 text{font-size:12px}.drawing-engine-v32{min-height:270px}}

/* M138 – CAD-Zeichenengine 4.0: maßbezogene Linienhierarchie und echte Bemaßung */
.drawing-engine-v4{background:#fff;font-family:Inter,Arial,sans-serif;shape-rendering:geometricPrecision;text-rendering:geometricPrecision}
.drawing-engine-v4 .drawing-paper{fill:#fff}
.drawing-engine-v4 line,.drawing-engine-v4 path,.drawing-engine-v4 rect,.drawing-engine-v4 circle{vector-effect:non-scaling-stroke}
.fence-rail-v4{stroke:#334550;stroke-width:1.5;stroke-linecap:round}
.fence-wire-v4{stroke:#7d8a93;stroke-width:.72;stroke-linecap:round}
.fence-socket-v4{stroke:#334550;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gate-opening-v4{stroke:#d86608;stroke-width:3.15;stroke-linecap:round}
.gate-panel-v4{stroke:#ef8622;stroke-width:2.1;stroke-linecap:round}
.gate-leaf-v4{stroke:#e97511;stroke-width:2.55;stroke-linecap:round}
.gate-motion-v4{stroke:#c95c05;stroke-width:1.15;stroke-dasharray:6 4;fill:none}
.gate-motion-arrow-v4{fill:#c95c05;stroke:none}
.hinge-v4{fill:#fff;stroke:#263945;stroke-width:1.15}
.post-v4 rect{fill:#fff;stroke:#263945;stroke-width:1.4}
.post-axis-v4{stroke:#a5b0b7;stroke-width:.65}
.gate-post-v4 rect{fill:#edf2f4;stroke-width:2.05}
.corner-post-v4 rect{fill:#263945;stroke:#263945;stroke-width:1.5}
.corner-post-v4 circle{fill:#fff;stroke:#fff;stroke-width:.8}
.handle-v4 circle{fill:#ed7d16;stroke:#263945;stroke-width:1.35}
.handle-v4 text{fill:#fff;font-size:8px;font-weight:900;font-family:Arial,sans-serif;pointer-events:none}
.dimension-extension-v4{stroke:#adb8bf;stroke-width:.72}
.dimension-line-v4{stroke:#5e6e78;stroke-width:.88}
.dimension-arrow-v4{fill:#5e6e78;stroke:none}
.dimension-label-bg-v4{fill:#fff;stroke:#d7dee3;stroke-width:.72}
.dimension-text-v4{font-size:11.5px;font-weight:750;fill:#253640}
.angle-v4 path{fill:none;stroke:#72818b;stroke-width:.9;stroke-dasharray:2 2}
.angle-v4 rect{fill:#fff;stroke:#d7dee3;stroke-width:.72}
.angle-v4 text{font-size:10.5px;font-weight:750;fill:#43535d}
.leader-v4,.marker-leader-v4{stroke:#9aa7af;stroke-width:.75;stroke-linecap:round}
.leader-dot-v4{fill:#7f8d96;stroke:none}
.label-v4 rect{fill:#fff;fill-opacity:.98;stroke:#cad4da;stroke-width:.8}
.label-v4 text{fill:#263640}
.label-title-v4{font-size:11px;font-weight:800}
.label-sub-v4{font-size:10px;font-weight:650;fill:#54636c!important}
.marker-v4 circle{fill:#fff;stroke:#4e626e;stroke-width:1.25}
.marker-v4.start circle{fill:#edf7f0;stroke:#2f7149}
.marker-v4.end circle{fill:#eef4f8;stroke:#365e77}
.marker-v4 text{font-size:10px;font-weight:850;fill:#293b46}
.drawing-note-v4{font-size:9.5px;font-weight:600;fill:#67747d}
@media(max-width:640px){
 .drawing-engine-v4{min-height:280px}
 .drawing-engine-v4 .dimension-text-v4{font-size:12.5px}
 .drawing-engine-v4 .label-title-v4{font-size:12px}
 .drawing-engine-v4 .label-sub-v4{font-size:11px}
 .drawing-engine-v4 .drawing-note-v4{font-size:10px}
}

/* M139 – technische Torauswahl und robuste Druckseiten */
.gate-execution-card svg.gate-execution-drawing{
 width:min(100%,360px);
 max-width:360px;
 height:158px;
 shape-rendering:geometricPrecision;
 text-rendering:geometricPrecision;
}
.gate-exec-dimension line{stroke:#7c8992;stroke-width:1;vector-effect:non-scaling-stroke}
.gate-exec-dimension marker path{fill:#7c8992}
.gate-exec-dimension rect{fill:#fff;stroke:#d7dfe4;stroke-width:1}
.gate-exec-dimension text{font:750 11px system-ui,sans-serif;fill:#33434d}
.gate-exec-ground line:first-child{stroke:#81909a;stroke-width:1.5}
.gate-exec-ground line:last-child{stroke:#d1d9de;stroke-width:1}
.gate-exec-posts rect{stroke:#1e303b;stroke-width:1.6}
.gate-exec-posts line{stroke:#8d9ba4;stroke-width:.65}
.gate-exec-leaf>rect{stroke:#263944;stroke-width:2.15}
.gate-exec-bars line{stroke:#617681;stroke-width:1.05}
.gate-exec-rail{stroke:#344b58;stroke-width:1.5}
.gate-exec-brace{fill:none;stroke:#8c9aa3;stroke-width:1.45}
.gate-exec-meeting{stroke:#263944;stroke-width:1.8}
.gate-exec-hinge rect,.gate-exec-hinge circle{fill:#edf1f3;stroke:#263944;stroke-width:1.1}
.gate-exec-lock>rect{fill:#263944;stroke:#172731;stroke-width:1}
.gate-exec-lock>circle:first-of-type{fill:#ed7d16;stroke:#263944;stroke-width:1.1}
.gate-exec-lock>text{font:900 8px system-ui,sans-serif;fill:#fff}
.gate-exec-lock>line{stroke:#263944;stroke-width:2.2;stroke-linecap:round}
.gate-exec-lock>circle:last-of-type{fill:#263944;stroke:none}
.gate-exec-bolt line,.gate-exec-bolt path{fill:none;stroke:#263944;stroke-width:1.5;stroke-linecap:round}
.gate-exec-leaf-label text{font:700 9.5px system-ui,sans-serif;fill:#60717b}
.gate-handle-icon b{
 position:absolute;
 inset:0;
 display:grid;
 place-items:center;
 padding-right:7px;
 color:#fff;
 font-size:10px;
 line-height:1;
 z-index:1;
}
@media(max-width:720px){
 .gate-execution-card svg.gate-execution-drawing{height:148px}
}
@media print{
 @page{size:A4 portrait;margin:10mm 12mm 12mm}
 @page drawing{size:A4 landscape;margin:10mm 12mm 12mm}
 html,body{background:#fff!important}
 body{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;font-size:9.5pt!important}
 .app-header,.site-header,.hero-panel,.step-header,.app-footer,.bottom-nav,
 .summary-actions,.drawing-toolbar,.text-button{display:none!important}
 .app-main,.app-shell,.content-shell,.content-card,main{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
 }
 .summary-card{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#fff!important;
  margin:0 0 6mm!important;
  padding:0!important;
 }
 .summary-card h2{margin:0 0 3mm!important;font-size:16pt!important}
 .summary-card h3{margin:0 0 2.5mm!important;font-size:12.5pt!important}
 .summary-table{border-color:#bbc5cc!important}
 .summary-table-row{padding:2.2mm 2.8mm!important;font-size:8.5pt!important}
 .summary-gates-card,.summary-card:has(> .summary-gate){
  break-before:page!important;
  page-break-before:always!important;
 }
 .summary-gates-card>.summary-card-head,.summary-card:has(> .summary-gate)>.summary-card-head{margin-bottom:2mm!important}
 .summary-gate.detailed{
  break-inside:avoid-page!important;
  page-break-inside:avoid!important;
  padding:0!important;
  border:0!important;
 }
 .summary-gate.detailed+.summary-gate.detailed{
  break-before:page!important;
  page-break-before:always!important;
 }
 .summary-gate-preview{
  width:154mm!important;
  max-width:154mm!important;
  margin:1mm auto 3mm!important;
  padding:0!important;
  border:0!important;
  background:#fff!important;
 }
 .summary-gate-preview-canvas{height:50mm!important}
 .summary-gate-preview svg{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:50mm!important;
 }
 .gate-handle-explanation{
  display:block!important;
  position:relative!important;
  margin:1.5mm 0 0!important;
  padding:1.5mm 2mm 1.5mm 11mm!important;
  border-color:#c9d2d8!important;
  font-size:7.8pt!important;
  line-height:1.25!important;
 }
 .gate-handle-explanation>strong,.gate-handle-explanation>span:last-child{display:block!important}
 .gate-handle-icon{position:absolute!important;left:2mm!important;top:2mm!important;width:6.5mm!important;height:6.5mm!important;border-width:.5mm!important}
 .gate-handle-icon i{display:none!important}
 .gate-handle-icon b{
  display:block!important;
  inset:0!important;
  padding:0!important;
  color:#fff!important;
  font-size:7pt!important;
  line-height:5.5mm!important;
  text-align:center!important;
 }
 .summary-gate .summary-list.compact{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
 }
 .summary-gate .summary-list.compact>div{
  display:grid!important;
  grid-template-columns:48mm minmax(0,1fr)!important;
  gap:3mm!important;
  min-width:0!important;
  padding:1.45mm 0!important;
  align-items:start!important;
  break-inside:avoid!important;
 }
 .summary-gate .summary-list.compact>div.summary-item-wide{
  grid-column:auto!important;
  grid-template-columns:48mm minmax(0,1fr)!important;
 }
 .summary-gate .summary-list dt,.summary-gate .summary-list dd{
  min-width:0!important;
  margin:0!important;
  font-size:8.5pt!important;
  line-height:1.25!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
 }
 .print-drawing-section{
  page:drawing;
  break-before:page!important;
  page-break-before:always!important;
  break-inside:avoid-page!important;
  page-break-inside:avoid!important;
  margin:0!important;
  padding:0!important;
 }
 .print-drawing-section h2{margin:0 0 4mm!important;font-size:18pt!important}
 .print-drawing-section .drawing-scroll{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  overflow:visible!important;
  padding:3mm!important;
  border:1px solid #bac5cc!important;
  border-radius:0!important;
  background:#fff!important;
 }
 .print-drawing-section .project-drawing,
 .print-drawing-section .drawing-scroll.small .project-drawing{
  display:block!important;
  width:100%!important;
  max-width:273mm!important;
  min-width:0!important;
  height:auto!important;
  max-height:190mm!important;
  margin:0 auto!important;
 }
 .print-drawing-section .dimension-text-v4{font-size:13px!important}
 .print-drawing-section .label-title-v4{font-size:12.5px!important}
 .print-drawing-section .label-sub-v4{font-size:11.5px!important}
 .print-drawing-section .drawing-note-v4{font-size:10.5px!important}
}