OZG-8086 wizard component styling refactor g todo

alfa-client/libs/admin/reporting/src/lib/daten-anfragen/daten-anfragen-form-container/daten-anfragen-form-container.component.html

+<div class="flex items-center gap-2">
+  <button >
+    ←
+  </button>
+  <h2 class="heading-2" data-test-id="datenanfrage-form-header-text">Datenanfrage</h2>
+</div>
 <ods-wizard >
   <div step1>hallo</div>
   <div step2>hallo 2</div>

alfa-client/libs/design-system/src/lib/wizard/wizard.component.ts

 import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'ods-wizard',
   standalone: true,
-  imports: [],
-  template: ` <ng-content select="[step1]" />
-    xxx
-    <ng-content select="[step2]" />`,
+  imports: [CommonModule],
+  template: `
+    <div class="wizard-container w-full">
+      <div class="steps flex justify-between mb-4">
+        <div
+          class="step flex-1 text-center"
+          [class.active]="step === 1"
+          (click)="goToStep(1)"
+        >
+          1. Auswertung erstellen
+        </div>
+        <div
+          class="step flex-1 text-center"
+          [class.active]="step === 2"
+          (click)="goToStep(2)"
+        >
+          2. Datenanfrage veröffentlichen
+        </div>
+      </div>
+      <div class="content flex justify-between mb-4">
+        <div *ngIf="step === 1">
+            <ng-content select="[step1]"/>
+        </div>
+        <ng-content *ngIf="step === 2" select="[step2]"/>
+      </div>
+      <div class="actions flex justify-end mt-4">
+        <button
+          class="btn mr-2"
+          [disabled]="step === 1"
+          (click)="goToStep(1)"
+        >
+          Back
+        </button>
+        <button
+          class="btn"
+          [disabled]="step === 2"
+          (click)="goToStep(2)"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .wizard-container {
+        @apply w-full;
+      }
+      .steps .step {
+        @apply cursor-pointer px-4 py-2 border-b-2 text-center;
+      }
+      .steps .step.active {
+        @apply border-blue-500 text-blue-500 font-bold;
+      }
+      .btn {
+        @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
+      }
+      .btn:disabled {
+        @apply bg-gray-300 cursor-not-allowed;
+      }
+    `,
+  ],
 })
 export class WizardComponent {
-  @Input() step: 1 | 2;
+  @Input() step: 1 | 2 = 1;
+
+  goToStep(step: 1 | 2) {
+    if (step >= 1 && step <= 2) {
+      this.step = step;
+    }
+  }
 }