/* © 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 fürs Tablet (Teil 62, seit 27.09.2026).
   Dieselbe Hülle wie am Handy (handy.css: Vorschau auf der Seite,
   Arbeitsmodus, obere Leiste, Zoom, Menü), hier in der Fassung für die
   Breite. Alles hängt an Klassen, die nur 62-handy.js setzt: ist-tablet
   (Fingerbedienung bis 1400 px Kantenlänge), ist-tquer (quer), dazu
   ist-arbeit, hpal-offen, hwerkzeug-an. Am Rechner greift nichts davon.

   Aufteilung im Arbeitsmodus:
   · oben eine Leiste (Schließen, Etage, Symbole, Details · Grundriss,
     Drucken, Rückgängig, Wiederholen, Menü)
   · quer: Symbole als Spalte links, hoch: als Leiste über dem Plan —
     beide bleiben offen, bis man sie wegklappt
   · Details und Menü als Spalte von rechts über dem Plan
   · ein laufendes Werkzeug zeigt Hinweis und „Fertig“ als Pille unten. */
@media screen {

/* ─── Seite: Vorschau mit „Planer öffnen“ ────────────────────────────── */
.ep-app.ist-tablet:not(.ist-arbeit) { height: auto; min-height: 0; }
.ep-app.ist-tablet .ep-workflow { display: none; }
.ep-app.ist-tablet .ep-studio-link { margin-left: auto; }
.ep-app.ist-tablet:not(.ist-arbeit) .ep-plan { height: min(62vh, 36rem); height: min(62svh, 36rem); min-height: 18rem; }
.ep-app.ist-tablet:not(.ist-arbeit) .ep-hstart { justify-content: center; background: color-mix(in srgb, var(--fw-bg) 35%, transparent); }
.ep-app.ist-tablet:not(.ist-arbeit) .ep-hs-satz { padding: .2rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--fw-bg) 90%, transparent); }
.ep-app.ist-tablet:not(.ist-arbeit) .ep-muster { flex-wrap: nowrap; }
.ep-app.ist-tablet:not(.ist-arbeit) .ep-muster span { flex: 1 1 auto; min-width: 0; }
.ep-app.ist-tablet:not(.ist-arbeit) .ep-muster .ep-btn { flex: 0 0 auto; }

/* ─── Arbeitsmodus ───────────────────────────────────────────────────── */
.ep-app.ist-arbeit.ist-tablet { --ep-hk-h: 3.5rem; --ep-t-seite: 21rem; }
.ep-app.ist-arbeit.ist-tablet .ep-hk {
    gap: .3rem;
    padding-left: calc(.45rem + env(safe-area-inset-left));
    padding-right: calc(.45rem + env(safe-area-inset-right));
}
.ep-app.ist-arbeit.ist-tablet :is(.ep-hk-quer, .ep-hk-tab) { display: inline-flex; padding: 0 .75rem; }
.ep-hk-tab { display: none; }
.ep-app.ist-arbeit.ist-tablet .ep-hk-etage { max-width: 14rem; margin-right: .35rem; }
.ep-app.ist-arbeit.ist-tablet .ep-hk-tab + .ep-hk-kn:not(.ep-hk-tab) { margin-left: .35rem; }
/* Schmale Tablets hochkant: Grundriss und Drucken nur als Zeichen. */
@media (max-width: 50rem) {
    .ep-app.ist-arbeit.ist-tablet .ep-hk-tab { padding: 0 .5rem; }
    .ep-app.ist-arbeit.ist-tablet .ep-hk-tab span { display: none; }
}

/* Raster: Symbole | Plan. Die Spalte der Symbole ist „auto“ — zugeklappt
   fällt sie auf null, der Plan bekommt die ganze Breite. */
.ep-app.ist-arbeit.ist-tablet > .ep-grid { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.ep-app.ist-arbeit.ist-tablet .ep-mitte { grid-column: 2; grid-row: 1; order: 0; }
.ep-app.ist-arbeit.ist-tablet .ep-side--links { display: none; }
.ep-app.ist-arbeit.ist-tablet .ep-side--links .ep-panel-title { display: none; }

/* Quer: Symbole als Spalte links */
.ep-app.ist-arbeit.ist-tablet.ist-tquer.hpal-offen .ep-side--links {
    display: flex; flex-direction: column; grid-column: 1; grid-row: 1; order: 0;
    width: 15.5rem; min-height: 0; max-height: none; overflow: hidden;
    border: 0; border-right: 1px solid var(--ep-linie); border-radius: 0; background: var(--fw-bg);
}
.ep-app.ist-arbeit.ist-tquer .ep-side--links .ep-side-kopf { flex: 0 0 auto; display: block; position: static; padding: .6rem .6rem .35rem; border-bottom: 0; }
.ep-app.ist-arbeit.ist-tquer .ep-suchzeile { display: grid; gap: .3rem; }
.ep-app.ist-arbeit.ist-tquer .ep-suchzeile .ep-input { width: 100%; min-width: 0; font-size: 1rem; }
.ep-app.ist-arbeit.ist-tquer .ep-suchzeile .ep-check { margin: 0; white-space: normal; }
.ep-app.ist-arbeit.ist-tquer .ep-bereiche { flex: 0 0 auto; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .3rem; padding: .15rem .6rem .4rem; scrollbar-width: none; }
.ep-app.ist-arbeit.ist-tquer .ep-bereiche[hidden] { display: none; }
.ep-app.ist-arbeit.ist-tquer .ep-bereiche .ep-bereich { flex: 0 0 auto; }
.ep-app.ist-arbeit.ist-tquer .ep-side--links.ist-zu #ep-palette { display: block !important; }
.ep-app.ist-arbeit.ist-tquer .ep-side--links.ist-zu .ep-bereiche:not([hidden]) { display: flex !important; }
.ep-app.ist-arbeit.ist-tquer .ep-side--links #ep-palette { flex: 1 1 auto; min-height: 0; padding: .1rem .6rem .9rem; }

/* Hoch: Symbole als Leiste über dem Plan (wie bisher am Tablet hoch) */
.ep-app.ist-arbeit.ist-tablet:not(.ist-tquer) > .ep-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.ep-app.ist-arbeit.ist-tablet:not(.ist-tquer) .ep-mitte { grid-column: 1; grid-row: 2; }
.ep-app.ist-arbeit.ist-tablet:not(.ist-tquer).hpal-offen .ep-side--links {
    display: block; grid-column: 1; grid-row: 1; order: 0; min-width: 0;
    border: 0; border-bottom: 1px solid var(--ep-linie); border-radius: 0; background: var(--fw-bg);
}
.ep-app.ist-arbeit.ist-tablet:not(.ist-tquer) .ep-side--links .ep-side-kopf { padding-top: .5rem; }
.ep-app.ist-arbeit.ist-tablet:not(.ist-tquer) .ep-suchzeile .ep-input { font-size: 1rem; }
.ep-app.ist-arbeit.ist-tablet:not(.ist-tquer) .ep-side--links.ist-zu #ep-palette { display: flex !important; }
.ep-app.ist-arbeit.ist-tablet:not(.ist-tquer) .ep-side--links.ist-zu .ep-bereiche:not([hidden]) { display: flex !important; }

/* Details: Spalte von rechts über dem Plan */
.ep-app.ist-arbeit.ist-tablet .ep-side--rechts:not(.ist-offen) { display: none; }
.ep-app.ist-arbeit.ist-tablet .ep-side--rechts.ist-offen {
    display: block; position: absolute; z-index: 45; top: 0; bottom: 0; right: 0; left: auto;
    width: var(--ep-t-seite); max-width: 60%; max-height: none;
    overflow-y: auto; overscroll-behavior: contain;
    border: 0; border-left: 1px solid var(--ep-linie); border-radius: 0;
    background: var(--fw-bg); box-shadow: -8px 0 28px -12px #14283f40; transition: none;
}
.ep-app.ist-arbeit.ist-tablet .ep-side--rechts .ep-panel-title::before { display: none; }
.ep-app.ist-arbeit.ist-tablet .ep-side--rechts .ep-schublade-kn { display: none; }
.ep-app.ist-arbeit.ist-tablet:has(.ep-side--rechts.ist-offen) .ep-hzoom { right: calc(var(--ep-t-seite) + .5rem); }

/* Menü: Spalte von rechts, der Plan bleibt links sichtbar */
.ep-app.ist-arbeit.ist-tablet .ep-hmenue:not([hidden]) {
    left: auto; right: 0; width: 26rem; max-width: 100%;
    border-left: 1px solid var(--ep-linie); box-shadow: -8px 0 28px -12px #14283f55;
}

/* Laufendes Werkzeug: Hinweis und „Fertig“ als Pille unten in der Mitte */
.ep-app.ist-arbeit.ist-tablet .ep-hdock { display: none; }
.ep-app.ist-arbeit.ist-tablet.hwerkzeug-an .ep-hdock {
    display: flex; position: absolute; z-index: 50; left: 50%; bottom: calc(.75rem + env(safe-area-inset-bottom));
    transform: translateX(-50%); width: max-content; max-width: min(42rem, calc(100% - 9rem));
    padding: .3rem .3rem .3rem 1rem; border: 1px solid var(--ep-linie); border-radius: 999px;
    background: color-mix(in srgb, var(--fw-bg) 94%, transparent); box-shadow: var(--ep-schatten-schwebe);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); touch-action: manipulation;
}
.ep-app.ist-arbeit.ist-tablet .ep-hdock .ep-hd-kn { display: none; }
.ep-app.ist-arbeit.ist-tablet .ep-hd-mitte { gap: .8rem; }
.ep-app.ist-arbeit.ist-tablet .ep-hd-hinweis { font-size: var(--ep-t-s); color: var(--fw-text); text-align: left; }
.ep-app.ist-arbeit.ist-tablet .ep-hd-fertig { box-shadow: 0 6px 18px -6px #0057b8a0; }

@media (prefers-reduced-motion: no-preference) {
    .ep-app.ist-arbeit.ist-tablet .ep-side--rechts.ist-offen,
    .ep-app.ist-arbeit.ist-tablet .ep-hmenue:not([hidden]) { animation: ep-t-rechts .18s ease-out both; }
}
@keyframes ep-t-rechts { from { transform: translateX(14px); opacity: .6; } to { transform: none; opacity: 1; } }
}
@media print { .ep-hk-tab { display: none !important; } }