@if (onboarding.currentStep(); as step) {
  <div class="onboarding-layer">
    @if (targetBox(); as box) {
      <div class="onboarding-marker" [style]="markerStyle()"></div>
    }

    <section
      class="onboarding-panel"
      [class.mobile-panel]="isMobile()"
      [style]="panelStyle()"
      aria-live="polite"
    >
      <div class="step-line">
        <span>Schritt {{ onboarding.currentStepNumber() }} von {{ onboarding.totalSteps }}</span>
        <button mat-icon-button type="button" aria-label="Onboarding schließen" (click)="onboarding.skip()">
          <mat-icon aria-hidden="true">close</mat-icon>
        </button>
      </div>

      <h2>{{ step.title }}</h2>
      <p>{{ step.body }}</p>

      <div class="onboarding-actions">
        @if (!hasTarget() && step.key !== 'complete') {
          <button mat-stroked-button type="button" (click)="goToCurrentStep()">
            <mat-icon aria-hidden="true">my_location</mat-icon>
            Zum Schritt
          </button>
        }

        @if (step.key === 'complete') {
          <button mat-flat-button type="button" (click)="onboarding.finish()">
            <mat-icon aria-hidden="true">check</mat-icon>
            Fertig
          </button>
        } @else {
          <button mat-button type="button" (click)="onboarding.skip()">Überspringen</button>
        }
      </div>
    </section>
  </div>
}