/* Fachwerte · Steckdosenplaner Studio · September 2026
   Bildschirmgestaltung; Zeichenkoordinaten und Drucklayout bleiben unabhängig.

   Aufbau: erst die Maße und Farben als Tokens, dann der Arbeitsrahmen (die
   App füllt beim Arbeiten den Bildschirm), dann die Leisten von oben nach
   unten, zuletzt Tablet und Bewegung. stil.css trägt die Grundformen, diese
   Datei legt das Erscheinungsbild darüber. */
@media screen {

/* ─── Tokens ─────────────────────────────────────────────────────────────── */
.ep-app, .ep-dialog, .ep-intro, .ep-tipp {
    --ep-h: 2.25rem;               /* Knopfhöhe */
    --ep-h-klein: 2rem;
    --ep-h-touch: 2.75rem;         /* 44 px Tippziel */
    --ep-r: 8px;
    --ep-r-lg: 12px;
    --ep-t-xs: .75rem;             /* kleinste Bedienschrift: 12 px */
    --ep-t-s: .8125rem;
    --ep-t-m: .875rem;
    --ep-leise: var(--fw-text-2);  /* Nebentext, Kontrast > 4,5:1 */
    --ep-linie: var(--fw-border);
    --ep-flaeche: var(--fw-surface);
    --ep-kopf: #14283f;            /* dunkler Studiokopf */
    --ep-kopf-text: #d7e2ef;
    --ep-kopf-leise: #a9bbd0;
    --ep-kopf-akzent: #9cc6ff;
    --ep-stern: #a86b00;
    --ep-schatten: 0 1px 2px #14283f0f, 0 10px 30px -14px #14283f40;
    --ep-schatten-schwebe: 0 1px 3px #14283f1a, 0 8px 24px -6px #14283f33;
    /* Nebentext der Seite (--fw-muted) liegt auf Weiß bei 3,7 : 1 — im
       Werkzeug etwas dunkler, damit er 4,5 : 1 schafft (hell wie dunkel). */
    --fw-muted: color-mix(in srgb, var(--fw-text-2) 85%, var(--fw-bg));
}

body:has(.ep-app) { background: color-mix(in srgb, var(--fw-bg) 95%, var(--fw-accent)); }

/* Arbeitsmodus: Ist das Werkzeug oben angekommen, klebt der Seitenkopf nicht
   mehr darüber — er würde Zoom und Werkzeugleiste verdecken. Die Klasse
   setzt 60-studio.js; der Kopf bleibt dabei an seinem Platz im Fluss, es
   springt also nichts. */
body.ep-arbeitsmodus .fw-header { position: relative; }

/* ─── Intro über dem Werkzeug: kompakt ───────────────────────────────────── */
.ep-intro { max-width: 110rem; padding: 1.5rem 1.5rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.ep-intro-copy { min-width: 0; }
.ep-eyebrow { display: flex; align-items: center; gap: .65rem; font-size: var(--ep-t-xs); letter-spacing: .12em; font-weight: 600; color: var(--ep-leise); margin-bottom: .6rem; }
.ep-eyebrow > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--fw-accent); box-shadow: 0 0 0 4px var(--fw-accent-sf); }
.ep-free { letter-spacing: 0; padding: .2rem .5rem; border-radius: 5px; background: var(--fw-accent-sf); color: var(--fw-accent); }
.ep-intro h1 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1.1; letter-spacing: -.045em; font-weight: 400; margin: 0 0 .55rem; }
.ep-intro h1 strong { color: var(--fw-accent); font-weight: 600; }
.ep-intro p { max-width: 62ch; font-size: var(--ep-t-m); line-height: 1.6; margin: 0; }
.ep-intro-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .7rem; font-size: var(--ep-t-xs); color: var(--ep-leise); }
.ep-intro-meta > span::before { content: '✓'; color: var(--fw-accent); margin-right: .35rem; }
.ep-intro-meta a, .ep-studio-link { color: var(--fw-accent); text-decoration: none; }
.ep-intro-meta a:hover { text-decoration: underline; }
.ep-intro-note { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.1rem; border: 1px solid var(--ep-linie); border-radius: 14px; background: color-mix(in srgb, var(--fw-bg) 75%, transparent); }
.ep-intro-note svg { width: 24px; flex: 0 0 auto; color: var(--fw-accent); }
.ep-intro-note strong { display: block; font-size: var(--ep-t-s); margin: .15rem 0 .3rem; }
.ep-intro-note span { display: block; font-size: var(--ep-t-xs); color: var(--ep-leise); line-height: 1.55; }
.ep-intro-los { display: inline-flex; align-items: center; gap: .45rem; flex: 0 0 auto; order: 3; min-height: var(--ep-h); padding: 0 1rem; border-radius: 999px; background: var(--fw-accent); color: var(--fw-bg); font-size: var(--ep-t-s); font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px -6px #0057b880; }
.ep-intro-los:hover { background: var(--fw-accent-dk); color: var(--fw-bg); }
.ep-intro-los svg { width: 1rem; height: 1rem; }

/* ─── Der Arbeitsrahmen ──────────────────────────────────────────────────
   Beim Arbeiten füllt die App den Bildschirm: die Planfläche nimmt, was
   nach Kopf, Leisten und Fuß übrig bleibt, die Seitenspalten rollen in
   sich. Unter 36rem Höhe wächst sie nicht mehr mit, dann rollt die Seite. */
.ep-app {
    max-width: 110rem;
    margin: 0 auto 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 1rem);
    height: calc(100dvh - 1rem);
    min-height: 36rem;
    border: 1px solid var(--ep-linie);
    border-radius: 16px;
    background: var(--fw-bg);
    box-shadow: var(--ep-schatten);
    overflow: hidden;
}
#ep-studio { scroll-margin-top: .5rem; }
.ep-app > * { flex: 0 0 auto; }
.ep-app > .ep-grid { flex: 1 1 auto; min-height: 0; }

/* ─── Studiokopf mit Schrittleiste ───────────────────────────────────────── */
.ep-studio-heading { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; min-height: 2.9rem; padding: .35rem .6rem .35rem 1rem; background: var(--ep-kopf); color: #fff; font-size: var(--ep-t-m); font-weight: 600; }
.ep-studio-name { display: flex; gap: .6rem; align-items: center; white-space: nowrap; }
.ep-studio-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 1px solid #ffffff38; border-radius: 7px; color: var(--ep-kopf-akzent); }
.ep-studio-icon svg { width: 1rem; height: 1rem; }
.ep-studio-heading small { margin-left: .2rem; color: var(--ep-kopf-leise); font-size: var(--ep-t-xs); letter-spacing: .12em; font-weight: 500; }
.ep-studio-link { color: var(--ep-kopf-text) !important; font-size: var(--ep-t-s); font-weight: 500; padding: .35rem .5rem; border-radius: 6px; white-space: nowrap; }
.ep-studio-link:hover { background: #ffffff14; }

.ep-workflow { display: flex; align-items: center; justify-content: center; gap: .15rem; flex: 1 1 auto; min-width: 0; padding: 0; border: 0; }
.ep-workflow button { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.1rem; padding: .2rem .8rem .2rem .3rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ep-kopf-text); font: inherit; font-size: var(--ep-t-s); cursor: pointer; white-space: nowrap; }
.ep-workflow button + button::before { content: ''; position: absolute; left: -.2rem; top: 50%; width: .25rem; height: 1px; background: #ffffff33; }
.ep-workflow .ep-wf-nr { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; border: 1px solid #ffffff40; color: var(--ep-kopf-akzent); font-size: var(--ep-t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.ep-workflow strong { font-weight: 500; }
.ep-workflow small { display: none; }
.ep-workflow button:hover { background: #ffffff14; }
/* Erledigt: Haken statt Nummer, ruhig in Hellblau. */
.ep-workflow button.ist-erledigt { color: var(--ep-kopf-leise); }
.ep-workflow button.ist-erledigt .ep-wf-nr { background: var(--ep-kopf-akzent); border-color: var(--ep-kopf-akzent); color: var(--ep-kopf); font-size: 0; }
.ep-workflow button.ist-erledigt .ep-wf-nr::before { content: '✓'; font-size: .8rem; font-weight: 700; }
/* Der nächste offene Schritt: weiße Pille. */
.ep-workflow button[aria-current="step"] { background: #fff; color: var(--ep-kopf); border-color: #fff; }
.ep-workflow button[aria-current="step"] strong { font-weight: 600; }
.ep-workflow button[aria-current="step"] .ep-wf-nr { background: var(--fw-accent); border-color: var(--fw-accent); color: #fff; }
/* Läuft gerade das Werkzeug des Schritts (etwa der Maßstab), rahmt ein
   heller Ring die Pille. */
.ep-workflow button.ist-laeuft { box-shadow: 0 0 0 2px var(--ep-kopf-akzent); }

/* ─── Kopfleiste: Bauvorhaben, Etagen, Aktionen ──────────────────────────── */
.ep-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem; background: var(--fw-bg); border: 0; border-bottom: 1px solid var(--ep-linie); border-radius: 0; }
.ep-projekt { flex: 0 1 20rem; min-width: 9rem; min-height: var(--ep-h); padding: .35rem .55rem; font-size: var(--ep-t-m); font-weight: 600; border-radius: var(--ep-r); }
.ep-bar-spacer { flex: 1 1 auto; min-width: .5rem; }
.ep-bar-trenner, .ep-wl-trenner { flex: 0 0 auto; width: 1px; height: 1.35rem; background: var(--ep-linie); margin: 0 .15rem; }
.ep-btn { min-height: var(--ep-h); padding: .35rem .8rem; font-size: var(--ep-t-s); border-radius: var(--ep-r); border-color: var(--fw-border-str); box-shadow: 0 1px 1px #14283f08; }
.ep-btn--quiet { box-shadow: none; }
.ep-btn--icon { min-width: var(--ep-h); padding: .35rem; }
.ep-btn svg { width: 1.1rem; height: 1.1rem; display: block; flex: 0 0 auto; }
#ep-btn-bild { background: var(--fw-accent); border-color: var(--fw-accent); color: var(--fw-bg); }
#ep-btn-bild:hover { background: var(--fw-accent-dk); border-color: var(--fw-accent-dk); color: var(--fw-bg); }
#ep-btn-hilfe { font-weight: 700; font-size: var(--ep-t-m); border: 1px solid var(--fw-border-str); }

/* Etagen als ruhige Pillen neben dem Bauvorhaben. */
.ep-etagen-feld { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.ep-etagen { display: flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.ep-etagen::-webkit-scrollbar { display: none; }
.ep-tab { min-height: var(--ep-h-klein); padding: .2rem .8rem; border: 1px solid var(--ep-linie); border-radius: 999px; background: var(--fw-bg); color: var(--ep-leise); font-size: var(--ep-t-s); font-weight: 500; margin: 0; }
.ep-tab:hover { background: var(--ep-flaeche); color: var(--fw-text); }
.ep-tab[aria-selected="true"] { background: var(--fw-accent-sf); color: var(--fw-accent); border-color: color-mix(in srgb, var(--fw-accent) 45%, var(--ep-linie)); font-weight: 600; margin: 0; padding: .2rem .8rem; box-shadow: none; }
.ep-tab--plus { border-style: dashed; color: var(--ep-leise); }

/* Beispielplan-Hinweis: eine schmale Zeile. */
.ep-muster { margin: 0; padding: .35rem .75rem; gap: .5rem 1rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--fw-accent) 18%, var(--ep-linie)); border-radius: 0; background: var(--fw-accent-sf); font-size: var(--ep-t-s); line-height: 1.45; }
.ep-muster .ep-btn { min-height: var(--ep-h-klein); font-size: var(--ep-t-xs); padding: .2rem .7rem; }

/* ─── Dreiteilung ────────────────────────────────────────────────────────── */
.ep-grid { grid-template-columns: 15rem minmax(0, 1fr) 17rem; grid-template-rows: minmax(0, 1fr); border: 0; border-radius: 0; }
.ep-side { max-height: none; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--fw-border-str) transparent; }
.ep-side-kopf { padding: .75rem .75rem .65rem; }
.ep-side-inhalt { padding: .75rem; }
.ep-panel-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: var(--ep-t-m); font-weight: 600; margin-bottom: .65rem; }
.ep-panel-name > span { display: block; margin-top: .15rem; font-size: var(--ep-t-xs); font-weight: 400; letter-spacing: 0; color: var(--ep-leise); }
.ep-schublade-kn { display: none; }
.ep-suchzeile { display: grid; gap: .5rem; }
.ep-input, .ep-select, .ep-textarea { border-radius: 7px; border-color: var(--fw-border-str); padding: .5rem .6rem; }
#ep-suche { background: var(--ep-flaeche); min-height: var(--ep-h); }
.ep-side-kopf .ep-check { font-size: var(--ep-t-s); align-items: center; }
.ep-check { font-size: var(--ep-t-s); }
.ep-label { font-size: var(--ep-t-xs); color: var(--ep-leise); }
.ep-gruppe { color: var(--ep-leise); font-size: var(--ep-t-xs); letter-spacing: .06em; margin: 1.1rem 0 .5rem; }
.ep-suchstatus { font-size: var(--ep-t-xs); padding: .4rem .75rem; }
.ep-bereich { font-size: var(--ep-t-xs); }
.ep-bereich-zahl { font-size: var(--ep-t-xs); }
.ep-leerhinweis, .ep-hinweis, .ep-zeile { font-size: var(--ep-t-s); }

/* Palette: Kacheln in zwei Spalten, darüber Favoriten und zuletzt benutzt. */
.ep-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.ep-pal-zelle { position: relative; display: flex; min-width: 0; }
.ep-pal { flex: 1 1 auto; min-width: 0; min-height: 4.75rem; padding: .7rem .3rem .5rem; background: var(--ep-flaeche); border: 1px solid var(--ep-linie); border-radius: 9px; gap: .25rem; font-size: var(--ep-t-xs); line-height: 1.25; color: var(--fw-text-2); }
.ep-pal svg { height: 26px; margin-bottom: 4px; }
.ep-pal:hover { border-color: var(--fw-accent); background: var(--fw-accent-sf); }
.ep-pal[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--fw-accent); background: var(--fw-accent-sf); border-color: var(--fw-accent); color: var(--fw-accent); }
.ep-pal-stern { position: absolute; top: 2px; right: 2px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ep-leise); cursor: pointer; opacity: 0; }
.ep-pal-stern::before { content: ''; position: absolute; inset: -.3rem; }   /* größere Trefferfläche */
.ep-pal-stern svg { width: .95rem; height: .95rem; display: block; }
.ep-pal-zelle:hover .ep-pal-stern, .ep-pal-zelle:focus-within .ep-pal-stern { opacity: .7; }
.ep-pal-stern:hover { opacity: 1 !important; color: var(--ep-stern); background: #ffffffb3; }
.ep-pal-stern[aria-pressed="true"] { opacity: 1; color: var(--ep-stern); }
.ep-pal-stern[aria-pressed="true"] svg path { fill: currentColor; }
.ep-app.ist-touch .ep-pal-stern { opacity: .55; }
#ep-palette.ist-gesperrt .ep-pal-stern { display: none; }
.ep-app.ist-touch .ep-pal-stern[aria-pressed="true"] { opacity: 1; }
.ep-gruppe--schnell { display: flex; align-items: center; gap: .4rem; color: var(--fw-text); }
.ep-pal-block:first-child > .ep-gruppe { margin-top: 0; }
.ep-gruppe--schnell svg { width: .85rem; height: .85rem; color: var(--ep-stern); }

/* ─── Mitte: Werkzeugleiste, Plan, Fuß ───────────────────────────────────── */
.ep-werkzeugleiste { gap: .35rem; padding: .35rem .6rem; min-height: 2.9rem; }
.ep-wl-gruppe { display: inline-flex; align-items: center; gap: 2px; }
.ep-werkzeugleiste .ep-btn { min-height: var(--ep-h-klein); padding: .25rem .4rem; }
.ep-werkzeugleiste .ep-btn--icon { min-width: var(--ep-h-klein); }
.ep-zoom-wert { min-width: 3.6rem; font-variant-numeric: tabular-nums; }
.ep-wl-feld { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--ep-t-s); color: var(--fw-text-2); white-space: nowrap; }
.ep-wl-feld input[type="range"] { width: 6rem; }
.ep-wl-ikon { display: none; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
/* Wird die Mitte schmal (Tablet quer mit beiden Spalten), bleibt die Leiste
   einzeilig: „Symbolgröße" wird zum Zeichen, der Regler etwas kürzer. */
.ep-werkzeugleiste { container-type: inline-size; }
@container (max-width: 46rem) {
    .ep-wl-lang { display: none; }
    .ep-wl-ikon { display: block; }
    .ep-wl-feld input[type="range"] { width: 4.75rem; }
    .ep-wl-trenner { margin: 0; }
}
.ep-wl-feld .ep-select { width: auto; min-height: var(--ep-h-klein); padding: .2rem 1.6rem .2rem .5rem; font-size: var(--ep-t-s); }

.ep-plan { flex: 1 1 auto; height: auto; min-height: 14rem; max-height: none; background-color: color-mix(in srgb, var(--fw-bg) 93%, var(--fw-accent)); background-image: radial-gradient(color-mix(in srgb, var(--fw-border-str) 80%, transparent) .8px, transparent .8px); background-size: 18px 18px; }
.ep-stage { box-shadow: 0 4px 30px #14283f1a; }

.ep-fuss { display: flex; align-items: center; gap: .4rem 1rem; flex-wrap: wrap; min-height: 2.3rem; padding: .3rem .75rem; border-top: 1px solid var(--ep-linie); background: var(--ep-flaeche); }
.ep-mode-hint { flex: 0 1 auto; min-width: 0; padding: 0; border: 0; background: none; font-size: var(--ep-t-s); line-height: 1.4; color: var(--fw-accent); font-weight: 500; }
.ep-mode-hint::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; margin-right: .5rem; }
.ep-status { flex: 1 1 18rem; justify-content: flex-end; padding: 0; border: 0; background: none; font-size: var(--ep-t-xs); color: var(--ep-leise); }

/* ─── Senkrechte Werkzeugleiste ──────────────────────────────────────────
   Drei Gruppen (Werkzeuge · Ebene · Fang und Ansicht). Reicht die Höhe
   nicht, stellt 60-studio.js sie zweispaltig (ist-zweispaltig); reicht
   auch das nicht, rollt sie und blendet unten aus (ist-mehr). */
.ep-vtools { top: .6rem; left: .6rem; padding: .3rem; gap: .2rem; border: 1px solid var(--ep-linie); border-radius: var(--ep-r-lg); background: color-mix(in srgb, var(--fw-bg) 95%, transparent); box-shadow: var(--ep-schatten-schwebe); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-height: calc(100% - 1.2rem); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.ep-vtools::-webkit-scrollbar { display: none; }
.ep-vt-gruppe { display: flex; flex-direction: column; gap: .2rem; }
.ep-vt-strich { height: 1px; background: var(--ep-linie); margin: .15rem .3rem; flex: 0 0 auto; }
.ep-vtools.ist-zweispaltig { display: grid; grid-template-columns: repeat(2, auto); align-content: start; }
.ep-vtools.ist-zweispaltig .ep-vt-gruppe { display: contents; }
.ep-vtools.ist-zweispaltig .ep-vt-strich { grid-column: 1 / -1; }
.ep-vtools.ist-mehr { -webkit-mask-image: linear-gradient(#000 calc(100% - 1.6rem), transparent); mask-image: linear-gradient(#000 calc(100% - 1.6rem), transparent); }
.ep-vt-kn { width: var(--ep-h); height: var(--ep-h); flex-shrink: 0; border-radius: 8px; color: var(--fw-text-2); }
.ep-vt-kn svg { width: 1.25rem; height: 1.25rem; }
.ep-vt-kn:hover { background: var(--fw-accent-sf); color: var(--fw-accent); }
.ep-vt-kn[aria-pressed="true"], .ep-vt-kn[aria-expanded="true"] { background: var(--fw-accent); color: #fff; border-color: var(--fw-accent); box-shadow: 0 2px 6px #0057b833; }
.ep-vt-kn[aria-pressed="true"] .ep-vt-nr { color: #fff; }
.ep-vt-kn:focus-visible { outline: 2px solid var(--fw-accent); outline-offset: 1px; }
.ep-licht-flyout { left: calc(var(--ep-vt-rand, 3.4rem) + .4rem); border-radius: var(--ep-r-lg); padding: .35rem; box-shadow: var(--ep-schatten-schwebe); }
.ep-vt-nr { font-size: .625rem; }
.ep-massstab-balken { left: calc(var(--ep-vt-rand, 3.6rem) + .4rem); }

/* Schneller Tooltip an Werkzeugknöpfen: Name, Kürzel, ein Satz dazu. */
.ep-tipp { position: fixed; z-index: 95; max-width: 19rem; padding: .45rem .65rem; border-radius: 7px; background: var(--ep-kopf); color: #e8eef6; font: 400 var(--ep-t-s)/1.45 var(--fw-font); box-shadow: 0 6px 20px #0b1c4040; pointer-events: none; }
.ep-tipp strong { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; }
.ep-tipp span { display: block; margin-top: .15rem; color: #c2d0e0; }
.ep-tipp kbd { display: inline-block; min-width: 1.3rem; padding: 0 .3rem; border: 1px solid #ffffff4d; border-radius: 4px; font: 600 var(--ep-t-xs)/1.5 var(--fw-mono); text-align: center; color: #fff; }

/* ─── Rechte Spalte ──────────────────────────────────────────────────────── */
#ep-eigenschaften { padding: .8rem; background: var(--ep-flaeche); border: 1px solid var(--ep-linie); border-radius: 10px; margin-bottom: .75rem; }
#ep-eigenschaften > .ep-gruppe:first-child { margin-top: 0; }
.ep-leerhinweis { color: var(--ep-leise); line-height: 1.6; }
.ep-block { padding: 0; margin: 0; border-bottom: 1px solid var(--ep-linie); }
.ep-block > summary.ep-gruppe { display: flex; align-items: center; justify-content: space-between; min-height: 2.6rem; list-style: none; margin: 0; padding: .55rem .3rem; font-size: var(--ep-t-s); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fw-text); cursor: pointer; }
.ep-block > summary::-webkit-details-marker { display: none; }
.ep-block > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-right: .4rem; transition: transform .2s; }
.ep-block[open] > summary { color: var(--fw-accent); }
.ep-block[open] > summary::after { transform: rotate(45deg); }
.ep-block > div { padding: .3rem 0 .8rem; }
.ep-zeile { padding: .45rem .5rem; border-radius: 7px; }
.ep-side--rechts .ep-zeile { flex-wrap: wrap; gap: .4rem; }
.ep-side--rechts .ep-zeile-text { flex: 1 0 100%; white-space: normal; overflow-wrap: anywhere; }

/* ─── Dialoge und Hilfe ──────────────────────────────────────────────────── */
.ep-dialog { border-radius: 16px; border: 1px solid var(--ep-linie); box-shadow: 0 24px 90px #0b1c4055; }
.ep-dialog::backdrop { background: #0b1c4066; backdrop-filter: blur(4px); }
.ep-dialog-inhalt { padding: 1.4rem; }
.ep-dialog h2 { font-size: 1.05rem; }
.ep-dialog p { font-size: var(--ep-t-m); }
.ep-dialog .ep-dialog-klein { font-size: var(--ep-t-s); margin-bottom: 0; }
.ep-dialog--hilfe { max-width: 50rem; }
.ep-dialog--hilfe .ep-dialog-inhalt { display: flex; flex-direction: column; max-height: min(86vh, 48rem); padding: 1.1rem 1.25rem; }
.ep-hilfe-kopf { display: flex; align-items: center; gap: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--ep-linie); }
.ep-hilfe-kopf h2 { flex: 1 1 auto; margin: 0; }
.ep-hilfe-suche { flex: 0 1 14rem; width: auto; min-height: var(--ep-h); }
.ep-hilfe { flex: 1 1 auto; min-height: 0; overflow-y: auto; columns: 2 20rem; column-gap: 2rem; padding: .9rem .1rem .2rem; }
.ep-hilfe-rubrik { break-inside: avoid; margin: 0 0 1.1rem; }
.ep-hilfe-rubrik h3 { margin: 0 0 .35rem; font-size: var(--ep-t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ep-leise); }
.ep-hilfe-rubrik dl { display: grid; grid-template-columns: minmax(4.5rem, max-content) 1fr; column-gap: .9rem; margin: 0; }
.ep-hilfe-zeile { display: contents; }
.ep-hilfe-zeile dt, .ep-hilfe-zeile dd { padding: .34rem 0; border-top: 1px solid var(--ep-linie); }
.ep-hilfe-zeile:first-child dt, .ep-hilfe-zeile:first-child dd { border-top: 0; }
.ep-hilfe-zeile dt { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: .2rem; max-width: 11rem; font-size: var(--ep-t-xs); color: var(--ep-leise); }
.ep-hilfe-zeile dd { margin: 0; font-size: var(--ep-t-s); line-height: 1.45; color: var(--fw-text); }
.ep-hilfe kbd, .ep-tasten kbd { display: inline-block; min-width: 1.5rem; padding: .05rem .35rem; border: 1px solid var(--fw-border-str); border-bottom-width: 2px; border-radius: 5px; background: var(--fw-bg); font: 600 var(--ep-t-xs)/1.45 var(--fw-mono); color: var(--fw-text); text-align: center; white-space: nowrap; }
.ep-hilfe-leer { margin: 1rem 0; color: var(--ep-leise); }
.ep-hilfe-geste { color: var(--fw-text); font-size: var(--ep-t-xs); font-weight: 500; }
.ep-dialog--hilfe .ep-dialog-knoepfe { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--ep-linie); }

/* ─── Leerer Zustand ─────────────────────────────────────────────────────── */
.ep-empty-art { width: 170px; color: var(--fw-accent); stroke: currentColor; stroke-width: 2; }
.ep-empty-art > rect { fill: var(--fw-bg); stroke: var(--fw-border-str); }
.ep-blueprint-nodes { fill: var(--fw-bg); }
.ep-leer { background: color-mix(in srgb, var(--fw-bg) 93%, var(--fw-accent)); }
.ep-leer h3 { font-size: 1.3rem; letter-spacing: -.03em; }
.ep-leer p { font-size: var(--ep-t-m); }
.ep-leer-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

.ep-seo { margin-top: 3rem; }
.ep-app :is(button, input, select, summary, a):focus-visible, .ep-intro a:focus-visible { outline: 3px solid var(--fw-accent); outline-offset: 2px; }
.ep-app input { accent-color: var(--fw-accent); }

/* Anleitungsvideos: ruhiger Rahmen wie zuvor die GIFs. */
.ep-anleitung-video { display: block; width: 100%; height: auto; border: 1px solid var(--ep-linie); border-radius: .55rem; background: var(--ep-flaeche); }

/* ─── Vollbild ───────────────────────────────────────────────────────────── */
.ep-app:fullscreen { max-width: none; height: 100%; min-height: 0; border: 0; border-radius: 0; padding: 0; margin: 0; }
.ep-app:-webkit-full-screen { max-width: none; height: 100%; min-height: 0; border: 0; border-radius: 0; padding: 0; margin: 0; }

/* ─── Breiten ────────────────────────────────────────────────────────────── */
@media (min-width: 40.01rem) and (max-width: 112rem) { .ep-app { margin-left: 1rem; margin-right: 1rem; } }
@media (max-width: 90rem) {
    .ep-intro-note { display: none; }
}
@media (max-width: 80rem) {
    .ep-grid { grid-template-columns: 14rem minmax(0, 1fr) 16rem; }
    .ep-studio-heading small { display: none; }
    .ep-projekt { flex-basis: 13rem; }
}

/* ─── Niedrige Fenster (1280×720, Tablet quer) ───────────────────────────
   Jede Zeile über dem Plan wird etwas flacher, der Hinweis zum
   Beispielplan bleibt einzeilig — der Gewinn geht an die Planfläche. */
@media (max-height: 52rem) {
    .ep-studio-heading { min-height: 2.6rem; padding-top: .2rem; padding-bottom: .2rem; }
    .ep-workflow button { min-height: 1.95rem; }
    .ep-bar { padding-top: .35rem; padding-bottom: .35rem; }
    .ep-muster { flex-wrap: nowrap; padding-top: .25rem; padding-bottom: .25rem; }
    .ep-muster span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ep-werkzeugleiste { min-height: 2.6rem; padding-top: .25rem; padding-bottom: .25rem; }
    .ep-fuss { min-height: 2rem; padding-top: .2rem; padding-bottom: .2rem; }
    .ep-side-kopf { padding-top: .55rem; padding-bottom: .5rem; }
    .ep-panel-title { margin-bottom: .45rem; }
}

/* ─── Tablet hoch und schmale Fenster ────────────────────────────────────
   Keine drei Spalten mehr. Die Symbole liegen als waagerechte Leiste über
   dem Plan (aufklappbar, ohne Blättern erreichbar), die rechte Spalte wird
   zur Schublade, die unten über den Plan fährt. */
@media (max-width: 68rem) {
    .ep-intro { padding: 1.2rem 1rem .9rem; }
    .ep-grid { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .ep-side { max-height: none; border: 0; }
    .ep-schublade-kn { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--ep-h); padding: .25rem .7rem; border: 1px solid var(--fw-border-str); border-radius: 999px; background: var(--fw-bg); color: var(--fw-text); font: inherit; font-size: var(--ep-t-s); font-weight: 600; cursor: pointer; }
    .ep-schublade-kn svg { width: 1rem; height: 1rem; transition: transform .2s; }
    .ep-schublade-kn[aria-expanded="false"] svg { transform: rotate(180deg); }

    /* Symbolleiste über dem Plan */
    .ep-side--links { order: 1; overflow: visible; border-bottom: 1px solid var(--ep-linie); }
    .ep-side--links .ep-side-kopf { position: static; display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem; border-bottom: 0; }
    .ep-side--links .ep-panel-title { margin: 0; flex: 0 0 auto; }
    .ep-side--links .ep-panel-name { display: none; }
    .ep-suchzeile { display: flex; align-items: center; gap: .6rem; flex: 1 1 auto; min-width: 0; }
    .ep-suchzeile .ep-input { flex: 1 1 10rem; min-width: 7rem; }
    .ep-suchzeile .ep-check { flex: 0 0 auto; white-space: nowrap; margin: 0; }
    .ep-bereiche { display: flex; overflow-x: auto; padding: .35rem .75rem; scrollbar-width: none; }
    .ep-bereiche .ep-bereich { flex: 0 0 auto; }
    .ep-suchstatus { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; border: 0; }
    #ep-palette { display: flex; align-items: flex-start; gap: .9rem; overflow-x: auto; overflow-y: hidden; padding: .1rem .75rem .55rem; scrollbar-width: thin; overscroll-behavior-x: contain; }
    #ep-palette > .ep-pal-block { flex: 0 0 auto; display: flex; flex-direction: column; gap: .3rem; max-width: none; }
    #ep-palette > .ep-pal-block + .ep-pal-block { padding-left: .9rem; border-left: 1px solid var(--ep-linie); }
    #ep-palette .ep-gruppe { margin: 0; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #ep-palette .ep-palette { display: flex; flex: 0 0 auto; gap: .35rem; }
    #ep-palette .ep-pal-zelle { flex: 0 0 5.4rem; }
    #ep-palette .ep-pal { min-height: 4.4rem; padding-top: .55rem; }
    #ep-palette > p { flex: 0 0 17rem; margin: 0; align-self: center; }
    #ep-palette > .ep-suche-alle { flex: 0 0 auto; width: auto; margin: 0; }
    .ep-side--links.ist-zu #ep-palette, .ep-side--links.ist-zu .ep-bereiche { display: none !important; }

    /* Plan darunter; unten bleibt Platz für den Griff der Schublade */
    .ep-mitte { order: 2; min-height: 0; padding-bottom: 3.1rem; }

    /* Schublade „Details" */
    .ep-side--rechts { position: absolute; left: 0; right: 0; bottom: 0; z-index: 45; max-height: 3.1rem; overflow: hidden; border-top: 1px solid var(--ep-linie); border-radius: 14px 14px 0 0; background: var(--fw-bg); box-shadow: 0 -8px 28px -12px #14283f40; transition: max-height .22s ease; }
    .ep-side--rechts.ist-offen { max-height: min(56%, 34rem); overflow-y: auto; }
    .ep-side--rechts .ep-side-inhalt { padding: 0 .9rem .9rem; }
    .ep-side--rechts .ep-panel-title { position: sticky; top: 0; z-index: 2; min-height: 3.05rem; margin: 0 -.9rem .5rem; padding: .35rem .9rem; background: var(--fw-bg); border-bottom: 1px solid var(--ep-linie); cursor: pointer; }
    .ep-side--rechts .ep-panel-title::before { content: ''; position: absolute; left: 50%; top: .3rem; width: 2.2rem; height: 4px; margin-left: -1.1rem; border-radius: 2px; background: var(--fw-border-str); }
    .ep-side--rechts .ep-panel-name > span { display: inline; margin-left: .5rem; }
    .ep-side--rechts .ep-panel-name .ep-auswahl-marke { display: inline-block; margin-left: .5rem; padding: .05rem .45rem; border-radius: 999px; background: var(--fw-accent-sf); color: var(--fw-accent); font-size: var(--ep-t-xs); font-weight: 600; }

    .ep-workflow { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
    .ep-studio-heading small { display: none; }
    .ep-workflow button:not([aria-current="step"]) strong { display: none; }
    .ep-workflow button:not([aria-current="step"]) { padding-right: .3rem; }
    .ep-studio-heading { padding-right: .75rem; }
    .ep-studio-link { margin-left: auto; }
    /* Zwei Zeilen: oben Bauvorhaben und die Hauptknöpfe, darunter die
       Etagen mit Vollbild und Beispielplan. */
    .ep-projekt { order: 1; flex: 1 1 10rem; }
    #ep-btn-bild { 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-spacer, .ep-bar-trenner { display: none; }
}
@media (max-width: 40rem) {
    .ep-intro { flex-wrap: wrap; }
    .ep-intro h1 { font-size: 2rem; }
    .ep-app { margin-left: .5rem; margin-right: .5rem; border-radius: 12px; }
    .ep-projekt { flex-basis: 100%; }
    .ep-bar > .ep-bar-spacer, .ep-bar-trenner { display: none; }
    .ep-bar .ep-btn { padding: .35rem .6rem; }
    .ep-wl-feld > span { display: none; }
    .ep-leer { padding: 1rem; }
    .ep-empty-art { width: 120px; }
    .ep-leer h3 { font-size: 1.05rem; }
    .ep-leer .ep-btn { white-space: normal; }
    .ep-hilfe { columns: 1; }
    .ep-hilfe-kopf { flex-wrap: wrap; }
    .ep-hilfe-suche { flex-basis: 100%; order: 3; }
}

/* ─── Fingerbedienung: Tippziele ≥ 44 px ─────────────────────────────────── */
.ep-app.ist-touch .ep-btn, .ep-app.ist-touch .ep-werkzeugleiste .ep-btn { min-height: var(--ep-h-touch); }
.ep-app.ist-touch .ep-btn--icon, .ep-app.ist-touch .ep-werkzeugleiste .ep-btn--icon { min-width: var(--ep-h-touch); }
.ep-app.ist-touch .ep-vt-kn { width: var(--ep-h-touch); height: var(--ep-h-touch); }
.ep-app.ist-touch .ep-tab { min-height: var(--ep-h-touch); padding-left: 1rem; padding-right: 1rem; }
.ep-app.ist-touch .ep-workflow button { min-height: var(--ep-h-touch); }
.ep-app.ist-touch .ep-select, .ep-app.ist-touch .ep-wl-feld .ep-select,
.ep-app.ist-touch .ep-input, .ep-app.ist-touch .ep-projekt { min-height: var(--ep-h-touch); }
.ep-app.ist-touch .ep-wl-feld, .ep-app.ist-touch .ep-check { min-height: var(--ep-h-touch); }
.ep-app.ist-touch input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }
.ep-app.ist-touch .ep-block > summary.ep-gruppe { min-height: var(--ep-h-touch); }
.ep-app.ist-touch .ep-bereich { min-height: var(--ep-h-touch); }
.ep-app.ist-touch .ep-schublade-kn { min-height: var(--ep-h-touch); }
.ep-app.ist-touch .ep-pal-stern { width: 2.1rem; height: 2.1rem; }
.ep-app.ist-touch .ep-pal-stern::before { inset: -.4rem; }
.ep-app.ist-touch .ep-muster .ep-btn { min-height: var(--ep-h-touch); }
/* Symbole im Plan: unsichtbar größere Trefferfläche, nur im Auswahl-Modus —
   beim Setzen soll ein Tipp neben ein Symbol dort setzen, nicht wählen.
   --ep-zoom-kehr (60-studio.js) hält die Fläche am Bildschirm gleich groß. */
.ep-app.ist-touch .ep-plan[data-modus="auswahl"] .ep-sym::before { content: ''; position: absolute; inset: calc(-10px * var(--ep-zoom-kehr, 1)); border-radius: 30%; }

/* ─── Bewegung ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .ep-intro-copy { animation: ep-studio-in .5s both; }
    .ep-btn, .ep-pal, .ep-vt-kn, .ep-workflow button, .ep-tab, .ep-pal-stern { transition: background .16s, border-color .16s, box-shadow .16s, color .16s, opacity .16s, transform .16s; }
    .ep-btn:active, .ep-vt-kn:active, .ep-pal:active { transform: scale(.96); }
    /* Dialoge gleiten nur, sie blenden nicht ein — halbdurchsichtig
       schiene sonst in den ersten Momenten die Seite durch. */
    .ep-dialog[open] { animation: ep-dialog-in .2s ease-out both; }
    .ep-dialog[open]::backdrop { animation: ep-studio-fade .22s both; }
    .ep-block[open] > div { animation: ep-studio-in .2s both; }
    .ep-ebenen:not([hidden]), .ep-licht-flyout:not([hidden]) { animation: ep-studio-in .18s both; }
    .ep-tipp { animation: ep-studio-fade .12s both; }
    .ep-blueprint-line { stroke-dasharray: 550; stroke-dashoffset: 550; animation: ep-blueprint-draw 1.6s .2s forwards; }
    .ep-blueprint-nodes { animation: ep-studio-fade .7s .9s both; }
}
@keyframes ep-studio-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ep-studio-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ep-dialog-in { from { transform: translateY(10px) scale(.985); } to { transform: none; } }
@keyframes ep-blueprint-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .ep-app *, .ep-dialog *, .ep-intro * { animation: none !important; transition: none !important; }
}
}
@media print { .ep-studio-heading, .ep-workflow, .ep-mode-hint, .ep-fuss, .ep-tipp { display: none !important; } }

/* Versionsmarke „2.0" im Studiokopf und im Intro (24.09.2026). */
.ep-studio-version { display: inline-block; margin-left: -.2rem; padding: .05rem .4rem; border-radius: 5px; background: #b7791f; color: #fff; font-size: .72em; font-weight: 800; letter-spacing: .02em; }
.ep-version { background: #b7791f; color: #fff; }

/* Fußzeile immer einzeilig (24.09.2026): lange Bedienhinweise in der
   Statuszeile wiederholen den Modushinweis links und ließen die Zeile auf
   drei bis fünf Zeilen wachsen – der Plan schrumpfte darunter. Jetzt werden
   sie gekürzt, der volle Text steht im Tooltip. */
@media screen and (min-width: 700px) {
    .ep-fuss { flex-wrap: nowrap; }
    .ep-fuss .ep-mode-hint { flex: 0 1 auto; max-width: 62%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ep-fuss .ep-status { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
    .ep-fuss .ep-status > * { white-space: nowrap; flex: 0 1 auto; min-width: 2.5rem; overflow: hidden; text-overflow: ellipsis; }
    .ep-fuss .ep-status > .ep-warn { flex-shrink: 4; }
    .ep-fuss .ep-status > #ep-speicherstand { flex: none; }
}