/* FSH Annotate – Einzeichnungen (01.11.2026): Ebene über Bildern und Editor. Schriften wie auf der Hüttenseite. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/fraunces-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/fraunces-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }

.fa-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fa-svg text { font-kerning: normal; }

/* ── Editor ─────────────────────────────────────────────────────────── */
html.fa-open, html.fa-open body { overflow: hidden; }
.fa-modal { position: fixed; inset: 0; z-index: 100000; display: grid; grid-template-rows: auto 1fr; background: #f4f1ea; color: #1f2a2a; font: 13px/1.35 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; }
.fa-modal *, .fa-modal *::before, .fa-modal *::after { box-sizing: border-box; }
.fa-top { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid #d9d3c6; background: #fffdf8; }
.fa-title { flex: 1 1 auto; min-width: 0; overflow: hidden; font: 600 14px/1.2 'Fraunces', Georgia, serif; white-space: nowrap; text-overflow: ellipsis; }
.fa-tools { display: flex; gap: 2px; padding: 2px; border: 1px solid #d9d3c6; border-radius: 8px; background: #fff; }
.fa-tool { display: grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #33403f; cursor: pointer; }
.fa-tool svg { width: 19px; height: 19px; fill: currentColor; }
.fa-tool:hover { background: #eef2ee; }
.fa-tool.is-active { background: #214745; color: #fff; }
.fa-actions { display: flex; align-items: center; gap: 6px; }
.fa-btn { min-height: 30px; padding: 4px 12px; border: 1px solid #cfc8b9; border-radius: 6px; background: #fff; color: #1f2a2a; font: inherit; font-weight: 600; cursor: pointer; }
.fa-btn:hover { border-color: #214745; }
.fa-btn:disabled { opacity: 0.4; cursor: default; }
.fa-btn--icon { width: 32px; padding: 0; font-size: 16px; }
.fa-btn--primary { border-color: #214745; background: #214745; color: #fff; }
.fa-btn--primary:hover { background: #18403e; }
.fa-btn--small { min-height: 26px; padding: 2px 8px; font-size: 12px; }
.fa-btn--danger { color: #b3362a; }
.fa-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; cursor: pointer; }
.fa-modal.is-saving .fa-btn--primary { opacity: 0.6; pointer-events: none; }

.fa-body { display: grid; grid-template-columns: 1fr 290px; min-height: 0; }
.fa-stage { position: relative; overflow: hidden; background: #2b2f2e; touch-action: none; cursor: crosshair; }
.fa-stage.is-hand, .fa-stage.is-panning { cursor: grab; }
.fa-stage.is-panning { cursor: grabbing; }
.fa-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45); }
.fa-img { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.fa-layer, .fa-handles { position: absolute; inset: 0; width: 100%; height: 100%; }
.fa-layer .fa-svg * { pointer-events: visiblePainted; }
.fa-layer .fa-item { cursor: move; }
.fa-layer .fa-item.is-selected { filter: drop-shadow(0 0 3px rgba(255, 214, 0, 0.95)); }
.fa-modal.is-preview .fa-layer .fa-item.is-selected { filter: none; }
.fa-handles { overflow: visible; pointer-events: none; }
.fa-h { fill: #fff; stroke: #214745; pointer-events: all; cursor: grab; }
.fa-h.is-active { fill: #ffd600; }
.fa-h--mid { fill: #214745; stroke: #fff; opacity: 0.75; cursor: copy; }
.fa-hint { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 10px; border-radius: 6px; background: rgba(20, 26, 25, 0.78); color: #fff; font-size: 12px; pointer-events: none; }
.fa-hint.is-warn { background: rgba(179, 54, 42, 0.92); }

.fa-side { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-left: 1px solid #d9d3c6; background: #fffdf8; }
.fa-props, .fa-list { padding: 8px 10px; }
.fa-props { border-bottom: 1px solid #e6e0d3; }
.fa-side h4 { margin: 0 0 6px; font: 600 13px/1.2 'Fraunces', Georgia, serif; }
.fa-side h4 small { color: #6b7675; font: 400 11px 'Inter', sans-serif; }
.fa-field { display: grid; gap: 2px; margin: 0 0 6px; }
.fa-field > span { display: flex; justify-content: space-between; color: #4e5a59; font-size: 11px; font-weight: 600; }
.fa-field output { color: #1f2a2a; font-weight: 400; }
.fa-field select, .fa-field input[type="text"], .fa-field textarea, .fa-tr textarea { width: 100%; padding: 4px 6px; border: 1px solid #cfc8b9; border-radius: 5px; background: #fff; color: #1f2a2a; font: inherit; }
.fa-field textarea, .fa-tr textarea { resize: vertical; min-height: 30px; }
.fa-field input[type="range"] { width: 100%; accent-color: #214745; }
.fa-inline { display: flex; gap: 6px; }
.fa-field--grow { flex: 1 1 auto; }
.fa-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 8px; }
.fa-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 8px; }
.fa-swatch { width: 20px; height: 20px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 50%; cursor: pointer; }
.fa-swatch.is-active { box-shadow: 0 0 0 2px #fffdf8, 0 0 0 4px #214745; }
.fa-swatches input[type="color"] { width: 26px; height: 22px; padding: 0; border: 1px solid #cfc8b9; border-radius: 4px; background: #fff; cursor: pointer; }
.fa-symbols { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 2px 0 8px; }
.fa-sym { display: grid; place-items: center; height: 30px; padding: 0; border: 1px solid #e0d9cb; border-radius: 5px; background: #fff; cursor: pointer; }
.fa-sym svg { width: 18px; height: 18px; fill: #33403f; }
.fa-sym.is-active { border-color: #214745; background: #e5efec; }
.fa-preset-actions, .fa-preset-form { display: flex; flex-wrap: wrap; gap: 4px; margin: -2px 0 6px; }
.fa-preset-form input { flex: 1 1 120px; min-width: 0; padding: 3px 6px; border: 1px solid #cfc8b9; border-radius: 5px; background: #fff; color: #1f2a2a; font: inherit; }
.fa-preset-note { margin: -2px 0 8px; color: #4e5a59; font-size: 11px; }
.fa-preset-note.is-error { color: #b3362a; }
.fa-row-actions { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.fa-list { flex: 1 1 auto; }
.fa-row { display: grid; grid-template-columns: 12px 56px 1fr; align-items: center; gap: 6px; width: 100%; margin: 0 0 2px; padding: 4px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fa-row:hover { background: #f2eee5; }
.fa-row.is-active { border-color: #214745; background: #e5efec; }
.fa-row__sw { width: 12px; height: 12px; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 3px; }
.fa-row__type { color: #6b7675; font-size: 11px; }
.fa-row__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fa-row em { color: #6b7675; font-size: 11px; font-style: normal; }
.fa-row em.is-missing { color: #b3362a; }
.fa-empty { margin: 0; color: #6b7675; font-size: 12px; }
.fa-tr { margin: 0 0 6px; padding: 4px 6px; border-radius: 5px; }
.fa-tr.is-active { background: #e5efec; }
.fa-tr small { display: block; margin-bottom: 2px; color: #4e5a59; }

@media (max-width: 760px) {
    .fa-body { grid-template-columns: 1fr; grid-template-rows: 1fr 40%; }
    .fa-side { border-left: 0; border-top: 1px solid #d9d3c6; }
    .fa-top { flex-wrap: wrap; }
}