/* © 2026 Martin Scherer · Fachwerte (https://www.fachwerte.de) · Alle Rechte vorbehalten.
   Steckdosenplaner — Original: https://www.fachwerte.de/tools/steckdosenplaner/
   Die Nutzung des Werkzeugs im Browser ist frei. Vervielfältigung, Bearbeitung,
   Umbenennung oder Veröffentlichung dieses Quelltexts, auch in Teilen, nur mit
   schriftlicher Zustimmung des Urhebers (§§ 69a ff. UrhG). Kennung FWSP-2026-09-01 */
/* Steckdosenplaner — Stile der Installationszonen (Teil 46). */

/* ─── Fenster „Wandansicht" ──────────────────────────────────────────────── */
.ep-dialog.ep-zonen-dialog { max-width: 74rem; width: calc(100vw - 2rem); }
.ep-zonen-dialog .ep-dialog-inhalt { display: flex; flex-direction: column; max-height: min(92vh, 60rem); padding: 1rem 1.2rem; }
.ep-zonen-kopf { display: flex; align-items: center; gap: .75rem; padding-bottom: .6rem; border-bottom: 1px solid var(--ep-linie, var(--fw-border)); }
.ep-zonen-kopf h2 { flex: 1 1 auto; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-zonen-kopf .ep-select { flex: 0 1 14rem; width: auto; }
.ep-zonen-kopf .ep-btn--icon svg { display: block; }

.ep-zonen-einst { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; padding: .6rem 0; font-size: var(--ep-t-s, .8125rem); color: var(--fw-text-2); }
.ep-zonen-feld { display: inline-flex; align-items: center; gap: .4rem; }
.ep-zonen-feld .ep-input { width: 4.6rem; min-height: var(--ep-h-klein, 2rem); padding: .2rem .45rem; }
.ep-zonen-feld .ep-select { width: auto; min-height: var(--ep-h-klein, 2rem); padding: .2rem .45rem; }
.ep-zonen-einheit { color: var(--fw-muted); }

.ep-zonen-reiter { display: flex; flex-wrap: wrap; gap: .3rem; padding: .1rem 0 .55rem; }
.ep-zonen-tab { font: inherit; font-size: var(--ep-t-xs, .75rem); font-weight: 600; min-height: var(--ep-h-klein, 2rem); padding: .2rem .7rem;
    border: 1px solid var(--fw-border-str); border-radius: 999px; background: var(--fw-bg); color: var(--fw-text-2); cursor: pointer; }
.ep-zonen-tab:hover { background: var(--fw-surface); color: var(--fw-text); }
.ep-zonen-tab[aria-selected="true"] { background: var(--fw-accent-sf); border-color: var(--fw-accent); color: var(--fw-accent); }
.ep-zonen-tab:focus-visible { outline: 2px solid var(--fw-accent); outline-offset: 2px; }

.ep-zonen-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.ep-zonen-wand { padding: .5rem 0 1rem; border-top: 1px solid var(--fw-border); }
.ep-zonen-wand:first-child { border-top: 0; }
.ep-zonen-wandkopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem; }
.ep-zonen-wandkopf h3 { margin: 0; font-size: var(--ep-t-m, .875rem); font-weight: 600; color: var(--fw-text); }
.ep-zonen-wandknoepfe { display: flex; gap: .3rem; }
.ep-zonen-wandknoepfe .ep-btn { min-height: var(--ep-h-klein, 2rem); font-size: var(--ep-t-xs, .75rem); padding: .2rem .65rem; }

/* Die Zeichnung ist Papier — auch im Dunkelmodus, wie der Plan. */
.ep-zonen-bild { background: #fff; border: 1px solid var(--fw-border); border-radius: var(--ep-r, 8px); padding: .35rem .25rem; overflow-x: auto; }
.ep-zonen-bild svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }

.ep-zonen-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.ep-zonen-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--fw-border-str); border-radius: 999px; overflow: hidden; font-size: var(--ep-t-xs, .75rem); background: var(--fw-surface); }
.ep-zonen-chip button { font: inherit; border: 0; background: none; color: var(--fw-text-2); cursor: pointer; padding: .2rem .55rem; }
.ep-zonen-chip button:hover { background: var(--fw-surface-2); color: var(--fw-text); }
.ep-zonen-chip .ep-zonen-chip-weg { border-left: 1px solid var(--fw-border-str); padding: .2rem .5rem; }

.ep-zonen-tabelle { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: var(--ep-t-xs, .75rem); }
.ep-zonen-tabelle th { text-align: left; font-weight: 600; color: var(--fw-muted); padding: .25rem .4rem; border-bottom: 1px solid var(--fw-border); white-space: nowrap; }
.ep-zonen-tabelle td { padding: .25rem .4rem; border-bottom: 1px solid var(--fw-border); color: var(--fw-text-2); vertical-align: top; }
.ep-zonen-tabelle td.ep-zonen-mass, .ep-zonen-tabelle td.ep-td-nr { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ep-zonen-tabelle td .ep-zonen-notiz { display: inline-block; margin-top: .1rem; }
.ep-zonen-tabelle tr.ist-ausserhalb td { color: var(--fw-text); background: color-mix(in srgb, #8a5d00 7%, transparent); }
.ep-zonen-tabelle tr.ist-ausserhalb td:last-child { color: var(--fw-proto); }

.ep-zonen-hinweis { font-size: var(--ep-t-s, .8125rem); color: var(--fw-text-2); background: var(--fw-surface); border: 1px solid var(--fw-border); border-radius: var(--ep-r, 8px); padding: .55rem .75rem; margin: .5rem 0; }
.ep-zonen-legende, .ep-zonen-drucklegende { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: var(--ep-t-xs, .75rem); color: var(--fw-text-2); margin: .6rem 0 .2rem; }
.ep-zonen-legende span, .ep-zonen-drucklegende span { display: inline-flex; align-items: center; gap: .4rem; }
.ep-zonen-lg { display: inline-block; width: 1rem; height: .65rem; flex: 0 0 auto; overflow: visible; background: #fff; border-radius: 2px; }

/* Leise Zusatzhinweise (Kombination, Höhen angleichen) und die Zeile
   „Anschlag offen" — kein Fehler-Rot, nur gedämpftes Ocker. */
.ep-zonen-notiz { color: var(--fw-muted); font-size: .95em; }
.ep-zonen-tabelle tr.ist-bedingt td:last-child { color: var(--fw-text); }
.ep-zonen-tabelle tr.ist-bedingt td { background: color-mix(in srgb, #8a6a2b 4%, transparent); }
.ep-zonen-hinweis.ist-anschlag { border-left: 3px solid #8a6a2b; }
.ep-zonen-chip.ist-offen { border-style: dashed; border-color: #8a6a2b; }
.ep-zonen-norm { flex: 1 1 100%; margin: 0; font-size: var(--ep-t-xs, .75rem); line-height: 1.5; color: var(--fw-muted); }
.ep-zonen-norm summary { cursor: pointer; width: fit-content; color: var(--fw-text-2); }
.ep-zonen-norm summary:hover { color: var(--fw-accent); }
.ep-zonen-norm p { margin: .3rem 0 0; max-width: 62rem; }
.ep-zonen-hinweis.ist-anschlag { padding: .4rem .7rem; margin: 0 0 .4rem; }
.ep-zonen-wandknoepfe { align-items: center; flex-wrap: wrap; }
.ep-zonen-wandzwm { font-size: var(--ep-t-xs, .75rem); color: var(--fw-text-2); margin-right: .3rem; }
.ep-zonen-wandzwm .ep-select { min-height: var(--ep-h-klein, 2rem); font-size: var(--ep-t-xs, .75rem); }
.ep-check.ep-zonen-unter { padding-left: 1.4rem; }
.ep-zonen-fuss { border-top: 1px solid var(--fw-border); padding-top: .6rem; }
.ep-zonen-fuss .ep-dialog-knoepfe { margin-top: .5rem; }
.ep-zonen-oeffnen { width: 100%; margin: .15rem 0 .35rem; justify-content: flex-start; }

@media (max-width: 640px) {
    .ep-zonen-dialog .ep-dialog-inhalt { padding: .8rem .75rem; max-height: 94vh; }
    .ep-zonen-kopf { flex-wrap: wrap; }
    .ep-zonen-kopf .ep-select { flex: 1 1 100%; order: 3; }
    .ep-zonen-tabelle th:nth-child(7), .ep-zonen-tabelle td:nth-child(7) { display: none; }
}
body:has(.ep-app.ist-touch) .ep-zonen-tab, body:has(.ep-app.ist-touch) .ep-zonen-wandknoepfe .ep-btn { min-height: var(--ep-h-touch, 2.75rem); }

/* ─── Druckblatt „Wandansichten" ─────────────────────────────────────────── */
.ep-druck .ep-zonen-reihe { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 5mm; margin: 0 0 2mm; break-inside: avoid; }
.ep-druck .ep-zonen-fig { margin: 0; break-inside: avoid; }
.ep-druck .ep-zonen-fig figcaption { font-size: 7.5pt; font-weight: 700; color: #172c3b; margin: 0 0 1mm; white-space: nowrap; }
.ep-druck .ep-zonen-fig svg { display: block; }
.ep-druck .ep-zonen-drucklegende { font-size: 7pt; color: #50626c; margin: 0 0 2mm; gap: 1mm 5mm; }
.ep-druck .ep-zonen-drucklegende .ep-zonen-lg { width: 4mm; height: 2.5mm; }
.ep-druck .ep-zonen-raumtitel { display: flex; align-items: baseline; gap: 3mm; font-size: 9.5pt; font-weight: 700; color: #172c3b;
    margin: 2.5mm 0 1.2mm; padding-bottom: .6mm; border-bottom: .25mm solid #adc0c5; break-after: avoid; }
.ep-druck .ep-zonen-raumtitel span { font-size: 7.5pt; font-weight: 400; color: #50626c; }
.ep-druck .ep-zonen-drucktabelle { margin-bottom: 2mm; font-size: 7.5pt; line-height: 1.25; }
.ep-druck .ep-zonen-drucktabelle th { font-size: 6.5pt; padding: .7mm 1.8mm; }
.ep-druck .ep-zonen-drucktabelle td { padding: .55mm 1.8mm; }
.ep-druck .ep-zonen-drucktabelle td.ep-zonen-mass, .ep-druck .ep-zonen-drucktabelle td.ep-td-nr { white-space: nowrap; }
.ep-druck .ep-zonen-drucktabelle .ep-raumzeile td { padding: 1.8mm 1.8mm .7mm; font-size: 8pt; }
.ep-druck .ep-zonen-drucktabelle .ep-raumzeile td span { font-size: 7pt; }
.ep-druck .ep-zonen-drucktabelle tr.ist-ausserhalb td:last-child { color: #7a4f00; }
.ep-druck .ep-zonen-drucktabelle .ep-zonen-notiz { color: #50626c; font-size: 7pt; }
@media print {
    .ep-zonen-dialog { display: none !important; }
    .ep-druck .ep-zonen-drucklegende svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
.ep-zonen-badge { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; margin-left: .4rem; padding: 0 .3rem; border-radius: 999px;
    font-size: .6875rem; font-weight: 700; background: color-mix(in srgb, #8a5d00 16%, var(--fw-bg)); color: var(--fw-proto); }
.ep-zonen-raumknopf { display: inline-flex; align-items: center; gap: .3rem; margin: .15rem 0 0; padding: .1rem .45rem .1rem .3rem; font: inherit; font-size: var(--ep-t-xs, .75rem);
    border: 1px solid var(--fw-border); border-radius: 999px; background: var(--fw-bg); color: var(--fw-text-2); cursor: pointer; vertical-align: middle; }
.ep-zonen-raumknopf:hover { color: var(--fw-accent); border-color: var(--fw-accent); }
.ep-zonen-raumknopf svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ep-zeile-text .ep-zonen-raumknopf { display: flex; width: fit-content; }
body:has(.ep-app.ist-touch) .ep-zonen-raumknopf { min-height: 2.25rem; padding: .2rem .7rem .2rem .5rem; }
.ep-zonen-oeffnen { white-space: normal; text-align: left; height: auto; }

/* ZW-m nur vor Arbeitsflächen: leise Zeile über den Wänden; eine Wand,
   deren Einstellung die Erkennung übersteuert, trägt einen feinen Rand. */
.ep-zonen-zwm-info { font-size: var(--ep-t-xs, .75rem); line-height: 1.45; color: var(--fw-text-2); margin: 0 0 .5rem; padding-left: .6rem; border-left: 3px solid #2f6f6d; }
.ep-zonen-wandzwm.ist-uebersteuert .ep-select { border-color: #2f6f6d; box-shadow: inset 3px 0 0 #2f6f6d; }

/* Maßstab je Wand (maßstäbliche Wandansicht, 25.09.2026): leise Marke
   hinter dem Wandtitel, im Fenster und auf dem Blatt. */
.ep-zonen-massstab { display: inline-block; margin-left: .5rem; padding: 0 .4rem; border: 1px solid var(--fw-border-str); border-radius: 999px;
    font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fw-text-2); vertical-align: 1px; }
.ep-druck .ep-zonen-fig figcaption .ep-zonen-massstab { margin-left: 2mm; padding: 0 1.2mm; border: .2mm solid #adc0c5; border-radius: 1mm;
    font-size: 6.5pt; font-weight: 600; color: #50626c; vertical-align: .2mm; }