/* © 2026 Martin Scherer · Fachwerte (https://www.fachwerte.de) · Alle Rechte vorbehalten.
   Steckdosenplaner — Original: https://www.fachwerte.de/tools/steckdosenplaner/
   Stile zu Teil 44 (Zeichnen und Markieren: Formen, Freihand, Text auf der
   Ebene „Zeichnungen"). Kennung FWSP-2026-09-01 */

/* ─── Obenauf im Plan: Vorschau, Auswahlrahmen, Griffe ──────────────────── */
.ep-zeich-oben {
    position: absolute;
    left: 0; top: 0;
    width: 0; height: 0;
    overflow: visible;
    z-index: 50;
    pointer-events: none;
}
.ep-zeich-umrisse {
    position: absolute;
    left: 0; top: 0;
    overflow: visible;
    pointer-events: none;
}
.ep-zeich-griff {
    position: absolute;
    box-sizing: border-box;
    background: #fff;
    border: 1.5px solid #0057b8;
    border-radius: 1px;
    pointer-events: auto;
    transition: transform .12s ease;
}
.ep-zeich-griff.ist-rund { border-radius: 50%; }
.ep-zeich-griff:hover { background: #0057b8; transform: scale(1.3); }

/* Außerhalb des Werkzeugs fasst man eine Form an ihrem Strich. */
.ep-zeich-treffer { cursor: move; }

/* Im Werkzeug fangen Symbole, Beschriftungen und Griffe anderer Dinge
   keinen Zeiger — gezeichnet wird auch über ihnen. Nur die Formen selbst
   (fürs Kontextmenü) und ihre Griffe bleiben greifbar. */
.ep-plan[data-modus="zeichnen"] .ep-stage *:not(.ep-zeich-treffer):not(.ep-zeich-griff) {
    pointer-events: none !important;
}
.ep-plan[data-modus="zeichnen"] .ep-stage .ep-zeich-griff { pointer-events: auto !important; }

/* Finger: größere Griffe (in px gesetzt und mittig ausgerichtet). */
.ep-app.ist-touch .ep-zeich-griff,
.ep-app.ist-touch .ep-zeich-griff:hover { transform: scale(1.9); }

/* Textfeld über der Notiz — ruhig, wie ein markierter Textrahmen. */
.ep-zeich-texteditor {
    position: absolute;
    z-index: 32;
    box-sizing: border-box;
    min-width: 90px;
    margin: 0;
    padding: 2px 3px;
    border: 1px dashed #0057b8;
    border-radius: 2px;
    background: rgba(255, 255, 255, .94);
    font-family: Inter, Arial, sans-serif;
    font-weight: 600;
    resize: none;
    overflow: hidden;
    white-space: pre;
    outline: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

/* ─── Flyout der Formen neben der senkrechten Leiste ────────────────────── */
.ep-zeich-flyout .ep-vt-muster svg { width: 1.3rem; height: 1.3rem; }

/* ─── Eigenschaftsfeld ──────────────────────────────────────────────────── */
.ep-zeich-hinweis { margin: .1rem 0 .6rem; }
.ep-zeich-feld { margin: .15rem 0 .6rem; }
.ep-zeich-feldname {
    font-size: .78rem;
    font-weight: 600;
    color: var(--fw-text-2, #4a4a48);
    margin-bottom: .3rem;
}
.ep-zeich-reihe { display: flex; flex-wrap: wrap; gap: .3rem; }
.ep-zeich-wahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 .45rem;
    border: 1px solid var(--fw-border, #e6e6e3);
    border-radius: .4rem;
    background: var(--fw-bg, #fff);
    color: var(--fw-text, #111);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.ep-zeich-wahl:hover { border-color: var(--fw-accent, #0057b8); }
.ep-zeich-wahl:focus-visible { outline: 2px solid var(--fw-accent, #0057b8); outline-offset: 1px; }
.ep-zeich-wahl[aria-pressed="true"] {
    border-color: var(--fw-accent, #0057b8);
    box-shadow: inset 0 0 0 1px var(--fw-accent, #0057b8);
    background: var(--fw-accent-sf, rgba(0, 87, 184, .08));
    color: var(--fw-accent, #0057b8);
}
.ep-zeich-wahl.ist-form svg { width: 1.3rem; height: 1.3rem; display: block; }
.ep-zeich-farbpunkt {
    display: block;
    width: 1.05rem; height: 1.05rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.ep-zeich-wahl.ist-farbe[aria-pressed="true"] { background: var(--fw-bg, #fff); }
.ep-zeich-wahl.ist-staerke { flex: 1 1 0; min-width: 0; gap: .25rem; padding: 0 .3rem; }
.ep-zeich-wahl.ist-staerke svg { width: 1.2rem; height: .7rem; display: block; flex: 0 0 auto; }
.ep-zeich-wahl.ist-staerke span { white-space: nowrap; }
/* Farben und Formen bleiben in einer Reihe, auch im schmalen Feld. */
.ep-zeich-farben, .ep-zeich-formen { flex-wrap: nowrap; }
.ep-zeich-farben .ep-zeich-wahl, .ep-zeich-formen .ep-zeich-wahl { flex: 1 1 0; min-width: 0; max-width: 2.6rem; padding: 0; }
.ep-zeich-check {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    margin: .1rem 0 .7rem;
    cursor: pointer;
}
.ep-zeich-textfeld { width: 100%; box-sizing: border-box; resize: vertical; }
.ep-zeich-knoepfe { margin: .2rem 0 .5rem; }
.ep-app.ist-touch .ep-zeich-wahl { height: 2.75rem; }
.ep-app.ist-touch .ep-zeich-farben .ep-zeich-wahl,
.ep-app.ist-touch .ep-zeich-formen .ep-zeich-wahl { max-width: 3rem; }

/* Farbpunkt im Kontextmenü (Teil 42, Eintrag mit farbe). */
.ep-kmenue-farbe {
    display: inline-block;
    flex: 0 0 auto;
    width: .8rem; height: .8rem;
    margin-right: .5rem;
    border-radius: 50%;
    vertical-align: -1px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}