/* © 2026 Martin Scherer · Fachwerte (https://www.fachwerte.de) · Alle Rechte vorbehalten.
   Steckdosenplaner — Original: https://www.fachwerte.de/tools/steckdosenplaner/
   Stile zu Teil 56 (Projekte, Firma, Revisionen). Kennung FWSP-2026-09-01 */

/* ─── Kopfleiste: Knopf „Projekte“ vor dem Bauvorhaben ─────────────────── */
.ep-pj-knopf { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; padding-left: .5rem; padding-right: .55rem; color: var(--fw-text); }
.ep-pj-knopf svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: var(--fw-accent); }
.ep-pj-knopf-zahl { min-width: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: var(--fw-accent-sf); color: var(--fw-accent); font-size: .72rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
.ep-pj-knopf-zahl[hidden] { display: none; }
@media (max-width: 68rem) { .ep-pj-knopf { order: 1; } }
@media (max-width: 40rem) { .ep-pj-knopf-text { display: none; } }
/* Im Handy-Menü steht die Kopfleiste als Knopfraster — dort mit Text. */
.ep-hmenue .ep-bar > .ep-pj-knopf { justify-content: center; }
.ep-hmenue .ep-pj-knopf .ep-pj-knopf-text { display: inline; }

/* ─── Dialoge ──────────────────────────────────────────────────────────── */
.ep-dialog.ep-pj-dialog { max-width: 46rem; }
.ep-dialog.ep-pj-wahl { max-width: 32rem; }
.ep-dialog.ep-pj-firma-dialog { max-width: 38rem; }
.ep-dialog.ep-pj-ansicht-dialog { max-width: min(76rem, calc(100vw - 2rem)); }
.ep-pj-dialog .ep-pj-inhalt { display: flex; flex-direction: column; max-height: min(88vh, 54rem); max-height: min(88dvh, 54rem); }
.ep-pj-kopf { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .6rem; }
.ep-pj-kopftext { flex: 1 1 auto; min-width: 0; }
.ep-pj-kopf h2 { margin-bottom: .1rem; }
.ep-dialog .ep-pj-unter { margin: 0; font-size: .8rem; color: var(--fw-text-2); }
.ep-pj-zu { flex: 0 0 auto; margin: -.35rem -.4rem 0 0; }
.ep-pj-zu svg { width: 1.1rem; height: 1.1rem; }
.ep-pj-rumpf { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -.25rem; padding: 0 .25rem; }
.ep-pj-fuss { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--fw-border); align-items: center; }
.ep-pj-fuss-platz { flex: 1 1 auto; }

.ep-pj-abschnitt { padding: .75rem 0 .35rem; border-top: 1px solid var(--fw-border); }
.ep-pj-abschnitt:first-child { border-top: 0; padding-top: .1rem; }
.ep-pj-h3 { grid-column: 1 / -1; margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fw-text-2); }
.ep-pj-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .75rem; }
.ep-pj-raster .ist-breit { grid-column: 1 / -1; }
.ep-pj-feld .ep-label { display: block; margin-bottom: .2rem; }
.ep-dialog .ep-pj-feldhinweis, .ep-pj-feldhinweis { margin: .25rem 0 0; font-size: .75rem; }
.ep-pj-knopfzeile { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 .5rem; }
.ep-dialog .ep-pj-leer, .ep-pj-leer { margin: .5rem 0; padding: .8rem; border: 1px dashed var(--fw-border-str); border-radius: var(--fw-radius); font-size: .82rem; color: var(--fw-text-2); text-align: center; }

/* ─── Projektliste ─────────────────────────────────────────────────────── */
.ep-pj-leiste { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; position: sticky; top: 0; z-index: 1; background: var(--fw-bg); padding-bottom: .2rem; }
.ep-pj-suche { flex: 1 1 14rem; width: auto; min-width: 0; }
.ep-pj-sort { flex: 0 0 auto; width: auto; }
.ep-pj-neu { flex: 0 0 auto; }
.ep-pj-musterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; padding: .5rem .7rem; border-radius: var(--fw-radius); background: var(--fw-accent-sf); font-size: .82rem; }
.ep-pj-musterzeile[hidden] { display: none; }
.ep-pj-musterzeile span { flex: 1 1 14rem; }
.ep-pj-liste, .ep-pj-psliste { display: flex; flex-direction: column; gap: .4rem; }
.ep-pj-zeile { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border: 1px solid var(--fw-border); border-radius: var(--fw-radius-lg, 10px); background: var(--fw-bg); }
.ep-pj-zeile:hover { border-color: var(--fw-border-str); }
.ep-pj-zeile.ist-offen { border-color: var(--fw-accent); box-shadow: inset 3px 0 0 var(--fw-accent); }
.ep-pj-zeile.ist-neu { animation: ep-pj-neu 1.6s ease-out; }
@keyframes ep-pj-neu { from { background: var(--fw-accent-sf); } to { background: var(--fw-bg); } }
.ep-pj-zeile-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.ep-pj-zeile-name { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ep-pj-zeile-name strong { font-size: .92rem; overflow-wrap: anywhere; }
.ep-pj-zeile-meta { font-size: .78rem; color: var(--fw-text); overflow-wrap: anywhere; }
.ep-pj-zeile-meta.ist-leise { color: var(--fw-text-2); }
.ep-pj-marke { padding: .05rem .45rem; border-radius: 999px; background: var(--fw-accent); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.ep-pj-marke.ist-status { background: var(--fw-surface); color: var(--fw-text-2); border: 1px solid var(--fw-border); font-weight: 600; }
.ep-pj-zeile-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; flex: 0 0 auto; align-self: flex-start; }
.ep-pj-zeile-knoepfe .ep-btn { padding: .35rem .8rem; font-size: .82rem; }
.ep-pj-zeile-aktionen { display: flex; flex-wrap: wrap; gap: .1rem; margin: .25rem 0 -.2rem -.45rem; }
.ep-pj-zeile-aktionen .ep-btn { padding: .2rem .45rem; font-size: .76rem; min-height: 0; }
.ep-dialog .ep-pj-fusshinweis { margin: .7rem 0 0; font-size: .75rem; }

/* ─── Firma ────────────────────────────────────────────────────────────── */
.ep-pj-firmakarte { display: flex; align-items: center; gap: .7rem; padding: .55rem .65rem; border: 1px solid var(--fw-border); border-radius: var(--fw-radius); background: var(--fw-surface); }
.ep-pj-firmalogo { max-width: 6.5rem; max-height: 2.8rem; object-fit: contain; flex: 0 0 auto; background: #fff; border-radius: 4px; padding: 2px; }
.ep-pj-firmatext { display: flex; flex-direction: column; gap: .1rem; min-width: 0; font-size: .8rem; color: var(--fw-text-2); }
.ep-pj-firmatext strong { color: var(--fw-text); font-size: .86rem; overflow-wrap: anywhere; }
.ep-pj-firmatext span { overflow-wrap: anywhere; }
.ep-pj-logozeile { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.ep-pj-logovorschau { display: flex; align-items: center; justify-content: center; width: 11rem; height: 4.5rem; padding: .35rem; border: 1px solid var(--fw-border-str); border-radius: var(--fw-radius); background: #fff; }
.ep-pj-logovorschau img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ep-pj-logovorschau.ist-leer { border-style: dashed; background: transparent; color: var(--fw-text-2); font-size: .78rem; }
.ep-pj-logo .ep-pj-knopfzeile { margin: 0; }
.ep-pj-auch { display: flex; align-items: flex-start; gap: .45rem; margin-top: .6rem; font-size: .84rem; cursor: pointer; }
.ep-pj-auch input { margin-top: .2rem; }
.ep-pj-einsetzen { margin-top: .5rem; }

/* ─── Plannummer je Etage ──────────────────────────────────────────────── */
.ep-pj-etagen { display: grid; gap: .25rem; margin-top: .4rem; }
.ep-pj-etage { display: grid; grid-template-columns: minmax(0, 1.2fr) 5.5rem minmax(0, 1.6fr); gap: .5rem; align-items: center; font-size: .82rem; }
.ep-pj-etage.ist-kopf { font-size: .72rem; font-weight: 700; color: var(--fw-text-2); text-transform: uppercase; letter-spacing: .04em; }
.ep-pj-etage-name { overflow-wrap: anywhere; }
.ep-pj-kuerzel.ep-input { padding: .3rem .4rem; font-size: .9rem; text-transform: uppercase; }
.ep-pj-nummer { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; overflow-wrap: anywhere; }

/* ─── Änderungsverzeichnis ─────────────────────────────────────────────── */
.ep-pj-revliste { display: grid; gap: 0; margin-bottom: .4rem; border: 1px solid var(--fw-border); border-radius: var(--fw-radius); overflow: hidden; }
.ep-pj-revliste .ep-pj-leer { margin: 0; border: 0; }
.ep-pj-rev { display: grid; grid-template-columns: 3.5rem 6.2rem minmax(0, 1fr) minmax(0, 8rem) auto; gap: .5rem; align-items: center; padding: .4rem .6rem; font-size: .82rem; border-top: 1px solid var(--fw-border); }
.ep-pj-rev:first-child { border-top: 0; }
.ep-pj-rev.ist-kopf { background: var(--fw-surface); font-size: .72rem; font-weight: 700; color: var(--fw-text-2); text-transform: uppercase; letter-spacing: .04em; }
.ep-pj-rev-text, .ep-pj-rev-von { overflow-wrap: anywhere; }
.ep-pj-rev-knoepfe { display: flex; gap: .15rem; justify-content: flex-end; }
.ep-pj-rev-knoepfe .ep-btn { padding: .2rem .45rem; font-size: .76rem; }
.ep-pj-rev-dialog .ep-pj-h3 { margin-top: 1rem; }

/* ─── Planstand ansehen ────────────────────────────────────────────────── */
.ep-pj-reiter { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
.ep-pj-reiter[hidden] { display: none; }
.ep-pj-reiterknopf[aria-selected="true"] { background: var(--fw-accent-sf); color: var(--fw-accent); font-weight: 600; }
.ep-pj-buehne { overflow: auto; max-height: min(64vh, 44rem); border: 1px solid var(--fw-border); border-radius: var(--fw-radius); background: #fff; }
.ep-pj-buehne img { display: block; width: 100%; height: auto; max-width: none; }
.ep-pj-buehne.ist-ganz { display: flex; justify-content: center; overflow: hidden; }
.ep-pj-buehne.ist-ganz img { width: auto; max-width: 100%; max-height: min(62vh, 43rem); }
.ep-pj-buehne .ep-pj-leer { margin: 1rem; }
.ep-pj-zoom { justify-content: flex-end; }

/* ─── Panel „Projekt und Daten“ ────────────────────────────────────────── */
.ep-pj-panelkopf { margin-bottom: .7rem; padding: .5rem .6rem; border-radius: var(--fw-radius); background: var(--fw-accent-sf); font-size: .8rem; }
.ep-pj-panelkopf-text { display: block; color: var(--fw-text); }
.ep-pj-panelkopf .ep-pj-knopfzeile { margin: .4rem 0 0; }
.ep-pj-panelkopf > .ep-btn { margin-top: .4rem; }
.ep-pj-panelfirma { margin: -.3rem 0 .7rem; }
.ep-pj-panelfirma .ep-pj-firmakarte { margin-bottom: .1rem; flex-direction: column; align-items: flex-start; gap: .4rem; }
.ep-pj-panelfirma .ep-pj-firmalogo { max-width: 9rem; max-height: 3rem; }
.ep-pj-panelfirma .ep-pj-knopfzeile { margin-bottom: 0; }
#ep-projekt .ep-pj-knopfzeile .ep-btn { font-size: .78rem; padding: .3rem .55rem; }
.ep-input.ep-pj-nurlesen { background: var(--fw-surface); color: var(--fw-text-2); }

/* ─── Schmal (Handy) und Finger ────────────────────────────────────────── */
@media (max-width: 40rem) {
    .ep-dialog.ep-pj-dialog { width: calc(100vw - 1rem); max-width: none; }
    .ep-pj-dialog .ep-pj-inhalt { max-height: 92vh; max-height: 92dvh; padding: .9rem .85rem; }
    .ep-pj-raster { grid-template-columns: minmax(0, 1fr); }
    .ep-pj-zeile { flex-direction: column; align-items: stretch; }
    .ep-pj-zeile-knoepfe { justify-content: flex-start; align-self: stretch; margin-top: .2rem; }
    .ep-pj-zeile-knoepfe .ep-btn { flex: 1 1 auto; }
    .ep-pj-sort { flex: 1 1 auto; }
    .ep-pj-rev { grid-template-columns: 3rem minmax(0, 1fr); }
    .ep-pj-rev.ist-kopf { display: none; }
    .ep-pj-rev-text, .ep-pj-rev-von, .ep-pj-rev-knoepfe { grid-column: 1 / -1; }
    .ep-pj-rev-knoepfe { justify-content: flex-start; }
    .ep-pj-etage { grid-template-columns: minmax(0, 1fr) 4.5rem; }
    .ep-pj-etage .ep-pj-nummer { grid-column: 1 / -1; margin-bottom: .3rem; }
    .ep-pj-etage.ist-kopf span:last-child { display: none; }
    .ep-pj-fuss .ep-btn { flex: 1 1 auto; }
    .ep-pj-fuss-platz { display: none; }
}
@media (pointer: coarse) {
    .ep-pj-dialog .ep-btn, .ep-pj-knopf { min-height: 2.75rem; }
    .ep-pj-zeile-knoepfe .ep-btn, .ep-pj-zeile-aktionen .ep-btn, .ep-pj-rev-knoepfe .ep-btn, #ep-projekt .ep-pj-knopfzeile .ep-btn { min-height: 2.5rem; padding-left: .7rem; padding-right: .7rem; }
    .ep-pj-dialog .ep-input, .ep-pj-dialog .ep-select { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) { .ep-pj-zeile.ist-neu { animation: none; } }