Try fix Element not found bug - Third Try

src/app/rules/rules.component.html

@@ -31,12 +31,12 @@
         <b>Alle Spieler</b> treten dem Spiel durch <b>Eingabe des Raumnamens</b> bei.
       </li>
       <li>
-        <b>Jeder Spieler</b> muss entweder dem Team <redfont>Rot</redfont> oder dem Team <bluefont>Blau</bluefont> beitreten.<br>
+        <b>Jeder Spieler</b> muss entweder dem Team <a class="redfont">Rot</a> oder dem Team <a class="bluefont">Blau</a> beitreten.<br>
         Die Aufteilung der Teams klärt ihr untereinander ab.
       </li>
       <li>
         Das <b>Spiel beginnt</b>, sobald einer aus dem <b>Team</b>, das am Zug ist, <br>
-        den Button <button mat-raised-button color="primary" class="mat-small">Ich erkläre und los!</button> drückt. Damit startet der <b><primaryfont>Erklärer</primaryfont></b> eine <b>neue Spielrunde</b>.
+        den Button <button mat-raised-button color="primary" class="mat-small">Ich erkläre und los!</button> drückt. Damit startet der <b><a class="primaryfont">Erklärer</a></b> eine <b>neue Spielrunde</b>.
       </li>
     </ol>
   </mat-card-content>
@@ -52,63 +52,63 @@
         Eine <b>Spielrunde</b> dauert <b>eine Minute</b>.
       </li>
       <li>
-        In einer <b>Spielrunde</b> gibt es das <primaryfont>aktive</primaryfont> und das <primaryfont>passive</primaryfont> Team.
+        In einer <b>Spielrunde</b> gibt es das <a class="primaryfont">aktive</a> und das <a class="primaryfont">passive</a> Team.
       </li>
       <li>
-        Das <primaryfont>aktive</primaryfont> Team besteht aus einem <b><primaryfont>Erklärer</primaryfont></b> und aus <b>mindestens</b> einem <b><primaryfont>Ratenden</primaryfont></b>.
+        Das <a class="primaryfont">aktive</a> Team besteht aus einem <b><a class="primaryfont">Erklärer</a></b> und aus <b>mindestens</b> einem <b><a class="primaryfont">Ratenden</a></b>.
       </li>
       <li>
-        <b>Stimmt</b> euch im Team vor Beginn der Spielrunde <b>ab</b>, wer als nächstes der <b><primaryfont>Erklärer</primaryfont></b> ist.<br>
-        Am besten sollte jeder <b>gleich oft</b> die Rolle des <b><primaryfont>Erklärers</primaryfont></b> besetzt haben.
+        <b>Stimmt</b> euch im Team vor Beginn der Spielrunde <b>ab</b>, wer als nächstes der <b><a class="primaryfont">Erklärer</a></b> ist.<br>
+        Am besten sollte jeder <b>gleich oft</b> die Rolle des <b><a class="primaryfont">Erklärers</a></b> besetzt haben.
       </li>
       <li>
-        Dem <b><primaryfont>Erklärer</primaryfont></b> wird ein <b>Begriff</b> und <b>fünf <redFont>Tabooh</redFont></b> Wörter angezeigt.<br>
+        Dem <b><a class="primaryfont">Erklärer</a></b> wird ein <b>Begriff</b> und <b>fünf <redFont>Tabooh</redFont></b> Wörter angezeigt.<br>
       </li>
       <li>
-        Die <b>angezeigten Wörter</b> darf der <b><primaryfont>Erklärer </primaryfont></b> <b><redFont>nicht</redFont> verwenden</b>.<br>
+        Die <b>angezeigten Wörter</b> darf der <b><a class="primaryfont">Erklärer </a></b> <b><redFont>nicht</redFont> verwenden</b>.<br>
       </li>
       <li>
-        Auch <b>Teilwörter</b> darf der <b><primaryfont>Erklärer </primaryfont></b> nicht verwenden.<br>
-        Beispielsweise darf das Wort <b><i>Bahn</i></b> bei <b><i>Hauptbahnhof</i></b> <b><redfont> nicht </redfont></b> <b>erwähnt</b> werden.
+        Auch <b>Teilwörter</b> darf der <b><a class="primaryfont">Erklärer </a></b> nicht verwenden.<br>
+        Beispielsweise darf das Wort <b><i>Bahn</i></b> bei <b><i>Hauptbahnhof</i></b> <b><a class="redfont"> nicht </a></b> <b>erwähnt</b> werden.
       </li>
       <li>
-        Sämtliche Konjugationen von <b><redFont>Tabooh</redFont></b> Wörter sind ebenfalls <b><redfont>nicht</redfont> erlaubt</b>.<br>
+        Sämtliche Konjugationen von <b><redFont>Tabooh</redFont></b> Wörter sind ebenfalls <b><a class="redfont">nicht</a> erlaubt</b>.<br>
         Beispielsweise darf beim <b><redFont>Tabooh</redFont></b> Wort <b><i>Spiel</i></b> auch <b><redFont>nicht</redFont></b> die Wörter<br>
         <b><i>spielen</i></b>, <b><i>Spieler</i></b>, <b><i>spielte</i></b> oder ähnliches erwähnt werden.
       </li>
       <li>
-        <b><redFont>Tabooh</redFont></b> Wörter dürfen <b><redfont>nicht</redfont></b> in eine <b>andere Sprache</b> übersetzt werden.<br>
+        <b><redFont>Tabooh</redFont></b> Wörter dürfen <b><a class="redfont">nicht</a></b> in eine <b>andere Sprache</b> übersetzt werden.<br>
         Beispielsweise darf beim Wort <b><i>Spiel</i></b> auch <b><redFont>nicht</redFont></b> das englische Wort <b><i>Play</i></b> verwendet werden.
       </li>
       <li>
-        Das <primaryfont>aktive</primaryfont> Team hat das <b>Ziel</b> möglichst <b>viele Punkte</b> zu sammeln.
+        Das <a class="primaryfont">aktive</a> Team hat das <b>Ziel</b> möglichst <b>viele Punkte</b> zu sammeln.
       </li>
       <li>
-        Ein <b>Punkt</b> erhält das <primaryfont>aktive</primaryfont> Team, wenn die <b><primaryfont>Ratenden</primaryfont></b> den <b>Begriff nennen</b>, welches der <b><primaryfont>Erklärer</primaryfont> beschreibt</b>.<br>
-        Erst wenn der <b><primaryfont>Erklärer</primaryfont></b> auf den Button <button mat-raised-button color="primary" class="mat-small">Richtig &#10004;</button> drückt, wird der <b>Punkt gutgeschrieben</b>. <br>
-        Danach erscheint ein <b>neuer Begriff</b> und <b>neue <redfont>Tabooh</redfont></b> Wörter.
+        Ein <b>Punkt</b> erhält das <a class="primaryfont">aktive</a> Team, wenn die <b><a class="primaryfont">Ratenden</a></b> den <b>Begriff nennen</b>, welches der <b><a class="primaryfont">Erklärer</a> beschreibt</b>.<br>
+        Erst wenn der <b><a class="primaryfont">Erklärer</a></b> auf den Button <button mat-raised-button color="primary" class="mat-small">Richtig &#10004;</button> drückt, wird der <b>Punkt gutgeschrieben</b>. <br>
+        Danach erscheint ein <b>neuer Begriff</b> und <b>neue <a class="redfont">Tabooh</a></b> Wörter.
         <br>
       </li>
       <li>
-        Falls der <b><primaryfont>Erklärer</primaryfont></b> beim aktuellen Wort hängt, kann er den Begriff <b><warnfont>überspringen</warnfont></b>,<br>
+        Falls der <b><a class="primaryfont">Erklärer</a></b> beim aktuellen Wort hängt, kann er den Begriff <b><a class="warnfont">überspringen</a></b>,<br>
         indem er auf den Button <button mat-raised-button color="accent" class="mat-small">Überspringen &#187;</button> drückt.
       </li>
       <li>
-        Das <primaryfont>passive</primaryfont> Team besteht aus <b>mindestens zwei </b> <b><primaryfont>Aufpasser</primaryfont></b>.
+        Das <a class="primaryfont">passive</a> Team besteht aus <b>mindestens zwei </b> <b><a class="primaryfont">Aufpasser</a></b>.
       </li>
       <li>
-        <b><primaryfont>Aufpasser</primaryfont></b> sehen <b>dieselben Wörter</b> wie der <b><primaryfont>Erklärer</primaryfont></b>.
+        <b><a class="primaryfont">Aufpasser</a></b> sehen <b>dieselben Wörter</b> wie der <b><a class="primaryfont">Erklärer</a></b>.
       </li>
       <li>
-        Das <primaryfont>passive</primaryfont> Team hat das <b>Ziel</b> gesagte <b><redFont>Tabooh</redFont></b> Wörter zu melden,<br>
-        indem ein <b><primaryfont>Aufpasser</primaryfont></b> auf den Button <button mat-raised-button color="warn" class="mat-small">Tabooh &#10008;</button> drückt.
+        Das <a class="primaryfont">passive</a> Team hat das <b>Ziel</b> gesagte <b><redFont>Tabooh</redFont></b> Wörter zu melden,<br>
+        indem ein <b><a class="primaryfont">Aufpasser</a></b> auf den Button <button mat-raised-button color="warn" class="mat-small">Tabooh &#10008;</button> drückt.
       </li>
       <li>
-        Ein gemeldetes <b><redFont>Tabooh</redFont></b> Wort führt zu einem <b><redFont>Minuspunkt</redFont></b> für das <primaryfont>aktive</primaryfont> Team.<br>
-        Danach wird ein <b>neuer Begriff</b> und <b>neue <redfont>Tabooh</redfont></b> Wörter angezeigt.
+        Ein gemeldetes <b><redFont>Tabooh</redFont></b> Wort führt zu einem <b><redFont>Minuspunkt</redFont></b> für das <a class="primaryfont">aktive</a> Team.<br>
+        Danach wird ein <b>neuer Begriff</b> und <b>neue <a class="redfont">Tabooh</a></b> Wörter angezeigt.
       </li>
       <li>
-        Auch der <b><primaryfont>Erklärer</primaryfont></b> hat die Möglichkeit auf den <button mat-raised-button color="warn" class="mat-small">Tabooh &#10008;</button> Button zu drücken.
+        Auch der <b><a class="primaryfont">Erklärer</a></b> hat die Möglichkeit auf den <button mat-raised-button color="warn" class="mat-small">Tabooh &#10008;</button> Button zu drücken.
       </li>
       <li>
         <b>Nach</b> einer <b>Spielrunde</b> ist das <b>andere Team</b> an der <b>Reihe</b>.
@@ -129,8 +129,8 @@
         Ihr spielt <b>alle Begriffe</b> durch <i>(Das könnte etwas dauern...)</i>
       </li>
       <li>
-        <b>Alle Spieler</b> waren mindestens <b>einmal </b> <b><primaryfont>Erklärer</primaryfont></b>.<br>
-        Die <b>Spiellänge</b> kann auf mehrere <b><primaryfont>Erklärerrunden</primaryfont></b> erhöht werden.
+        <b>Alle Spieler</b> waren mindestens <b>einmal </b> <b><a class="primaryfont">Erklärer</a></b>.<br>
+        Die <b>Spiellänge</b> kann auf mehrere <b><a class="primaryfont">Erklärerrunden</a></b> erhöht werden.
       </li>
       <li>
         Ihr definiert einen <b>Punktewert</b>, der zuerst erreicht werden soll. Beispielsweise <b>gewinnt</b> das <b>Team</b>,<br>

src/app/rules/rules.component.scss

@@ -20,19 +20,19 @@ $warn: mat-color($app-warn);
   text-align: left;
 }
 
-bluefont{
+.bluefont{
   color: rgba(0,0,139);
 }
 
-redfont{
+.redfont{
   color: rgba(200, 0, 0);
 }
 
-primaryfont {
+.primaryfont {
   color: $primary
 }
 
-warnfont {
+.warnfont {
   color: $warn
 }