all 3 ways of adding spells are implemented. Styling needs to be done

src/app/journal/journal-spellcards/add-card/add-card.component.html

@@ -1,5 +1,50 @@
 <div class="add-card">
-  @if(isModification == undefined) {
+  @if(state === 1) {
+  <div class="clickable-background" (click)="state = 2">
+    <img class="add-icon" src="assets/icons/UIIcons/add.svg" />
+  </div>
+  } @else if(state === 2) {
+  <button
+    class="add-button"
+    (click)="continueToSpellSelection(false); state = 3"
+  >
+    Offiziellen Zauber auswählen
+  </button>
+  <button
+    class="add-button"
+    (click)="continueToSpellSelection(true); state = 3"
+  >
+    Offiziellen Zauber bearbeiten
+  </button>
+  <button class="add-button" (click)="emitNewSpell()">
+    Neuen Zauber erstellen
+  </button>
+  } @else if (state === 3) {
+
+  <input
+    type="text"
+    class="spell-name"
+    [(ngModel)]="newSpellName"
+    placeholder="Zauber durchsuchen"
+    (keyup)="
+      isModification ? filterSpellArrayForModification() : filterSpellArray()
+    "
+  />
+  <div class="available-spells">
+    <ul>
+      @for(spell of availableSpells; track spell) {
+      <li>
+        <button (click)="spellSelected(spell)">
+          {{ spell.german }}
+        </button>
+      </li>
+      } @empty { Keine Zauber gefunden }
+    </ul>
+  </div>
+  <button class="abort-button" (click)="resetThis()">Abbrechen</button>
+  }
+
+  <!-- @if(isModification == undefined) {
   <img class="add-icon" src="assets/icons/UIIcons/add.svg" />
   <button class="add-button" (click)="continueToSpellSelection(false)">
     Offiziellen Zauber auswählen
@@ -33,5 +78,5 @@
     </ul>
   </div>
   <button class="abort-button" (click)="resetThis()">Abbrechen</button>
-  }
+  } -->
 </div>

src/app/journal/journal-spellcards/add-card/add-card.component.scss

@@ -8,22 +8,25 @@
     overflow: hidden;
     transition: all 0.3s ease-in-out;
 
-    &:hover {
-        .add-button {
-            opacity: 1;
+    .clickable-background {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        cursor: pointer;
+        transition: all 0.2s ease-in-out;
+
+        &:hover {
+            background-color: var(--items);
         }
+
         .add-icon {
-            display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            height: 4rem;
         }
     }
-
-    .add-icon {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        height: 4rem;
-    }
 }
 
 .add-button {
@@ -34,7 +37,7 @@
     border-radius: 10px;
     box-shadow: var(--shadow);
     font-weight: 600;
-    opacity: 0;
+    // opacity: 0;
     transition: all 0.25s ease-in-out;
 
     &:hover {

src/app/journal/journal-spellcards/add-card/add-card.component.ts

@@ -20,6 +20,7 @@ export class AddCardComponent {
   private allAvailableSpells: any[] = [];
   public availableSpells: any[] = [];
   public isModification: boolean | undefined;
+  public state: number = 1;
 
   public constructor(
     private spellsAccessor: SpellsService,
@@ -69,6 +70,7 @@ export class AddCardComponent {
 
   public resetThis(): void {
     this.newSpellName = '';
+    this.state = 1;
     this.isModification = undefined;
   }