/* ══════════════════════════════════════════════════════════════════════
   EH-Rule — Aussehen eines Regel-Dokuments
   ══════════════════════════════════════════════════════════════════════
   Für die Anzeige (js/eh-rule-anzeige.js, Bauleiter-Vorschau und
   Monteur-Seite) UND den Editor auf der Bauleiter-Seite: beide tragen die
   Klasse .eh-regel-inhalt, damit eine Regel beim Schreiben so aussieht wie
   später auf dem Telefon.

   Die Aderfarben stehen NUR hier, als feste Klassen .eh-ader-<farbe> —
   kein Farbwert kommt je aus einem Dokument. Die Namen müssen mit
   eh_rule_aderfarben() (Datenbank) und EHRuleAnzeige.ADERFARBEN
   übereinstimmen. Helle Farben (gelb, weiß, rosa) stehen auf dunklem
   Grund, sonst wären sie auf weissem Papier nicht zu lesen.
   ══════════════════════════════════════════════════════════════════════ */

.eh-regel-inhalt{
  font-family:'DM Sans',sans-serif;
  font-size:15px;
  line-height:1.55;
  color:#0a1a0e;
  overflow-wrap:anywhere;
}
.eh-regel-inhalt > :first-child{margin-top:0;}
.eh-regel-inhalt p{margin:0 0 .6em;}
.eh-regel-inhalt h3,.eh-regel-inhalt h4,.eh-regel-inhalt h5{
  font-family:'Plus Jakarta Sans',sans-serif;
  color:#0a1a0e;
  margin:1em 0 .45em;
  line-height:1.3;
}
.eh-regel-inhalt h3{font-size:19px;font-weight:800;}
.eh-regel-inhalt h4{font-size:16.5px;font-weight:700;}
.eh-regel-inhalt h5{font-size:15px;font-weight:700;}
.eh-regel-inhalt ul,.eh-regel-inhalt ol{margin:0 0 .6em;padding-left:1.4em;}
.eh-regel-inhalt li > p{margin:0 0 .25em;}
.eh-regel-inhalt hr{border:none;border-top:1.5px solid #cad8d0;margin:1em 0;}

/* Tabellen: Aderbelegungen sind oft breiter als ein Telefon. Der Rahmen
   scrollt quer, die Seite nicht. */
.eh-regel-inhalt .eh-tabelle-rahmen,
.eh-regel-inhalt .tableWrapper{overflow-x:auto;margin:0 0 .8em;-webkit-overflow-scrolling:touch;}
.eh-regel-inhalt table{border-collapse:collapse;min-width:60%;font-size:14px;}
.eh-regel-inhalt td,.eh-regel-inhalt th{
  border:1.5px solid #cad8d0;
  padding:6px 9px;
  vertical-align:top;
  min-width:3.5em;
  position:relative;
}
.eh-regel-inhalt th{background:#f0f7f2;font-weight:700;text-align:left;}
.eh-regel-inhalt td > p:last-child,.eh-regel-inhalt th > p:last-child{margin-bottom:0;}

/* Bilder: Foto und Skizze. Die Skizze ist ein PNG mit durchsichtigem
   Grund — darunter liegt Weiss, wie im Notizzettel. */
.eh-regel-inhalt .eh-bild{margin:0 0 .8em;position:relative;max-width:100%;}
.eh-regel-inhalt .eh-bild img{
  display:block;max-width:100%;height:auto;
  border:1.5px solid #cad8d0;border-radius:10px;background:#fff;
}
.eh-regel-inhalt .eh-bild-skizze img{max-height:70vh;}
/* Die Breite eines Bildes kommt aus seinem width-Attribut (breite am
   Knoten, die Anzeigegröße); height:auto hält das Seitenverhältnis. Eine
   Skizze bekommt dazu ein max-width aus dem Skript (70 % Bildschirmhöhe). */
.eh-regel-inhalt .eh-bild-ersatz{display:none;}
.eh-regel-inhalt .eh-bild-fehlt img{display:none;}
.eh-regel-inhalt .eh-bild-fehlt .eh-bild-ersatz,
.eh-regel-inhalt .eh-bild-laedt .eh-bild-ersatz{
  display:flex;align-items:center;justify-content:center;
  min-height:90px;padding:12px;border:1.5px dashed #cad8d0;border-radius:10px;
  color:#5a6b60;font-size:13px;background:#f7fbf8;
}
.eh-regel-inhalt .eh-bild-laedt .eh-bild-ersatz{font-size:0;}
.eh-regel-inhalt .eh-bild-laedt .eh-bild-ersatz::after{content:'lädt …';font-size:13px;}

/* Symbole: stehen im Text wie ein Wort, eine Zeile hoch */
.eh-regel-inhalt .eh-symbol{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.55em;height:1.55em;vertical-align:-.4em;margin:0 .08em;
}
/* Keine eigene Farbe hier: das Symbol erbt die des Textes, und eine
   Farbklasse .eh-ader-<farbe> am Symbol (eine Klasse) wöge sonst weniger
   als diese Regel (zwei). */
.eh-regel-inhalt .eh-symbol svg{width:100%;height:100%;display:block;}
.eh-regel-inhalt .eh-symbol img{width:100%;height:100%;object-fit:contain;display:block;}
.eh-regel-inhalt .eh-symbol.eh-bild-fehlt::after{content:'?';font-size:.8em;color:#b00020;}

/* Symbol mit eigener Größe (breite/hoehe am Knoten): mittig zur Zeile */
.eh-regel-inhalt .eh-symbol.eh-symbol-mass{vertical-align:middle;max-width:100%;}

/* Formen (js/eh-rule-formen.js): ein SVG in seiner Größe, im Textfluss.
   Auf schmalen Bildschirmen schrumpft es mit, der Strich bleibt 2 px. */
.eh-regel-inhalt .eh-form{display:inline-block;vertical-align:middle;max-width:100%;line-height:0;margin:0 .1em;}
.eh-regel-inhalt .eh-form svg{display:block;max-width:100%;height:auto;overflow:visible;}
.eh-regel-inhalt .eh-form .eh-form-streifen{display:none;}

/* Farbe an Symbol und Form: dieselben Klassen .eh-ader-<farbe> wie beim
   Text (unten). Helle Farben stehen dort schon auf dunklem Grund. */
.eh-regel-inhalt .eh-symbol.eh-ader-gelb,.eh-regel-inhalt .eh-symbol.eh-ader-weiss,.eh-regel-inhalt .eh-symbol.eh-ader-rosa,
.eh-regel-inhalt .eh-form.eh-ader-gelb,.eh-regel-inhalt .eh-form.eh-ader-weiss,.eh-regel-inhalt .eh-form.eh-ader-rosa{padding:2px;border-radius:5px;box-sizing:content-box;}
/* grün-gelb: am Symbol grün mit gelbem Balken darunter (wie beim Text),
   an der Form gestreift wie der Schutzleiter */
.eh-regel-inhalt .eh-symbol.eh-ader-gruengelb{text-decoration:none;box-shadow:inset 0 -3px 0 #f2c200;}
.eh-regel-inhalt .eh-form.eh-ader-gruengelb{text-decoration:none;}
.eh-regel-inhalt .eh-form.eh-ader-gruengelb .eh-form-streifen{display:inline;stroke:#f2c200;stroke-dasharray:6 6;}

/* Was die Anzeige nicht kennt, steht nur als Text da — erkennbar. */
.eh-regel-inhalt .eh-unbekannt{color:#5a6b60;font-style:italic;}

/* ── Aderfarben (DIN EN 60757) ────────────────────────────────────────── */
.eh-ader{font-weight:700;border-radius:4px;}
.eh-ader-schwarz{color:#111;}
.eh-ader-braun{color:#7b4a1e;}
.eh-ader-rot{color:#d11f1f;}
.eh-ader-orange{color:#e0700b;}
.eh-ader-gruen{color:#1f8a3a;}
.eh-ader-blau{color:#1f5fd1;}
.eh-ader-violett{color:#7a3fc0;}
.eh-ader-grau{color:#6f7780;}
.eh-ader-tuerkis{color:#138f8a;}
/* hell: auf dunklem Grund */
.eh-ader-gelb,.eh-ader-weiss,.eh-ader-rosa{background:#2f3a33;padding:0 .25em;}
.eh-ader-gelb{color:#ffd21a;}
.eh-ader-weiss{color:#ffffff;}
.eh-ader-rosa{color:#ff9fc4;}
/* grün-gelb: grüne Schrift, gelber Balken darunter */
.eh-ader-gruengelb{
  color:#1f8a3a;
  text-decoration:underline;
  text-decoration-color:#f2c200;
  text-decoration-thickness:4px;
  text-underline-offset:2px;
}