/* ══════════════════════════════════════════════════════════════════════
   EH-Strang — Aussehen eines Symbols (EHStrangSymbole.anzeige())
   ══════════════════════════════════════════════════════════════════════
   Für die Bauleiter-Seite und die spätere Monteur-Seite. Die Grösse setzt
   der Aufrufer über --ehs-groesse (Vorgabe 32 px); die Linie nimmt die
   Textfarbe an (currentColor), wie ein Buchstabe.

   Das Kürzel steht unten rechts auf der Zeichnung (Zwischendeckenmelder =
   Rauchmelder + „ZD"); ohne bekannte Zeichnung steht es allein im Rahmen.
   ══════════════════════════════════════════════════════════════════════ */

.ehs-symbol{
  --ehs-groesse:32px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--ehs-groesse);
  height:var(--ehs-groesse);
  flex-shrink:0;
  color:#0a1a0e;
  vertical-align:middle;
}
.ehs-symbol svg{display:block;width:100%;height:100%;}
.ehs-symbol .ehs-kuerzel{
  position:absolute;
  right:-4px;
  bottom:-3px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:9.5px;
  font-weight:800;
  line-height:1;
  padding:2px 3px;
  border-radius:4px;
  background:#0a1a0e;
  color:#fff;
  letter-spacing:.02em;
  white-space:nowrap;
}
/* Ohne Zeichnung: das Kürzel ist das Symbol. */
.ehs-symbol.ehs-nur-kuerzel{
  border:2px solid currentColor;
  border-radius:6px;
}
.ehs-symbol.ehs-nur-kuerzel .ehs-kuerzel{
  position:static;
  background:none;
  color:inherit;
  font-size:calc(var(--ehs-groesse) * .32);
  padding:0;
}
/* Weder Zeichnung noch Kürzel: ein leerer, gestrichelter Rahmen. */
.ehs-symbol.ehs-leer{
  border:2px dashed #9ab5a4;
  border-radius:6px;
}

/* ══ Die Zeichnung eines Wegs (js/eh-strang-zeichnung.js) ══════════════
   .ehz-sicht ist der Rahmen, in dem gezoomt und geschoben wird
   (js/eh-zoom.js), .ehz-inhalt trägt das SVG. Das SVG füllt ihn ganz —
   gezoomt wird über seine Grösse, nicht über eine CSS-Skalierung. */
.ehz-sicht{
  position:relative;
  overflow:hidden;
  background:#fbfdfc;
  border:1px solid #dbe6df;
  border-radius:12px;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.ehz-sicht:active{cursor:grabbing;}
.ehz-inhalt{position:absolute;left:0;top:0;}
.ehz-inhalt > svg{display:block;width:100%;height:100%;overflow:visible;}
.ehz .ehz-knoten[role="button"],.ehz .ehz-plus[role="button"]{cursor:pointer;}
.ehz .ehz-knoten:focus,.ehz .ehz-plus:focus{outline:none;}
.ehz .ehz-knoten:focus-visible .ehz-kasten{stroke:#2563eb;stroke-width:3;}
.ehz .ehz-plus:focus-visible circle:last-of-type{stroke:#0a1a0e;stroke-width:2;}
@media (hover:hover){
  .ehz .ehz-knoten[role="button"]:hover .ehz-kasten{stroke:#1DB954;}
}
/* Die Arbeitsstelle pulsiert kurz, wenn sie neu gesetzt ist. */
@keyframes ehz-puls{0%{opacity:.45}50%{opacity:.05}100%{opacity:.45}}
.ehz .ehz-plus.arbeit .ehz-hof{animation:ehz-puls 1.6s ease-in-out 3;}
@media (prefers-reduced-motion:reduce){ .ehz .ehz-plus.arbeit .ehz-hof{animation:none;} }
.ehz-legende{font-size:12px;color:#5b6b62;margin:6px 2px 0;display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.ehz-legende .vorl{display:inline-block;min-width:16px;padding:0 4px;border:1.2px dashed #9aa5a0;border-radius:9px;background:#eef1ef;color:#5b6b62;font-weight:700;font-size:11px;text-align:center;}