/* © 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 — Startdialog, Zeichenblatt-Wände und „Als PDF speichern“
   (Teil 63, seit 19.10.2026). Farben und Maße aus den Tokens von stil.css
   und studio.css, hell wie dunkel. Sachlich: eine Karte, drei Wege als
   Zeilen mit Symbol, der erste hervorgehoben. */
@media screen {

/* ─── Overlay über der Arbeitsfläche (.ep-grid) ───────────────────────── */
.ep-grid:has(> .ep-sd) { position: relative; }
.ep-sd {
    position: absolute; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
    overflow-y: auto; overscroll-behavior: contain;
    background: color-mix(in srgb, var(--fw-surface-2, var(--fw-bg)) 72%, transparent);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.ep-sd-karte {
    position: relative; width: 100%; max-width: 40rem; margin: auto;
    padding: 1.4rem 1.4rem 1rem;
    border: 1px solid var(--ep-linie, var(--fw-border)); border-radius: 16px;
    background: var(--fw-bg); color: var(--fw-text);
    box-shadow: 0 1px 2px #14283f12, 0 24px 60px -24px #0b1c4066;
}
.ep-sd-karte:focus, .ep-sd-karte:focus-visible { outline: none; }   /* Fokus der Karte selbst: nur für Vorleseprogramme */
.ep-sd-titel { margin: 0 2.5rem .3rem 0; font-size: 1.2rem; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; color: var(--fw-text); }
.ep-sd-satz { margin: 0 0 1rem; font-size: var(--ep-t-m, .875rem); line-height: 1.5; color: var(--ep-leise, var(--fw-text-2)); }
.ep-sd-zu {
    position: absolute; top: .7rem; right: .7rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; padding: 0;
    border: 1px solid transparent; border-radius: var(--ep-r, 8px);
    background: none; color: var(--fw-text-2); cursor: pointer;
}
.ep-sd-zu:hover { background: var(--fw-surface); color: var(--fw-text); }
.ep-sd-zu:focus-visible { outline: 2px solid var(--fw-accent); outline-offset: 1px; }
.ep-sd-zu svg { width: 1.15rem; height: 1.15rem; }

/* ─── Die drei Wege ────────────────────────────────────────────────────── */
.ep-sd-wege { display: flex; flex-direction: column; gap: .6rem; }
.ep-sd-weg {
    display: flex; align-items: center; gap: .95rem; width: 100%;
    min-height: 4.25rem; padding: .8rem 1rem;
    border: 1px solid var(--fw-border-str, var(--fw-border)); border-radius: var(--ep-r-lg, 12px);
    background: var(--fw-bg); color: var(--fw-text);
    font: inherit; text-align: left; cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.ep-sd-weg:hover { border-color: var(--fw-accent); background: color-mix(in srgb, var(--fw-bg) 94%, var(--fw-accent)); }
.ep-sd-weg:focus-visible { outline: 2px solid var(--fw-accent); outline-offset: 2px; }
.ep-sd-ikon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 2.75rem; height: 2.75rem; border-radius: 10px;
    background: var(--fw-accent-sf); color: var(--fw-accent);
}
.ep-sd-ikon svg { width: 1.5rem; height: 1.5rem; }
.ep-sd-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ep-sd-text strong { font-size: .98rem; font-weight: 600; line-height: 1.3; }
.ep-sd-text small { font-size: var(--ep-t-s, .8125rem); line-height: 1.45; color: var(--ep-leise, var(--fw-text-2)); }
/* Der erste Weg trägt die Akzentfarbe der Leiste („Grundriss laden“). */
.ep-sd-weg--haupt { border-color: var(--fw-accent); box-shadow: inset 3px 0 0 var(--fw-accent); }
.ep-sd-weg--haupt .ep-sd-ikon { background: var(--fw-accent); color: var(--fw-bg); }

.ep-sd-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .1rem .5rem; margin: .85rem 0 0; font-size: var(--ep-t-s, .8125rem); color: var(--ep-leise, var(--fw-text-2)); }
.ep-sd-link { min-height: 2rem; padding: .2rem .35rem; border: 0; background: none; color: var(--fw-accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--fw-accent) 40%, transparent); }
.ep-sd-link:hover { text-decoration-color: currentColor; }
.ep-sd-link:focus-visible { outline: 2px solid var(--fw-accent); outline-offset: 1px; border-radius: 4px; }

/* ─── Datei hineinziehen ───────────────────────────────────────────────── */
.ep-sd-ziel { display: none; }
.ep-sd.ist-ziel .ep-sd-karte { outline: 2px dashed var(--fw-accent); outline-offset: 6px; }
.ep-sd.ist-ziel .ep-sd-ziel {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 1rem; border-radius: 16px; text-align: center;
    background: color-mix(in srgb, var(--fw-bg) 90%, var(--fw-accent)); color: var(--fw-accent);
    font-weight: 600; pointer-events: none;
}

/* ─── Am Finger und auf schmalen Schirmen ─────────────────────────────── */
.ep-app.ist-touch .ep-sd-weg { min-height: 4.75rem; }
.ep-app.ist-touch .ep-sd-maus { display: none; }   /* Ziehen und Ablegen gibt es am Finger nicht */
.ep-app.ist-touch .ep-sd-zu { width: 2.75rem; height: 2.75rem; top: .45rem; right: .45rem; }
.ep-app.ist-touch .ep-sd-link { min-height: 2.75rem; }
@media (max-width: 37.5rem) {
    .ep-sd { padding: .75rem; align-items: flex-start; }
    .ep-sd-karte { padding: 1.1rem 1rem .8rem; border-radius: 14px; }
    .ep-sd-titel { font-size: 1.1rem; }
    .ep-sd-satz { margin-bottom: .8rem; }
    .ep-sd-weg { gap: .75rem; padding: .7rem .8rem; }
    .ep-sd-ikon { width: 2.4rem; height: 2.4rem; }
    .ep-sd-ikon svg { width: 1.35rem; height: 1.35rem; }
}
/* Breite Fenster (Rechner, Tablet quer): Karte oben unter der Leiste, die
   drei Wege nebeneinander — so steht alles auch bei 1280 × 720 im Blick. */
@media (min-width: 60rem) {
    .ep-app:not(.ist-handy) .ep-sd { align-items: flex-start; padding-top: 1rem; }
    .ep-app:not(.ist-handy) .ep-sd-karte { max-width: 60rem; margin: 0 auto auto; padding: 1rem 1.2rem .55rem; }
    .ep-app:not(.ist-handy) .ep-sd-titel { font-size: 1.12rem; margin-bottom: .15rem; }
    .ep-app:not(.ist-handy) .ep-sd-satz { margin-bottom: .75rem; }
    .ep-app:not(.ist-handy) .ep-sd-wege { flex-direction: row; align-items: stretch; }
    /* Symbol und Titel in einer Zeile, die Erklärung darunter */
    .ep-app:not(.ist-handy) .ep-sd-weg { flex: 1 1 0; display: grid; grid-template-columns: auto 1fr; align-items: center;
        column-gap: .7rem; row-gap: .35rem; min-height: 0; padding: .75rem .85rem; }
    .ep-app:not(.ist-handy) .ep-sd-weg .ep-sd-text { display: contents; }
    .ep-app:not(.ist-handy) .ep-sd-weg .ep-sd-text strong { grid-column: 2; }
    .ep-app:not(.ist-handy) .ep-sd-weg .ep-sd-text small { grid-column: 1 / -1; align-self: start; }
    .ep-app:not(.ist-handy) .ep-sd-ikon { width: 2.3rem; height: 2.3rem; }
    .ep-app:not(.ist-handy) .ep-sd-ikon svg { width: 1.3rem; height: 1.3rem; }
    .ep-app:not(.ist-handy) .ep-sd-mehr { display: none; }
    .ep-app:not(.ist-handy) .ep-sd-weg--haupt { box-shadow: inset 0 3px 0 var(--fw-accent); }
    .ep-app:not(.ist-handy) .ep-sd-fuss { margin-top: .45rem; }
}
/* Flach (Handy quer, niedrige Fenster): Wege nebeneinander, kürzer. */
@media (max-height: 31.25rem) and (min-width: 37.51rem) {
    .ep-sd { align-items: flex-start; padding: .6rem; }
    .ep-sd-karte { max-width: 52rem; padding: .9rem 1rem .6rem; }
    .ep-sd-satz { margin-bottom: .6rem; }
    .ep-sd-wege { flex-direction: row; }
    .ep-sd-weg { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .65rem .75rem; }
    .ep-sd-weg--haupt { box-shadow: inset 0 3px 0 var(--fw-accent); }
    .ep-sd-text small { font-size: var(--ep-t-xs, .75rem); }
}

/* ─── Kopfleiste mit „Grundriss laden (Bild/PDF)“ und „Als PDF speichern“ ──
   Am Rechner ab 78rem eine Zeile, solange alles passt, sonst zwei; Knöpfe
   behalten ihre Breite. Unter 90rem werden „Grundriss
   (Bild/PDF)“, „Beispiel“ und „Drucken“ kürzer (Drucker-Symbol), „Projekte“
   steht nur als Ordner mit Zahl — die Namen bleiben als aria-label.
   Darunter zwei Zeilen wie bisher unter 68rem: oben Bauvorhaben und die
   Hauptknöpfe, unten Etagen, Vollbild, Beispielplan. Am Handy und Tablet
   steht die Leiste im Menü ⋯ (handy.css) — dort greift nichts davon. */
#ep-btn-pdf, #ep-btn-drucken { display: inline-flex; align-items: center; gap: .4rem; }
#ep-btn-bild, #ep-btn-muster { gap: 0; }   /* Wortabstände stehen als geschützte Leerzeichen im Text */
#ep-btn-pdf svg { width: 1.1rem; height: 1.1rem; color: var(--fw-accent); }
#ep-btn-drucken .ep-bk-ikon { display: none; }
/* Korrektur 20.10.2026 (Endprüfung): keine erzwungene Einzeiligkeit mehr —
   mit mehreren Etagen lief die Leiste sonst rechts aus dem Planer. Die
   Leiste bricht um, wenn es nicht passt; das Feld Bauvorhaben rechnet für
   den Umbruch nur mit 11,5rem und füllt dann den Rest der Zeile. */
@media (min-width: 78.01rem) {
    .ep-app:not(.ist-handy):not(.ist-tablet) .ep-bar { flex-wrap: wrap; }
    .ep-app:not(.ist-handy):not(.ist-tablet) .ep-bar > :is(.ep-btn, .ep-pj-knopf) { flex: 0 0 auto; white-space: nowrap; }
    .ep-app:not(.ist-handy):not(.ist-tablet) .ep-bar .ep-projekt {
        flex: 1 1 clamp(11.5rem, var(--ep-projekt-b, 11.5rem), 24rem); min-width: 11.5rem; max-width: 24rem; }
}
/* Etagen: bei vielen Etagen umbrechen statt nach rechts hinaus oder in
   einen verdeckten Rollbereich (gilt am Rechner, Handy/Tablet unverändert). */
.ep-app:not(.ist-handy):not(.ist-tablet) .ep-bar .ep-etagen-feld { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.ep-app:not(.ist-handy):not(.ist-tablet) .ep-bar .ep-etagen { flex: 0 1 auto; flex-wrap: wrap; overflow: visible; max-width: 100%; }
@media (min-width: 78.01rem) and (max-width: 89.99rem) {
    .ep-app:not(.ist-handy):not(.ist-tablet) :is(#ep-btn-bild, #ep-btn-muster) .ep-bk-lang { display: none; }
    .ep-app:not(.ist-handy):not(.ist-tablet) .ep-pj-knopf .ep-pj-knopf-text { display: none; }   /* Ordner und Zahl bleiben */
    .ep-app:not(.ist-handy):not(.ist-tablet) #ep-btn-drucken { min-width: var(--ep-h); padding-left: .45rem; padding-right: .45rem; }
    .ep-app:not(.ist-handy):not(.ist-tablet) #ep-btn-drucken .ep-bk-ikon { display: block; width: 1.15rem; height: 1.15rem; }
    .ep-app:not(.ist-handy):not(.ist-tablet) #ep-btn-drucken .ep-bk-text { display: none; }
}
@media (max-width: 78rem) {
    .ep-projekt { order: 1; flex: 1 1 max(10rem, var(--ep-projekt-b, 10rem)); max-width: 100%; }
    .ep-pj-knopf { order: 1; }
    #ep-btn-bild, #ep-btn-pdf { order: 2; }
    #ep-btn-drucken { order: 3; }
    #ep-btn-ausgabe { order: 4; }
    #ep-btn-hilfe { order: 5; }
    .ep-etagen-feld { order: 6; flex: 1 1 55%; }
    #ep-btn-vollbild { order: 7; }
    #ep-btn-muster { order: 8; }
    .ep-bar > .ep-bar-spacer, .ep-bar > .ep-bar-trenner { display: none; }
}
/* Tablet hochkant: Grundriss und Drucken stehen nur als Zeichen in der
   oberen Leiste (tablet.css) — „Als PDF“ behält seine Schrift. */
@media (max-width: 50rem) {
    .ep-app.ist-arbeit.ist-tablet .ep-hk-tab.ep-hk-pdf span { display: inline; }
}
.ep-sd-pdfhinweis { align-self: center; font-size: var(--ep-t-s, .8125rem); color: var(--ep-leise, var(--fw-text-2)); white-space: nowrap; }
.ep-druck-toolbar .ep-sd-pdfhinweis { color: #e3ebf5; font-weight: 500; }   /* die Druckleiste ist immer dunkel */
@media (max-width: 60rem) { .ep-sd-pdfhinweis { white-space: normal; max-width: 14rem; line-height: 1.3; } }

}

/* Zeichenblatt: „Grundriss grau“ im Plansatz dämpft auch die gezeichneten Wände. */
.ps-grau .ep-druckplan .ep-zb-waende { opacity: .5; }

/* Handy und Tablet, Vorschau auf der Seite: Der Plan fängt dort keinen
   Finger, die Knöpfe des Leerzustands wären nur Bild — und lägen unter
   „Planer öffnen“. Sie fallen weg; der Startdialog kommt mit dem Planer. */
.ep-app:is(.ist-handy, .ist-tablet):not(.ist-arbeit) .ep-leer-knoepfe { display: none; }
/* Leerzustand am Handy und Tablet: kein Ziehen und Ablegen, kein Knopf
   „oben“ — der Hinweis darauf entfällt (Korrektur Runde 3). */
.ep-app:is(.ist-handy, .ist-tablet) .ep-leer-maus { display: none; }
/* Startdialog: der Außenbereich-Link steht in derselben Zeile wie die
   anderen Links (aussenbereich.css gibt ihm sonst einen Abstand nach oben). */
.ep-sd-fuss .ep-sd-aussen { margin-top: 0; }