/* Der Editor verwendet die gewählten SiWis-Themenfarben. */
.annotation-editor230{--annotation-canvas:#24272c;--annotation-selection:#00bfff;position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--bg);color:var(--text);overflow:hidden}
.annotation-editor230[open]{display:flex;flex-direction:column}.annotation-editor230::backdrop{background:#000b}
.annotation-tools230{display:flex;gap:.7rem;justify-content:space-between;padding:.55rem;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--surface)}
.annotation-tools230>div,.annotation-editor230 footer>div,[data-layer-tools]{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}
.annotation-tools230 [aria-pressed=true]{outline:2px solid var(--accent);background:var(--active)}
.annotation-work230{display:flex;min-height:0;flex:1}.annotation-settings230,.annotation-layers230{width:190px;flex-shrink:0;overflow:auto;padding:.65rem;background:var(--surface);font-size:.85rem}.annotation-settings230 label{display:block;margin-bottom:.8rem}.annotation-settings230 input[type=range],.annotation-settings230 select{width:100%}.annotation-settings230 input[type=color]{display:block;width:100%;height:35px}.annotation-drop230{touch-action:none;font-size:2.3rem;background:transparent;border:1px solid var(--border);width:100%;cursor:grab;margin-bottom:.6rem}
.annotation-viewport230{position:relative;flex:1;overflow:hidden;background:var(--annotation-canvas);touch-action:none;user-select:none;min-width:0;overscroll-behavior:contain}.annotation-plane230{position:absolute;transform-origin:0 0;pointer-events:none;background:white}.annotation-plane230>img{position:absolute;width:100%;height:100%;max-width:none;object-fit:fill}.annotation-plane230>[data-drawing],.annotation-plane230>[data-selection]{position:absolute;inset:0;width:100%;height:100%}.annotation-plane230 svg{display:block;max-width:none}.annotation-hint230{position:absolute;bottom:.5rem;left:.5rem;right:.5rem;font-size:.75rem;color:#fff;pointer-events:none;background:#0008;padding:.3rem}.annotation-editor230 footer{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.5rem;background:var(--surface);font-size:.8rem}.annotation-error230{color:var(--reportColor,#ed8787)}
.annotation-layer230{display:grid;grid-template-columns:1fr auto auto;gap:.2rem;padding:.4rem;border:1px solid var(--border);margin:.5rem 0}.annotation-layer230.selected{border-color:var(--accent)}.annotation-layer230>button:first-child{overflow:hidden;text-overflow:ellipsis}.annotation-layer230 input{grid-column:1/-1;width:100%}.annotation-layers230.is-hidden230{display:none}.annotation-layers230 details{margin-top:1rem}.annotation-layers230 [data-versions]{display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem}
.annotation-confirm230,.annotation-manager230{background:var(--surface);color:var(--text);border:1px solid var(--border);padding:1.2rem;max-width:min(700px,95vw);max-height:85dvh;overflow:auto}.annotation-manager-row230{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.7rem 0;border-bottom:1px solid var(--border)}.annotation-manager-row230>span{flex:1}.annotation-options230{display:flex;flex-direction:column;gap:.5rem;border:1px solid var(--border);padding:.7rem}.annotation-options230 [data-ann-options]>label{display:block;margin:.4rem 0}
.annotation-view230{display:flex;flex-direction:column;gap:.5rem;max-width:100%;margin:.75rem 0;align-items:flex-start}.annotation-stage230{position:relative;display:block;max-width:100%;line-height:0}.annotation-stage230>img{display:block;max-width:100%;height:auto;margin:0!important}.annotation-overlay230{position:absolute;inset:0;pointer-events:none}.annotation-overlay230>svg{width:100%;height:100%;display:block}.annotation-choice230{font:inherit;display:flex;gap:.5rem;align-items:center}.annotation-choice230 select{max-width:75vw}.annotation-enlarge230{width:95vw;max-width:95vw;max-height:95dvh;overflow:auto;background:var(--surface);color:var(--text)}.annotation-enlarge230>.annotation-stage230{margin-top:1rem;max-width:none}.annotation-enlarge230 img{max-width:none}.annotation-view230>small:empty{display:none}
@media(max-width:800px){.annotation-settings230{width:110px;font-size:.75rem;padding:.4rem}.annotation-layers230{position:absolute;right:0;top:100px;bottom:65px;z-index:5;box-shadow:-4px 0 16px #0007}.annotation-tools230{gap:.3rem;padding:.3rem}.annotation-tools230 .btn{min-height:36px;padding:.35rem .55rem}.annotation-editor230 footer{flex-wrap:wrap;gap:.2rem}.annotation-hint230{display:none}}
@media print{.annotation-choice230,.annotation-view230>small,.annotation-editor230,.annotation-manager230{display:none!important}.annotation-stage230{break-inside:avoid}.annotation-overlay230{print-color-adjust:exact;-webkit-print-color-adjust:exact}.annotation-overlay230 svg *{color:initial!important}}

/* 0.20.30 Fix 1: kleine Werkzeugvorschau, keine Schriftzeichen-Icons. */
.annotation-drop230{height:84px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4px}
.annotation-drop230 [data-brush-preview]{display:block;border-radius:50%;flex:none;pointer-events:none}
.annotation-editor230 button>svg{width:20px;height:20px;flex:none;pointer-events:none}
.annotation-plane230{will-change:transform;backface-visibility:hidden}
.annotation-plane230>[data-drawing][hidden],.annotation-plane230>[data-selection]:empty{display:none!important}

.annotation-motion230{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.annotation-motion230[hidden]{display:none!important}
.annotation-color-cursor230{position:fixed;width:28px;height:28px;border-radius:50%;border:2px solid white;box-shadow:0 1px 5px #0009;transform:translate(-50%,-50%);pointer-events:none;z-index:20}.annotation-color-cursor230[hidden]{display:none!important}

/* Fix 3: moving screen canvas never scales to full original image dimensions. */
.annotation-viewport230>.annotation-motion230{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.annotation-plane230{will-change:auto;backface-visibility:visible}
.annotation-opacity-control230{grid-column:1/-1;display:flex;gap:.5rem;align-items:center}
.annotation-opacity-control230 input{min-width:0;flex:1}
.annotation-opacity-percent230{min-width:3.5em;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.annotation-settings230.is-hidden230,.annotation-layers230.is-hidden230{display:none!important}
.annotation-panel-grip230{width:10px;flex:0 0 10px;cursor:col-resize;touch-action:none;background:var(--surface);position:relative;user-select:none}
.annotation-panel-grip230::after{content:'';position:absolute;top:calc(50% - 20px);height:40px;left:3px;width:3px;border-radius:3px;background:var(--border)}
.annotation-panel-grip230:hover::after,.annotation-panel-grip230:focus-visible::after{background:var(--accent)}
.annotation-panel-grip230[hidden]{display:none!important}
@media(max-width:800px){.annotation-layers230{position:static;box-shadow:none;width:150px}.annotation-panel-grip230{width:12px;flex-basis:12px}}

.annotation-layer230{grid-template-columns:minmax(0,1fr) auto auto}.annotation-layers230 summary{overflow-wrap:anywhere}

/* Fix 4: Werte sind direkt antippbare Zahlenfelder. */
.annotation-number230{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap;max-width:100%}
.annotation-number230 input[type=number]{width:4.8em;min-width:0;max-width:100%;padding:.3rem .35rem;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:.35rem;font-variant-numeric:tabular-nums}
.annotation-number230 input[aria-invalid=true]{border-color:var(--reportColor,#ed8787)}
.annotation-number230 input:focus{outline:2px solid var(--accent);outline-offset:1px}
.annotation-opacity-control230{flex-wrap:wrap;justify-content:space-between}
.annotation-opacity-control230>input[type=range]{flex:1 1 55px}
.annotation-opacity-control230>.annotation-number230{flex:0 0 auto}
.annotation-opacity-control230 .annotation-number230 input{width:4em;flex:none}

.annotation-brush-cursor230{position:absolute;pointer-events:none;z-index:5;box-sizing:border-box;border:1px solid rgba(255,255,255,.65);box-shadow:0 0 0 1px rgba(0,0,0,.35);border-radius:50%;transform:translate(-50%,-50%)}
.annotation-brush-cursor230[hidden]{display:none}

.annotation-settings230 details{margin-bottom:.8rem}.annotation-settings230 summary{cursor:pointer;margin-bottom:.5rem}.annotation-palette-swatches230{display:flex;flex-wrap:wrap;gap:6px;margin:.5rem 0}.annotation-palette-swatch230{width:30px;height:30px;min-width:30px;padding:0!important;border:1px solid var(--border);border-radius:6px}.annotation-palette-dialog230{width:min(480px,90vw);max-height:85vh;overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:1rem}.annotation-palette-dialog230 form{display:grid;gap:.8rem}.annotation-palette-dialog230 label:first-child{display:grid;gap:.4rem}.annotation-palette-dialog230 input[type=text],.annotation-palette-dialog230 input:not([type]){width:100%;box-sizing:border-box}.annotation-palette-colors230{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem;max-height:35vh;overflow:auto}.annotation-palette-colors230>div{display:flex;gap:.3rem;align-items:center}.annotation-palette-colors230 input{width:65px;height:34px}.annotation-palette-dialog230::backdrop{background:#0006}

/* Fix 11: kompakte Zeichenoberfläche mit schwebenden Bedienfeldern. */
.annotation-work230{position:relative}
.annotation-settings230,.annotation-layers230{position:absolute!important;right:12px;top:62px;bottom:auto;max-height:calc(100% - 78px);width:280px;max-width:calc(100% - 100px);z-index:8;border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 28px #0005;padding:14px}
.annotation-panel-grip230{position:absolute;right:294px;top:72px;height:80px;z-index:9;border-radius:6px}
.annotation-corner230{position:absolute;right:12px;top:10px;display:flex;align-items:center;gap:8px;z-index:10}
.annotation-corner230 .btn{width:40px;height:40px;padding:8px;display:grid;place-items:center}
.annotation-corner230 .annotation-drop230{width:38px;height:38px;min-height:0;border:2px solid #ffffffb0;border-radius:50%;margin:0;padding:0;box-shadow:0 1px 8px #0006}
.annotation-corner230 [data-brush-preview]{display:none}
.annotation-color-panel230{position:absolute;top:62px;right:12px;width:280px;max-width:calc(100% - 100px);max-height:calc(100% - 78px);overflow:auto;z-index:11;background:var(--surface);color:var(--text);border:1px solid var(--border);padding:14px;border-radius:12px;box-shadow:0 8px 28px #0005}
.annotation-color-panel230[hidden]{display:none!important}
.annotation-color-panel230 input[type=color]{display:block;width:100%;height:44px;margin:8px 0 14px}
.annotation-rails230{position:absolute;left:8px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--border);padding:8px 5px;border-radius:12px;max-height:calc(100% - 20px);overflow:auto;width:70px}
.annotation-rails230>label{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;margin:0}
.annotation-rails230 input[type=range]{writing-mode:vertical-lr;direction:rtl;width:30px;height:clamp(55px,19dvh,170px);padding:0;touch-action:none;accent-color:var(--accent)}
.annotation-rails230 .annotation-number230{font-size:10px;gap:1px}.annotation-rails230 .annotation-number230 input{width:4em;padding:3px 1px}
.annotation-editor230{box-sizing:border-box}
.annotation-tools230,.annotation-work230,.annotation-editor230 footer{min-width:0;max-width:100%;box-sizing:border-box}
.annotation-tools230>div{min-width:0;max-width:100%;overflow-x:auto;flex-wrap:nowrap}
.annotation-tools230 [data-tools]{flex:1 1 400px}.annotation-tools230 [data-actions]{flex:1 1 450px}
.annotation-tools230 button{flex-shrink:0}
.annotation-settings230,.annotation-layers230,.annotation-color-panel230,.annotation-rails230{box-sizing:border-box}
.annotation-editor230{width:100%;scrollbar-gutter:auto}
/* Fix 12: Eingabefelder bleiben auswählbar, die Zeichenoberfläche nicht. */
.annotation-editor230,.annotation-editor230 *,.annotation-confirm230,.annotation-confirm230 *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.annotation-editor230 input,.annotation-editor230 textarea,.annotation-editor230 [contenteditable=true],.annotation-confirm230 input{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.annotation-editor230 img{-webkit-user-drag:none;user-drag:none}
.annotation-preferences230{width:min(620px,calc(100vw - 28px));max-height:85dvh;margin:auto;padding:0;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);overflow:auto}
.annotation-preferences230::backdrop{background:#0007}
.annotation-preferences230 header,.annotation-preferences230 footer{padding:14px 20px;position:sticky;background:var(--surface);z-index:2}
.annotation-preferences230 header{top:0;border-bottom:1px solid var(--border)}.annotation-preferences230 h2{margin:0;font-size:1.2rem}.annotation-preferences230 footer{bottom:0;justify-content:flex-end}
.annotation-preferences230 .annotation-settings230{position:static!important;width:100%!important;max-width:none;max-height:none;box-shadow:none;border:0;border-radius:0;padding:16px 20px;display:block!important}
.annotation-preferences230 details{margin-bottom:14px;border:1px solid var(--border);border-radius:8px;padding:12px}
.annotation-preferences230 summary{font-weight:600;cursor:pointer;margin-bottom:12px}.annotation-preferences230 label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}
.annotation-preferences230 input[type=number]{width:90px;padding:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:6px}
.annotation-preferences230 p,.annotation-preferences230 small{font-size:.8rem;line-height:1.5;opacity:.8}
.annotation-layer230{grid-template-columns:28px minmax(0,1fr) auto auto}.annotation-layer230[hidden]{display:none!important}
.annotation-layer-drag230{touch-action:none;cursor:grab;padding:3px!important}
.annotation-layer-group230{border:1px solid var(--border);border-radius:8px;padding:5px;margin:8px 0}.annotation-group-header230{display:flex;gap:5px;flex-wrap:wrap}.annotation-group-header230>button:first-child{flex:1;overflow-wrap:anywhere}
.annotation-drop-target230{outline:2px solid var(--accent);background:var(--active)}

.annotation-palette-dialog230,.annotation-palette-dialog230 *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.annotation-palette-dialog230 input,.annotation-palette-dialog230 textarea{-webkit-user-select:text;user-select:text}