:root { --bg:#1d2024; --panel:#272b30; --rib:#2b2f35; --top:#17191c; --line:#3a3f46; --fg:#e8eaed; --muted:#9aa0a6;
        --acc:#ff3b30; --tab:#4cbb6c; --ok:#34c759; --warn:#ffd400; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:14px/1.4 system-ui,Segoe UI,sans-serif; }
#app { display:flex; flex-direction:column; height:100%; overflow:hidden; }
#app > * { min-width:0; }
button { width:100%; padding:9px; margin:4px 0; border:0; border-radius:6px; background:#3c4148; color:var(--fg); font:inherit; cursor:pointer; }
button:hover { background:#4a5058; }
button.primary { background:var(--acc); color:#fff; font-weight:600; }
button.on { background:var(--warn); color:#000; }
button:disabled { opacity:.4; cursor:default; }
.row { display:flex; gap:6px; align-items:center; }
.row > * { flex:1; }
select,input { width:100%; padding:7px; border-radius:6px; border:1px solid #444; background:#1d2024; color:var(--fg); font:inherit; }
.info { background:#1d2024; border-radius:6px; padding:8px; font-variant-numeric:tabular-nums; margin:6px 0; }
.muted { color:var(--muted); font-size:12.5px; }
.warn { color:var(--warn); }
ul { padding-left:18px; margin:4px 0; } li { margin:2px 0; }
h2 { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:14px 0 6px; }
h2:first-child { margin-top:0; }
.ic { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* Kopfzeile: Name, Schnellzugriff (Speichern, Rückgängig), Sprache */
#qat { display:flex; align-items:center; gap:8px; height:38px; padding:0 10px; background:var(--top); }
#qat .logo { color:var(--tab); display:flex; }
#qat .logo .ic { width:22px; height:22px; }
#docTitle { min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#docTitle .fld { font-weight:400; color:var(--muted); }
#docTitle .dot { color:var(--warn); }
.qbtn { width:auto; margin:0; padding:4px 10px; display:flex; align-items:center; gap:6px; font-size:13px; }
.qbtn .ic { width:18px; height:18px; }
#qat .grow { flex:1; }
.lang { display:flex; flex:none; }
.lang button { width:auto; margin:0; padding:3px 7px; font-size:12px; border-radius:0; background:#1d2024; color:var(--muted); }
.lang button:first-child { border-radius:5px 0 0 5px; }
.lang button:last-child { border-radius:0 5px 5px 0; }
.lang button.on { background:#3c4148; color:var(--fg); font-weight:600; }

/* Register und Ribbon */
#tabs { display:flex; gap:2px; padding:0 8px; background:var(--top); overflow-x:auto; scrollbar-width:none; }
#tabs button { width:auto; margin:0; padding:6px 14px 5px; border-radius:6px 6px 0 0; background:transparent; color:var(--muted); white-space:nowrap; border-bottom:2px solid transparent; }
#tabs button:hover { color:var(--fg); background:#24272b; }
#tabs button.on { background:var(--rib); color:var(--fg); border-bottom-color:var(--tab); }
#ribbon { height:104px; background:var(--rib); border-bottom:1px solid #000; overflow-x:auto; overflow-y:hidden; }
.rpanel { display:none; height:100%; padding:5px 4px 0; }
.rpanel.on { display:flex; }
.grp { display:flex; flex-direction:column; padding:0 6px; border-right:1px solid var(--line); flex:none; }
.gbody { flex:1; display:flex; align-items:flex-start; gap:2px; }
.gcap { font-size:11px; color:var(--muted); text-align:center; padding:2px 0 4px; white-space:nowrap; }
.big { display:flex; flex-direction:column; align-items:center; gap:4px; width:auto; min-width:62px; max-width:96px; height:74px;
       margin:0; padding:7px 6px 4px; background:transparent; border-radius:5px; font-size:12px; line-height:1.15; text-align:center; }
.big:hover { background:#3a3f46; }
.big.on { background:rgba(255,212,0,.22); color:var(--fg); box-shadow:inset 0 0 0 1px var(--warn); }
.big.sel { background:#3c4148; box-shadow:inset 0 -2px 0 var(--tab); }
.gcol { display:flex; flex-direction:column; justify-content:center; gap:4px; height:74px; font-size:12.5px; }
.gcol input[type=number] { width:76px; padding:4px 6px; }
.gchecks { display:grid; grid-auto-flow:column; grid-template-rows:repeat(3, 25px); grid-auto-columns:max-content; column-gap:14px; align-content:start; align-items:center; height:76px; padding-top:1px; }
.gchecks .check { margin:1px 0; font-size:12.5px; white-space:nowrap; }
.gchecks .check.dis { opacity:.4; }
.gchecks:empty::before { content:'–'; color:var(--muted); }
.lrow { display:grid; grid-template-columns:1fr 26px; align-items:center; gap:2px; }   /* Papierkorb immer rechts in der Spalte */
.lrow > .lbtn { grid-column:1; height:25px; padding-top:0; padding-bottom:0; }
.lrow > .mini { height:23px; margin:0; padding:0 4px; display:flex; align-items:center; justify-content:center; }
.lbtn { display:flex; align-items:center; gap:6px; width:auto; margin:0; padding:3px 8px 3px 5px; background:transparent; color:var(--muted); font-size:12.5px; white-space:nowrap; border-radius:5px; }
.lbtn .ic { width:17px; height:17px; }
button.lbtn.on { background:transparent; color:var(--fg); }
button.lbtn.on:hover { background:#3a3f46; }
.lbtn.on .ic { color:var(--tab); }
.lbtn:hover { background:#3a3f46; }
.mini .ic { width:15px; height:15px; display:block; }
button.mini { display:inline-flex; align-items:center; justify-content:center; background:transparent; color:var(--muted); }
button.mini:hover { background:#3a3f46; color:var(--fg); }
button.mini.off .ic { opacity:.6; }
.flagrow { border-radius:6px; margin:2px 0; }
.flagrow.on { background:#30353b; box-shadow:inset 3px 0 0 var(--warn); }
.flagrow .bndrow { margin:0; }
.flagrow .fic { flex:none; width:11px; height:11px; border:1px solid #000; border-radius:2px; }
.flagrow .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flagrow .nm i { color:var(--muted); font-style:normal; }
.fdet { padding:2px 8px 8px 22px; font-size:12.5px; }
.fdet .coord { color:var(--muted); font-variant-numeric:tabular-nums; margin-bottom:6px; }
.swatches { display:flex; gap:6px; margin-bottom:6px; }
.swatches button { width:auto; margin:0; padding:3px 10px 3px 6px; display:flex; align-items:center; gap:6px; font-size:12.5px; background:#1d2024; }
.swatches button.on { background:#1d2024; color:var(--fg); box-shadow:inset 0 0 0 2px var(--warn); }
.swatches span { width:11px; height:11px; border:1px solid #000; border-radius:2px; }
.c-bnd .ic { color:#ff6b5e; } .c-trk .ic { color:#ff4fd8; } .c-flag .ic { color:#ff3b30; } .c-org .ic { color:#00c8ff; }
.c-meas .ic { color:var(--warn); } .c-hl .ic { color:#ff9500; } .c-tram .ic { color:#ff8c00; }
.rf { display:grid; grid-template-columns:auto 118px; gap:3px 8px; align-items:center; align-content:center; height:74px; font-size:12px; }
.rf input, .rf select { padding:2px 5px; font-size:12px; height:22px; border-radius:4px; }
.rf label { color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:5px; }
.ic.sm { width:16px; height:16px; color:var(--tab); } .c-file .ic { color:#f0c674; } .c-view .ic { color:#8ab4f8; }

/* Hauptbereich: Feldliste | Karte | Eigenschaften */
#main { flex:1; display:flex; min-height:0; }
#nav, #props { flex:none; background:var(--panel); overflow-y:auto; padding:12px; }
#nav { width:250px; }
#props { width:310px; border-left:1px solid #000; }
/* Griff zwischen Karte und Seitenleiste: ziehen ändert die Breite (wird gemerkt) */
#propsGrip, #navGrip { flex:none; width:6px; cursor:col-resize; background:#1d2024; border-left:1px solid #000; }
#navGrip { border-left:0; border-right:1px solid #000; }
#propsGrip:hover, #propsGrip.drag, #navGrip:hover, #navGrip.drag { background:var(--tab); }
#propsGrip.hide, #navGrip.hide { display:none; }
#nav.hide, #props.hide { display:none; }
.pp { display:none; } .pp.on { display:block; }
#mapwrap { flex:1; position:relative; display:flex; min-width:0; }
#map { flex:1; }
#map.pick { cursor:crosshair; }
#fieldList { height:calc(100% - 150px); min-height:160px; }

/* Statusleiste */
#statusbar { display:flex; gap:14px; align-items:center; min-height:26px; padding:3px 10px; background:var(--top); font-size:12.5px; border-top:1px solid #000; }
#status { flex:1; min-width:0; }
#status.ok { color:var(--ok); } #status.err { color:var(--acc); }
#sbCoord { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

.pt { background:#fff; border:2px solid var(--acc); border-radius:50%; }
.pt.sel { background:var(--warn); border-color:#000; }
.pin { width:18px; height:18px; box-sizing:border-box; border:2px solid #000; border-radius:50%; cursor:move; color:#000; font:700 11px/14px system-ui, sans-serif; text-align:center; box-shadow:0 0 0 2px rgba(255,255,255,.7); }
.flag { position:relative; width:18px; height:24px; }
.flag::before { content:''; position:absolute; left:1px; top:0; width:2px; height:24px; background:#111; }
.flag::after { content:''; position:absolute; left:3px; top:0; width:13px; height:10px; background:var(--c); border:1px solid #000; }
.flag.sel::after { outline:2px solid var(--warn); }
.origin { width:22px; height:22px; border:3px solid #00c8ff; border-radius:50%; background:rgba(0,200,255,.25); position:relative; }
.origin::before, .origin::after { content:''; position:absolute; background:#00c8ff; }
.origin::before { left:50%; top:-6px; width:2px; height:28px; margin-left:-1px; }
.origin::after { top:50%; left:-6px; height:2px; width:28px; margin-top:-1px; }
.check { display:flex; gap:8px; align-items:center; margin:4px 0; font-size:13px; cursor:pointer; }
.check input { width:auto; }
.check .mini { width:auto; margin:0 0 0 auto; padding:2px 7px; font-size:12px; }
.gchecks .check .mini { margin-left:2px; padding:0 5px; }
.tlabel { display:inline-block; transform:translate(-50%,-50%); background:rgba(0,0,0,.75); color:#fff; font:600 11px system-ui,sans-serif; padding:1px 5px; border-radius:3px; white-space:nowrap; }
.big.c-del .ic { color:#ff5a5a; }
.alabel { display:inline-block; transform:translate(14px,6px); background:rgba(0,0,0,.8); color:#00e5ff; font:600 11px system-ui,sans-serif; padding:1px 5px; border-radius:3px; white-space:nowrap; }
#toolList select, #toolList input { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
/* Umschalter statt Häkchen-Kästchen: aus = schlicht, an = grüner Hintergrund */
button.tgl { display:flex; align-items:center; gap:6px; width:100%; min-width:0; margin:1px 0; padding:4px 8px; background:transparent; color:var(--muted);
             font-size:12.5px; font-weight:400; text-align:left; border-radius:5px; white-space:nowrap; }
button.tgl:hover { background:#3a3f46; color:var(--fg); }
button.tgl.on { background:rgba(76,187,108,.24); color:var(--fg); box-shadow:inset 3px 0 0 var(--tab); }
button.tgl.on:hover { background:rgba(76,187,108,.34); }
button.tgl:disabled { opacity:.4; background:transparent; cursor:default; }
button.tgl.sm { width:auto; flex:none; margin:0; padding:2px 7px; font-size:12px; }
#props { overflow-x:hidden; }
.scrollList .tgl { width:100%; min-width:0; }
.scrollList .ell { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.scrollList { max-height:260px; overflow-y:auto; overflow-x:hidden; border:1px solid var(--line); border-radius:5px; padding:2px; margin:4px 0; }
.mtab { width:100%; border-collapse:collapse; margin-top:6px; font-size:12px; font-variant-numeric:tabular-nums; }
.mtab th { text-align:left; color:var(--muted); font-weight:600; border-bottom:1px solid var(--line); padding:2px 4px; }
.mtab td { padding:2px 4px; border-bottom:1px solid #2b2f35; }
.ovlabel { display:inline-block; transform:translate(-50%,-50%); background:rgba(0,0,0,.75); color:#d0a8ff; font:600 12px system-ui,sans-serif; padding:2px 6px; border-radius:3px; white-space:nowrap; }
.lg { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px; }
.mvlabel { display:inline-block; transform:translate(-50%,-50%); background:rgba(0,0,0,.8); color:#ffd400; font:500 12px system-ui,sans-serif; padding:1px 5px; border-radius:3px; white-space:nowrap; }
.mvlabel.box { transform:translate(14px,-110%); text-align:left; line-height:1.35; }
.mlabel { display:inline-block; transform:translate(-50%,-140%); background:rgba(0,0,0,.8); color:var(--warn); font:600 11px system-ui,sans-serif; padding:1px 5px; border-radius:3px; white-space:nowrap; }
.tag { flex:0 0 44px; font-size:12px; color:var(--muted); }
.bndrow { display:flex; align-items:center; gap:6px; padding:4px 6px; margin:2px 0; border-radius:6px; cursor:pointer; font-size:13px; }
.bndrow:hover { background:#30353b; }
.bndrow.on { background:#3c4148; box-shadow:inset 3px 0 0 var(--acc); }
.bndrow.off .nm { opacity:.45; text-decoration:line-through; }
.bndrow input { flex:1; min-width:0; padding:4px 6px; }
.bndrow.off input { opacity:.45; text-decoration:line-through; }
.bndrow .nm { flex:1; }
.bndrow .mini { width:auto; margin:0; padding:2px 7px; font-size:12px; }
#toolbox { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:1001; background:rgba(20,22,25,.93); color:#fff;
           padding:8px 10px; border-radius:8px; display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap;
           max-width:calc(100% - 24px); font-size:13px; box-shadow:0 2px 10px rgba(0,0,0,.5); }
#toolbox button { width:auto; margin:0; padding:7px 12px; }
#toolbox input[type=range] { width:170px; padding:0; }
/* Pfeile an den Kartenrändern: Feldliste und Seitenleiste ein-/ausklappen */
.paneTog { position:absolute; top:50%; transform:translateY(-50%); z-index:1002; width:18px; height:58px; margin:0; padding:0;
           background:rgba(39,43,48,.92); color:var(--fg); font-size:16px; line-height:58px; box-shadow:0 1px 6px rgba(0,0,0,.5); }
.paneTog:hover { background:#3c4148; }
#togNav { left:0; border-radius:0 6px 6px 0; }
#togProps { right:0; border-radius:6px 0 0 6px; }
#toolTitle, #toolParams, #toolList { display:none; }
#toolbox.inpanel #toolList:not(:empty) { display:block; margin:0 0 8px; }
.hdline { display:flex; align-items:center; gap:5px; padding:3px 4px; margin:2px 0; border-radius:5px; font-size:12.5px; cursor:pointer; }
.hdline:hover { background:#30353b; }
.hdline.on { background:#30353b; box-shadow:inset 3px 0 0 var(--warn); }
.hdline.fail .nm { color:var(--acc); }
.hdline .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hdline input { width:58px; flex:none; padding:2px 4px; }
.hdline input[placeholder] { width:42px; }
/* Werkzeug mit Einstellungen: steht oben in der Seitenleiste statt unten auf der Karte */
#toolbox.inpanel { position:static; transform:none; display:block !important; max-width:none; margin:0 0 14px; padding:10px;
                   background:#1d2024; border:1px solid var(--warn); box-shadow:none; }
#toolbox.inpanel #toolTitle { display:block; margin:0 0 8px; color:var(--warn); }
#toolbox.inpanel #toolParams { display:grid; margin-bottom:8px; }
#toolbox.inpanel #toolMsg { display:block; margin-bottom:8px; font-size:12.5px; }
#toolbox.inpanel #toolActions, #toolbox.inpanel #toolOk, #toolbox.inpanel #toolCancel { display:inline-flex; margin:0 6px 0 0; }
.rng { display:flex; gap:6px; align-items:center; }
.rng input[type=range] { flex:1; min-width:0; padding:0; accent-color:var(--tab); }
.rng input[type=number] { width:58px; flex:none; }
.numbadge { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; transform:translate(-50%,-50%);
            border-radius:50%; background:var(--warn); color:#000; border:2px solid #000; font:700 13px system-ui,sans-serif; box-shadow:0 1px 4px rgba(0,0,0,.6); }
.seg { display:flex; }
.seg button { flex:1; width:auto; margin:0; padding:4px 4px; font-size:12px; border-radius:0; background:#2b2f35; border-right:1px solid #1d2024; white-space:nowrap; }
.seg button:first-child { border-radius:4px 0 0 4px; }
.seg button:last-child { border-radius:0 4px 4px 0; border-right:0; }
.seg button:hover { background:#3a3f46; }
.seg button.on { background:var(--tab); color:#000; font-weight:600; }
.seg[data-seg="expFmt"] { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.seg[data-seg="expFmt"] button { border-radius:4px; border-right:0; }
.form { grid-template-columns:minmax(70px, 38%) minmax(0, 1fr); gap:5px 8px; align-items:center; font-size:12.5px; }
.form input, .form select { padding:3px 6px; min-width:0; width:100%; }
.form > * { min-width:0; }
.seg button { min-width:0; white-space:normal; line-height:1.15; }
.form label { overflow-wrap:anywhere; hyphens:auto; }
.form .hint { grid-column:1/3; color:var(--muted); font-size:11.5px; margin-top:-3px; }
#toolActions { display:flex; gap:8px; }
#toolActions:empty { display:none; }
#hint { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:1000; background:rgba(0,0,0,.8); color:#fff; padding:6px 12px; border-radius:6px; display:none; pointer-events:none; }
@media (max-width:800px) {
  #main { flex-direction:column; }
  #nav, #props { width:100%; max-height:34%; border:0; border-top:1px solid #000; }
  #props { width:100% !important; }
  #propsGrip, #navGrip { display:none; }
  #nav { order:2; } #mapwrap { order:1; min-height:50%; } #props { order:3; }
  #qat .qtxt { display:none; }
}