<div data-aos="zoom-in" data-aos-duration="250">
  <mat-card class="transparent">
    <mat-card-title>Spielregeln</mat-card-title>
  </mat-card>
</div>
<br>
<br>
<div data-aos="zoom-out-left" data-aos-duration="500">
  <mat-card class="transparent">
    <mat-card-title>Voraussetzungen</mat-card-title>
    <mat-card-subtitle>Um Tabooh sinnvoll spielen zu können, müsst ihr</mat-card-subtitle>
    <mat-card-content>
      <ul class="stichpunktenTextLinksbündig">
        <li>
          mindestens <b>vier Spieler</b> sein.
        </li>
        <li>
          in einem <b>Gruppenanruf</b> und/oder im <b>gleichen Raum</b> sein.
        </li>
      </ul>
    </mat-card-content>
  </mat-card>
</div>
<br>
<br>
<div data-aos="zoom-out-right" data-aos-duration="750">
  <mat-card class="transparent">
    <mat-card-title>Neues Spiel erstellen</mat-card-title>
    <mat-card-subtitle>Zur Spielvorbereitung solltet ihr wiefolgt vorgehen:</mat-card-subtitle>
    <mat-card-content>
      <ol class="stichpunktenTextLinksbündig">
        <li>
          <b>Ein Spieler</b> erstellt auf der Startseite mithilfe eines <b>neuen Raumnamens</b> ein <b>Spiel</b><br>
        </li>
        <li>
          <b>Alle Spieler</b> treten dem Spiel durch <b>Eingabe des Raumnamens</b> bei.
        </li>
        <li>
          <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><a class="primaryfont">Erklärer</a></b> eine <b>neue Spielrunde</b>.
        </li>
      </ol>
    </mat-card-content>
  </mat-card>
</div>
<br>
<br>
<div data-aos="zoom-out-left" data-aos-duration="1000">
  <mat-card class="transparent">
    <mat-card-title>Prinzip einer Spielrunde</mat-card-title>
    <mat-card-subtitle>Tabooh wird in mehreren Spielrunden gespielt</mat-card-subtitle>
    <mat-card-content>
      <ul class="stichpunktenTextLinksbündig">
        <li>
          Eine <b>Spielrunde</b> dauert <b>eine Minute</b>.
        </li>
        <li>
          In einer <b>Spielrunde</b> gibt es das <a class="primaryfont">aktive</a> und das <a class="primaryfont">passive</a> Team.
        </li>
        <li>
          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><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><a class="primaryfont">Erklärer</a></b> wird ein <b>Begriff</b> und <b>fünf <a class="redfont">Tabooh</a></b> Wörter angezeigt.<br>
        </li>
        <li>
          Die <b>angezeigten Wörter</b> darf der <b><a class="primaryfont">Erklärer </a></b> <b><a class="redfont">nicht</a> verwenden</b>.<br>
        </li>
        <li>
          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><a class="redfont">Tabooh</a></b> Wörter sind ebenfalls <b><a class="redfont">nicht</a> erlaubt</b>.<br>
          Beispielsweise darf beim <b><a class="redfont">Tabooh</a></b> Wort <b><i>Spiel</i></b> auch <b><a class="redfont">nicht</a></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><a class="redfont">Tabooh</a></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><a class="redfont">nicht</a></b> das englische Wort <b><i>Play</i></b> verwendet werden.
        </li>
        <li>
          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 <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><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 <a class="primaryfont">passive</a> Team besteht aus <b>mindestens zwei </b> <b><a class="primaryfont">Aufpasser</a></b>.
        </li>
        <li>
          <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 <a class="primaryfont">passive</a> Team hat das <b>Ziel</b> gesagte <b><a class="redfont">Tabooh</a></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><a class="redfont">Tabooh</a></b> Wort führt zu einem <b><a class="redfont">Minuspunkt</a></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><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>.
        </li>
        <li>
          Bei einer <b><a class="redfont">falschen Eingabe</a></b> habt ihr die <b>Möglichkeit</b>,<br>
          <b>nach</b> einer <b>Runde</b> die <b>Antworten</b> im dargestellten <b>Spielverlauf anzupassen</b>.
        </li>
      </ul>
    </mat-card-content>
  </mat-card>
</div>
<br>
<br>
<div data-aos="zoom-out-right" data-aos-duration="500">
  <mat-card class="transparent">
    <mat-card-title>Spielende</mat-card-title>
    <mat-card-subtitle>Ihr entscheidet wie das Spiel endet</mat-card-subtitle>
    <mat-card-content>
      <b>Gewonnen</b> hat das <b>Team</b>, das die <b>meisten Punkte</b> hat.<br>
      Es gibt verschiedene Möglichkeiten, wie das Spiel beendet wird. Hier ein paar Vorschläge:<br>
      <ol class="stichpunktenTextLinksbündig">
        <li>
          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><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>
          das zuerst die <b>20 Punktemarke</b> erreicht hat. Falls die Marke von dem zuerst angefangenen Team erreicht wurde,<br>
          darf das <b>andere Team fairness halber</b> versuchen mit einer <b>weiteren Spielrunde</b> den <b>Punktestand</b> zu <b>überbieten</b>.<br>
          Bei <b>Gleichstand</b> geht es in die <b>Verlängerung</b>.
        </li>
      </ol>
    </mat-card-content>
  </mat-card>
</div>
<br>
<br>
<div data-aos="zoom-out-left" data-aos-duration="250">
  <mat-card class="transparent">
    <mat-card-title>Alles verstanden?</mat-card-title>
    <mat-card-subtitle>Dann mal los!</mat-card-subtitle>
    <mat-card-content>
      <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
    </mat-card-content>
  </mat-card>
</div>
<br>
<br>
<br>