/* ==========================================================================
   Elektroplan zeichnen – werkzeugeigene Gestaltung
   Alles mit ep- präfixiert, damit nichts mit site.css kollidiert.
   Farben kommen ausschließlich aus den --fw-Tokens, sonst bricht der
   Dunkelmodus der Seite auf dieser einen Unterseite auseinander.
   ========================================================================== */

/* Eigene display-Regeln (flex, grid) schlagen das [hidden] des Browsers.
   Ohne diese Zeile bliebe der leere Zustand als undurchsichtige Fläche über
   dem Grundriss liegen und ausgeblendete Knöpfe blieben sichtbar. */
.ep-app [hidden], .ep-dialog [hidden], .ep-leer[hidden] { display: none !important; }

.ep-intro {
    max-width: 60rem;
    margin: 0 auto;
    padding: 2.25rem 1rem .75rem;
}
@media (min-width: 40rem) { .ep-intro { padding-left: 1.5rem; padding-right: 1.5rem; } }
.ep-intro h1 {
    font-size: clamp(1.55rem, 4.5vw, 2.15rem);
    font-weight: 300;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin-bottom: .7rem;
}
.ep-intro h1 strong { font-weight: 600; }
.ep-intro p {
    font-size: .93rem;
    line-height: 1.7;
    color: var(--fw-text-2);
    max-width: 62ch;
}

/* ─── Rahmen der Anwendung ───────────────────────────────────────────────── */
.ep-app {
    max-width: 92rem;
    margin: 1.25rem auto 0;
    padding: 0 1rem;
    font-family: var(--fw-font);
}
@media (min-width: 40rem) { .ep-app { padding: 0 1.5rem; } }

/* ─── Bedienelemente ─────────────────────────────────────────────────────── */
.ep-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.3rem;
    padding: .4rem .75rem;
    border: 1px solid var(--fw-border-str);
    border-radius: var(--fw-radius-lg);
    background: var(--fw-bg);
    color: var(--fw-text);
    font: inherit;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.ep-btn:hover { background: var(--fw-surface); }
.ep-btn:disabled { opacity: .4; cursor: default; }
.ep-btn--primary {
    background: var(--fw-accent);
    border-color: var(--fw-accent);
    color: #fff;
    font-weight: 600;
}
.ep-btn--primary:hover { background: var(--fw-accent-dk); border-color: var(--fw-accent-dk); }
/* Eingeschaltet heißt gefüllt: Maßstab, Messen, Maß eintragen, Verknüpfen und
   die Auswahl sind einander ausschließende Modi, und welcher läuft, muss auf
   einen Blick zu sehen sein. */
.ep-btn[aria-pressed="true"] {
    background: var(--fw-accent);
    border-color: var(--fw-accent);
    color: #fff;
    font-weight: 600;
}
.ep-btn[aria-pressed="true"]:hover { background: var(--fw-accent-dk); border-color: var(--fw-accent-dk); }
.ep-btn--quiet { border-color: transparent; background: transparent; color: var(--fw-text-2); }
.ep-btn--quiet:hover { background: var(--fw-surface); }
.ep-btn--danger { color: #b3261e; }
.ep-btn--icon { min-width: 2.3rem; padding: .4rem; }

.ep-input, .ep-select, .ep-textarea {
    width: 100%;
    padding: .45rem .55rem;
    font: inherit;
    font-size: 1rem;              /* unter 16px zoomt iOS beim Hineintippen */
    color: var(--fw-text);
    background: var(--fw-bg);
    border: 1px solid var(--fw-border-str);
    border-radius: var(--fw-radius);
}
@media (min-width: 48rem) {
    .ep-input, .ep-select, .ep-textarea { font-size: .85rem; }
}
.ep-input:focus, .ep-select:focus, .ep-textarea:focus {
    outline: 2px solid var(--fw-accent);
    outline-offset: -1px;
    border-color: var(--fw-accent);
}
.ep-textarea { min-height: 4rem; resize: vertical; line-height: 1.5; }
.ep-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--fw-muted);
    margin-bottom: .25rem;
}
.ep-feld { margin-bottom: .7rem; }
.ep-check {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .85rem;
    color: var(--fw-text-2);
    line-height: 1.4;
    cursor: pointer;
}
.ep-check input { margin-top: .15rem; flex-shrink: 0; }

/* ─── Kopfleiste ─────────────────────────────────────────────────────────── */
.ep-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .55rem .65rem;
    background: var(--fw-surface);
    border: 1px solid var(--fw-border);
    border-radius: var(--fw-radius-lg) var(--fw-radius-lg) 0 0;
    border-bottom: 0;
}
.ep-bar-spacer { flex: 1 1 auto; min-width: .5rem; }

/* Streifen über den Etagenreitern, solange der Musterplan geladen ist */
.ep-muster {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .5rem .7rem;
    background: var(--fw-accent-sf);
    border: 1px solid var(--fw-border);
    border-bottom: 0;
    border-top: 0;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--fw-text-2);
}
.ep-muster span { flex: 1 1 20rem; }
.ep-muster strong { color: var(--fw-text); }
.ep-projekt {
    flex: 0 1 16rem;
    min-width: 9rem;
    padding: .35rem .5rem;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--fw-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--fw-radius);
}
.ep-projekt:hover { border-color: var(--fw-border-str); }
.ep-projekt:focus { outline: 2px solid var(--fw-accent); outline-offset: -1px; background: var(--fw-bg); }

/* ─── Etagenreiter ───────────────────────────────────────────────────────── */
.ep-etagen {
    display: flex;
    align-items: stretch;
    gap: .2rem;
    padding: 0 .65rem;
    background: var(--fw-surface);
    border: 1px solid var(--fw-border);
    border-bottom: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.ep-tab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .75rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--fw-radius) var(--fw-radius) 0 0;
    background: transparent;
    color: var(--fw-text-2);
    font: inherit;
    font-size: .84rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.ep-tab:hover { background: var(--fw-surface-2); }
.ep-tab[aria-selected="true"] {
    background: var(--fw-bg);
    color: var(--fw-text);
    font-weight: 600;
    border-color: var(--fw-border);
    margin-bottom: -1px;
    padding-bottom: calc(.45rem + 1px);
}
.ep-tab-warn { color: #9a5200; font-size: .95em; }

/* ─── Dreiteilung ────────────────────────────────────────────────────────── */
.ep-grid {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr) 17.5rem;
    gap: 0;
    border: 1px solid var(--fw-border);
    border-radius: 0 0 var(--fw-radius-lg) var(--fw-radius-lg);
    background: var(--fw-bg);
    overflow: hidden;
}
.ep-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 42rem;
    overflow-y: auto;
    background: var(--fw-bg);
}
.ep-side--links  { border-right: 1px solid var(--fw-border); }
.ep-side--rechts { border-left: 1px solid var(--fw-border); }
.ep-side-kopf {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .55rem .65rem;
    background: var(--fw-bg);
    border-bottom: 1px solid var(--fw-border);
}
.ep-side-inhalt { padding: .65rem; }

/* Unter 68rem wandern die Seitenbereiche unter den Plan und werden aufklappbar */
@media (max-width: 68rem) {
    .ep-grid { grid-template-columns: minmax(0, 1fr); }
    .ep-side { max-height: 24rem; border: 0; border-top: 1px solid var(--fw-border); }
    .ep-side--links { order: 2; }
    .ep-side--rechts { order: 3; }
    .ep-mitte { order: 1; }
}

/* ─── Symbolpalette ──────────────────────────────────────────────────────── */
.ep-gruppe {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fw-muted);
    margin: .9rem 0 .4rem;
}
.ep-gruppe:first-child { margin-top: 0; }
.ep-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.1rem, 1fr));
    gap: .25rem;
}
.ep-pal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .35rem .15rem .3rem;
    border: 1px solid transparent;
    border-radius: var(--fw-radius);
    background: transparent;
    color: var(--fw-text-2);
    font: inherit;
    font-size: .62rem;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
}
.ep-pal:hover { background: var(--fw-surface); border-color: var(--fw-border); }
.ep-pal[aria-pressed="true"] {
    background: var(--fw-accent-sf);
    border-color: var(--fw-accent);
    color: var(--fw-accent);
    font-weight: 600;
}
/* Breite läuft mit dem Zeichen mit – manche Zeichen sind breiter als hoch.
   max-width verhindert, dass sie die Palettenkachel sprengt. */
.ep-pal svg { height: 24px; width: auto; max-width: 100%; flex-shrink: 0; margin-bottom: 9px; }
.ep-pal-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Planfläche ─────────────────────────────────────────────────────────── */
.ep-mitte { display: flex; flex-direction: column; min-width: 0; position: relative; }

/* ── Ebenen-Fenster ──────────────────────────────────────────────────────
   Klappt unter dem Knopf „Ebenen" auf, nach dem Vorbild, das Martin aus
   Jetplan kennt: je Ebene ein Auge (sichtbar) und ein Schloss (verriegelt),
   der Grundriss bekommt einen Deckkraft-Regler. Wirkt nur auf die Ansicht. */
.ep-ebenen {
    position: absolute;
    z-index: 70;
    min-width: 17rem;
    background: var(--fw-bg);
    border: 1px solid var(--fw-border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
    padding: .55rem .65rem .5rem;
}
.ep-ebenen h3 {
    margin: 0 0 .35rem;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fw-muted);
}
.ep-ebene-zeile {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .28rem .1rem;
    border-top: 1px solid var(--fw-border);
    font-size: .86rem;
}
.ep-ebene-zeile:first-of-type { border-top: 0; }
.ep-ebene-zeile .ep-ebene-name { flex: 1 1 auto; }
.ep-ebene-zeile.ist-aus .ep-ebene-name { color: var(--fw-muted); }
.ep-ebene-zeile input[type="range"] { width: 5.2rem; }
.ep-ebene-kn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--fw-text);
    cursor: pointer;
    padding: 0;
}
.ep-ebene-kn:hover { background: var(--fw-surface-2); }
.ep-ebene-kn svg { width: 1.05rem; height: 1.05rem; display: block; }
.ep-ebene-kn[aria-pressed="false"] { color: var(--fw-muted); opacity: .6; }
.ep-ebenen .ep-ebenen-fuss {
    margin: .4rem 0 0;
    padding-top: .35rem;
    border-top: 1px solid var(--fw-border);
    font-size: .72rem;
    color: var(--fw-muted);
}
/* Verriegelte Ebene: die Knoten sind im Plan nicht mehr anfassbar. */
.ep-sym.ist-verriegelt,
.ep-beschriftung.ist-verriegelt > span { pointer-events: none; }

.ep-werkzeugleiste {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    padding: .4rem .55rem;
    border-bottom: 1px solid var(--fw-border);
    background: var(--fw-bg);
}
.ep-plan {
    position: relative;
    flex: 1 1 auto;
    min-height: 26rem;
    height: 42rem;
    max-height: 75vh;
    overflow: hidden;
    background: var(--fw-surface-2);
    touch-action: none;               /* Zoom und Verschieben macht das Werkzeug selbst */
    cursor: grab;
}
/* Jeder Modus bekommt sein eigenes Zeichen am Zeiger — auf der Planfläche
   ist damit zu sehen, was ein Klick auslöst, ohne in die Werkzeugleiste zu
   schauen. Der Griffpunkt sitzt in der Lücke des Fadenkreuzes bei 11/11.
   Unter der schwarzen Zeichnung liegt dieselbe in Weiß und zwei Punkt
   breiter, damit der Zeiger auch auf dunklen Wänden zu sehen ist. Fällt er
   aus (sehr alte Browser), bleibt das Fadenkreuz. */
.ep-plan[data-modus="auswahl"] { cursor: default; }
.ep-plan[data-modus="zeichnen"] { cursor: crosshair; }
.ep-plan[data-modus="setzen"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='3.4'/%3E%3Cpath d='M24 18V30' stroke-width='4.0'/%3E%3Cpath d='M18 24H30' stroke-width='4.0'/%3E%3C/g%3E%3Cg fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='1.4'/%3E%3Cpath d='M24 18V30' stroke-width='2.0'/%3E%3Cpath d='M18 24H30' stroke-width='2.0'/%3E%3C/g%3E%3C/svg%3E") 11 11, crosshair; }
.ep-plan[data-modus="massstab"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='3.4'/%3E%3Cpath d='M17 22H31V29H17Z' stroke-width='3.7'/%3E%3Cpath d='M21 22V26' stroke-width='3.5'/%3E%3Cpath d='M25 22V26' stroke-width='3.5'/%3E%3Cpath d='M28 22V26' stroke-width='3.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='1.4'/%3E%3Cpath d='M17 22H31V29H17Z' stroke-width='1.7'/%3E%3Cpath d='M21 22V26' stroke-width='1.5'/%3E%3Cpath d='M25 22V26' stroke-width='1.5'/%3E%3Cpath d='M28 22V26' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") 11 11, crosshair; }
.ep-plan[data-modus="messen"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='3.4'/%3E%3Cpath d='M18 26H30' stroke-width='3.8'/%3E%3Cpath d='M18 26L21 23' stroke-width='3.8'/%3E%3Cpath d='M18 26L21 29' stroke-width='3.8'/%3E%3Cpath d='M30 26L27 23' stroke-width='3.8'/%3E%3Cpath d='M30 26L27 29' stroke-width='3.8'/%3E%3C/g%3E%3Cg fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='1.4'/%3E%3Cpath d='M18 26H30' stroke-width='1.8'/%3E%3Cpath d='M18 26L21 23' stroke-width='1.8'/%3E%3Cpath d='M18 26L21 29' stroke-width='1.8'/%3E%3Cpath d='M30 26L27 23' stroke-width='1.8'/%3E%3Cpath d='M30 26L27 29' stroke-width='1.8'/%3E%3C/g%3E%3C/svg%3E") 11 11, crosshair; }
.ep-plan[data-modus="bemassung"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='3.4'/%3E%3Cpath d='M18 20V31' stroke-width='3.5'/%3E%3Cpath d='M30 20V31' stroke-width='3.5'/%3E%3Cpath d='M18 26H30' stroke-width='3.8'/%3E%3Cpath d='M18 26L21 23.5' stroke-width='3.8'/%3E%3Cpath d='M18 26L21 28.5' stroke-width='3.8'/%3E%3Cpath d='M30 26L27 23.5' stroke-width='3.8'/%3E%3Cpath d='M30 26L27 28.5' stroke-width='3.8'/%3E%3C/g%3E%3Cg fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='1.4'/%3E%3Cpath d='M18 20V31' stroke-width='1.5'/%3E%3Cpath d='M30 20V31' stroke-width='1.5'/%3E%3Cpath d='M18 26H30' stroke-width='1.8'/%3E%3Cpath d='M18 26L21 23.5' stroke-width='1.8'/%3E%3Cpath d='M18 26L21 28.5' stroke-width='1.8'/%3E%3Cpath d='M30 26L27 23.5' stroke-width='1.8'/%3E%3Cpath d='M30 26L27 28.5' stroke-width='1.8'/%3E%3C/g%3E%3C/svg%3E") 11 11, crosshair; }
.ep-plan[data-modus="wandabstand"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='3.4'/%3E%3Cpath d='M18 20V31' stroke-width='4.2'/%3E%3Cpath d='M20 26H30' stroke-width='3.8'/%3E%3Cpath d='M30 26L27 23.5' stroke-width='3.8'/%3E%3Cpath d='M30 26L27 28.5' stroke-width='3.8'/%3E%3C/g%3E%3Cg fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='1.4'/%3E%3Cpath d='M18 20V31' stroke-width='2.2'/%3E%3Cpath d='M20 26H30' stroke-width='1.8'/%3E%3Cpath d='M30 26L27 23.5' stroke-width='1.8'/%3E%3Cpath d='M30 26L27 28.5' stroke-width='1.8'/%3E%3C/g%3E%3C/svg%3E") 11 11, crosshair; }
.ep-plan[data-modus="verknuepfen"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='3.4'/%3E%3Cpath d='M20 26H28' stroke-width='3.8'/%3E%3Cpath d='M19.6 26H19.61' stroke-width='6.4'/%3E%3Cpath d='M28.4 26H28.41' stroke-width='6.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='1.4'/%3E%3Cpath d='M20 26H28' stroke-width='1.8'/%3E%3Cpath d='M19.6 26H19.61' stroke-width='4.4'/%3E%3Cpath d='M28.4 26H28.41' stroke-width='4.4'/%3E%3C/g%3E%3C/svg%3E") 11 11, crosshair; }
.ep-plan[data-modus="raum"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='3.4'/%3E%3Cpath d='M17 20H31V31H17Z' stroke-width='3.7'/%3E%3Cpath d='M24 23.5V27.5' stroke-width='3.5'/%3E%3Cpath d='M22 25.5H26' stroke-width='3.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 1V8M11 14V21M1 11H8M14 11H21' stroke-width='1.4'/%3E%3Cpath d='M17 20H31V31H17Z' stroke-width='1.7'/%3E%3Cpath d='M24 23.5V27.5' stroke-width='1.5'/%3E%3Cpath d='M22 25.5H26' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") 11 11, crosshair; }
.ep-plan.ist-gegriffen { cursor: grabbing; }
@media (max-width: 68rem) { .ep-plan { height: 30rem; } }

.ep-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.ep-stage img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

.ep-sym {
    position: absolute;
    color: var(--fw-text);
    cursor: move;
}

/* Beschriftung steht neben dem Symbol, dreht sich aber nicht mit: eine
   seitwärts gekippte Zahl liest niemand. Sie lässt sich frei ziehen. */
.ep-beschriftung {
    position: absolute;
    pointer-events: none;
    color: var(--fw-text);
    font-family: var(--fw-font);
    line-height: 1;
    user-select: none;
}
.ep-beschriftung > span { position: absolute; white-space: nowrap; pointer-events: auto; cursor: move; }
.ep-beschriftung.ist-gewaehlt { color: var(--fw-accent); }

/* Drehgriff am ausgewählten Symbol */
.ep-drehgriff {
    position: absolute;
    border-radius: 50%;
    background: var(--fw-accent);
    border: 2px solid var(--fw-bg);
    cursor: grab;
    pointer-events: auto;
}
.ep-drehgriff:active { cursor: grabbing; }
.ep-drehstiel { position: absolute; background: var(--fw-accent); pointer-events: none; opacity: .8; }

/* Griffe am aktiven Raum: Ecken ziehen die Fläche zurecht, das ⊕ an der
   Kante zieht einen Anbau heraus — so wird aus dem Grundrechteck ein
   verwinkelter Raum. */
.ep-raumgriff {
    position: absolute;
    background: var(--fw-accent);
    border: 1.5px solid var(--fw-bg);
    border-radius: 2.5px;
    pointer-events: auto;
}
.ep-raumplus {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    background: var(--fw-bg);
    color: var(--fw-accent);
    border: 1.5px solid var(--fw-accent);
    border-radius: 50%;
    font-weight: 700; line-height: 1;
    cursor: crosshair;
    pointer-events: auto;
    user-select: none;
}
.ep-raumplus:hover { background: var(--fw-accent); color: var(--fw-bg); transform: scale(1.25); }
.ep-raumgriff, .ep-raumplus { transition: transform .12s ease; }
.ep-raumgriff:hover { transform: scale(1.35); }
/* Teilungsgriff auf einer geteilten Raumkante: ein Querbalken auf der Linie.
   Er verschiebt die Teilung; ein Antippen entfernt sie wieder. */
.ep-raumteiler {
    position: absolute;
    background: var(--fw-bg);
    border: 1.5px solid var(--fw-accent);
    border-radius: 999px;
    pointer-events: auto;
    transition: transform .12s ease;
}
.ep-raumteiler:hover { background: var(--fw-accent); transform: scale(1.25); }
/* Beim Aktivieren pulsen die Griffe zweimal kurz auf — das Auge findet sie,
   ohne dass ein Hinweistext im Weg steht. */
.ep-raumgriff.ist-puls, .ep-raumplus.ist-puls { animation: ep-griff-puls .8s ease 2; }
@keyframes ep-griff-puls {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.55); }
}

/* Der Schatten am ⊕: beim Überfahren zeigt er, dass hier ein Anbau
   herausgezogen wird — gestrichelt wie der laufende Zug, mit Pfeil in die
   Zugrichtung. */
.ep-anbau-schatten {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px dashed var(--fw-accent);
    background: rgba(0, 87, 184, .07);
    color: var(--fw-accent);
    border-radius: 3px;
    font-weight: 700;
    pointer-events: none;
    animation: ep-anbau-atmen 1s ease-in-out infinite alternate;
}
@keyframes ep-anbau-atmen { from { opacity: .5; } to { opacity: 1; } }

/* Die Maße des laufenden Zugs, mitten im Rechteck. */
.ep-zugmass {
    position: absolute;
    padding: .18em .5em;
    background: var(--fw-bg);
    color: var(--fw-accent);
    border-radius: 999px;
    font-family: var(--fw-font);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 87, 184, .25);
}

/* ── Die vier Frontpfeile ──────────────────────────────────────────────
   Ein Gerät an der Wand hat vier Seiten, und jede von ihnen könnte die
   sein, die an der Wand sitzt. Am ausgewählten Gerät steht deshalb an
   jeder Seite ein Pfeil. Der, der einer Wand am nächsten kommt, leuchtet
   auf — dort rastet es beim Loslassen ein. Angeklickt legt ein Pfeil
   seine Seite von Hand an die Wand. */
.ep-frontpfeil {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    color: var(--fw-accent);
    opacity: .3;
    transition: opacity .12s ease;
}
.ep-frontpfeil svg { display: block; width: 100%; height: 100%;
    fill: currentColor; stroke: var(--fw-bg); stroke-width: 3;
    stroke-linejoin: round; paint-order: stroke fill; }
.ep-frontpfeil:hover { opacity: .85; }
.ep-frontpfeil.ist-front { opacity: 1; }

/* Plus und Minus an der ausgewählten Bemaßung — sie sitzen im Plan neben der
   Maßzahl und wachsen mit dem Zoom, wie die Symbole selbst. */
.ep-massknopf {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fw-accent);
    color: #fff;
    border: 1px solid var(--fw-bg);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
}
.ep-massknopf:active { filter: brightness(.9); }

/* Der Abstand in einer Reihe: Hilfslinie, Anschläge und die Zahl dazwischen,
   am gerade ausgewählten Glied. Eine Bedienhilfe am Bildschirm — auf dem Blatt
   steht der Abstand in der Legende. */
.ep-reihelinie {
    position: absolute;
    background: var(--fw-accent);
    opacity: .6;
    pointer-events: none;
}
.ep-reihemass {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 999px;
    background: var(--fw-bg);
    color: var(--fw-accent);
    border: 1.5px solid var(--fw-accent);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* Schieben des ausgewählten Symbols: je Achse zwei Pfeilknöpfe und ein Griff
   dazwischen. Sie liegen im Plan am Symbol und wachsen mit dem Zoom. */
.ep-schieb, .ep-schiebgriff {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    touch-action: none;
}
.ep-schieb {
    background: var(--fw-bg);
    color: var(--fw-accent);
    border: 1.5px solid var(--fw-accent);
}
.ep-schiebgriff {
    background: var(--fw-accent);
    color: #fff;
    border: 1px solid var(--fw-bg);
    cursor: grab;
}
.ep-schiebgriff:active { cursor: grabbing; }
.ep-schieb:active { background: var(--fw-accent-sf); }
.ep-sym svg { display: block; overflow: visible; }
.ep-sym.ist-gewaehlt { color: var(--fw-accent); }
/* Mitglied der Mehrfachauswahl: gestrichelter Kasten statt des vollen
   Auswahlrings — der bleibt dem einzeln gewählten Symbol vorbehalten. */
.ep-sym.ist-mit { color: var(--fw-accent); }
.ep-sym.ist-mit::after {
    content: '';
    position: absolute;
    left: -3px; right: -3px; top: -3px; bottom: -3px;
    border: 1.5px dashed var(--fw-accent);
    border-radius: 4px;
    pointer-events: none;
}
.ep-beschriftung.ist-mit { color: var(--fw-accent); }

/* Der leere Zustand steht mitten in der Planfläche, nicht als Randnotiz */
.ep-leer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--fw-text-2);
    background: var(--fw-surface-2);
}
.ep-leer h3 { font-size: 1rem; font-weight: 600; color: var(--fw-text); }
.ep-leer p { font-size: .85rem; line-height: 1.6; max-width: 34ch; }
.ep-leer.ist-ziel { outline: 2px dashed var(--fw-accent); outline-offset: -12px; background: var(--fw-accent-sf); }

/* ─── Statuszeile ────────────────────────────────────────────────────────── */
.ep-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .9rem;
    padding: .4rem .65rem;
    border-top: 1px solid var(--fw-border);
    background: var(--fw-surface);
    font-size: .74rem;
    color: var(--fw-muted);
}
.ep-status strong { color: var(--fw-text-2); font-weight: 600; }
.ep-warn { color: #9a5200; font-weight: 600; }

/* ─── Hinweisstreifen ────────────────────────────────────────────────────── */
.ep-hinweis {
    display: flex;
    gap: .5rem;
    padding: .55rem .65rem;
    margin-bottom: .7rem;
    border: 1px solid var(--fw-border);
    border-left: 3px solid var(--fw-proto);
    border-radius: var(--fw-radius);
    background: var(--fw-proto-sf);
    font-size: .78rem;
    line-height: 1.5;
    color: var(--fw-text-2);
}

/* ─── Listen (Räume, Stromkreise) ────────────────────────────────────────── */
.ep-liste { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .5rem; }
.ep-zeile {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .4rem;
    border: 1px solid var(--fw-border);
    border-radius: var(--fw-radius);
    font-size: .8rem;
}
.ep-zeile-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-punkt { width: .7rem; height: .7rem; border-radius: 50%; flex-shrink: 0; }
.ep-leerhinweis { font-size: .78rem; color: var(--fw-muted); line-height: 1.5; margin-bottom: .5rem; }

/* ─── Ampel des Ausstattungsabgleichs ────────────────────────────────────── */
.ep-ampel { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; flex-shrink: 0; }
.ep-ampel--gruen { background: #1b7a3e; }
.ep-ampel--gelb  { background: #c98a00; }
.ep-ampel--rot   { background: #b3261e; }
.ep-abgleich { font-size: .78rem; line-height: 1.5; }
.ep-abgleich-raum { display: flex; align-items: center; gap: .4rem; font-weight: 600; margin-top: .55rem; color: var(--fw-text); }
.ep-abgleich-detail { color: var(--fw-text-2); padding-left: 1rem; }

/* Schaltungen: die Marke steht als kleines Schild vor dem Namen */
.ep-marke {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
    border: 1px solid var(--fw-border-str); border-radius: .3rem;
    background: var(--fw-surface);
    font-size: .76rem; font-weight: 700; font-style: italic;
    color: var(--fw-text); flex-shrink: 0;
}
.ep-offen { display: flex; flex-direction: column; gap: .2rem; margin: .5rem 0; }
.ep-offen-titel {
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 600; color: #9a5200; margin-top: .35rem;
}
.ep-offen-knopf {
    display: block; width: 100%; text-align: left;
    padding: .25rem .4rem; border: 0; border-radius: .25rem;
    background: transparent; font: inherit; font-size: .78rem;
    color: var(--fw-text-2); cursor: pointer;
}
.ep-offen-knopf:hover { background: var(--fw-surface); color: var(--fw-text); }

/* ─── Dialoge ────────────────────────────────────────────────────────────── */
.ep-dialog {
    /* margin:auto muss hier stehen: der Reset .fw-page * { margin: 0 } aus
       site.css nimmt dem Dialog sonst seine Zentrierung. */
    margin: auto;
    border: 1px solid var(--fw-border-str);
    border-radius: var(--fw-radius-lg);
    padding: 0;
    max-width: 30rem;
    width: calc(100vw - 2rem);
    background: var(--fw-bg);
    color: var(--fw-text);
    box-shadow: var(--fw-shadow);
}
.ep-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.ep-dialog-inhalt { padding: 1.1rem 1.2rem; }
.ep-dialog h2 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.ep-dialog p { font-size: .85rem; line-height: 1.6; color: var(--fw-text-2); margin-bottom: .8rem; }
.ep-dialog-knoepfe { display: flex; justify-content: flex-end; gap: .4rem; margin-top: 1rem; flex-wrap: wrap; }

/* ─── Tastaturhilfe ──────────────────────────────────────────────────────── */
.ep-tasten { font-size: .78rem; line-height: 1.8; color: var(--fw-text-2); }
.ep-tasten kbd {
    display: inline-block;
    min-width: 1.4rem;
    padding: .05rem .3rem;
    border: 1px solid var(--fw-border-str);
    border-bottom-width: 2px;
    border-radius: 3px;
    background: var(--fw-surface);
    font-family: var(--fw-mono);
    font-size: .72rem;
    text-align: center;
}

/* ==========================================================================
   Druck – A4 quer
   Auf dem Bildschirm ist der Druckbereich ausgeblendet; er wird erst kurz vor
   dem Druck aufgebaut. So kostet er im laufenden Betrieb nichts.
   ========================================================================== */
.ep-druck { display: none; }

@media print {
    @page { size: A4 landscape; margin: 10mm; }
    /* Nur das große Planblatt darf hochkant sein, und auch nur dann, wenn der
       Grundriss höher als breit ist. Benannte Seiten können nicht alle
       Browser; wo sie fehlen, bleibt das Blatt quer (siehe HOCHFORMAT_MOEGLICH). */
    @page ephoch { size: A4 portrait; margin: 10mm; }
    .ep-blatt--hoch { page: ephoch; }

    /* Alles außer dem Druckbereich verschwindet – auch das, was site.js
       nachträglich an den Körper hängt (Kopf, Fuß, Haftungshinweis). */
    body > * { display: none !important; }
    body > .ep-druck { display: block !important; }

    .ep-druck {
        font-family: var(--fw-font);
        color: #000;
        background: #fff;
        font-size: 9pt;
        line-height: 1.4;
    }

    .ep-blatt { break-after: page; page-break-after: always; }
    .ep-blatt:last-child { break-after: auto; page-break-after: auto; }

    .ep-blatt-kopf {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 1rem;
        border-bottom: .5pt solid #000;
        padding-bottom: 2mm;
        margin-bottom: 3mm;
    }
    .ep-blatt-kopf h2 { font-size: 12pt; font-weight: 700; }
    .ep-blatt-kopf .ep-blatt-meta { font-size: 8pt; text-align: right; line-height: 1.5; }

    /* Auf dem großen Planblatt zählt jeder Millimeter — der Kopf schrumpft
       auf eine Zeile. */
    .ep-blatt-kopf--schmal { align-items: baseline; padding-bottom: 1mm; margin-bottom: 2mm; }
    .ep-blatt-kopf--schmal h2 { font-size: 9.5pt; }
    .ep-blatt-kopf--schmal .ep-blatt-meta { font-size: 7pt; line-height: 1.3; white-space: nowrap; }

    /* Der Plan bekommt die Seite, abzüglich Kopf und Fuß — und abzüglich der
       Übersicht daneben, falls sie gedruckt wird. */
    .ep-blattzeile { display: flex; gap: 4mm; align-items: flex-start; }
    .ep-blattmitte { display: flex; justify-content: center; }

    /* Die Übersicht neben dem Plan. Sie ist bewusst eng gesetzt: sie soll
       den Plan lesbar machen, nicht ihn ersetzen. Was nicht mehr hineinpasst,
       steht vollständig auf den Blättern dahinter. */
    .ep-planlegende { font-size: 6.4pt; line-height: 1.35; overflow: hidden; flex: 0 0 auto; }
    .ep-planlegende.ist-quer {
        width: 100%;
        column-count: 3;
        column-gap: 5mm;
        margin-top: 4mm;
    }
    .ep-pl-block { break-inside: avoid; margin-bottom: 2.6mm; }
    .ep-pl-titel {
        font-size: 6.6pt;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        border-bottom: .4pt solid #000;
        padding-bottom: .6mm;
        margin-bottom: 1mm;
    }
    .ep-pl-zeile { display: flex; gap: 1.3mm; align-items: baseline; margin-bottom: .7mm; }
    .ep-pl-marke { flex: 0 0 4mm; font-weight: 700; font-style: italic; }
    .ep-pl-sym { flex: 0 0 6mm; text-align: center; align-self: center; }
    .ep-pl-sym svg { height: 3.8mm; width: auto; max-width: 100%; overflow: visible; }
    .ep-pl-punkt {
        display: inline-block;
        width: 2.2mm; height: 2.2mm;
        border-radius: 50%;
        /* Ohne das druckt Chrome die Fläche weiß, und die Farbzuordnung
           zum Plan wäre hin. */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .ep-pl-grau { color: #444; }
    .ep-pl-fliess { line-height: 1.5; }
    .ep-pl-fuss { font-size: 6pt; color: #444; margin-top: 1.5mm; }

    .ep-druckplan { position: relative; width: 100%; }
    .ep-druckplan img { display: block; width: 100%; height: auto; }
    /* Rahmen und Bemaßungen liegen deckungsgleich über dem Grundriss. */
    .ep-debene {
        position: absolute;
        left: 0; top: 0;
        width: 100%; height: 100%;
        overflow: visible;
        pointer-events: none;
    }
    /* color wird je Symbol gesetzt, wenn nach Stromkreis eingefärbt wird;
       ohne Farbe bleibt es beim Schwarz von hier. */
    .ep-druckplan .ep-dsym {
        position: absolute;
        color: #000;
        transform: translate(-50%, -50%);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .ep-druckplan .ep-dsym svg { display: block; overflow: visible; width: 100%; height: 100%; }

    /* Beschriftung liegt über dem Zeichen, dreht sich aber nicht mit. */
    .ep-druckplan .ep-dbes {
        position: absolute;
        transform: translate(-50%, -50%);
        color: #000;
        line-height: 1;
        pointer-events: none;
    }
    /* Alles haengt unter dem Symbol: darueber ist im Grundriss die Wand, und
       was dort steht, verschwindet im Schwarz. Marke links, Nummer rechts,
       Kuerzel eine Zeile darunter. */
    .ep-druckplan .ep-dbes span { position: absolute; white-space: nowrap; }
    .ep-druckplan .ep-dnr { right: 0; bottom: 0; transform: translate(100%, 100%); font-weight: 700; }
    .ep-druckplan .ep-dsm { left: 0; bottom: 0; transform: translate(-100%, 100%); font-weight: 700; font-style: italic; }
    .ep-druckplan .ep-dkz { left: 50%; bottom: 0; transform: translate(-50%, 100%); font-weight: 600; font-size: .94em; }
    .ep-druckplan .ep-dbes.ist-zweizeilig .ep-dkz { bottom: -1.15em; }
    /* Die Bemerkung als kursive Zeile unter der Beschriftung — ihr Abstand
       nach unten kommt je nach Zeilenzahl darüber aus dem Skript. */
    .ep-druckplan .ep-dbm { left: 50%; bottom: 0; transform: translate(-50%, 100%); font-style: italic; font-size: .85em; }
    /* Seitliche Beschriftung neben senkrecht stehenden Kombinationen: je
       Einheit eine Zeile auf Höhe der Einheit, statt untereinander. */
    .ep-druckplan .ep-dseite { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; gap: .35em; align-items: baseline; white-space: nowrap; }
    .ep-druckplan .ep-dseite .ep-dnr,
    .ep-druckplan .ep-dseite .ep-dsm,
    .ep-druckplan .ep-dseite .ep-dbm,
    .ep-druckplan .ep-dseite .ep-dkz { position: static; transform: none; }

    .ep-drucktabelle { width: 100%; border-collapse: collapse; font-size: 8pt; }
    .ep-drucktabelle th,
    .ep-drucktabelle td {
        border: .5pt solid #666;
        padding: 1mm 1.5mm;
        text-align: left;
        vertical-align: top;
    }
    .ep-drucktabelle th { background: #eee; font-weight: 700; }
    .ep-drucktabelle .ep-td-nr { width: 8mm; text-align: right; }
    .ep-drucktabelle .ep-td-sym { width: 14mm; text-align: center; }
    .ep-drucktabelle .ep-td-sym svg { height: 6mm; width: auto; max-width: 100%; overflow: visible; }
    .ep-drucktabelle tr { break-inside: avoid; page-break-inside: avoid; }

    .ep-druck-gruppe {
        font-size: 9pt;
        font-weight: 700;
        margin: 3mm 0 1mm;
        break-after: avoid;
        page-break-after: avoid;
    }
    .ep-druck-h3 { font-size: 10pt; font-weight: 700; margin-bottom: 2mm; }
    .ep-druck-hinweis { font-size: 7.5pt; margin-top: 2mm; }

    /* ── Kombinationsblatt ───────────────────────────────────────────────
       Der Plan zeigt die Batterie von oben, die Baustelle sieht sie von
       vorn. Hier steht sie deshalb als Wandansicht: die oberste Zeile ist
       die oberste Dose. */
    .ep-kombi-raster {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(118mm, 1fr));
        gap: 4mm;
        align-items: start;
    }
    .ep-kombi-karte {
        border: .5pt solid #666;
        border-radius: 1mm;
        padding: 2.5mm 3mm 3mm;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .ep-kombi-kopf {
        display: flex;
        align-items: baseline;
        gap: 2mm;
        border-bottom: .5pt solid #bbb;
        padding-bottom: 1.5mm;
        margin-bottom: 2.5mm;
    }
    .ep-kombi-marke { font-size: 11pt; font-weight: 700; }
    .ep-kombi-wo { font-size: 8pt; }
    .ep-kombi-dreh { margin-left: auto; font-size: 7.5pt; white-space: nowrap; }
    .ep-kombi-inhalt { display: flex; gap: 3mm; align-items: flex-start; }
    /* Ein waagerechter Rahmen ist breit — er steht über der Tabelle statt
       daneben, sonst wird die Tabelle zur Spalte aus Silben. */
    .ep-kombi-inhalt.ist-quer { flex-direction: column; }
    .ep-kombi-wand { flex: 0 0 auto; text-align: center; align-self: flex-start; }
    .ep-kombi-quer { display: flex; align-items: center; gap: 1.5mm; }
    .ep-kombi-hin { font-size: 7pt; font-weight: 600; letter-spacing: .02em; }
    .ep-kombi-hin--oben { margin-bottom: 1mm; }
    .ep-kombi-hin--unten { margin-top: 1mm; }
    .ep-kombi-rahmen {
        display: inline-flex;
        flex-direction: column;
        gap: 1mm;
        border: 1pt solid #000;
        border-radius: 1.2mm;
        padding: 1.5mm;
    }
    .ep-kombi-rahmen.ist-waagerecht { flex-direction: row; }
    .ep-kombi-dose {
        position: relative;
        width: 19mm;
        height: 17mm;
        border: .5pt solid #888;
        border-radius: .8mm;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .6mm;
    }
    .ep-kombi-dose svg { height: 6.5mm; width: auto; overflow: visible; }
    .ep-kombi-pos {
        position: absolute;
        top: .3mm;
        left: 1mm;
        font-size: 6.5pt;
        font-weight: 700;
    }
    .ep-kombi-dose-nr { font-size: 6.5pt; font-weight: 600; }
    .ep-kombi-blick { font-size: 6.5pt; margin-top: 1.2mm; }
    /* min-width:0 und feste Spaltenbreiten: sonst sprengt die Tabelle als
       Flex-Kind die Karte, statt sich in sie einzufügen. */
    .ep-kombi-tab {
        flex: 1 1 0;
        min-width: 0;
        width: 100%;
        table-layout: fixed;
        font-size: 7.5pt;
    }
    .ep-kombi-tab th, .ep-kombi-tab td { padding: .7mm 1.2mm; overflow-wrap: break-word; }
    .ep-kombi-tab .ep-td-nr { width: 10mm; }
    .ep-kombi-tab .ep-kombi-sp-hoehe { width: 15mm; }
    .ep-kombi-fuss { font-size: 7pt; margin-top: 2mm; }
}

/* ─── Vollbild ───────────────────────────────────────────────────────────
   Im Vollbild steht nur der Werkzeugkasten auf dem Schirm: kein Seitenkopf,
   kein Einführungstext, keine Browserleiste. Die Planfläche bekommt dadurch
   die ganze übrige Höhe — deshalb fallen hier die festen Höhen weg.
   Die beiden Schreibweisen brauchen eigene Regeln: eine unbekannte
   Pseudoklasse in einer gemeinsamen Liste macht die ganze Regel ungültig. */
.ep-app:fullscreen {
    max-width: none;
    height: 100%;
    margin: 0;
    padding: .6rem .8rem .6rem;
    display: flex;
    flex-direction: column;
    background: var(--fw-bg);
    overflow: hidden;
}
.ep-app:fullscreen .ep-grid { flex: 1 1 auto; min-height: 0; }
.ep-app:fullscreen .ep-side { max-height: none; }
.ep-app:fullscreen .ep-plan { height: auto; max-height: none; }

.ep-app:-webkit-full-screen {
    max-width: none;
    height: 100%;
    margin: 0;
    padding: .6rem .8rem .6rem;
    display: flex;
    flex-direction: column;
    background: var(--fw-bg);
    overflow: hidden;
}
.ep-app:-webkit-full-screen .ep-grid { flex: 1 1 auto; min-height: 0; }
.ep-app:-webkit-full-screen .ep-side { max-height: none; }
.ep-app:-webkit-full-screen .ep-plan { height: auto; max-height: none; }

/* Bewegung zurücknehmen, wenn der Nutzer das eingestellt hat */
@media (prefers-reduced-motion: reduce) {
    .ep-stage { transition: none !important; }
}

/* ═══ Beleuchtungs-Editor (45-beleuchtung.js) ═════════════════════════════ */

/* Symbole auf einer Installationsebene, die nicht die aktive ist: sichtbar,
   aber blass — und über ist-verriegelt ohnehin unantastbar. */
.ep-sym.ist-fremdebene,
.ep-beschriftung.ist-fremdebene { opacity: .35; }

/* Aufziehen eines Lichtfeldes: Fadenkreuz. */
.ep-plan[data-modus="lichtfeld"] { cursor: crosshair; }

/* Senkrechte Werkzeugleiste am linken Rand der Planfläche. */
.ep-vtools {
    position: absolute;
    left: .55rem;
    top: .55rem;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .3rem;
    background: var(--fw-surface);
    border: 1px solid var(--fw-border);
    border-radius: .55rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.ep-vt-kn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .45rem;
    background: none;
    color: var(--fw-text);
    cursor: pointer;
}
.ep-vt-kn:hover { background: var(--fw-surface-2); }
.ep-vt-kn[aria-pressed="true"] {
    background: var(--fw-surface-2);
    border-color: var(--fw-border);
    color: #0057b8;
    box-shadow: inset 0 0 0 1px #0057b8;
}
.ep-vt-kn svg { width: 1.25rem; height: 1.25rem; display: block; }
.ep-vt-strich { height: 1px; background: var(--fw-border); margin: .15rem .2rem; }

/* Flyout mit den sechs Verteilmustern, rechts neben der Leiste. */
.ep-licht-flyout {
    position: absolute;
    left: 3.4rem;
    z-index: 31;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .3rem;
    background: var(--fw-surface);
    border: 1px solid var(--fw-border);
    border-radius: .55rem;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .12);
}
.ep-vt-muster svg { width: 1.45rem; height: 1.45rem; }
.ep-vt-nr {
    position: absolute;
    right: .12rem;
    bottom: .05rem;
    font-size: .58rem;
    font-weight: 600;
    color: var(--fw-muted);
}
.ep-vt-kn[aria-pressed="true"] .ep-vt-nr { color: #0057b8; }

/* Beschriftung der Ebenenplan-Druckzeile im Fenster „Ebenen". */
.ep-ebenen-drucktitel {
    align-self: center;
    font-size: .74rem;
    color: var(--fw-muted);
    white-space: nowrap;
}

/* Die schmale Legende unter dem Ebenenplan. */
.ep-elegende {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .9rem;
    margin-top: 2mm;
    font-size: 7.6pt;
    color: #000;
}
.ep-elegende-teil { white-space: nowrap; }

/* Mit den umgezogenen Modus-Knöpfen ist die Leiste länger — auf kleinen
   Fenstern darf sie in sich rollen statt aus dem Plan zu laufen. */
.ep-vtools {
    max-height: calc(100% - 1.1rem);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* ═══ Zusammenklappbare Erläuterungen (Plus-Knopf) ════════════════════════
   Die Textabschnitte unter dem Werkzeug stehen zugeklappt — die Seite
   bleibt schlank, der Plus-Knopf holt den Text bei Bedarf hervor. */
.fw-prose details.fw-klapp {
    border-bottom: 1px solid var(--fw-border);
}
.fw-prose details.fw-klapp:first-of-type { border-top: 1px solid var(--fw-border); }
.fw-klapp > summary {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .1rem;
    cursor: pointer;
    list-style: none;
}
.fw-klapp > summary::-webkit-details-marker { display: none; }
.fw-klapp > summary h2,
.fw-klapp > summary h3 { margin: 0; flex: 1 1 auto; }
.fw-klapp > summary:hover h2,
.fw-klapp > summary:hover h3 { color: #0057b8; }

/* Der Plus-Knopf: ein Kreis mit +, offen wird ein − daraus. */
.fw-klapp-plus {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--fw-border);
    border-radius: 50%;
    position: relative;
    color: var(--fw-muted);
}
.fw-klapp-plus::before,
.fw-klapp-plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}
.fw-klapp-plus::before { width: .8rem; height: 2px; }
.fw-klapp-plus::after  { width: 2px;  height: .8rem; transition: transform .15s ease; }
.fw-klapp[open] > .fw-klapp-plus::after,
.fw-klapp[open] > summary .fw-klapp-plus::after { transform: translate(-50%, -50%) scaleY(0); }
.fw-klapp[open] > summary .fw-klapp-plus { color: #0057b8; border-color: #0057b8; }
.fw-klapp > summary:hover .fw-klapp-plus { color: #0057b8; border-color: #0057b8; }

.fw-klapp-inhalt { padding: .15rem .1rem 1rem; }

/* Die Fragen innerhalb der FAQ: eine Stufe kleiner, leicht eingerückt. */
.fw-klapp--frage { margin-left: .2rem; }
.fw-klapp--frage > summary { padding: .5rem .1rem; }
.fw-klapp--frage .fw-klapp-plus { width: 1.25rem; height: 1.25rem; }
.fw-klapp--frage .fw-klapp-plus::before { width: .65rem; }
.fw-klapp--frage .fw-klapp-plus::after { height: .65rem; }

/* Im Ausdruck stören zugeklappte Erläuterungen nicht — sie fehlen dort
   ohnehin (der Druckbereich ersetzt die Seite). */