@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/manrope-400.woff2') format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/manrope-600.woff2') format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/manrope-700.woff2') format('woff2')}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/manrope-800.woff2') format('woff2')}

:root{
  --white:#fff;
  --paper:#f4f6f7;
  --ink:#1c252e;
  --anthracite:#2f343a;
  --muted:#5d6a73;
  --line:#d6dee3;
  --line-strong:#b9c5cc;
  --blue:#007cbf;
  --blue-dark:#00679f;
  --blue-soft:#e6f3fa;
  --pass:#c27a1f;
  --pass-soft:#fbf1e3;
  --error:#b42318;
  --error-soft:#fdf0ee;
  --ok:#1d7a46;
  --radius:10px;
  --gap:clamp(16px,2.2vw,28px);
  --font:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.55 var(--font);font-feature-settings:"tnum" 1}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
a{color:var(--blue-dark)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:8px;background:var(--white);font-weight:700}
.skip-link:focus{top:12px}

/* Kopfzeile */
.topbar{background:var(--white);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1680px;margin:0 auto;padding:12px var(--gap)}
.wordmark{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:18px;letter-spacing:-.01em}
.wordmark svg{width:30px;height:30px}.wordmark rect{fill:var(--blue)}.wordmark path{fill:#fff}
.topbar-note{margin:0;color:var(--muted);font-size:13px;text-align:right;max-width:46ch}

/* Grundlayout */
.app{display:grid;grid-template-columns:minmax(360px,440px) minmax(0,1fr);align-items:start;gap:var(--gap);max-width:1680px;margin:0 auto;padding:var(--gap)}
.config{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:12px;min-width:0}
.config-title{margin:2px 0 6px;font-size:clamp(26px,2.4vw,32px);line-height:1.1;letter-spacing:-.025em;font-weight:800}
.step{margin:0;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);min-width:0}
.step legend{display:flex;align-items:center;gap:10px;float:left;width:100%;margin:0 0 14px;padding:0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.step legend+*{clear:both}
.step-number{display:inline-grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--anthracite);color:#fff;font-size:14px;font-weight:800}
.step-help{clear:both;margin:0 0 12px;color:var(--muted);font-size:13.5px}

/* 1 Modell */
.model-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.model-option{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:10px;padding:8px 10px 8px 8px;border:2px solid var(--line);border-radius:var(--radius);background:var(--white);text-align:left}
.model-option:hover{border-color:var(--line-strong)}
.model-option[aria-checked="true"]{border-color:var(--blue);background:var(--blue-soft)}
.model-option img{width:64px;height:64px;object-fit:contain}
.model-option strong{display:block;font-size:15.5px;font-weight:800;line-height:1.25}
.model-option small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4}
.model-option strong+small{margin-top:1px}
.model-option[aria-checked="true"]::after{content:"";position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}

/* 2 Form */
.shape-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.shape-option{display:grid;justify-items:center;gap:6px;padding:12px 6px 10px;border:2px solid var(--line);border-radius:var(--radius);background:var(--white);font-weight:700;font-size:14px}
.shape-option:hover{border-color:var(--line-strong)}
.shape-option[aria-checked="true"]{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-dark)}
.shape-option svg{width:46px;height:46px}
.shape-option path{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:square;stroke-linejoin:miter}
.shape-option circle{fill:currentColor}

/* 3 Längen */
.length-list{display:grid;gap:10px}
.length-field{display:grid;grid-template-columns:minmax(0,1fr) 150px;align-items:center;gap:6px 12px}
.length-field label{font-weight:700}
.length-field label small{display:block;color:var(--muted);font-weight:400;font-size:12.5px}
.length-input{position:relative}
.length-input input{width:100%;height:50px;padding:0 34px 0 14px;border:2px solid var(--line-strong);border-radius:var(--radius);background:var(--white);font-size:18px;font-weight:700;text-align:right}
.length-input input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(0,124,191,.18)}
.length-input span{position:absolute;right:13px;top:50%;translate:0 -50%;color:var(--muted);font-weight:700;pointer-events:none}
.length-field.is-invalid input{border-color:var(--error);background:var(--error-soft)}
.field-note{grid-column:1/-1;margin:0;font-size:13px;color:var(--muted)}
.field-note.is-error{color:var(--error);font-weight:600}
.suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.suggestion{padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--white);font-size:13px;font-weight:700}
.suggestion:hover{border-color:var(--blue);color:var(--blue-dark)}
.length-field.freeform-field{grid-template-columns:minmax(0,1fr) 130px 34px}
.length-field.is-selected .length-input input{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,124,191,.18)}
.freeform-delete{width:34px;height:50px;border:2px solid var(--line-strong);border-radius:var(--radius);background:var(--white);color:var(--error);font-size:16px;font-weight:800}
.freeform-delete:hover{border-color:var(--error);background:var(--error-soft)}
#moveFence[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-dark)}
.form-message{margin:10px 0 0;padding:10px 12px;border-radius:8px;background:var(--error-soft);color:var(--error);font-weight:600;font-size:13.5px}

/* 4 Passfeld */
.passfeld-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.passfeld-toggle button{display:grid;justify-items:start;gap:2px;padding:12px;border:2px solid var(--line);border-radius:var(--radius);background:var(--white);text-align:left}
.passfeld-toggle button:hover{border-color:var(--line-strong)}
.passfeld-toggle button[aria-checked="true"]{border-color:var(--blue);background:var(--blue-soft)}
.passfeld-toggle strong{font-size:15.5px;font-weight:800}
.passfeld-toggle small{color:var(--muted);font-size:12.5px}
.mini-row{display:flex;gap:2px;width:100%;height:18px;margin-bottom:8px}
.mini-row i{flex:3;background:var(--anthracite);border-radius:2px}
.mini-row i.is-pass{flex:1.3;background:var(--pass)}

.row-strips{display:grid;gap:12px;margin-top:16px}
.row-strip{display:grid;gap:5px}
.row-strip-head{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.row-strip-head strong{font-weight:800}
.row-strip-head span{color:var(--muted)}
.strip{display:flex;height:22px;padding:0 3px;border-radius:4px;background:var(--anthracite);gap:0}
.strip i{position:relative;height:100%;background:#4b535b;box-shadow:inset 0 0 0 1px var(--anthracite)}
.strip i::after{content:"";position:absolute;inset:4px 3px;background:linear-gradient(90deg,#15324a,#1d4666)}
.strip i.is-pass{background:var(--pass)}
.strip i.is-pass::after{display:none}
.strip-caption{margin:0;font-size:12.5px;color:var(--muted)}
.strip-caption b{color:var(--pass);font-weight:800}

/* Ansicht */
.stage{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0;align-content:start}
.stage-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.stage-title{display:flex;align-items:center;gap:10px;margin:0;font-size:19px;font-weight:800}
.view-tabs{display:inline-grid;grid-auto-flow:column;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.view-tabs button{min-height:44px;padding:0 18px;border:0;border-radius:9px;background:transparent;font-weight:700;color:var(--muted)}
.view-tabs button[aria-selected="true"]{background:var(--anthracite);color:#fff}
.viewport{position:relative;height:clamp(460px,64vh,760px);border:1px solid var(--line);border-radius:var(--radius);background:var(--white);overflow:hidden}
.view{position:absolute;inset:0}
.map-canvas,.scene,#planCanvas{position:absolute;inset:0;width:100%;height:100%}
.scene canvas{display:block;width:100%;height:100%;touch-action:none}
#planCanvas{touch-action:none;cursor:grab}
.view-empty{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:24px;text-align:center;background:rgba(255,255,255,.94);color:var(--muted);font-weight:600}

.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--white);font-weight:700;white-space:nowrap;text-decoration:none;color:var(--ink)}
.button:hover{border-color:var(--anthracite)}
.button-primary{border-color:var(--blue);background:var(--blue);color:#fff}
.button-primary:hover{border-color:var(--blue-dark);background:var(--blue-dark)}
.button-dark{border-color:var(--anthracite);background:var(--anthracite);color:#fff}
.button-quiet{border-color:transparent;background:transparent}
.button[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-dark)}

/* Karte */
.map-consent{position:absolute;inset:0;z-index:6;display:grid;align-content:center;justify-items:start;gap:10px;padding:clamp(20px,5vw,56px);background:var(--white)}
.map-consent h3{margin:0;font-size:22px;letter-spacing:-.02em}
.map-consent p{margin:0;max-width:62ch;color:var(--muted)}
.consent-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px}
.map-tools{position:absolute;z-index:3;left:12px;right:12px;top:12px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;pointer-events:none}
.map-tools>*{pointer-events:auto}
.map-search{display:flex;gap:6px;flex:1 1 320px;max-width:460px;padding:6px;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 2px 10px rgba(20,30,40,.18)}
.map-search input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px}
.search-results{position:absolute;top:66px;left:0;width:min(460px,100%);max-height:260px;overflow:auto;margin:0;padding:6px;list-style:none;border-radius:12px;background:var(--white);box-shadow:0 8px 24px rgba(20,30,40,.2)}
.search-results button{display:grid;width:100%;padding:10px;border:0;border-radius:8px;background:transparent;text-align:left}
.search-results button:hover,.search-results button:focus-visible{background:var(--blue-soft)}
.search-results small{color:var(--muted)}
.map-actions{display:flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 2px 10px rgba(20,30,40,.18)}
.rotation{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 2px 10px rgba(20,30,40,.18);font-weight:700}
.rotation input{width:150px;accent-color:var(--blue)}
.rotation output{min-width:44px;text-align:right}
.map-status{position:absolute;z-index:3;pointer-events:none;left:50%;bottom:44px;translate:-50% 0;max-width:min(560px,calc(100% - 24px));margin:0;padding:10px 14px;border-radius:10px;background:var(--anthracite);color:#fff;font-weight:600;font-size:14px;text-align:center}
.map-status.is-error{background:var(--error)}
.parcel-card{position:absolute;z-index:3;right:12px;top:74px;width:min(300px,calc(100% - 24px));padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.97);box-shadow:0 4px 16px rgba(20,30,40,.2);font-size:13.5px}
.parcel-card h3{margin:0 0 4px;font-size:15px}
.parcel-card dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0}
.parcel-card dt{color:var(--muted)}.parcel-card dd{margin:0;font-weight:700;text-align:right}
.parcel-card p{margin:6px 0 0;color:var(--muted);font-size:12px}
.map-label{padding:3px 7px;border-radius:6px;background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.25);font:800 12px/1.2 var(--font);color:var(--ink);white-space:nowrap}
.map-label.is-pass{background:var(--pass);color:#fff}
.map-start{display:grid;place-items:center;width:24px;height:24px;border:3px solid #fff;border-radius:50%;background:var(--blue);color:#fff;font:800 11px/1 var(--font);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.maplibregl-ctrl-attrib{font-family:var(--font)}

/* 2D / 3D */
.legend{position:absolute;left:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.95);box-shadow:0 1px 6px rgba(20,30,40,.15);font-size:13px;font-weight:600}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:18px;height:8px;border-radius:2px}
.lg-pv{background:var(--anthracite)}.lg-pass{background:var(--pass)}.lg-post{width:9px!important;height:9px!important;background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}.lg-start{width:12px!important;height:12px!important;border-radius:50%!important;background:var(--blue)}
.fit-button{position:absolute;right:12px;top:12px;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:9px;background:var(--white);font-weight:700}
.scene-loading{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.95);font-weight:700;color:var(--muted)}

/* Ergebnis */
.results{min-width:0;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.results h3{margin:0 0 12px;font-size:17px;font-weight:800}
.result-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--line)}
.result-grid div{display:grid;align-content:start;gap:2px;padding:12px;background:var(--white)}
.result-grid dt{color:var(--muted);font-size:12.5px;font-weight:600}
.result-grid dd{margin:0;font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.result-grid dd small{display:block;margin-top:2px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:0}
.result-grid .is-solar dd{color:var(--blue-dark)}
.result-grid .is-pending dd{color:var(--muted);font-size:15px}
.result-grid .is-error dd{color:var(--error);font-size:14px}
.side-table-wrap{max-width:100%;margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.side-table{width:100%;border-collapse:collapse;font-size:13.5px}
.side-table th,.side-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.side-table th{color:var(--muted);font-weight:600;font-size:12.5px}
.side-table td.num{text-align:right}
.side-table .pass-cell{color:var(--pass);font-weight:800}
.results-note{margin:12px 0 0;color:var(--muted);font-size:12.5px}
.loading-dots::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.inline-button{margin-top:6px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--white);font-size:13px;font-weight:700}

.footer{max-width:1680px;margin:0 auto;padding:8px var(--gap) 28px;color:var(--muted);font-size:12.5px}
.footer p{margin:0}
.footer-sources{display:flex;flex-wrap:wrap;gap:4px 18px}
.footer-links{display:flex;gap:16px;margin-top:6px!important}

/* Tablet */
@media (max-width:1180px){
  .app{grid-template-columns:minmax(330px,390px) minmax(0,1fr)}
  .result-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .topbar-note{display:none}
}
/* Handy und schmale Tablets */
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr);padding:12px}
  .config-title{font-size:26px}
  .viewport{height:min(72vh,560px)}
  .stage-head{flex-direction:column;align-items:stretch}
  .view-tabs{grid-template-columns:repeat(3,1fr);grid-auto-flow:row}
  .view-tabs button{padding:0 8px}
  .map-tools{left:8px;right:8px;top:8px}
  .map-search{flex-basis:100%;max-width:none}
  .search-results{top:64px;width:100%}
  .map-actions{flex:1 1 auto}
  .map-actions .button{flex:1 1 auto;padding:0 10px}
  .rotation{flex:1 1 100%}
  .rotation input{flex:1;width:auto}
  .parcel-card{left:8px;right:8px;width:auto;top:auto;bottom:40px}
  .legend{font-size:12px;right:12px}
}
@media (max-width:520px){
  .step{padding:14px}
  .shape-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .length-field{grid-template-columns:1fr}
  .length-field.freeform-field{grid-template-columns:minmax(0,1fr) 34px}
  .result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result-grid dd{font-size:19px}
  .model-grid{grid-template-columns:1fr}
  .model-option{grid-template-columns:52px minmax(0,1fr)}
  .model-option img{width:52px;height:52px}
  .model-option small{display:inline;font-size:12.5px}
  .model-option small+small::before{content:", "}
  .passfeld-toggle{grid-template-columns:1fr}
  .map-status{bottom:36px}
  .side-table th,.side-table td{padding:8px 6px}
  .side-table td:nth-child(4){white-space:normal;min-width:132px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.result-grid .is-pass dd{color:var(--pass)}