RELEASE 2.0

fix monitor bg contrast
fix mobile buttons
2026-04-27 23:02:36 +02:00 · 2026-04-27 23:01:25 +02:00 · 2026-04-27 22:34:35 +02:00 · 2026-04-27 22:02:15 +02:00 · 2026-03-20 21:04:46 +01:00 · 2026-03-20 21:02:02 +01:00
97 changed files with 3457 additions and 4171 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,86 +1,33 @@
 {
  "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
+  "ignorePatterns": ["projects/**/*"],
  "overrides": [
    {
-      "files": [
-        "*.ts"
-      ],
-      "parserOptions": {
-        "project": [
-          "tsconfig.json"
-        ],
-        "createDefaultProgram": true
-      },
-      "extends": [
-        "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates",
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/recommended-requiring-type-checking",
-        "plugin:prettier/recommended"
-      ],
+      "files": ["*.ts"],
+      "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates"],
      "rules": {
-        "prettier/prettier": [
-          "error",
-          {
-            "endOfLine": "auto"
-          }
-        ],
-        "@typescript-eslint/explicit-member-accessibility": "error",
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "prefix": "app",
-            "style": "kebab-case",
-            "type": "element"
-          }
-        ],
-        "@typescript-eslint/unbound-method": [
-          "off"
-        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
+            "type": "attribute",
            "prefix": "app",
-            "style": "camelCase",
-            "type": "attribute"
+            "style": "camelCase"
          }
-        ]
-      }
-    },
-    {
-      "files": [
-        "*.html"
        ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
-      "rules": {
-        "prettier/prettier": [
+        "@angular-eslint/component-selector": [
          "error",
          {
-            "endOfLine": "auto"
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
          }
        ]
      }
    },
    {
-      "files": [
-        "*.spec.ts"
-      ],
-      "rules": {
-        "@typescript-eslint/await-thenable": "off",
-        "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/no-floating-promises": "off",
-        "@typescript-eslint/no-unsafe-argument": "off",
-        "@typescript-eslint/no-unsafe-assignment": "off",
-        "@typescript-eslint/no-unsafe-call": "off",
-        "@typescript-eslint/no-unsafe-member-access": "off",
-        "@typescript-eslint/no-unsafe-return": "off"
-      }
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended", "plugin:@angular-eslint/template/accessibility"],
+      "rules": {}
    }
  ]
 }
--- a/.gitea/workflows/angular-build.yml
+++ b/.gitea/workflows/angular-build.yml
@@ -0,0 +1,37 @@
+name: Angular Build
+
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  build:
+    runs-on: runner
+    container:
+      image: node:20-bullseye
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm ci -f
+
+      - name: Create firebase.ts
+        run: |
+          mkdir -p src/app
+          cat > src/environments/firebase.ts <<'EOF'
+          export const firebase = {
+            apiKey: "${{ secrets.FIREBASE_API_KEY }}",
+            authDomain: "${{ secrets.FIREBASE_AUTH_DOMAIN }}",
+            databaseURL: 'https://worshipgenerator.firebaseio.com',
+            projectId: "${{ secrets.FIREBASE_PROJECT_ID }}",
+            storageBucket: "${{ secrets.FIREBASE_STORAGE_BUCKET }}",
+            messagingSenderId: "${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}",
+            appId: "${{ secrets.FIREBASE_APP_ID }}"
+          };
+          EOF
+
+      - name: Build Angular
+        run: npm run build
--- a/angular.json
+++ b/angular.json
@@ -22,9 +22,7 @@
              "base": "dist/wgenerator"
            },
            "index": "src/index.html",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
+            "polyfills": ["src/polyfills.ts"],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "less",
            "assets": [
@@ -40,17 +38,9 @@
              "src/assets",
              "src/manifest.webmanifest"
            ],
-            "styles": [
-              "src/custom-theme.scss",
-              "src/styles/styles.less",
-              "src/styles/shadow.less"
-            ],
+            "styles": ["src/custom-theme.scss", "src/styles/styles.less", "src/styles/shadow.less"],
            "scripts": [],
-            "allowedCommonJsDependencies": [
-              "lodash",
-              "docx",
-              "qrcode"
-            ]
+            "allowedCommonJsDependencies": ["lodash", "docx", "qrcode"]
          },
          "configurations": {
            "production": {
@@ -99,11 +89,15 @@
          "options": {
            "runner": "vitest",
            "tsConfig": "tsconfig.spec.json",
-            "setupFiles": [
-              "src/test-vitest.ts"
-            ],
+            "setupFiles": ["src/test-vitest.ts"],
            "runnerConfig": true
          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
        }
      }
    }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,11 +1,12 @@
 {
  "name": "wgenerator",
-  "version": "1.6",
+  "version": "2.0",
  "scripts": {
    "start": "ng serve",
    "build": "ng build --configuration production",
    "build:dev": "ng build --configuration development",
    "deploy": "ng build --configuration production && firebase deploy",
+    "deploy-beta": "ng b && firebase hosting:channel:deploy beta",
    "test": "ng test",
    "lint": "ng lint --fix",
    "update": "ng update @angular/cdk @angular/cli @angular/core @angular/material && ncu -u && npm i && npm fix"
@@ -49,6 +50,7 @@
    "@angular/language-service": "^21.2.2",
    "@typescript-eslint/eslint-plugin": "^8.57.0",
    "@typescript-eslint/parser": "^8.57.0",
+    "angular-eslint": "^21.3.1",
    "eslint": "^9.39.4",
    "eslint-config-prettier": "^10.1.8",
    "eslint-plugin-prettier": "^5.5.5",
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,5 +1,9 @@
 import {NgModule} from '@angular/core';
-import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
+import {RouterModule, Routes} from '@angular/router';
+import {FirebaseApp} from '@angular/fire/app';
+import {provideStorage} from '@angular/fire/storage';
+import {inject} from '@angular/core';
+import {getStorage} from 'firebase/storage';
 import {RoleGuard} from './widget-modules/guards/role.guard';
 import {AuthGuard} from './widget-modules/guards/auth.guard';

@@ -12,6 +16,7 @@ const routes: Routes = [
  {
    path: 'songs',
    loadChildren: () => import('./modules/songs/songs.module').then(m => m.SongsModule),
+    providers: [provideStorage(() => getStorage(inject(FirebaseApp)))],
    canActivate: [AuthGuard, RoleGuard],
    data: {
      requiredRoles: ['user'],
@@ -50,7 +55,6 @@ const routes: Routes = [
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
-      preloadingStrategy: PreloadAllModules,
      scrollPositionRestoration: 'enabled',
      // relativeLinkResolution: 'legacy',
    }),
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,5 @@
 import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
 import {fader} from './animations';
-import {register} from 'swiper/element/bundle';
 import {RouterOutlet} from '@angular/router';
 import {NavigationComponent} from './widget-modules/components/application-frame/navigation/navigation.component';

@@ -13,10 +12,6 @@ import {NavigationComponent} from './widget-modules/components/application-frame
  imports: [RouterOutlet, NavigationComponent],
 })
 export class AppComponent implements OnInit {
-  public constructor() {
-    register();
-  }
-
  public ngOnInit(): void {
    setTimeout(() => document.querySelector('#load-bg')?.classList.add('hidden'), 1000);
    setTimeout(() => document.querySelector('#load-bg')?.remove(), 5000);
--- a/src/app/modules/guest/guest-show-data.service.spec.ts
+++ b/src/app/modules/guest/guest-show-data.service.spec.ts
@@ -1,4 +1,5 @@
 import {TestBed} from '@angular/core/testing';
+import {Firestore} from '@angular/fire/firestore';
 import {of} from 'rxjs';
 import {DbService} from 'src/app/services/db.service';
 import {GuestShowDataService} from './guest-show-data.service';
@@ -11,6 +12,7 @@ describe('GuestShowDataService', () => {
  let colAddSpy: jasmine.Spy<() => Promise<{id: string}>>;
  let colSpy: jasmine.Spy;
  let dbServiceSpy: jasmine.SpyObj<DbService>;
+  let firestoreStub: Firestore;

  beforeEach(async () => {
    docUpdateSpy = jasmine.createSpy('update').and.resolveTo();
@@ -26,9 +28,13 @@ describe('GuestShowDataService', () => {
    dbServiceSpy.doc$.and.returnValue(of({id: 'guest-1'}) as never);
    dbServiceSpy.doc.and.callFake(docSpy);
    dbServiceSpy.col.and.callFake(colSpy);
+    firestoreStub = {} as Firestore;

    await TestBed.configureTestingModule({
-      providers: [{provide: DbService, useValue: dbServiceSpy}],
+      providers: [
+        {provide: DbService, useValue: dbServiceSpy},
+        {provide: Firestore, useValue: firestoreStub},
+      ],
    });

    service = TestBed.inject(GuestShowDataService);
--- a/src/app/modules/guest/guest-show-data.service.ts
+++ b/src/app/modules/guest/guest-show-data.service.ts
@@ -1,4 +1,5 @@
-import {Injectable, inject} from '@angular/core';
+import {EnvironmentInjector, Injectable, inject, runInInjectionContext} from '@angular/core';
+import {doc, Firestore, getDoc} from '@angular/fire/firestore';
 import {Observable} from 'rxjs';
 import {shareReplay} from 'rxjs/operators';
 import {DbService} from 'src/app/services/db.service';
@@ -9,6 +10,8 @@ import {GuestShow} from './guest-show';
 })
 export class GuestShowDataService {
  private dbService = inject(DbService);
+  private firestore = inject(Firestore);
+  private environmentInjector = inject(EnvironmentInjector);

  private collection = 'guest';
  public list$: Observable<GuestShow[]> = this.dbService.col$<GuestShow>(this.collection).pipe(
@@ -19,6 +22,18 @@ export class GuestShowDataService {
  );

  public read$: (id: string) => Observable<GuestShow | null> = (id: string): Observable<GuestShow | null> => this.dbService.doc$(`${this.collection}/${id}`);
+  public read: (id: string) => Promise<GuestShow | null> = async (id: string): Promise<GuestShow | null> => {
+    const snapshot = await runInInjectionContext(this.environmentInjector, () => getDoc(doc(this.firestore, `${this.collection}/${id}`)));
+
+    if (!snapshot.exists()) {
+      return null;
+    }
+
+    return {
+      id: snapshot.id,
+      ...(snapshot.data() as Omit<GuestShow, 'id'>),
+    };
+  };
  public update$: (id: string, data: Partial<GuestShow>) => Promise<void> = async (id: string, data: Partial<GuestShow>): Promise<void> =>
    await this.dbService.doc(this.collection + '/' + id).update(data);
  public add: (data: Partial<GuestShow>) => Promise<string> = async (data: Partial<GuestShow>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
--- a/src/app/modules/guest/guest-show.service.spec.ts
+++ b/src/app/modules/guest/guest-show.service.spec.ts
@@ -38,11 +38,15 @@ describe('GuestShowService', () => {

    await expectAsync(service.share(show, songs)).toBeResolvedTo(expectedUrl);

-    expect(guestShowDataServiceSpy.add).toHaveBeenCalledWith({
+    const [addPayload] = guestShowDataServiceSpy.add.calls.mostRecent().args as [Record<string, unknown>];
+    expect(addPayload).toEqual(
+      jasmine.objectContaining({
        showType: 'service-worship',
        date: show.date,
        songs,
-    });
+      })
+    );
+    expect(addPayload['updatedAt']).toEqual(jasmine.any(Date));
    expect(showServiceSpy.update$).toHaveBeenCalledWith('show-1', {shareId: 'share-1'});
  });

@@ -53,11 +57,16 @@ describe('GuestShowService', () => {

    await expectAsync(service.share(show, songs)).toBeResolvedTo(expectedUrl);

-    expect(guestShowDataServiceSpy.update$).toHaveBeenCalledWith('share-9', {
+    const [shareId, updatePayload] = guestShowDataServiceSpy.update$.calls.mostRecent().args as [string, Record<string, unknown>];
+    expect(shareId).toBe('share-9');
+    expect(updatePayload).toEqual(
+      jasmine.objectContaining({
        showType: 'service-worship',
        date: show.date,
        songs,
-    });
+      })
+    );
+    expect(updatePayload['updatedAt']).toEqual(jasmine.any(Date));
    expect(guestShowDataServiceSpy.add).not.toHaveBeenCalled();
    expect(showServiceSpy.update$).not.toHaveBeenCalled();
  });
--- a/src/app/modules/guest/guest-show.service.ts
+++ b/src/app/modules/guest/guest-show.service.ts
@@ -15,6 +15,7 @@ export class GuestShowService {
    const data = {
      showType: show.showType,
      date: show.date,
+      updatedAt: new Date(),
      songs: songs,
    };
    let shareId = show.shareId;
--- a/src/app/modules/guest/guest-show.ts
+++ b/src/app/modules/guest/guest-show.ts
@@ -5,5 +5,6 @@ export interface GuestShow {
  id: string;
  showType: string;
  date: Timestamp;
+  updatedAt?: Timestamp | Date;
  songs: Song[];
 }
--- a/src/app/modules/guest/guest.component.html
+++ b/src/app/modules/guest/guest.component.html
@@ -1,12 +1,12 @@
-@if (show$|async; as show) {
+@if (showState$ | async; as state) { @if (state.status === 'loaded') {
 <div class="page">
  <div class="title">
-    <div class="left">{{ show.showType|showType }}</div>
-    <div class="right">{{ show.date.toDate() | date: 'dd.MM.yyyy' }}</div>
+    <div class="left">{{ state.show.showType | showType }}</div>
+    <div class="right">{{ state.show.date | date: 'dd.MM.yyyy' }}</div>
  </div>
  <div class="view">
    <swiper-container scrollbar="true">
-      @for (song of show.songs; track trackBy(i, song); let i = $index) {
+      @for (song of state.show.songs; track song.id) {
      <swiper-slide class="song-swipe">
        <div class="song-title">{{ song.title }}</div>
        <div class="legal">
@@ -20,4 +20,10 @@
    </swiper-container>
  </div>
 </div>
-}
+} @else if (state.status === 'loading') {
+<div class="empty-state">Gastansicht wird geladen.</div>
+} @else if (state.status === 'not-found') {
+<div class="empty-state">Für diesen Link wurde keine Gastansicht gefunden.</div>
+} @else {
+<div class="empty-state">{{ state.message }}</div>
+} }
--- a/src/app/modules/guest/guest.component.less
+++ b/src/app/modules/guest/guest.component.less
@@ -57,3 +57,13 @@ app-song-text {
  margin-bottom: 50px;
  min-height: calc(100vh - 150px);
 }
+
+.empty-state {
+  color: var(--text-inverse);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(100vh - 50px);
+  padding: 24px;
+  text-align: center;
+}
--- a/src/app/modules/guest/guest.component.spec.ts
+++ b/src/app/modules/guest/guest.component.spec.ts
@@ -1,24 +1,97 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-
+import {ActivatedRoute} from '@angular/router';
+import {BehaviorSubject, of} from 'rxjs';
 import {GuestComponent} from './guest.component';
+import {GuestShowDataService} from './guest-show-data.service';

 describe('GuestComponent', () => {
  let component: GuestComponent;
  let fixture: ComponentFixture<GuestComponent>;
+  let guestShowDataServiceSpy: jasmine.SpyObj<GuestShowDataService>;
+  let guestShowSubject: BehaviorSubject<unknown>;

  beforeEach(async () => {
+    guestShowSubject = new BehaviorSubject<unknown>({
+      id: 'guest-1',
+      showType: 'service-worship',
+      date: {
+        toDate: () => new Date('2026-03-20T00:00:00Z'),
+      },
+      songs: [
+        {
+          id: 'song-1',
+          title: 'Titel',
+          text: 'Text',
+          artist: 'Artist',
+        },
+      ],
+    });
+    guestShowDataServiceSpy = jasmine.createSpyObj<GuestShowDataService>('GuestShowDataService', ['read', 'read$']);
+    guestShowDataServiceSpy.read.and.resolveTo({
+      id: 'guest-1',
+      showType: 'service-worship',
+      date: {
+        toDate: () => new Date('2026-03-20T00:00:00Z'),
+      },
+      songs: [
+        {
+          id: 'song-1',
+          title: 'Titel',
+          text: 'Text',
+          artist: 'Artist',
+        },
+      ],
+    } as never);
+    guestShowDataServiceSpy.read$.and.returnValue(guestShowSubject.asObservable() as never);
+
    await TestBed.configureTestingModule({
      imports: [GuestComponent],
+      providers: [
+        {provide: ActivatedRoute, useValue: {params: of({id: 'guest-1'})}},
+        {provide: GuestShowDataService, useValue: guestShowDataServiceSpy},
+      ],
    }).compileComponents();
-  });

-  beforeEach(() => {
    fixture = TestBed.createComponent(GuestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
  });

  it('should create', () => {
-    void expect(component).toBeTruthy();
+    expect(component).toBeTruthy();
+  });
+
+  it('should load and render the guest show', () => {
+    expect(guestShowDataServiceSpy.read).toHaveBeenCalledWith('guest-1');
+    expect(guestShowDataServiceSpy.read$).toHaveBeenCalledWith('guest-1');
+    expect(fixture.nativeElement.textContent).toContain('Titel');
+    expect(fixture.nativeElement.textContent).toContain('20.03.2026');
+  });
+
+  it('should update the rendered guest show when live data changes', async () => {
+    guestShowSubject.next({
+      id: 'guest-1',
+      showType: 'service-worship',
+      date: {
+        toDate: () => new Date('2026-03-21T00:00:00Z'),
+      },
+      songs: [
+        {
+          id: 'song-2',
+          title: 'Neuer Titel',
+          text: 'Neuer Text',
+          artist: 'Neue Artistin',
+        },
+      ],
+    });
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toContain('Neuer Titel');
+    expect(fixture.nativeElement.textContent).toContain('21.03.2026');
  });
 });
--- a/src/app/modules/guest/guest.component.ts
+++ b/src/app/modules/guest/guest.component.ts
@@ -1,12 +1,14 @@
 import {Component, CUSTOM_ELEMENTS_SCHEMA, inject} from '@angular/core';
+import {AsyncPipe, DatePipe} from '@angular/common';
 import {GuestShowDataService} from './guest-show-data.service';
 import {ActivatedRoute} from '@angular/router';
-import {map, switchMap} from 'rxjs/operators';
+import {catchError, map, switchMap} from 'rxjs/operators';
 import {Song} from '../songs/services/song';
-import {ConfigService} from '../../services/config.service';
-import {AsyncPipe, DatePipe} from '@angular/common';
 import {SongTextComponent} from '../../widget-modules/components/song-text/song-text.component';
 import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {concat, from, Observable, of} from 'rxjs';
+import {GuestShow} from './guest-show';
+import {ensureSwiperElement} from '../../services/swiper-element';

@Component({
  selector: 'app-guest',
@@ -18,13 +20,89 @@ import {ShowTypePipe} from '../../widget-modules/pipes/show-type-translater/show
 export class GuestComponent {
  private currentRoute = inject(ActivatedRoute);
  private service = inject(GuestShowDataService);
-  private configService = inject(ConfigService);

-  public show$ = this.currentRoute.params.pipe(
+  public constructor() {
+    void ensureSwiperElement();
+  }
+
+  public showState$: Observable<GuestShowState> = this.currentRoute.params.pipe(
    map(param => param.id as string),
-    switchMap(id => this.service.read$(id))
+    switchMap(id =>
+      concat(
+        of<GuestShowState>({status: 'loading'}),
+        from(this.service.read(id)).pipe(
+          switchMap(show => {
+            const normalizedShow = this.normalizeShow(show);
+
+            if (!normalizedShow) {
+              return of<GuestShowState>({status: 'not-found'});
+            }
+
+            return concat(
+              of<GuestShowState>({status: 'loaded', show: normalizedShow}),
+              this.service.read$(id).pipe(
+                map(liveShow => this.normalizeShow(liveShow)),
+                map(liveShow => (liveShow ? ({status: 'loaded', show: liveShow} as GuestShowState) : ({status: 'not-found'} as GuestShowState))),
+                catchError(() => of<GuestShowState>({status: 'error', message: 'Live-Aktualisierung fehlgeschlagen.'}))
+              )
+            );
+          }),
+          catchError(() => of<GuestShowState>({status: 'error', message: 'Gastansicht konnte nicht geladen werden.'}))
+        )
+      )
+    )
  );
-  public config$ = this.configService.get$();

  public trackBy = (index: number, show: Song) => show.id;
+
+  private normalizeShow(show: GuestShow | null): GuestShowView | null {
+    if (!show) {
+      return null;
+    }
+
+    return {
+      ...show,
+      date: this.toDate(show.date),
+      updatedAt: this.toDate(show.updatedAt ?? null),
+      songs: Array.isArray(show.songs) ? show.songs : [],
+    };
+  }
+
+  private toDate(value: unknown): Date | null {
+    if (value instanceof Date) {
+      return value;
+    }
+
+    if (typeof value === 'object' && value !== null) {
+      if (this.hasToDate(value)) {
+        return value.toDate();
+      }
+
+      if ('seconds' in value && typeof value.seconds === 'number') {
+        return new Date(value.seconds * 1000);
+      }
+    }
+
+    if (typeof value === 'string' || typeof value === 'number') {
+      const parsedDate = new Date(value);
+      return Number.isNaN(parsedDate.getTime()) ? null : parsedDate;
+    }
+
+    return null;
+  }
+
+  private hasToDate(value: object): value is FirestoreDateLike {
+    return 'toDate' in value && typeof value.toDate === 'function';
+  }
 }
+
+interface GuestShowView extends Omit<GuestShow, 'date' | 'updatedAt'> {
+  date: Date | null;
+  updatedAt: Date | null;
+}
+
+type GuestShowState = {status: 'loading'} | {status: 'not-found'} | {status: 'error'; message: string} | {status: 'loaded'; show: GuestShowView};
+
+type FirestoreDateLike = {
+  toDate: () => Date;
+};
--- a/src/app/modules/presentation/monitor/logo/logo.component.html
+++ b/src/app/modules/presentation/monitor/logo/logo.component.html
--- a/src/app/modules/presentation/monitor/monitor.component.less
+++ b/src/app/modules/presentation/monitor/monitor.component.less
@@ -36,7 +36,7 @@
  filter: blur(10px);

  &.visible {
-    opacity: 0.5;
+    opacity: 0.7;
  }
 }

@@ -54,7 +54,7 @@
  filter: blur(5px);

  &.visible {
-    opacity: 0.4;
+    opacity: 0.6;
  }
 }

@@ -63,7 +63,7 @@
  filter: blur(8px);

  &.visible {
-    opacity: 0.2;
+    opacity: 0.4;
  }
 }

@@ -72,7 +72,7 @@
  filter: blur(8px);

  &.visible {
-    opacity: 0.2;
+    opacity: 0.4;
  }
 }

--- a/src/app/modules/presentation/remote/remote.component.html
+++ b/src/app/modules/presentation/remote/remote.component.html
@@ -1,13 +1,34 @@
-@if (show) {
-<app-card [closeIcon]="faIcon" [heading]="show.showType | showType" [subheading]="show.date.toDate() | date:'dd.MM.yyyy'" closeLink="/presentation/select">
+<app-page-frame title="Präsentation" [withMenu]="false">
+  @if (show) {
+    <app-card [closeIcon]="faIcon"
+              [heading]="show.showType | showType"
+              [subheading]="show.date.toDate() | date:'dd.MM.yyyy'"
+              closeLink="/presentation/select"
+              content>
      @if (!progress) {
        <div class="song">
          @if (show) {
            <div class="song-parts">
-      <div (click)="onSectionClick('title', -1, show.id)" [class.active]="show.presentationSongId === 'title'" class="song-part">
+              <div
+                (click)="onSectionClick('title', -1, show.id)"
+                (keydown.enter)="onSectionClick('title', -1, show.id)"
+                (keydown.space)="onSectionClick('title', -1, show.id)"
+                [class.active]="show.presentationSongId === 'title'"
+                class="song-part"
+                role="button"
+                tabindex="0"
+              >
                <div class="head">Veranstaltung</div>
              </div>
-      <div (click)="onSectionClick('empty', -1, show.id)" [class.active]="show.presentationSongId === 'empty'" class="song-part">
+              <div
+                (click)="onSectionClick('empty', -1, show.id)"
+                (keydown.enter)="onSectionClick('empty', -1, show.id)"
+                (keydown.space)="onSectionClick('empty', -1, show.id)"
+                [class.active]="show.presentationSongId === 'empty'"
+                class="song-part"
+                role="button"
+                tabindex="0"
+              >
                <div class="head">Leer</div>
              </div>
            </div>
@@ -17,18 +38,32 @@
          <div class="song">
            @if (show) {
              <div [class.active]="show.presentationSongId === song.id" class="title song-part">
-      <div (click)="onSectionClick(song.id, -1, show.id)" class="head">{{ song.title }}</div>
+                <div
+                  (click)="onSectionClick(song.id, -1, show.id)"
+                  (keydown.enter)="onSectionClick(song.id, -1, show.id)"
+                  (keydown.space)="onSectionClick(song.id, -1, show.id)"
+                  class="head"
+                  role="button"
+                  tabindex="0"
+                >
+                  {{ song.title }}
                </div>
-    } @if (show) {
+              </div>
+            }
+            @if (show) {
              <div class="song-parts">
                @for (section of song.sections; track section.type + '-' + section.number + '-' + $index; let i = $index) {
                  <div
                    (click)="onSectionClick(song.id, i, show.id)"
+                    (keydown.enter)="onSectionClick(song.id, i, show.id)"
+                    (keydown.space)="onSectionClick(song.id, i, show.id)"
                    [class.active]="
              show.presentationSongId === song.id &&
              show.presentationSection === i
            "
                    class="song-part"
+                    role="button"
+                    tabindex="0"
                  >
                    <div class="head">{{ section.type | sectionType }} {{ section.number + 1 }}</div>
                    <div class="fragment">{{ getFirstLine(section) }}</div>
@@ -41,24 +76,33 @@
        <div class="song">
          @if (show) {
            <div [class.active]="show.presentationSongId === 'dynamicText'" class="title song-part">
-      <div (click)="onSectionClick('dynamicText', -1, show.id)" class="head">Freier Text</div>
+              <div
+                (click)="onSectionClick('dynamicText', -1, show.id)"
+                (keydown.enter)="onSectionClick('dynamicText', -1, show.id)"
+                (keydown.space)="onSectionClick('dynamicText', -1, show.id)"
+                class="head"
+                role="button"
+                tabindex="0"
+              >
+                Freier Text
+              </div>
            </div>
          }
          <mat-form-field appearance="outline">
            <mat-label>Überschrift</mat-label>
-      <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption" autocomplete="off" id="dynamic-caption" matInput type="text" />
+            <input (ngModelChange)="onDynamicCaption($event, show.id)" [ngModel]="show.presentationDynamicCaption"
+                   autocomplete="off" id="dynamic-caption" matInput type="text" />
          </mat-form-field>
          <mat-form-field appearance="outline">
            <mat-label>Text</mat-label>
-      <textarea (ngModelChange)="onDynamicText($event, show.id)" [ngModel]="show.presentationDynamicText" autocomplete="off" id="dynamic-text" matInput></textarea>
+            <textarea (ngModelChange)="onDynamicText($event, show.id)" [ngModel]="show.presentationDynamicText"
+                      autocomplete="off" id="dynamic-text" matInput></textarea>
          </mat-form-field>
        </div>
        @if (show) {
          <div class="div-bottom">
-    <button class="btn-start-presentation" mat-button routerLink="/presentation/monitor">
-      <fa-icon [icon]="faDesktop"></fa-icon>
-      Präsentation starten
-    </button>
+            <app-button [icon]="faDesktop" routerLink="/presentation/monitor">Präsentation starten</app-button>
+
            <mat-form-field appearance="outline">
              <mat-label>Hintergrund</mat-label>
              <mat-select (ngModelChange)="onBackground($event, show.id)" [ngModel]="show.presentationBackground">
@@ -74,8 +118,11 @@
            ><input (ngModelChange)="onZoom($event, show.id)" [ngModel]="show.presentationZoom" matSliderThumb />
            </mat-slider>
          </div>
-  } @if (show) {
+        }
+        @if (show) {
          <app-add-song [addedLive]="true" [showSongs]="showSongs" [show]="show" [songs]="songs$|async"></app-add-song>
-  } }
-</app-card>
-}
+        }
+      }
+    </app-card>
+  }
+</app-page-frame>
--- a/src/app/modules/presentation/remote/remote.component.ts
+++ b/src/app/modules/presentation/remote/remote.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, inject} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnDestroy} from '@angular/core';
 import {combineLatest, Subject} from 'rxjs';
 import {PresentationBackground, Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
@@ -17,15 +17,15 @@ import {CardComponent} from '../../../widget-modules/components/card/card.compon
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatButton} from '@angular/material/button';
 import {RouterLink} from '@angular/router';
-import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 import {MatSelect} from '@angular/material/select';
 import {MatOption} from '@angular/material/core';
 import {MatSlider, MatSliderThumb} from '@angular/material/slider';
 import {AddSongComponent} from '../../../widget-modules/components/add-song/add-song.component';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {SectionTypePipe} from '../../../widget-modules/pipes/section-type-translator/section-type.pipe';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';

 export interface PresentationSong {
  id: string;
@@ -46,9 +46,7 @@ export interface PresentationSong {
    MatInput,
    ReactiveFormsModule,
    FormsModule,
-    MatButton,
    RouterLink,
-    FaIconComponent,
    MatSelect,
    MatOption,
    MatSlider,
@@ -58,6 +56,8 @@ export interface PresentationSong {
    DatePipe,
    ShowTypePipe,
    SectionTypePipe,
+    PageFrameComponent,
+    ButtonComponent,
  ],
 })
 export class RemoteComponent implements OnDestroy {
@@ -87,12 +87,12 @@ export class RemoteComponent implements OnDestroy {
      map(_ => _.currentShow),
      filter((showId): showId is string => !!showId),
      distinctUntilChanged(),
-      takeUntil(this.destroy$)
+      takeUntil(this.destroy$),
    );

    const show$ = currentShowId$.pipe(
      switchMap(showId => this.showService.read$(showId)),
-      takeUntil(this.destroy$)
+      takeUntil(this.destroy$),
    );

    const parsedSongs$ = currentShowId$.pipe(
@@ -105,7 +105,7 @@ export class RemoteComponent implements OnDestroy {
          sections: this.textRenderingService.parse(song.text, null, false),
        })),
      })),
-      takeUntil(this.destroy$)
+      takeUntil(this.destroy$),
    );

    combineLatest([show$, parsedSongs$])
--- a/src/app/modules/presentation/select/select.component.html
+++ b/src/app/modules/presentation/select/select.component.html
@@ -1,20 +1,24 @@
-@if (shows$ | async; as shows) {
-<div @fade>
+<app-page-frame title="Präsentation" [withMenu]="false">
+  @if (shows$ | async; as shows) {
+    <div @fade content>
      @if (visible) {
        <app-card heading="Bitte eine Veranstaltung auswählen">
          @if (!shows.length) {
            <p>Es ist derzeit keine Veranstaltung vorhanden</p>
-    } @if (shows.length>0) {
+          }
+          @if (shows.length > 0) {
            <div class="list">
              @for (show of shows; track show.id) {
-      <button (click)="selectShow(show)" mat-stroked-button>
+                <app-button (click)="selectShow(show)" class="full-width">
                  <app-user-name [userId]="show.owner"></app-user-name>
                  , {{ show.showType | showType }}, {{ show.date.toDate() | date: "dd.MM.yyyy" }}
-      </button>
+                </app-button>
+
              }
            </div>
          }
        </app-card>
      }
-</div>
-}
+    </div>
+  }
+</app-page-frame>
--- a/src/app/modules/presentation/select/select.component.spec.ts
+++ b/src/app/modules/presentation/select/select.component.spec.ts
@@ -19,11 +19,7 @@ describe('SelectComponent', () => {
    routerSpy = jasmine.createSpyObj<Router>('Router', ['navigateByUrl']);

    showServiceSpy.list$.and.returnValue(
-      of([
-        createShow('older', '2025-12-15T00:00:00Z'),
-        createShow('recent-a', '2026-03-01T00:00:00Z'),
-        createShow('recent-b', '2026-02-20T00:00:00Z'),
-      ]) as never
+      of([createShow('older', '2025-12-15T00:00:00Z'), createShow('recent-a', '2026-03-01T00:00:00Z'), createShow('recent-b', '2026-02-20T00:00:00Z')]) as never
    );
    showServiceSpy.update$.and.resolveTo();
    globalSettingsServiceSpy.set.and.resolveTo();
--- a/src/app/modules/presentation/select/select.component.ts
+++ b/src/app/modules/presentation/select/select.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, inject} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {map} from 'rxjs/operators';
 import {ShowService} from '../../shows/services/show.service';
 import {Show} from '../../shows/services/show';
@@ -7,16 +7,17 @@ import {Router} from '@angular/router';
 import {fade} from '../../../animations';
 import {AsyncPipe, DatePipe} from '@angular/common';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
-import {MatButton} from '@angular/material/button';
 import {UserNameComponent} from '../../../services/user/user-name/user-name.component';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
+import {ButtonComponent} from '../../../widget-modules/components/button/button.component';

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.less'],
  animations: [fade],
-  imports: [CardComponent, MatButton, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe],
+  imports: [CardComponent, UserNameComponent, AsyncPipe, DatePipe, ShowTypePipe, PageFrameComponent, ButtonComponent],
 })
 export class SelectComponent implements OnInit {
  private showService = inject(ShowService);
--- a/src/app/modules/shows/dialog/report-dialog/report-dialog.component.html
+++ b/src/app/modules/shows/dialog/report-dialog/report-dialog.component.html
@@ -1,5 +1,6 @@
 <div mat-dialog-content>
-  <p>Bitte melde die in dieser Veranstaltung verwendeten CCLI-Titel. Die Meldung ist Teil der CCLI-Lizenz und sorgt dafür, dass Songwriter und Verlage korrekt vergütet werden.</p>
+  <p>Bitte melde die in dieser Veranstaltung verwendeten CCLI-Titel. Die Meldung ist Teil der CCLI-Lizenz und sorgt
+    dafür, dass Songwriter und Verlage korrekt vergütet werden.</p>
  <p>
    Die Meldung erfolgt über
    <a [href]="reportingUrl" rel="noreferrer" target="_blank">{{ reportingUrl }}</a>.
@@ -34,7 +35,7 @@
    }
  </div>
 </div>
-<div mat-dialog-actions>
-  <button [mat-dialog-close]="false" mat-button>Abbrechen</button>
-  <button [mat-dialog-close]="true" cdkFocusInitial mat-button>Alle CCLI-Titel wurden gemeldet</button>
-</div>
+<app-button-row>
+  <app-button (click)="dialogRef.close(false)" [icon]="faClose">Abbrechen</app-button>
+  <app-button (click)="dialogRef.close(true)" [icon]="faReport">Alle CCLI-Titel wurden gemeldet</app-button>
+</app-button-row>
--- a/src/app/modules/shows/dialog/report-dialog/report-dialog.component.less
+++ b/src/app/modules/shows/dialog/report-dialog/report-dialog.component.less
@@ -72,3 +72,7 @@
    justify-content: flex-start;
  }
 }
+
+app-button-row {
+  margin: 0 var(--gap-l) var(--gap-l);
+}
--- a/src/app/modules/shows/dialog/report-dialog/report-dialog.component.ts
+++ b/src/app/modules/shows/dialog/report-dialog/report-dialog.component.ts
@@ -1,8 +1,9 @@
 import {Component, inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
-import {MatButton} from '@angular/material/button';
+import {MAT_DIALOG_DATA, MatDialogContent, MatDialogRef} from '@angular/material/dialog';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
-import {faArrowUpRightFromSquare, faCheck} from '@fortawesome/free-solid-svg-icons';
+import {faArrowUpRightFromSquare, faCheck, faCompactDisc, faXmark} from '@fortawesome/free-solid-svg-icons';
+import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
+import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';

 export interface ReportDialogSong {
  title: string;
@@ -15,7 +16,7 @@ export interface ReportDialogData {

@Component({
  selector: 'app-report-dialog',
-  imports: [MatButton, MatDialogActions, MatDialogContent, MatDialogClose, FaIconComponent],
+  imports: [MatDialogContent, FaIconComponent, ButtonRowComponent, ButtonComponent],
  templateUrl: './report-dialog.component.html',
  styleUrl: './report-dialog.component.less',
  standalone: true,
@@ -25,6 +26,11 @@ export class ReportDialogComponent {
  public readonly faOpen = faArrowUpRightFromSquare;
  public readonly faCheck = faCheck;
  public data = inject<ReportDialogData>(MAT_DIALOG_DATA);
+  public dialogRef = inject(MatDialogRef<ReportDialogComponent>);
+
+  public faReport = faCompactDisc;
+  public faClose = faXmark;
+
  private readonly openedNumbers = new Set<string>();

  public getSongReportingUrl(ccliNumber: string): string {
--- a/src/app/modules/shows/dialog/share-dialog/share-dialog.component.spec.ts
+++ b/src/app/modules/shows/dialog/share-dialog/share-dialog.component.spec.ts
@@ -1,21 +1,34 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-
 import {ShareDialogComponent} from './share-dialog.component';
-import QRCode from 'qrcode';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';

 describe('ShareDialogComponent', () => {
  let component: ShareDialogComponent;
  let fixture: ComponentFixture<ShareDialogComponent>;
+  type ShareDialogComponentInternals = ShareDialogComponent & {
+    generateQrCode: () => Promise<string>;
+  };

  beforeEach(async () => {
-    spyOn(QRCode, 'toDataURL').and.resolveTo('data:image/jpeg;base64,test');
-
    await TestBed.configureTestingModule({
      imports: [ShareDialogComponent],
+      providers: [
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            url: 'https://example.com/guest/1',
+            show: {
+              showType: 'service-worship',
+              date: {toDate: () => new Date('2026-03-20T00:00:00Z')},
+            },
+          },
+        },
+      ],
    }).compileComponents();

    fixture = TestBed.createComponent(ShareDialogComponent);
    component = fixture.componentInstance;
+    spyOn(component as ShareDialogComponentInternals, 'generateQrCode').and.resolveTo('data:image/jpeg;base64,test');
    fixture.detectChanges();
  });

--- a/src/app/modules/shows/dialog/share-dialog/share-dialog.component.ts
+++ b/src/app/modules/shows/dialog/share-dialog/share-dialog.component.ts
@@ -1,7 +1,6 @@
 import {Component, inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
 import {MatButton} from '@angular/material/button';
-import QRCode from 'qrcode';
 import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {Show} from '../../services/show';

@@ -24,18 +23,7 @@ export class ShareDialogComponent {
  public constructor() {
    const data = this.data;

-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
-    void QRCode.toDataURL(data.url, {
-      type: 'image/jpeg',
-      quality: 0.92,
-      width: 1280,
-      height: 1280,
-      color: {
-        dark: '#010414',
-        light: '#ffffff',
-      },
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-return
-    }).then((qrCode: string) => (this.qrCode = qrCode));
+    void this.generateQrCode(data.url).then(qrCode => (this.qrCode = qrCode));
  }

  public async share(): Promise<void> {
@@ -48,4 +36,18 @@ export class ShareDialogComponent {
        url: this.data.url,
      });
  }
+
+  private async generateQrCode(url: string): Promise<string> {
+    const {default: QRCode} = await import('qrcode');
+    return await QRCode.toDataURL(url, {
+      type: 'image/jpeg',
+      quality: 0.92,
+      width: 1280,
+      height: 1280,
+      color: {
+        dark: '#010414',
+        light: '#ffffff',
+      },
+    });
+  }
 }
--- a/src/app/modules/shows/edit/edit.component.html
+++ b/src/app/modules/shows/edit/edit.component.html
@@ -1,4 +1,5 @@
-<div>
+<app-page-frame title="Veranstaltungen" [withMenu]="false">
+  <div content>
    <app-card [closeLink]="'/shows/'+form.value.id" heading="Veranstaltung ändern">
      <div [formGroup]="form" class="split">
        <mat-form-field appearance="outline">
@@ -6,12 +7,12 @@
          <mat-select formControlName="showType">
            <mat-optgroup label="öffentlich">
              @for (key of showTypePublic; track key) {
-            <mat-option [value]="key">{{ key | showType }} </mat-option>
+                <mat-option [value]="key">{{ key | showType }}</mat-option>
              }
            </mat-optgroup>
            <mat-optgroup label="privat">
              @for (key of showTypePrivate; track key) {
-            <mat-option [value]="key">{{ key | showType }} </mat-option>
+                <mat-option [value]="key">{{ key | showType }}</mat-option>
              }
            </mat-optgroup>
          </mat-select>
@@ -28,4 +29,5 @@
        <app-button (click)="onSave()" [icon]="faSave">Speichern</app-button>
      </app-button-row>
    </app-card>
-</div>
+  </div>
+</app-page-frame>
--- a/src/app/modules/shows/edit/edit.component.ts
+++ b/src/app/modules/shows/edit/edit.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, inject} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {ShowDataService} from '../services/show-data.service';
 import {Observable, take} from 'rxjs';
 import {Show} from '../services/show';
@@ -18,6 +18,7 @@ import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/m
 import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
 import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';

@Component({
  selector: 'app-edit',
@@ -39,6 +40,7 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
    ButtonRowComponent,
    ButtonComponent,
    ShowTypePipe,
+    PageFrameComponent,
  ],
 })
 export class EditComponent implements OnInit {
@@ -70,7 +72,7 @@ export class EditComponent implements OnInit {
        map(param => param as {showId: string}),
        map(param => param.showId),
        switchMap((showId: string) => this.showService.read$(showId)),
-        take(1)
+        take(1),
      )
      .subscribe(show => {
        this.form.setValue({
--- a/src/app/modules/shows/list/list-item/list-item.component.html
+++ b/src/app/modules/shows/list/list-item/list-item.component.html
@@ -1,14 +1,14 @@
@if (show) {
-<div class="list-item">
-  <div>{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
-  <div>
+  <div class="list-item">
+    <div class="date">{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
+    <div class="user">
      <app-user-name [userId]="show.owner"></app-user-name>
    </div>
-  <div>{{ show.showType | showType }}</div>
-  <div>
+    <div class="show-type">{{ show.showType | showType }}</div>
+    <div class="badge">
      @if (showStatusBadge) {
        <app-badge [type]="showStatusBadgeType">{{ showStatusBadge }}</app-badge>
      }
    </div>
-</div>
+  </div>
 }
--- a/src/app/modules/shows/list/list-item/list-item.component.less
+++ b/src/app/modules/shows/list/list-item/list-item.component.less
@@ -2,6 +2,15 @@
  padding: 5px 20px;
  display: grid;
  grid-template-columns: 100px 150px auto 160px;
+  grid-template-areas: "date user show-type badge";
+
+  @media screen and (max-width: 860px) {
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas: "date user badge" ". show-type badge";
+    row-gap: 3px;
+  }
+
  min-height: 21px;

  & > div {
@@ -16,6 +25,23 @@
    background: var(--hover-background);
    color: var(--text);
  }
+
+  .date {
+    grid-area: date;
+  }
+
+  .user {
+    grid-area: user;
+  }
+
+  .show-type {
+    grid-area: show-type;
+  }
+
+  .badge {
+    grid-area: badge;
+    justify-content: end;
+  }
 }

 .number {
--- a/src/app/modules/shows/list/list.component.html
+++ b/src/app/modules/shows/list/list.component.html
@@ -1,5 +1,5 @@
@if (showSidebar$ | async) {
-<app-sidebar>
+  <app-page-frame title="Veranstaltungen">
    <div class="sidebar-content" sidebar>
      <app-filter [shows]="(publicShows$ | async) ?? []"></app-filter>
    </div>
@@ -15,28 +15,31 @@
            ></app-list-item>
          }
          <div *appRole="['leader']" class="list-action">
-        <app-button [fullWidth]="true" [icon]="faNewShow" routerLink="new">Neue Veranstaltung anlegen </app-button>
+            <app-button [fullWidth]="true" [icon]="faNewShow" routerLink="new">Neue Veranstaltung anlegen</app-button>
          </div>
        </app-card>
      }
-
-    @if (publicShows$ | async; as shows) { @if (shows.length > 0) {
+      @if (publicShows$ | async; as shows) {
+        @if (shows.length > 0) {
          <app-card [padding]="false" heading="Veröffentlichte Veranstaltungen">
            @for (show of shows; track trackBy($index, show)) {
              <app-list-item [routerLink]="show.id" [show]="show"></app-list-item>
            }
          </app-card>
-    } }
+        }
+      }
    </div>
-</app-sidebar>
+  </app-page-frame>
 } @else {
-<div>
-  @if (publicShows$ | async; as shows) { @if (shows.length > 0) {
+  <div>
+    @if (publicShows$ | async; as shows) {
+      @if (shows.length > 0) {
        <app-card [padding]="false" heading="Veröffentlichte Veranstaltungen">
          @for (show of shows; track trackBy($index, show)) {
            <app-list-item [routerLink]="show.id" [show]="show"></app-list-item>
          }
        </app-card>
-  } }
-</div>
+      }
+    }
+  </div>
 }
--- a/src/app/modules/shows/list/list.component.less
+++ b/src/app/modules/shows/list/list.component.less
@@ -1,3 +1,7 @@
 .sidebar-content {
  padding: 20px;
 }
+
+.list-action {
+  margin: 10px 20px;
+}
--- a/src/app/modules/shows/list/list.component.ts
+++ b/src/app/modules/shows/list/list.component.ts
@@ -12,7 +12,7 @@ import {FilterComponent} from './filter/filter.component';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
 import {ListItemComponent} from './list-item/list-item.component';
 import {UserService} from '../../../services/user/user.service';
-import {SidebarComponent} from '../../../widget-modules/components/sidebar/sidebar.component';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
 import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
 import {faPlus} from '@fortawesome/free-solid-svg-icons';
 import {RoleDirective} from '../../../services/user/role.directive';
@@ -22,21 +22,33 @@ import {RoleDirective} from '../../../services/user/role.directive';
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.less'],
  animations: [fade],
-  imports: [FilterComponent, CardComponent, ListItemComponent, RouterLink, AsyncPipe, SidebarComponent, ButtonComponent, RoleDirective],
+  imports: [FilterComponent, CardComponent, ListItemComponent, RouterLink, AsyncPipe, PageFrameComponent, ButtonComponent, RoleDirective],
 })
 export class ListComponent {
  public faNewShow = faPlus;
-  private showService = inject(ShowService);
  private filterStore = inject(FilterStoreService);
-  private userService = inject(UserService);
-
  public filter$ = this.filterStore.showFilter$;
  public lastMonths$ = this.filter$.pipe(map((filterValues: FilterValues) => filterValues.time || 1));
  public owner$ = this.filter$.pipe(map((filterValues: FilterValues) => filterValues.owner));
  public showType$ = this.filter$.pipe(map((filterValues: FilterValues) => filterValues.showType));
  public archived$ = this.filter$.pipe(map((filterValues: FilterValues) => !!filterValues.archived));
+  private showService = inject(ShowService);
  public shows$ = this.showService.list$();
+  public fallbackPublicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
+    map(([shows, lastMonths]) => {
+      return shows.filter(show => show.published && !show.archived).filter(show => this.matchesTimeFilter(show, lastMonths));
+    }),
+  );
  public ownShows$ = this.showService.list$(false, true);
+  public queriedPublicShows$ = this.lastMonths$.pipe(switchMap(lastMonths => this.showService.listPublicSince$(lastMonths)));
+  public publicShows$ = combineLatest([this.queriedPublicShows$, this.fallbackPublicShows$, this.owner$, this.showType$]).pipe(
+    map(([queriedShows, fallbackShows, owner, showType]) => {
+      const shows = queriedShows.length > 0 || fallbackShows.length === 0 ? queriedShows : fallbackShows;
+
+      return this.sortShowsByDateDesc(shows.filter(show => !owner || show.owner === owner).filter(show => !showType || show.showType === showType));
+    }),
+  );
+  private userService = inject(UserService);
  public privateShows$ = combineLatest([this.ownShows$, this.userService.user$, this.archived$]).pipe(
    map(([shows, user, showArchived]) =>
      shows.filter(show => {
@@ -49,22 +61,9 @@ export class ListComponent {
        }

        return !show.published || show.reportedType === 'pending';
-      })
+      }),
    ),
-    map(shows => this.sortShowsByDateDesc(shows))
-  );
-  public queriedPublicShows$ = this.lastMonths$.pipe(switchMap(lastMonths => this.showService.listPublicSince$(lastMonths)));
-  public fallbackPublicShows$ = combineLatest([this.shows$, this.lastMonths$]).pipe(
-    map(([shows, lastMonths]) => {
-      return shows.filter(show => show.published && !show.archived).filter(show => this.matchesTimeFilter(show, lastMonths));
-    })
-  );
-  public publicShows$ = combineLatest([this.queriedPublicShows$, this.fallbackPublicShows$, this.owner$, this.showType$]).pipe(
-    map(([queriedShows, fallbackShows, owner, showType]) => {
-      const shows = queriedShows.length > 0 || fallbackShows.length === 0 ? queriedShows : fallbackShows;
-
-      return this.sortShowsByDateDesc(shows.filter(show => !owner || show.owner === owner).filter(show => !showType || show.showType === showType));
-    })
+    map(shows => this.sortShowsByDateDesc(shows)),
  );
  public showSidebar$ = this.userService.user$.pipe(map(user => this.hasSidebarAccess(user?.role)));

--- a/src/app/modules/shows/new/new.component.html
+++ b/src/app/modules/shows/new/new.component.html
@@ -1,4 +1,5 @@
-<div>
+<app-page-frame title="Veranstaltungen" [withMenu]="false">
+  <div content>
    <app-card closeLink="/shows" heading="Neue Veranstaltung">
      <div [formGroup]="form" class="split">
        <mat-form-field appearance="outline">
@@ -6,12 +7,12 @@
          <mat-select formControlName="showType">
            <mat-optgroup label="öffentlich">
              @for (key of showTypePublic; track key) {
-            <mat-option [value]="key">{{ key | showType }} </mat-option>
+                <mat-option [value]="key">{{ key | showType }}</mat-option>
              }
            </mat-optgroup>
            <mat-optgroup label="privat">
              @for (key of showTypePrivate; track key) {
-            <mat-option [value]="key">{{ key | showType }} </mat-option>
+                <mat-option [value]="key">{{ key | showType }}</mat-option>
              }
            </mat-optgroup>
          </mat-select>
@@ -28,4 +29,5 @@
        <app-button (click)="onSave()" [icon]="faSave">Anlegen</app-button>
      </app-button-row>
    </app-card>
-</div>
+  </div>
+</app-page-frame>
--- a/src/app/modules/shows/new/new.component.ts
+++ b/src/app/modules/shows/new/new.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, inject} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {ShowDataService} from '../services/show-data.service';
 import {Observable} from 'rxjs';
 import {Show} from '../services/show';
@@ -16,6 +16,7 @@ import {MatDatepicker, MatDatepickerInput, MatDatepickerToggle} from '@angular/m
 import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
 import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';

@Component({
  selector: 'app-new',
@@ -37,6 +38,7 @@ import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/s
    ButtonRowComponent,
    ButtonComponent,
    ShowTypePipe,
+    PageFrameComponent,
  ],
 })
 export class NewComponent implements OnInit {
--- a/src/app/modules/shows/services/docx.service.spec.ts
+++ b/src/app/modules/shows/services/docx.service.spec.ts
@@ -1,13 +1,27 @@
 import {TestBed} from '@angular/core/testing';
-import {Packer} from 'docx';
 import {DocxService} from './docx.service';

 describe('DocxService', () => {
  let service: DocxService;
+  type PreparedData = {
+    show: {
+      showType: string;
+      date: {toDate: () => Date};
+    };
+    songs: unknown[];
+    user: {name: string};
+    config: {ccliLicenseId: string};
+  };
+  type DocxModuleLike = {
+    Packer: {toBlob: (document: unknown) => Promise<Blob>};
+  };
  type DocxServiceInternals = DocxService & {
-    prepareData: (showId: string) => Promise<unknown>;
-    prepareNewDocument: (data: unknown, options?: unknown) => unknown;
+    prepareData: (showId: string) => Promise<PreparedData | null>;
+    renderTitle: (docx: unknown, title: string) => unknown[];
+    renderSongs: (docx: unknown, songs: unknown[], options: unknown, config: unknown) => unknown[];
+    prepareNewDocument: (docx: unknown, data: unknown, options?: unknown, sections?: unknown) => unknown;
    saveAs: (blob: Blob, name: string) => void;
+    loadDocx: () => Promise<DocxModuleLike>;
  };

  beforeEach(async () => {
@@ -21,8 +35,8 @@ describe('DocxService', () => {

  it('should not try to save a document when the required data cannot be prepared', async () => {
    const serviceInternals = service as DocxServiceInternals;
-    const prepareDataSpy = spyOn<any>(serviceInternals, 'prepareData').and.resolveTo(null);
-    const saveAsSpy = spyOn<any>(serviceInternals, 'saveAs');
+    const prepareDataSpy = spyOn(serviceInternals, 'prepareData').and.resolveTo(null);
+    const saveAsSpy = spyOn(serviceInternals, 'saveAs');

    await service.create('show-1');

@@ -32,8 +46,13 @@ describe('DocxService', () => {

  it('should build and save a docx file when all data is available', async () => {
    const blob = new Blob(['docx']);
+    const docxModule: DocxModuleLike = {
+      Packer: {
+        toBlob: jasmine.createSpy('toBlob').and.resolveTo(blob),
+      },
+    };
    const serviceInternals = service as DocxServiceInternals;
-    const prepareDataSpy = spyOn<any>(serviceInternals, 'prepareData').and.resolveTo({
+    const prepareDataSpy = spyOn(serviceInternals, 'prepareData').and.resolveTo({
      show: {
        showType: 'service-worship',
        date: {toDate: () => new Date('2026-03-10T00:00:00Z')},
@@ -42,15 +61,17 @@ describe('DocxService', () => {
      user: {name: 'Benjamin'},
      config: {ccliLicenseId: '12345'},
    });
-    const prepareNewDocumentSpy = spyOn<any>(serviceInternals, 'prepareNewDocument').and.returnValue({doc: true});
-    const saveAsSpy = spyOn<any>(serviceInternals, 'saveAs');
-    spyOn(Packer, 'toBlob').and.resolveTo(blob);
+    spyOn(serviceInternals, 'loadDocx').and.resolveTo(docxModule);
+    spyOn(serviceInternals, 'renderTitle').and.returnValue([]);
+    spyOn(serviceInternals, 'renderSongs').and.returnValue([]);
+    const prepareNewDocumentSpy = spyOn(serviceInternals, 'prepareNewDocument').and.returnValue({doc: true});
+    const saveAsSpy = spyOn(serviceInternals, 'saveAs');

    await service.create('show-1', {copyright: true});

    expect(prepareDataSpy).toHaveBeenCalledWith('show-1');
    expect(prepareNewDocumentSpy).toHaveBeenCalled();
-    expect(Packer.toBlob).toHaveBeenCalledWith({doc: true} as never);
+    expect(docxModule.Packer.toBlob).toHaveBeenCalledWith({doc: true} as never);
    expect(saveAsSpy).toHaveBeenCalledWith(blob, jasmine.stringMatching(/\.docx$/));
  });
 });
--- a/src/app/modules/shows/services/docx.service.ts
+++ b/src/app/modules/shows/services/docx.service.ts
@@ -1,5 +1,4 @@
 import {Injectable, inject} from '@angular/core';
-import {Document, HeadingLevel, ISectionOptions, Packer, Paragraph} from 'docx';
 import {ShowService} from './show.service';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {ShowSongService} from './show-song.service';
@@ -17,6 +16,11 @@ import {LineType} from '../../songs/services/line-type';
 import {Line} from '../../songs/services/line';
 import {firstValueFrom} from 'rxjs';

+type DocxModule = typeof import('docx');
+type DocxDocument = import('docx').Document;
+type DocxParagraph = import('docx').Paragraph;
+type DocxSectionOptions = import('docx').ISectionOptions;
+
 export interface DownloadOptions {
  copyright?: boolean;
  chordMode?: ChordMode;
@@ -35,13 +39,14 @@ export class DocxService {
  public async create(showId: string, options: DownloadOptions = {}): Promise<void> {
    const data = await this.prepareData(showId);
    if (!data) return;
+    const docx = await this.loadDocx();
    const {show, songs, user, config} = data;
    const type = new ShowTypePipe().transform(show.showType);
    const title = `${type} ${show.date.toDate().toLocaleDateString()}`;

-    const paragraphs = [...this.renderTitle(title), ...this.renderSongs(songs, options, config)];
+    const paragraphs = [...this.renderTitle(docx, title), ...this.renderSongs(docx, songs, options, config)];

-    const sections: ISectionOptions[] = [
+    const sections: DocxSectionOptions[] = [
      {
        properties: {
          page: {
@@ -51,16 +56,16 @@ export class DocxService {
        children: paragraphs,
      },
    ];
-    const document = this.prepareNewDocument(type, user.name, options, sections);
+    const document = this.prepareNewDocument(docx, type, user.name, options, sections);

-    const blob = await Packer.toBlob(document);
+    const blob = await docx.Packer.toBlob(document);

    // saveAs from FileSaver will download the file
    this.saveAs(blob, `${title}.docx`);
  }

-  private prepareNewDocument(type: string, name: string, options: DownloadOptions, sections: ISectionOptions[]): Document {
-    return new Document({
+  private prepareNewDocument(docx: DocxModule, type: string, name: string, options: DownloadOptions, sections: DocxSectionOptions[]): DocxDocument {
+    return new docx.Document({
      creator: name,
      title: type,
      description: '... mit Beschreibung',
@@ -91,32 +96,33 @@ export class DocxService {
  }

  private renderSongs(
+    docx: DocxModule,
    songs: {
      showSong: ShowSong;
      sections: Section[];
    }[],
    options: DownloadOptions,
    config: Config
-  ): Paragraph[] {
-    return songs.reduce((p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.showSong, song.sections, options, config)], []);
+  ): DocxParagraph[] {
+    return songs.reduce((p: DocxParagraph[], song) => [...p, ...this.renderSong(docx, song.showSong, song.showSong, song.sections, options, config)], []);
  }

-  private renderSong(showSong: ShowSong, song: Song, sections: Section[], options: DownloadOptions, config: Config): Paragraph[] {
-    const songTitle = this.renderSongTitle(song);
-    const copyright = this.renderCopyright(song, options, config);
-    const songText = this.renderSongText(sections, options?.chordMode ?? showSong.chordMode);
+  private renderSong(docx: DocxModule, showSong: ShowSong, song: Song, sections: Section[], options: DownloadOptions, config: Config): DocxParagraph[] {
+    const songTitle = this.renderSongTitle(docx, song);
+    const copyright = this.renderCopyright(docx, song, options, config);
+    const songText = this.renderSongText(docx, sections, options?.chordMode ?? showSong.chordMode);

    return copyright ? [songTitle, copyright, ...songText] : [songTitle, ...songText];
  }

-  private renderSongText(sections: Section[], chordMode: ChordMode): Paragraph[] {
-    return sections.reduce((p: Paragraph[], section) => [...p, ...this.renderSection(section, chordMode)], []);
+  private renderSongText(docx: DocxModule, sections: Section[], chordMode: ChordMode): DocxParagraph[] {
+    return sections.reduce((p: DocxParagraph[], section) => [...p, ...this.renderSection(docx, section, chordMode)], []);
  }

-  private renderSongTitle(song: Song): Paragraph {
-    return new Paragraph({
+  private renderSongTitle(docx: DocxModule, song: Song): DocxParagraph {
+    return new docx.Paragraph({
      text: song.title,
-      heading: HeadingLevel.HEADING_2,
+      heading: docx.HeadingLevel.HEADING_2,
      thematicBreak: true,
      spacing: {
        before: 200,
@@ -124,7 +130,7 @@ export class DocxService {
    });
  }

-  private renderCopyright(song: Song, options: DownloadOptions, config: Config): Paragraph | null {
+  private renderCopyright(docx: DocxModule, song: Song, options: DownloadOptions, config: Config): DocxParagraph | null {
    if (!options?.copyright) {
      return null;
    }
@@ -135,13 +141,13 @@ export class DocxService {
    const origin = song.origin ? song.origin + ', ' : '';
    const licence = song.legalOwner === 'CCLI' ? 'CCLI-Liednummer: ' + song.legalOwnerId + ', CCLI-Lizenz: ' + config.ccliLicenseId : 'CCLI-Liednummer: ' + song.legalOwnerId;

-    return new Paragraph({
+    return new docx.Paragraph({
      text: artist + label + termsOfUse + origin + licence,
      style: 'licence',
    });
  }

-  private renderSection(section: Section, chordMode: ChordMode): Paragraph[] {
+  private renderSection(docx: DocxModule, section: Section, chordMode: ChordMode): DocxParagraph[] {
    return section.lines
      .filter(line => {
        if (line.type === LineType.text) {
@@ -156,22 +162,22 @@ export class DocxService {
            return section.number === 0;
        }
      })
-      .map((line, i) => this.renderLine(line, i === 0));
+      .map((line, i) => this.renderLine(docx, line, i === 0));
  }

-  private renderLine(line: Line, isFirstLine: boolean): Paragraph {
+  private renderLine(docx: DocxModule, line: Line, isFirstLine: boolean): DocxParagraph {
    const spacing = isFirstLine ? {before: 200} : {};
-    return new Paragraph({
+    return new docx.Paragraph({
      text: line.text,
      style: 'songtext',
      spacing,
    });
  }

-  private renderTitle(type: string): Paragraph[] {
-    const songTitle = new Paragraph({
+  private renderTitle(docx: DocxModule, type: string): DocxParagraph[] {
+    const songTitle = new docx.Paragraph({
      text: type,
-      heading: HeadingLevel.HEADING_1,
+      heading: docx.HeadingLevel.HEADING_1,
      thematicBreak: true,
    });

@@ -232,4 +238,8 @@ export class DocxService {
      document.body.removeChild(a);
    }, 1000);
  }
+
+  private loadDocx(): Promise<DocxModule> {
+    return import('docx');
+  }
 }
--- a/src/app/modules/shows/services/show.service.spec.ts
+++ b/src/app/modules/shows/services/show.service.spec.ts
@@ -56,10 +56,7 @@ describe('ShowService', () => {
  });

  it('should not include archived shows from other users when requested', async () => {
-    shows$.next([
-      ...(shows as unknown as unknown[]),
-      {id: 'show-4', owner: 'other-user', published: true, archived: true},
-    ]);
+    shows$.next([...(shows as unknown as unknown[]), {id: 'show-4', owner: 'other-user', published: true, archived: true}]);

    const result = await firstValueFrom(service.list$(false, true));
    expect(result.map(show => show.id)).toEqual(['show-1', 'show-2', 'show-3']);
--- a/src/app/modules/shows/services/show.service.ts
+++ b/src/app/modules/shows/services/show.service.ts
@@ -27,9 +27,7 @@ export class ShowService {
        (user: User | null, shows: Show[]) => ({user, shows})
      ),
      map(s =>
-        s.shows
-          .filter(show => !show.archived || (includeOwnArchived && show.owner === s.user?.id))
-          .filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
+        s.shows.filter(show => !show.archived || (includeOwnArchived && show.owner === s.user?.id)).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
      )
    );
  }
--- a/src/app/modules/shows/show/show.component.html
+++ b/src/app/modules/shows/show/show.component.html
@@ -1,5 +1,6 @@
-@if (show$ | async; as show) {
-<div>
+<app-page-frame title="Veranstaltungen" [withMenu]="false">
+  @if (show$ | async; as show) {
+    <div content>
      <app-card
        [fullscreen]="useSwiper"
        closeLink="../"
@@ -26,8 +27,10 @@
            }
          </div>
          <div [class.floating]="useSwiper">
-        <app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon" matTooltip="Verkleinern"></app-menu-button>
-        <app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon" matTooltip="Vergrößern"></app-menu-button>
+            <app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon"
+                             matTooltip="Verkleinern"></app-menu-button>
+            <app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon"
+                             matTooltip="Vergrößern"></app-menu-button>
            <app-menu-button
              (click)="useSwiper=!useSwiper;fullscreen(useSwiper)"
              @fade
@@ -60,11 +63,13 @@
              </div>
            }
          </div>
-    } @if (useSwiper) {
+        }
+        @if (useSwiper) {
          <swiper-container scrollbar="true">
            @for (song of orderedShowSongs(show); track trackBy(i, song); let i = $index) {
              <swiper-slide [style.font-size]="textSize + 'em'" class="song-swipe">
-        <app-song [fullscreen]="true" [index]="i" [showId]="showId" [showSong]="song" [showText]="true" [show]="show"></app-song>
+                <app-song [fullscreen]="true" [index]="i" [showId]="showId" [showSong]="song" [showText]="true"
+                          [show]="show"></app-song>
                <div class="time">{{ currentTime | date: 'HH:mm' }}</div>
                @if (getNextSong(orderedShowSongs(show), i); as next) {
                  <div class="next-song">
@@ -75,36 +80,48 @@
              </swiper-slide>
            }
          </swiper-container>
-    } @if (songs$ | async; as songs) { @if (songs && !show.published && !useSwiper) {
+        }
+        @if (songs$ | async; as songs) {
+          @if (songs && !show.published && !useSwiper) {
            <app-add-song [showSongs]="showSongs" [show]="show" [songs]="songs"></app-add-song>
-    } } @if (!useSwiper) {
+          }
+        }
+        @if (!useSwiper) {
          <app-button-row>
            <ng-container *appRole="['leader']">
              <ng-container *appOwner="show.owner">
                @if (!show.archived) {
-          <app-button (click)="onArchive(true)" [icon]="faBox"> Archivieren </app-button>
-          } @if (show.archived) {
-          <app-button (click)="onArchive(false)" [icon]="faBoxOpen"> Wiederherstellen </app-button>
-          } @if (!show.published) {
-          <app-button (click)="onPublish(show, true)" [icon]="faPublish"> Veröffentlichen </app-button>
-          } @if (show.published) {
-          <app-button (click)="onPublish(show, false)" [icon]="faUnpublish"> Veröffentlichung zurückziehen </app-button>
-          } @if (show.published) {
-          <app-button (click)="onShare(show)" [icon]="faShare"> Teilen </app-button>
-          } @if (show.published && show.reportedType === 'pending') {
-          <app-button (click)="onReport(show)" [icon]="faReport"> Melden </app-button>
-          } @if (!show.published) {
-          <app-button (click)="onChange(show.id)" [icon]="faSliders"> Ändern </app-button>
+                  <app-button (click)="onArchive(true)" [icon]="faBox"> Archivieren</app-button>
+                }
+                @if (show.archived) {
+                  <app-button (click)="onArchive(false)" [icon]="faBoxOpen"> Wiederherstellen</app-button>
+                }
+                @if (!show.published) {
+                  <app-button (click)="onPublish(show, true)" [icon]="faPublish"> Veröffentlichen</app-button>
+                }
+                @if (show.published) {
+                  <app-button (click)="onPublish(show, false)" [icon]="faUnpublish"> Veröffentlichung zurückziehen
+                  </app-button>
+                }
+                @if (show.published) {
+                  <app-button (click)="onShare(show)" [icon]="faShare"> Teilen</app-button>
+                }
+                @if (show.published && show.reportedType === 'pending') {
+                  <app-button (click)="onReport(show)" [icon]="faReport"> CCLI</app-button>
+                }
+                @if (!show.published) {
+                  <app-button (click)="onChange(show.id)" [icon]="faSliders"> Ändern</app-button>
                }
              </ng-container>
            </ng-container>
-      <app-button [icon]="faDownload" [matMenuTriggerFor]="menu"> Herunterladen </app-button>
+            <app-button [icon]="faDownload" [matMenuTriggerFor]="menu"> Herunterladen</app-button>
            <mat-menu #menu="matMenu">
-        <app-button (click)="onDownload()" [icon]="faUser"> Ablauf für Lobpreisgruppe </app-button>
-        <app-button (click)="onDownloadHandout()" [icon]="faUsers"> Handout mit Copyright Infos </app-button>
+              <app-button (click)="onDownload()" [icon]="faUser"> Ablauf für Lobpreisgruppe</app-button>
+              <app-button (click)="onDownloadHandout()" [icon]="faUsers"> Handout mit Copyright Infos</app-button>
            </mat-menu>
          </app-button-row>
        }
      </app-card>
-</div>
-}
+    </div>
+  }
+</app-page-frame>
--- a/src/app/modules/shows/show/show.component.less
+++ b/src/app/modules/shows/show/show.component.less
@@ -1,6 +1,6 @@
 :host {
-  --button-padding-mobile: 10px;
-  --button-font-size-mobile: 25px;
+  --button-padding-mobile: 4px;
+  --button-font-size-mobile: 20px;
 }

 .song-row:not(:last-child) {
--- a/src/app/modules/shows/show/show.component.ts
+++ b/src/app/modules/shows/show/show.component.ts
@@ -1,9 +1,16 @@
-import {ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, HostListener, OnDestroy, OnInit, inject} from '@angular/core';
-import {filter, map, shareReplay, switchMap, tap} from 'rxjs/operators';
+import {
+  ChangeDetectorRef,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  HostListener,
+  inject,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import {filter, map, shareReplay, switchMap, take, tap} from 'rxjs/operators';
 import {ActivatedRoute, Router} from '@angular/router';
 import {ShowService} from '../services/show.service';
 import {Observable, of, Subscription} from 'rxjs';
-import {take} from 'rxjs/operators';
 import {Show} from '../services/show';
 import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
@@ -14,8 +21,8 @@ import {
  faArrowUpRightFromSquare,
  faBox,
  faBoxOpen,
-  faCheck,
  faChevronRight,
+  faCompactDisc,
  faFileDownload,
  faLock,
  faMagnifyingGlassMinus,
@@ -55,6 +62,8 @@ import {ReportedTypePipe} from '../../../widget-modules/pipes/reported-type-tran
 import {BadgeComponent, BadgeType} from '../../../widget-modules/components/badge/badge.component';
 import {ReportDialogComponent, ReportDialogSong} from '../dialog/report-dialog/report-dialog.component';
 import {PublishedTypePipe} from '../../../widget-modules/pipes/published-type-translator/published-type.pipe';
+import {ensureSwiperElement} from '../../../services/swiper-element';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';

@Component({
  selector: 'app-show',
@@ -87,29 +96,19 @@ import {PublishedTypePipe} from '../../../widget-modules/pipes/published-type-tr
    ReportedTypePipe,
    PublishedTypePipe,
    BadgeComponent,
+    PageFrameComponent,
  ],
 })
 export class ShowComponent implements OnInit, OnDestroy {
-  private activatedRoute = inject(ActivatedRoute);
-  private showService = inject(ShowService);
-  private songService = inject(SongService);
-  private showSongService = inject(ShowSongService);
-  private docxService = inject(DocxService);
-  private router = inject(Router);
-  private cRef = inject(ChangeDetectorRef);
-  private userService = inject(UserService);
  public dialog = inject(MatDialog);
-  private guestShowService = inject(GuestShowService);
-
  public show$: Observable<Show | null> | null = null;
  public songs$: Observable<Song[] | null> | null = null;
  public showSongs: ShowSong[] | null = null;
  public showId: string | null = null;
  public showText = false;
-
  public faBox = faBox;
  public faBoxOpen = faBoxOpen;
-  public faReport = faCheck;
+  public faReport = faCompactDisc;
  public faPublish = faUnlock;
  public faUnpublish = faLock;
  public faShare = faArrowUpRightFromSquare;
@@ -125,10 +124,20 @@ export class ShowComponent implements OnInit, OnDestroy {
  public faMaximize = faMaximize;
  public faNextSong = faChevronRight;
  public currentTime!: Date;
+  private activatedRoute = inject(ActivatedRoute);
+  private showService = inject(ShowService);
+  private songService = inject(SongService);
+  private showSongService = inject(ShowSongService);
+  private docxService = inject(DocxService);
+  private router = inject(Router);
+  private cRef = inject(ChangeDetectorRef);
+  private userService = inject(UserService);
+  private guestShowService = inject(GuestShowService);
  private subs: Subscription[] = [];
  private clockIntervalId: ReturnType<typeof setInterval> | null = null;

  public ngOnInit(): void {
+    void ensureSwiperElement();
    this.currentTime = new Date();
    this.clockIntervalId = setInterval(() => {
      this.currentTime = new Date();
@@ -141,7 +150,7 @@ export class ShowComponent implements OnInit, OnDestroy {
      shareReplay({
        bufferSize: 1,
        refCount: true,
-      })
+      }),
    );
    this.subs.push(
      this.activatedRoute.params
@@ -149,12 +158,12 @@ export class ShowComponent implements OnInit, OnDestroy {
          map(param => param as {showId: string}),
          map(param => param.showId),
          switchMap(showId => this.showSongService.list$(showId)),
-          filter(_ => !!_ && _.length > 0)
+          filter(_ => !!_ && _.length > 0),
        )
        .subscribe(_ => {
          this.showSongs = _;
          this.cRef.markForCheck();
-        })
+        }),
    );

    this.songs$ = this.show$.pipe(
@@ -162,7 +171,7 @@ export class ShowComponent implements OnInit, OnDestroy {
      shareReplay({
        bufferSize: 1,
        refCount: true,
-      })
+      }),
    );
  }

@@ -270,24 +279,6 @@ export class ShowComponent implements OnInit, OnDestroy {
    return show.published ? 'ok' : 'none';
  }

-  private getReportableSongs(show: Show): ReportDialogSong[] {
-    const uniqueSongs = new Map<string, ReportDialogSong>();
-
-    this.orderedShowSongs(show)
-      .filter(song => song.legalOwner === 'CCLI' && !!song.legalOwnerId)
-      .forEach(song => {
-        const key = song.songId || `${song.title}:${song.legalOwnerId}`;
-        if (!uniqueSongs.has(key)) {
-          uniqueSongs.set(key, {
-            title: song.title,
-            ccliNumber: song.legalOwnerId,
-          });
-        }
-      });
-
-    return Array.from(uniqueSongs.values());
-  }
-
  public async onDownload(): Promise<void> {
    if (this.showId != null) await this.docxService.create(this.showId);
  }
@@ -361,6 +352,24 @@ export class ShowComponent implements OnInit, OnDestroy {
    return `${widthInCh}ch`;
  }

+  private getReportableSongs(show: Show): ReportDialogSong[] {
+    const uniqueSongs = new Map<string, ReportDialogSong>();
+
+    this.orderedShowSongs(show)
+      .filter(song => song.legalOwner === 'CCLI' && !!song.legalOwnerId)
+      .forEach(song => {
+        const key = song.songId || `${song.title}:${song.legalOwnerId}`;
+        if (!uniqueSongs.has(key)) {
+          uniqueSongs.set(key, {
+            title: song.title,
+            ccliNumber: song.legalOwnerId,
+          });
+        }
+      });
+
+    return Array.from(uniqueSongs.values());
+  }
+
  private async setArchiveState(archived: boolean): Promise<void> {
    if (!this.showId) {
      return;
--- a/src/app/modules/shows/show/song/song.component.html
+++ b/src/app/modules/shows/show/song/song.component.html
@@ -13,7 +13,7 @@
    <span class="title">{{ iSong.title }}</span>
    @if (!edit) {
    <div class="keys-container">
-      <div (click)="openKeySelect()" class="keys">
+      <div (click)="openKeySelect()" (keydown.enter)="openKeySelect()" (keydown.space)="openKeySelect()" class="keys" role="button" tabindex="0">
        @if (iSong.keyOriginal !== iSong.key) {
        <span>{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span>
        }
--- a/src/app/modules/shows/show/song/song.component.less
+++ b/src/app/modules/shows/show/song/song.component.less
@@ -18,7 +18,7 @@
    grid-template-areas: "keys title edit delete";

    @media screen and (max-width: 860px) {
-      grid-template-columns: var(--song-key-column-width, 30px) auto 45px 45px;
+      grid-template-columns: var(--song-key-column-width, 30px) auto 30px 30px;
    }

    &.with-drag {
@@ -26,7 +26,7 @@
      grid-template-areas: "drag keys title edit delete";

      @media screen and (max-width: 860px) {
-        grid-template-columns: 24px var(--song-key-column-width, 30px) auto 45px 45px;
+        grid-template-columns: 24px var(--song-key-column-width, 30px) auto 30px 30px;
      }
    }
  }
@@ -36,7 +36,7 @@
    grid-template-areas: "title keys edit delete";

    @media screen and (max-width: 860px) {
-      grid-template-columns: auto var(--song-key-column-width, 30px) 45px 45px;
+      grid-template-columns: auto var(--song-key-column-width, 30px) 30px 30px;
    }

    &.with-drag {
@@ -44,7 +44,7 @@
      grid-template-areas: "drag title keys edit delete";

      @media screen and (max-width: 860px) {
-        grid-template-columns: 24px auto var(--song-key-column-width, 30px) 45px 45px;
+        grid-template-columns: 24px auto var(--song-key-column-width, 30px) 30px 30px;
      }
    }
  }
@@ -176,4 +176,5 @@ button {

 textarea.edit {
  font-family: 'Ubuntu Mono', monospace;
+  line-height: 15px;
 }
--- a/src/app/modules/songs/services/file.service.spec.ts
+++ b/src/app/modules/songs/services/file.service.spec.ts
@@ -30,7 +30,7 @@ describe('FileService', () => {
  });

  it('should resolve download urls via AngularFire storage helpers', async () => {
-    const resolveSpy = spyOn<any>(service as FileServiceInternals, 'resolveDownloadUrl').and.resolveTo('https://cdn.example/file.pdf');
+    const resolveSpy = spyOn(service as FileServiceInternals, 'resolveDownloadUrl').and.resolveTo('https://cdn.example/file.pdf');

    await expectAsync(service.getDownloadUrl('songs/song-1/file.pdf').toPromise()).toBeResolvedTo('https://cdn.example/file.pdf');

@@ -38,7 +38,7 @@ describe('FileService', () => {
  });

  it('should delete the file from storage and metadata from firestore', async () => {
-    const deleteFromStorageSpy = spyOn<any>(service as FileServiceInternals, 'deleteFromStorage').and.resolveTo();
+    const deleteFromStorageSpy = spyOn(service as FileServiceInternals, 'deleteFromStorage').and.resolveTo();

    await service.delete('songs/song-1/file.pdf', 'song-1', 'file-1');

--- a/src/app/modules/songs/services/file.service.ts
+++ b/src/app/modules/songs/services/file.service.ts
@@ -3,9 +3,7 @@ import {deleteObject, getDownloadURL, ref, Storage} from '@angular/fire/storage'
 import {from, Observable} from 'rxjs';
 import {FileDataService} from './file-data.service';

-@Injectable({
-  providedIn: 'root',
-})
+@Injectable()
 export class FileService {
  private storage = inject(Storage);
  private fileDataService = inject(FileDataService);
--- a/src/app/modules/songs/services/text-rendering.service.spec.ts
+++ b/src/app/modules/songs/services/text-rendering.service.spec.ts
@@ -478,13 +478,15 @@ Text`;
      const service: TextRenderingService = TestBed.inject(TextRenderingService);
      const text = 'Strophe\nC\tG\ta\nText';

-      void expect(service.validateChordNotation(text)).toEqual(expect.arrayContaining([
+      void expect(service.validateChordNotation(text)).toEqual(
+        expect.arrayContaining([
          jasmine.objectContaining({
            lineNumber: 2,
            token: '\t',
            reason: 'tab_character',
          }),
-      ]));
+        ])
+      );
    });

    it('should not flag tabs on non chord lines', () => {
--- a/src/app/modules/songs/services/upload.service.spec.ts
+++ b/src/app/modules/songs/services/upload.service.spec.ts
@@ -39,7 +39,7 @@ describe('UploadService', () => {
        success();
      },
    };
-    const uploadSpy = spyOn<any>(service as UploadServiceInternals, 'startUpload').and.returnValue(task);
+    const uploadSpy = spyOn(service as UploadServiceInternals, 'startUpload').and.returnValue(task);
    const upload = new Upload(new File(['content'], 'test.pdf', {type: 'application/pdf'}));

    service.pushUpload('song-1', upload);
--- a/src/app/modules/songs/services/upload.service.ts
+++ b/src/app/modules/songs/services/upload.service.ts
@@ -5,9 +5,7 @@ import {ref, Storage, uploadBytesResumable} from '@angular/fire/storage';
 import {FileBase} from './fileBase';
 import {FileServer} from './fileServer';

-@Injectable({
-  providedIn: 'root',
-})
+@Injectable()
 export class UploadService extends FileBase {
  private fileDataService = inject(FileDataService);
  private storage = inject(Storage);
--- a/src/app/modules/songs/song-list/filter/filter.component.ts
+++ b/src/app/modules/songs/song-list/filter/filter.component.ts
@@ -1,6 +1,7 @@
 import {Component, DestroyRef, Input, inject} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
 import {SongService} from '../../services/song.service';
 import {FilterValues} from './filter-values';
 import {Song} from '../../services/song';
@@ -52,7 +53,9 @@ export class FilterComponent {
      this.filterFormGroup.patchValue(filterValues, {emitEvent: false});
    });

-    this.filterFormGroup.controls.q.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('q', value));
+    this.filterFormGroup.controls.q.valueChanges
+      .pipe(debounceTime(100), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+      .subscribe(value => this.filterValueChanged('q', value));
    this.filterFormGroup.controls.key.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('key', value));
    this.filterFormGroup.controls.type.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('type', value));
    this.filterFormGroup.controls.legalType.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => this.filterValueChanged('legalType', value));
--- a/src/app/modules/songs/song-list/song-list.component.html
+++ b/src/app/modules/songs/song-list/song-list.component.html
@@ -1,6 +1,6 @@
@if (songs$ | async; as songs) {
-<app-sidebar>
-  <div sidebar class="sidebar-content">
+  <app-page-frame title="Lieder">
+    <div class="sidebar-content" sidebar>
      <app-filter [songs]="songs"></app-filter>
    </div>
    <div content>
@@ -20,11 +20,13 @@
                  <div class="warning">
                    <fa-icon [icon]="faDraft"></fa-icon>
                  </div>
-            } @if (song.status === 'set') {
+                }
+                @if (song.status === 'set') {
                  <div class="neutral">
                    <fa-icon [icon]="faDraft"></fa-icon>
                  </div>
-            } @if (song.status === 'final') {
+                }
+                @if (song.status === 'final') {
                  <div class="success">
                    <fa-icon [icon]="faFinal"></fa-icon>
                  </div>
@@ -44,5 +46,5 @@
        </div>
      </app-card>
    </div>
-</app-sidebar>
+  </app-page-frame>
 }
--- a/src/app/modules/songs/song-list/song-list.component.ts
+++ b/src/app/modules/songs/song-list/song-list.component.ts
@@ -4,7 +4,7 @@ import {map} from 'rxjs/operators';
 import {combineLatest, Observable} from 'rxjs';
 import {fade} from '../../../animations';
 import {ActivatedRoute, RouterLink} from '@angular/router';
-import {filterSong} from '../../../services/filter.helper';
+import {searchSongs} from '../../../services/filter.helper';
 import {FilterValues} from './filter/filter-values';
 import {faBalanceScaleRight, faCheck, faPencilRuler, faPlus} from '@fortawesome/free-solid-svg-icons';
 import {TextRenderingService} from '../services/text-rendering.service';
@@ -14,7 +14,7 @@ import {FilterComponent} from './filter/filter.component';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
 import {RoleDirective} from '../../../services/user/role.directive';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
-import {SidebarComponent} from '../../../widget-modules/components/sidebar/sidebar.component';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';
 import {ButtonComponent} from '../../../widget-modules/components/button/button.component';

 interface SongListItem extends Song {
@@ -27,7 +27,7 @@ interface SongListItem extends Song {
  styleUrls: ['./song-list.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [fade],
-  imports: [FilterComponent, CardComponent, RouterLink, RoleDirective, FaIconComponent, AsyncPipe, SidebarComponent, ButtonComponent],
+  imports: [FilterComponent, CardComponent, RouterLink, RoleDirective, FaIconComponent, AsyncPipe, PageFrameComponent, ButtonComponent],
 })
 export class SongListComponent {
  public faLegal = faBalanceScaleRight;
@@ -42,21 +42,19 @@ export class SongListComponent {
    this.route.data.pipe(map(data => (data['songs'] as Song[]).slice().sort((a, b) => a.number - b.number))),
  ]).pipe(
    map(([filter, songs]) => {
-      return songs
+      return searchSongs(songs, filter.q)
        .filter(song => this.filter(song, filter))
        .map(song => ({
          ...song,
          hasChordValidationIssues: this.textRenderingService.validateChordNotation(song.text ?? '').length > 0,
-        }))
-        .sort((a, b) => a.title?.localeCompare(b.title));
-    })
+        }));
+    }),
  );

  public trackBy = (index: number, show: SongListItem) => show.id;

  private filter(song: Song, filter: FilterValues): boolean {
-    let baseFilter = filterSong(song, filter.q);
-    baseFilter = baseFilter && (!filter.type || filter.type === song.type);
+    let baseFilter = !filter.type || filter.type === song.type;
    baseFilter = baseFilter && (!filter.key || filter.key === song.key);
    baseFilter = baseFilter && (!filter.legalType || filter.legalType === song.legalType);
    baseFilter = baseFilter && (!filter.flag || this.checkFlag(filter.flag, song.flags));
--- a/src/app/modules/songs/song/edit/edit-file/edit-file.component.ts
+++ b/src/app/modules/songs/song/edit/edit-file/edit-file.component.ts
@@ -18,6 +18,7 @@ import {FileComponent} from './file/file.component';
  templateUrl: './edit-file.component.html',
  styleUrls: ['./edit-file.component.less'],
  imports: [CardComponent, NgStyle, MatIconButton, MatIcon, FileComponent, AsyncPipe],
+  providers: [UploadService],
 })
 export class EditFileComponent {
  private activatedRoute = inject(ActivatedRoute);
--- a/src/app/modules/songs/song/edit/edit-file/file/file.component.ts
+++ b/src/app/modules/songs/song/edit/edit-file/file/file.component.ts
@@ -12,6 +12,7 @@ import {AsyncPipe} from '@angular/common';
  templateUrl: './file.component.html',
  styleUrls: ['./file.component.less'],
  imports: [MatIconButton, FaIconComponent, AsyncPipe],
+  providers: [FileService],
 })
 export class FileComponent {
  private fileService = inject(FileService);
--- a/src/app/modules/songs/song/edit/edit-song/edit-song.component.less
+++ b/src/app/modules/songs/song/edit/edit-song/edit-song.component.less
@@ -24,6 +24,7 @@

  textarea {
    font-family: 'Ubuntu Mono', monospace;
+    line-height: 15px;
  }
 }

--- a/src/app/modules/songs/song/edit/edit.component.html
+++ b/src/app/modules/songs/song/edit/edit.component.html
@@ -1,5 +1,7 @@
-<div>
+<app-page-frame title="Lieder" [withMenu]="false">
+  <div content>
    <app-edit-song></app-edit-song>
    <app-edit-file></app-edit-file>
    <app-history></app-history>
-</div>
+  </div>
+</app-page-frame>
--- a/src/app/modules/songs/song/edit/edit.component.ts
+++ b/src/app/modules/songs/song/edit/edit.component.ts
@@ -2,12 +2,13 @@ import {Component, ViewChild} from '@angular/core';
 import {EditSongComponent} from './edit-song/edit-song.component';
 import {EditFileComponent} from './edit-file/edit-file.component';
 import {HistoryComponent} from './history/history.component';
+import {PageFrameComponent} from '../../../../widget-modules/components/sidebar/page-frame.component';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.less'],
-  imports: [EditSongComponent, EditFileComponent, HistoryComponent],
+  imports: [EditSongComponent, EditFileComponent, HistoryComponent, PageFrameComponent],
 })
 export class EditComponent {
  @ViewChild(EditSongComponent) public editSongComponent: EditSongComponent | null = null;
--- a/src/app/modules/songs/song/new/new.component.html
+++ b/src/app/modules/songs/song/new/new.component.html
@@ -1,4 +1,5 @@
-<app-card closeLink="../" heading="Neues Lied">
+<app-page-frame title="Lieder" [withMenu]="false">
+  <app-card closeLink="../" heading="Neues Lied" content>
    <div [formGroup]="form" class="split">
      <mat-form-field appearance="outline">
        <mat-label>Nummer</mat-label>
@@ -6,11 +7,12 @@
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Titel</mat-label>
-      <input autofocus formControlName="title" matInput />
+        <input formControlName="title" matInput />
      </mat-form-field>
    </div>

    <app-button-row>
      <app-button (click)="onSave()" [icon]="faSave">Anlegen</app-button>
    </app-button-row>
-</app-card>
+  </app-card>
+</app-page-frame>
--- a/src/app/modules/songs/song/new/new.component.ts
+++ b/src/app/modules/songs/song/new/new.component.ts
@@ -1,6 +1,5 @@
-import {Component, OnInit, inject} from '@angular/core';
+import {Component, DestroyRef, inject, OnInit} from '@angular/core';
 import {faSave} from '@fortawesome/free-solid-svg-icons';
-import {DestroyRef} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {SongService} from '../../services/song.service';
@@ -12,12 +11,13 @@ import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {ButtonRowComponent} from '../../../../widget-modules/components/button-row/button-row.component';
 import {ButtonComponent} from '../../../../widget-modules/components/button/button.component';
+import {PageFrameComponent} from '../../../../widget-modules/components/sidebar/page-frame.component';

@Component({
  selector: 'app-new',
  templateUrl: './new.component.html',
  styleUrls: ['./new.component.less'],
-  imports: [CardComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, ButtonRowComponent, ButtonComponent],
+  imports: [CardComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, ButtonRowComponent, ButtonComponent, PageFrameComponent],
 })
 export class NewComponent implements OnInit {
  private songService = inject(SongService);
--- a/src/app/modules/songs/song/song.component.html
+++ b/src/app/modules/songs/song/song.component.html
@@ -1,4 +1,5 @@
-<div class="split">
+<app-page-frame title="Lieder" [withMenu]="false">
+  <div class="split" content>
    @if (song$ | async; as song) {
      <app-card [heading]="song.number + ' - ' + song.title" closeLink="../">
        <div class="song">
@@ -10,46 +11,59 @@
              <div>Status: {{ (song.status | status) || "entwurf" }}</div>
              @if (song.legalOwner) {
                <div>Rechteinhaber: {{ song.legalOwner | legalOwner }}</div>
-          } @if (song.legalOwnerId && song.legalOwner === 'CCLI') {
+              }
+              @if (song.legalOwnerId && song.legalOwner === 'CCLI') {
                <div>
-            <a href="https://songselect.ccli.com/Songs/{{ song.legalOwnerId }}" target="_blank"> CCLI Nummer: {{ song.legalOwnerId }} </a>
+                  <a href="https://songselect.ccli.com/Songs/{{ song.legalOwnerId }}" target="_blank"> CCLI
+                    Nummer: {{ song.legalOwnerId }} </a>
                </div>
-          } @if (song.legalOwnerId && song.legalOwner !== 'CCLI') {
+              }
+              @if (song.legalOwnerId && song.legalOwner !== 'CCLI') {
                <div>Rechteinhaber ID: {{ song.legalOwnerId }}</div>
-          } @if (song.artist) {
+              }
+              @if (song.artist) {
                <div>Künstler: {{ song.artist }}</div>
-          } @if (song.label) {
+              }
+              @if (song.label) {
                <div>Verlag: {{ song.label }}</div>
-          } @if (song.origin) {
+              }
+              @if (song.origin) {
                <div>Quelle: {{ song.origin }}</div>
              }
-          <div [matTooltip]="songUsageTooltip$ | async" matTooltipPosition="above">Wie oft verwendet: {{ songCount$ | async }}</div>
+              <div [matTooltip]="songUsageTooltip$ | async" matTooltipPosition="above">Wie oft
+                verwendet: {{ songCount$ | async }}
+              </div>
            </div>
          </div>
          @if (user$ | async; as user) {
-      <app-song-text [chordMode]="user.chordMode" [showSwitch]="true" [text]="song.text" [validateChordNotation]="true"></app-song-text>
+            <app-song-text [chordMode]="user.chordMode" [showSwitch]="true" [text]="song.text"
+                           [validateChordNotation]="true"></app-song-text>
          }
          <mat-chip-listbox *appRole="['leader', 'contributor']" aria-label="Attribute">
            @for (flag of getFlags(song.flags); track flag) {
-        <mat-chip-option>{{ flag }} </mat-chip-option>
+              <mat-chip-option>{{ flag }}</mat-chip-option>
            }
          </mat-chip-listbox>
          <div *appRole="['leader', 'contributor']" class="text">{{ song.comment }}</div>
        </div>
        <app-button-row>
-      <app-button (click)="onDelete(song.id)" *appRole="['admin']" [icon]="faDelete">Löschen </app-button>
-      <app-button *appRole="['contributor']" [icon]="faEdit" routerLink="edit">Bearbeiten </app-button>
+          <app-button (click)="onDelete(song.id)" *appRole="['admin']" [icon]="faDelete">Löschen</app-button>
+          <app-button *appRole="['contributor']" [icon]="faEdit" routerLink="edit">Bearbeiten</app-button>
          <ng-container *appRole="['leader']">
-        <app-button [icon]="faFileCirclePlus" [matMenuTriggerFor]="menu"> Zu Veranstaltung hinzufügen </app-button>
+            <app-button [icon]="faFileCirclePlus" [matMenuTriggerFor]="menu"> Zu Veranstaltung hinzufügen</app-button>
            <mat-menu #menu="matMenu">
              @for (show of privateShows$|async; track show.id) {
-          <app-button (click)="addSongToShow(show, song)"> {{ show.date.toDate() | date: "dd.MM.yyyy" }} {{ show.showType | showType }} </app-button>
+                <app-button
+                  (click)="addSongToShow(show, song)"> {{ show.date.toDate() | date: "dd.MM.yyyy" }} {{ show.showType | showType }}
+                </app-button>
              }
            </mat-menu>
          </ng-container>
        </app-button-row>
      </app-card>
-  } @if (files$ | async; as files) { @if (files.length > 0) {
+    }
+    @if (files$ | async; as files) {
+      @if (files.length > 0) {
        <app-card heading="Anhänge">
          @for (file of files$ | async; track file.id) {
            <p>
@@ -57,5 +71,7 @@
            </p>
          }
        </app-card>
-  } }
-</div>
+      }
+    }
+  </div>
+</app-page-frame>
--- a/src/app/modules/songs/song/song.component.ts
+++ b/src/app/modules/songs/song/song.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, inject} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {ActivatedRoute, Router, RouterLink} from '@angular/router';
 import {SongService} from '../services/song.service';
 import {distinctUntilChanged, map, switchMap} from 'rxjs/operators';
@@ -26,6 +26,7 @@ import {LegalOwnerPipe} from '../../../widget-modules/pipes/legal-owner-translat
 import {StatusPipe} from '../../../widget-modules/pipes/status-translater/status.pipe';
 import {ShowTypePipe} from '../../../widget-modules/pipes/show-type-translater/show-type.pipe';
 import {MatTooltip} from '@angular/material/tooltip';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';

@Component({
  selector: 'app-song',
@@ -50,6 +51,7 @@ import {MatTooltip} from '@angular/material/tooltip';
    StatusPipe,
    ShowTypePipe,
    MatTooltip,
+    PageFrameComponent,
  ],
 })
 export class SongComponent implements OnInit {
@@ -84,14 +86,14 @@ export class SongComponent implements OnInit {
    const song$ = this.activatedRoute.params.pipe(
      map(param => param as {songId: string}),
      map(param => param.songId),
-      switchMap(songId => this.songService.read$(songId))
+      switchMap(songId => this.songService.read$(songId)),
    );
    this.song$ = song$;

    this.files$ = this.activatedRoute.params.pipe(
      map(param => param as {songId: string}),
      map(param => param.songId),
-      switchMap(songId => this.fileService.read$(songId))
+      switchMap(songId => this.fileService.read$(songId)),
    );

    this.songCount$ = combineLatest([this.userService.user$, song$]).pipe(
@@ -102,7 +104,7 @@ export class SongComponent implements OnInit {

        return user?.songUsage?.[song.id] ?? 0;
      }),
-      distinctUntilChanged()
+      distinctUntilChanged(),
    );

    this.songUsageShows$ = combineLatest([this.userService.user$, this.showService.list$(), song$]).pipe(
@@ -115,7 +117,7 @@ export class SongComponent implements OnInit {
          .filter(show => show.owner === user.id)
          .filter(show => (show.songIds ?? []).includes(song.id))
          .sort((a, b) => b.date.toMillis() - a.date.toMillis());
-      })
+      }),
    );

    this.songUsageTooltip$ = combineLatest([this.songCount$, this.songUsageShows$]).pipe(
@@ -129,7 +131,7 @@ export class SongComponent implements OnInit {
        }

        return shows.map(show => `${this.dateFormatter.format(show.date.toDate())} - ${this.showTypePipe.transform(show.showType)}`).join('\n');
-      })
+      }),
    );
  }

--- a/src/app/modules/user/info/info.component.html
+++ b/src/app/modules/user/info/info.component.html
@@ -1,8 +1,11 @@
-@if (user$ | async; as user) {
-<app-card heading="Hallo {{ user.name }}">
+<app-page-frame title="Benutzer" [withMenu]="false">
+  <div content>
+    @if (user$ | async; as user) {
+      <app-card heading="Hallo {{ user.name }}">
        <p>
          @if (getUserRoles(user.role).length === 0) {
-    <span class="warn">Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den Administrator!</span>
+            <span
+              class="warn">Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den Administrator!</span>
          }
          <span>{{ transdormUserRoles(user.role) }}</span>
        </p>
@@ -11,15 +14,17 @@
          <mat-select (ngModelChange)="onChordModeChanged(user.id, $event)" [ngModel]="user.chordMode">
            <mat-option [value]="null"></mat-option>
            <mat-option value="hide">nur den Liedtext anzeigen</mat-option>
-      <mat-option value="onlyFirst">in Strophen die Akkorde nur für die erste anzeigen </mat-option>
+            <mat-option value="onlyFirst">in Strophen die Akkorde nur für die erste anzeigen</mat-option>
            <mat-option value="show">alle anzeigen</mat-option>
          </mat-select>
-    <mat-hint>Das ist nur die Voreinstellung, die Anzeige kann für jedes Lied geändert werden. </mat-hint>
+          <mat-hint>Das ist nur die Voreinstellung, die Anzeige kann für jedes Lied geändert werden.</mat-hint>
        </mat-form-field>
        <app-button-row>
          <app-button [icon]="faSignOut" routerLink="../logout">Abmelden</app-button>
        </app-button-row>
-</app-card>
-}
+      </app-card>
+    }

-<app-users *appRole="['admin']"></app-users>
+    <app-users *appRole="['admin']"></app-users>
+  </div>
+</app-page-frame>
--- a/src/app/modules/user/info/info.component.ts
+++ b/src/app/modules/user/info/info.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, inject} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user/user';
@@ -17,6 +17,7 @@ import {ButtonComponent} from '../../../widget-modules/components/button/button.
 import {RouterLink} from '@angular/router';
 import {RoleDirective} from '../../../services/user/role.directive';
 import {UsersComponent} from './users/users.component';
+import {PageFrameComponent} from '../../../widget-modules/components/sidebar/page-frame.component';

@Component({
  selector: 'app-info',
@@ -37,6 +38,7 @@ import {UsersComponent} from './users/users.component';
    RoleDirective,
    UsersComponent,
    AsyncPipe,
+    PageFrameComponent,
  ],
 })
 export class InfoComponent implements OnInit {
--- a/src/app/modules/user/info/role.pipe.ts
+++ b/src/app/modules/user/info/role.pipe.ts
@@ -3,7 +3,7 @@ import {roles} from '../../../services/user/roles';

@Pipe({name: 'role'})
 export class RolePipe implements PipeTransform {
-  public transform(role: roles | string): string {
+  public transform(role: roles): string {
    switch (role) {
      case 'contributor':
        return 'Mitarbeiter';
--- a/src/app/modules/user/info/users/user/user.component.html
+++ b/src/app/modules/user/info/users/user/user.component.html
@@ -17,7 +17,7 @@
  </button>
 </div>
 } @if (!edit) {
-<div (click)="edit = true" class="users list-item">
+<div (click)="edit = true" (keydown.enter)="edit = true" (keydown.space)="edit = true" class="users list-item" role="button" tabindex="0">
  <span>{{ name }}</span>
  <span
    >@for (role of roles; track role) {
--- a/src/app/services/filter.helper.spec.ts
+++ b/src/app/services/filter.helper.spec.ts
@@ -1,5 +1,5 @@
 import {Song} from '../modules/songs/services/song';
-import {filterSong} from './filter.helper';
+import {createSongScorer, filterSong} from './filter.helper';

 describe('Filter Helper', () => {
  const song: Song = {
@@ -63,4 +63,36 @@ describe('Filter Helper', () => {
  it('should find apostroph invariant', () => {
    void expect(filterSong(song, 'eeff')).toBe(true);
  });
+
+  it('should find contracted title when searching full adjective', () => {
+    void expect(filterSong({...song, title: "Heil'ger Geist"}, 'Heiliger Geist')).toBe(true);
+  });
+
+  it('should find shortened title without apostrophe when searching full adjective', () => {
+    void expect(filterSong({...song, title: 'Heilger Geist'}, 'Heiliger Geist')).toBe(true);
+  });
+
+  it('should find full adjective when searching shortened title', () => {
+    void expect(filterSong({...song, title: 'Heiliger Geist'}, 'Heilger Geist')).toBe(true);
+  });
+
+  it('should find contracted accusative form when searching full wording', () => {
+    void expect(filterSong({...song, text: "Komm, du ew'gen Geist"}, 'ewigen Geist')).toBe(true);
+  });
+
+  it('should find full wording when searching contracted accusative form', () => {
+    void expect(filterSong({...song, text: 'Komm, du ewigen Geist'}, "ew'gen Geist")).toBe(true);
+  });
+
+  it('should not find unrelated shortened wording', () => {
+    void expect(filterSong({...song, title: 'Heilig Geist'}, 'Heiliger Geist')).toBe(false);
+  });
+
+  it('should rank exact title matches above text matches', () => {
+    const scoreSong = createSongScorer('Heiliger Geist');
+    const titleMatch = scoreSong({...song, title: 'Heiliger Geist', text: 'anderer Text'});
+    const textMatch = scoreSong({...song, title: 'anderer Titel', text: 'Komm Heiliger Geist in diese Stadt'});
+
+    void expect(titleMatch).toBeGreaterThan(textMatch);
+  });
 });
--- a/src/app/services/filter.helper.ts
+++ b/src/app/services/filter.helper.ts
@@ -1,17 +1,125 @@
 import {Song} from '../modules/songs/services/song';

 export function filterSong(song: Song, filterValue: string): boolean {
-  if (!filterValue) return true;
-
-  const textMatch = !!song.text && normalize(song.text)?.indexOf(normalize(filterValue)) !== -1;
-  const titleMatch = !!song.title && normalize(song.title)?.indexOf(normalize(filterValue)) !== -1;
-  const artistMatch = !!song.title && normalize(song.artist)?.indexOf(normalize(filterValue)) !== -1;
-
-  return textMatch || titleMatch || artistMatch;
+  return scoreSongMatch(song, filterValue) > 0;
 }

-function normalize(input: string): string {
-  return input?.toLowerCase().replace(/[\s?!.,']/g, '');
+export function createSongFilter(filterValue: string): (song: Song) => boolean {
+  const scorer = createSongScorer(filterValue);
+  return (song: Song) => scorer(song) > 0;
+}
+
+export function searchSongs<T extends Song>(songs: T[], filterValue: string): T[] {
+  const matchesSongFilter = createSongFilter(filterValue);
+  const compareSongs = createSongSearchComparator(filterValue);
+  return songs.filter(matchesSongFilter).sort(compareSongs);
+}
+
+export function scoreSongMatch(song: Song, filterValue: string): number {
+  return createSongScorer(filterValue)(song);
+}
+
+export function createSongScorer(filterValue: string): (song: Song) => number {
+  if (!filterValue) return () => 1;
+
+  const filter = analyzeSearchText(filterValue);
+  return (song: Song) => {
+    const searchableSong = getSearchableSong(song);
+    const titleScore = scoreAnalysis(searchableSong.title, filter, 1000);
+    const artistScore = scoreAnalysis(searchableSong.artist, filter, 700);
+    const textScore = scoreAnalysis(searchableSong.text, filter, 400);
+    return Math.max(titleScore, artistScore, textScore);
+  };
+}
+
+export function createSongSearchComparator(filterValue: string): (a: Song, b: Song) => number {
+  const scoreSong = createSongScorer(filterValue);
+  return (a: Song, b: Song) => {
+    if (filterValue) {
+      const scoreDiff = scoreSong(b) - scoreSong(a);
+      if (scoreDiff !== 0) return scoreDiff;
+    }
+
+    const titleCompare = (a.title ?? '').localeCompare(b.title ?? '');
+    if (titleCompare !== 0) return titleCompare;
+
+    return a.number - b.number;
+  };
+}
+
+type SearchAnalysis = {
+  compact: string;
+  tokens: string[];
+};
+
+type SearchableSong = {
+  text?: SearchAnalysis;
+  title?: SearchAnalysis;
+  artist?: SearchAnalysis;
+};
+
+const searchableSongCache = new WeakMap<Song, SearchableSong>();
+
+function scoreAnalysis(haystack: SearchAnalysis | undefined, filter: SearchAnalysis, fieldWeight: number): number {
+  if (!haystack || !filter.compact) return 0;
+
+  const compactIndex = haystack.compact.indexOf(filter.compact);
+  const tokenIndex = findTokenSequenceIndex(haystack.tokens, filter.tokens);
+
+  if (compactIndex === -1 && tokenIndex === -1) return 0;
+
+  if (haystack.compact === filter.compact) return fieldWeight + 500;
+  if (tokenIndex === 0) return fieldWeight + 350;
+  if (compactIndex === 0) return fieldWeight + 250;
+  if (tokenIndex !== -1) return fieldWeight + 150;
+  return fieldWeight + 50;
+}
+
+function analyzeSearchText(input: string): SearchAnalysis {
+  const tokens = tokenizeForSearch(input);
+  return {
+    compact: tokens.join(''),
+    tokens,
+  };
+}
+
+function findTokenSequenceIndex(haystackTokens: string[], needleTokens: string[]): number {
+  if (needleTokens.length === 0 || haystackTokens.length < needleTokens.length) return -1;
+
+  for (let start = 0; start <= haystackTokens.length - needleTokens.length; start++) {
+    const matches = needleTokens.every((needleToken, index) => haystackTokens[start + index] === needleToken);
+    if (matches) return start;
+  }
+
+  return -1;
+}
+
+function tokenizeForSearch(input: string): string[] {
+  return input
+    .normalize('NFKD')
+    .toLowerCase()
+    .replace(/\p{M}/gu, '')
+    .split(/[^\p{L}\p{N}']+/gu)
+    .map(normalizeTokenForSearch)
+    .filter(token => !!token);
+}
+
+function normalizeTokenForSearch(token: string): string {
+  const cleaned = token.replace(/'/g, '');
+  return cleaned.replace(/ig(e|em|en|er|es)?$/u, 'g$1');
+}
+
+function getSearchableSong(song: Song): SearchableSong {
+  const cached = searchableSongCache.get(song);
+  if (cached) return cached;
+
+  const searchableSong: SearchableSong = {
+    text: song.text ? analyzeSearchText(song.text) : undefined,
+    title: song.title ? analyzeSearchText(song.title) : undefined,
+    artist: song.artist ? analyzeSearchText(song.artist) : undefined,
+  };
+  searchableSongCache.set(song, searchableSong);
+  return searchableSong;
 }

 export const onlyUnique = <T>(value: T, index: number, array: T[]) => array.indexOf(value) === index;
--- a/src/app/services/swiper-element.ts
+++ b/src/app/services/swiper-element.ts
@@ -0,0 +1,11 @@
+let swiperRegistrationPromise: Promise<void> | null = null;
+
+export function ensureSwiperElement(): Promise<void> {
+  if (!swiperRegistrationPromise) {
+    swiperRegistrationPromise = import('swiper/element/bundle').then(({register}) => {
+      register();
+    });
+  }
+
+  return swiperRegistrationPromise;
+}
--- a/src/app/services/user/user-session.service.spec.ts
+++ b/src/app/services/user/user-session.service.spec.ts
@@ -34,7 +34,9 @@ describe('UserSessionService', () => {
    } as never);
    routerSpy.navigateByUrl.and.resolveTo(true);

-    createAuthStateSpy = spyOn<any>(UserSessionService.prototype, 'createAuthState$').and.returnValue(authStateSubject.asObservable() as never);
+    createAuthStateSpy = spyOn(UserSessionService.prototype as UserSessionService & {createAuthState$: () => unknown}, 'createAuthState$').and.returnValue(
+      authStateSubject.asObservable() as never
+    );

    await TestBed.configureTestingModule({
      providers: [
--- a/src/app/services/user/user-song-usage.service.spec.ts
+++ b/src/app/services/user/user-song-usage.service.spec.ts
@@ -29,8 +29,8 @@ describe('UserSongUsageService', () => {
        {id: 'show-2', owner: 'user-2', archived: true},
      ]) as never
    );
-    showSongDataServiceSpy.list$.and.callFake((showId: string) =>
-      (of(showId === 'show-1' ? [{songId: 'song-1'}, {songId: 'song-1'}, {songId: 'song-2'}] : [{songId: 'song-3'}]) as never)
+    showSongDataServiceSpy.list$.and.callFake(
+      (showId: string) => of(showId === 'show-1' ? [{songId: 'song-1'}, {songId: 'song-1'}, {songId: 'song-2'}] : [{songId: 'song-3'}]) as never
    );
    dbServiceSpy.doc.and.returnValue({update: jasmine.createSpy('update').and.resolveTo()} as never);

--- a/src/app/widget-modules/components/add-song/add-song.component.ts
+++ b/src/app/widget-modules/components/add-song/add-song.component.ts
@@ -1,6 +1,7 @@
-import {ChangeDetectionStrategy, Component, Input, inject} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Input, inject} from '@angular/core';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
-import {filterSong} from '../../../services/filter.helper';
+import {searchSongs} from '../../../services/filter.helper';
 import {MatFormField, MatLabel, MatOption, MatSelect, MatSelectChange} from '@angular/material/select';
 import {Song} from '../../../modules/songs/services/song';
 import {ShowSong} from '../../../modules/shows/services/show-song';
@@ -9,6 +10,7 @@ import {Show} from '../../../modules/shows/services/show';
 import {ShowService} from '../../../modules/shows/services/show.service';

 import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
+import {debounceTime, distinctUntilChanged, startWith} from 'rxjs/operators';

@Component({
  selector: 'app-add-song',
@@ -20,12 +22,24 @@ import {NgxMatSelectSearchModule} from 'ngx-mat-select-search';
 export class AddSongComponent {
  private showSongService = inject(ShowSongService);
  private showService = inject(ShowService);
+  private destroyRef = inject(DestroyRef);
+  private cRef = inject(ChangeDetectorRef);

  @Input() public songs: Song[] | null = null;
  @Input() public showSongs: ShowSong[] | null = null;
  @Input() public show: Show | null = null;
  @Input() public addedLive = false;
  public filteredSongsControl = new FormControl<string>('', {nonNullable: true});
+  public debouncedFilterValue = '';
+
+  public constructor() {
+    this.filteredSongsControl.valueChanges
+      .pipe(startWith(this.filteredSongsControl.value), debounceTime(100), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+      .subscribe(value => {
+        this.debouncedFilterValue = value;
+        this.cRef.markForCheck();
+      });
+  }

  public filteredSongs(): Song[] {
    if (!this.songs) return [];
@@ -44,8 +58,8 @@ export class AddSongComponent {
        return 0;
      });

-    const filterValue = this.filteredSongsControl.value;
-    return filterValue ? songs.filter(_ => filterSong(_, filterValue)) : songs;
+    const filterValue = this.debouncedFilterValue;
+    return filterValue ? searchSongs(songs, filterValue) : songs;
  }

  public async onAddSongSelectionChanged(event: MatSelectChange): Promise<void> {
--- a/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts
+++ b/src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts
@@ -3,6 +3,8 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {ActivatedRoute, Params, Router} from '@angular/router';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {FilterStoreService} from '../../../../../services/filter-store.service';
+import {Subject} from 'rxjs';
+import {debounceTime, distinctUntilChanged} from 'rxjs/operators';

@Component({
  selector: 'app-filter',
@@ -14,6 +16,7 @@ export class FilterComponent {
  private router = inject(Router);
  private destroyRef = inject(DestroyRef);
  private filterStore = inject(FilterStoreService);
+  private valueChanged$ = new Subject<string>();

  public value = '';

@@ -25,9 +28,15 @@ export class FilterComponent {
      this.value = typedParams.q ?? '';
      this.filterStore.updateSongFilter({q: this.value});
    });
+
+    this.valueChanged$.pipe(debounceTime(100), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe(text => void this.applyValueChange(text));
  }

-  public async valueChange(text: string): Promise<void> {
+  public valueChange(text: string): void {
+    this.valueChanged$.next(text);
+  }
+
+  private async applyValueChange(text: string): Promise<void> {
    this.filterStore.updateSongFilter({q: text});
    const route = this.router.createUrlTree(['songs'], {
      queryParams: {q: text},
--- a/src/app/widget-modules/components/application-frame/navigation/navigation.component.less
+++ b/src/app/widget-modules/components/application-frame/navigation/navigation.component.less
@@ -21,7 +21,7 @@ nav {

    &.hidden {
      @media screen and (max-width: 860px) {
-        top: -60px;
+        // top: -60px;
      }
    }

--- a/src/app/widget-modules/components/button-row/button-row.component.less
+++ b/src/app/widget-modules/components/button-row/button-row.component.less
@@ -1,6 +1,11 @@
 .row {
  display: flex;
  flex-direction: row-reverse;
+  @media screen and (max-width: 860px) {
+    flex-direction: column-reverse;
+  }
+  gap: var(--gap-m);
  width: 100%;
  flex-wrap: wrap;
+  padding-top: var(--gap-l);
 }
--- a/src/app/widget-modules/components/button/button.component.html
+++ b/src/app/widget-modules/components/button/button.component.html
@@ -1,4 +1,4 @@
-<button [disabled]="disabled" mat-button>
+<button [disabled]="disabled">
  @if (icon) {
    <span><fa-icon [icon]="icon"></fa-icon><span class="content">&nbsp;</span></span>
  }
--- a/src/app/widget-modules/components/button/button.component.less
+++ b/src/app/widget-modules/components/button/button.component.less
@@ -1,15 +1,19 @@
-:host {
-  display: inline-flex;
-}

 :host(.full-width) {
-  display: flex;
  width: 100%;
 }

 button {
-  color: var(--text);
+  display: flex;
+  color: var(--primary-color);
  transition: var(--transition);
+  border-radius: 4px;
+  font-size: 1rem;
+  background: var(--surface-strong);
+
+  border: 1px solid var(--primary-color);
+  padding: var(--gap-s);
+  cursor: pointer;

  :host(.full-width) & {
    width: 100%;
@@ -18,18 +22,19 @@ button {

  &:hover {
    color: var(--primary-active);
+    background: var(--surface-subtle);
  }

  @media screen and (max-width: 860px) {
-    font-size: 30px;
+    font-size: 1.2rem;
+    width: 100%;
+    justify-content: center;
+    .button-content {
+      flex-grow: 1;
+    }
  }
 }

-.button-content {
-  @media screen and (max-width: 860px) {
-    display: none ;
-  }
-}

 fa-icon {
  width: 20px;
--- a/src/app/widget-modules/components/button/button.component.ts
+++ b/src/app/widget-modules/components/button/button.component.ts
@@ -1,6 +1,5 @@
 import {Component, Input} from '@angular/core';
 import {IconProp} from '@fortawesome/fontawesome-svg-core';
-import {MatButton} from '@angular/material/button';

 import {FaIconComponent} from '@fortawesome/angular-fontawesome';

@@ -8,7 +7,7 @@ import {FaIconComponent} from '@fortawesome/angular-fontawesome';
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.less'],
-  imports: [MatButton, FaIconComponent],
+  imports: [FaIconComponent],
  host: {
    '[class.full-width]': 'fullWidth',
  },
--- a/src/app/widget-modules/components/card/card.component.html
+++ b/src/app/widget-modules/components/card/card.component.html
@@ -3,9 +3,11 @@
    <button [routerLink]="closeLink" class="btn-close" mat-icon-button>
      <fa-icon [icon]="closeIcon"></fa-icon>
    </button>
-  } @if (heading && !fullscreen) {
+  }
+  @if (heading && !fullscreen) {
    <div class="heading">{{ heading }}</div>
-  } @if (subheading && !fullscreen) {
+  }
+  @if (subheading && !fullscreen) {
    <div class="subheading">{{ subheading }}</div>
  }
  <ng-content></ng-content>
--- a/src/app/widget-modules/components/card/card.component.less
+++ b/src/app/widget-modules/components/card/card.component.less
@@ -1,7 +1,7 @@
@import "../../../../styles/shadow";

 .card {
-  margin: 20px;
+  margin: var(--gap-l) var(--gap-l) 0;
  border-radius: 8px;
  background: var(--surface);
  backdrop-filter: blur(15px);
@@ -10,19 +10,17 @@
  width: 800px;
  position: relative;
  color: var(--text);
-  padding: 10px 0;
+  padding: var(--gap-m) 0;
  box-shadow: var(--shadow-card-3);

  @media screen and (max-width: 860px) {
-    width: 100vw;
-    border-radius: 0;
-    background: var(--surface-strong);
-    margin: 0;
+    width: calc(100vw - 10px);
+    margin: 5px;
    color: var(--text);
  }

  &.padding {
-    padding: 20px;
+    padding: var(--gap-l);
  }

  box-sizing: border-box;
--- a/src/app/widget-modules/components/sidebar/page-frame.component.html
+++ b/src/app/widget-modules/components/sidebar/page-frame.component.html
@@ -0,0 +1,27 @@
+@if (withMenu() || title()) {
+  <div class="header">
+    @if (withMenu()) {
+      <button (click)="toggle()"
+              [attr.aria-expanded]="!collapsed"
+              aria-label="Sidebar umschalten"
+              class="sidebar-toggle"
+              mat-icon-button type="button">
+        <fa-icon [icon]="collapsed ? closedIcon : openIcon"></fa-icon>
+      </button>
+    }
+    <div class="title">{{ title() }}</div>
+  </div>
+}
+@if (!collapsed) {
+  <button (click)="close()" aria-label="Sidebar schließen" class="sidebar-backdrop" tabindex="-1"
+          type="button"></button>
+}
+<aside [class.collapsed]="collapsed">
+  <div aria-hidden="true" class="sidebar-toggle-placeholder"></div>
+  <div class="sidebar-body">
+    <ng-content select="[sidebar]"></ng-content>
+  </div>
+</aside>
+<div class="content">
+  <ng-content select="[content]"></ng-content>
+</div>
--- a/src/app/widget-modules/components/sidebar/page-frame.component.less
+++ b/src/app/widget-modules/components/sidebar/page-frame.component.less
@@ -0,0 +1,152 @@
+:host {
+  --sidebar-width: 300px;
+  --sidebar-toggle-size: 48px;
+  --sidebar-toggle-offset: 12px;
+  --sidebar-mobile-width: min(92vw, 360px);
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+  align-items: start;
+  box-sizing: border-box;
+  transition: grid-template-columns 200ms ease;
+}
+
+:host.collapsed {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+.sidebar-toggle {
+  --icon-button-color: var(--primary-hover);
+  --icon-button-hover-color: var(--primary);
+  position: fixed;
+  top: calc(50px + var(--sidebar-toggle-offset));
+  left: var(--sidebar-toggle-offset);
+  z-index: 11;
+  color: var(--icon-button-color);
+  box-shadow: none;
+  border-radius: 999px;
+  transition: all 150ms ease-in-out;
+}
+
+:host.collapsed .sidebar-toggle {
+  --icon-button-color: var(--surface);
+  --icon-button-hover-color: var(--surface-subtle);
+}
+
+.sidebar-toggle fa-icon {
+  color: inherit;
+}
+
+.sidebar-toggle:hover {
+  color: var(--icon-button-hover-color);
+}
+
+.sidebar-backdrop {
+  display: none;
+}
+
+aside {
+  width: var(--sidebar-width);
+  height: calc(100vh - 50px);
+
+  position: fixed;
+  top: 50px;
+  left: 0;
+  bottom: 0;
+
+  background: var(--surface);
+  box-shadow: var(--shadow-card-2);
+  overflow: hidden;
+  transform: translateX(0);
+  transition: transform 200ms ease;
+}
+
+aside.collapsed {
+  transform: translateX(calc(-1 * var(--sidebar-width)));
+}
+
+.sidebar-toggle-placeholder {
+  height: calc(var(--sidebar-toggle-size) + var(--sidebar-toggle-offset));
+  flex: 0 0 auto;
+}
+
+.sidebar-body {
+  height: calc(100% - var(--sidebar-toggle-size) - var(--sidebar-toggle-offset));
+}
+
+.content {
+  grid-column: 2;
+  min-width: 0;
+  width: 100%;
+  padding: 0;
+}
+
+@media screen and (max-width: 1100px) {
+  :host,
+  :host.collapsed {
+    display: block;
+    grid-template-columns: none;
+  }
+
+  .sidebar-toggle {
+    top: calc(50px + 8px);
+    left: 5px;
+    right: auto;
+    z-index: 13;
+  }
+
+  .sidebar-backdrop {
+    display: block;
+    position: fixed;
+    inset: 50px 0 0 0;
+    z-index: 11;
+    border: 0;
+    padding: 0;
+    background: rgba(0, 0, 0, 0.32);
+  }
+
+  aside {
+    width: var(--sidebar-mobile-width);
+    max-width: 100%;
+    z-index: 12;
+    backdrop-filter: blur(10px);
+  }
+
+  aside.collapsed {
+    transform: translateX(calc(-1 * var(--sidebar-mobile-width)));
+  }
+
+  .content {
+    grid-column: auto;
+    width: 100%;
+  }
+}
+
+.header {
+  @media screen and (max-width: 860px) {
+    height: 50px;
+  }
+}
+
+.title {
+  color: var(--surface);
+  font-size: 30px;
+  text-transform: uppercase;
+  text-align: right;
+  opacity: 0.5;
+  text-shadow: var(--shadow-card-3);
+
+  position: fixed;
+  right: 10px;
+  top: 61px;
+
+  transition: all 150ms ease-in-out;
+
+  @media screen and (min-width: 888px) {
+    transform-origin: top right;
+    transform: rotate(90deg) translateX(100%) translateX(10px);
+    text-shadow: 10px 0 20px rgba(0, 0, 0, 0.19), 6px 0 6px rgba(0, 0, 0, 0.23);
+  }
+}
--- a/src/app/widget-modules/components/sidebar/page-frame.component.spec.ts
+++ b/src/app/widget-modules/components/sidebar/page-frame.component.spec.ts
@@ -0,0 +1,32 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PageFrameComponent} from './page-frame.component';
+
+describe('SidebarComponent', () => {
+  let component: PageFrameComponent;
+  let fixture: ComponentFixture<PageFrameComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PageFrameComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PageFrameComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should toggle and close the sidebar', () => {
+    expect(component.collapsed).toBeTrue();
+
+    component.toggle();
+    expect(component.collapsed).toBeFalse();
+
+    component.close();
+    expect(component.collapsed).toBeTrue();
+  });
+});
--- a/src/app/widget-modules/components/sidebar/page-frame.component.ts
+++ b/src/app/widget-modules/components/sidebar/page-frame.component.ts
@@ -1,23 +1,29 @@
-import {Component} from '@angular/core';
+import {Component, input} from '@angular/core';
 import {MatIconButton} from '@angular/material/button';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 import {faBars, faChevronLeft} from '@fortawesome/free-solid-svg-icons';

@Component({
-  selector: 'app-sidebar',
+  selector: 'app-page-frame',
  imports: [MatIconButton, FaIconComponent],
-  templateUrl: './sidebar.component.html',
-  styleUrl: './sidebar.component.less',
+  templateUrl: './page-frame.component.html',
+  styleUrl: './page-frame.component.less',
  host: {
    '[class.collapsed]': 'collapsed',
  },
 })
-export class SidebarComponent {
+export class PageFrameComponent {
  public collapsed = true;
  public openIcon = faChevronLeft;
  public closedIcon = faBars;
+  public title = input.required<string>();
+  public withMenu = input<boolean>(true);

  public toggle(): void {
    this.collapsed = !this.collapsed;
  }
+
+  public close(): void {
+    this.collapsed = true;
+  }
 }
--- a/src/app/widget-modules/components/sidebar/sidebar.component.html
+++ b/src/app/widget-modules/components/sidebar/sidebar.component.html
@@ -1,12 +0,0 @@
-<button class="sidebar-toggle" (click)="toggle()" [attr.aria-expanded]="!collapsed" aria-label="Sidebar umschalten" mat-icon-button type="button">
-  <fa-icon [icon]="collapsed ? closedIcon : openIcon"></fa-icon>
-</button>
-<aside [class.collapsed]="collapsed">
-  <div class="sidebar-toggle-placeholder" aria-hidden="true"></div>
-  <div class="sidebar-body">
-    <ng-content select="[sidebar]"></ng-content>
-  </div>
-</aside>
-<div class="content">
-  <ng-content select="[content]"></ng-content>
-</div>
--- a/src/app/widget-modules/components/sidebar/sidebar.component.less
+++ b/src/app/widget-modules/components/sidebar/sidebar.component.less
@@ -1,78 +0,0 @@
-:host {
-  --sidebar-width: 300px;
-  --sidebar-toggle-size: 48px;
-  --sidebar-toggle-offset: 12px;
-  display: grid;
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
-  align-items: start;
-  box-sizing: border-box;
-  transition: grid-template-columns 200ms ease;
-}
-
-:host.collapsed {
-  grid-template-columns: 0 minmax(0, 1fr);
-}
-
-.sidebar-toggle {
-  --icon-button-color: var(--primary-hover);
-  --icon-button-hover-color: var(--primary-active);
-  position: fixed;
-  top: calc(50px + var(--sidebar-toggle-offset));
-  left: var(--sidebar-toggle-offset);
-  z-index: 11;
-  color: var(--icon-button-color);
-  background: transparent;
-  box-shadow: none;
-}
-
-:host.collapsed .sidebar-toggle {
-  --icon-button-color: var(--text-inverse);
-  --icon-button-hover-color: var(--text-inverse);
-}
-
-.sidebar-toggle fa-icon {
-  color: inherit;
-}
-
-.sidebar-toggle:hover {
-  color: var(--icon-button-hover-color);
-}
-
-aside {
-  width: var(--sidebar-width);
-  height: calc(100vh - 50px);
-
-  position: fixed;
-  top: 50px;
-  left: 0;
-  bottom: 0;
-
-  background: var(--surface);
-  box-shadow: var(--shadow-card-2);
-  overflow: hidden;
-  transform: translateX(0);
-  transition: transform 200ms ease;
-}
-
-aside.collapsed {
-  transform: translateX(calc(-1 * var(--sidebar-width)));
-}
-
-.sidebar-toggle-placeholder {
-  height: calc(var(--sidebar-toggle-size) + var(--sidebar-toggle-offset));
-  flex: 0 0 auto;
-}
-
-.sidebar-body {
-  height: calc(100% - var(--sidebar-toggle-size) - var(--sidebar-toggle-offset));
-}
-
-.content {
-  grid-column: 2;
-  min-width: 0;
-  width: 100%;
-  padding: 0;
-}
--- a/src/app/widget-modules/components/sidebar/sidebar.component.spec.ts
+++ b/src/app/widget-modules/components/sidebar/sidebar.component.spec.ts
@@ -1,22 +0,0 @@
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {SidebarComponent} from './sidebar.component';
-
-describe('SidebarComponent', () => {
-  let component: SidebarComponent;
-  let fixture: ComponentFixture<SidebarComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SidebarComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(SidebarComponent);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/src/app/widget-modules/components/song-text/song-text.component.html
+++ b/src/app/widget-modules/components/song-text/song-text.component.html
@@ -1,5 +1,13 @@
@if (sections && !fullscreen) {
-<div (click)="onClick()" [class.chords]="iChordMode !== 'hide'" class="song-text">
+<div
+  (click)="onClick()"
+  (keydown.enter)="onClick()"
+  (keydown.space)="onClick()"
+  [class.chords]="iChordMode !== 'hide'"
+  class="song-text"
+  role="button"
+  tabindex="0"
+>
  @if (showSwitch) {
  <button (click)="onChordClick()" class="menu" mat-icon-button>
    <fa-icon [icon]="faLines"></fa-icon>
@@ -23,7 +31,16 @@
  <ng-content></ng-content>
 </div>
 } @if (sections && fullscreen) {
-<div (click)="onClick()" [@songSwitch]="sections" [class.chords]="iChordMode !== 'hide'" class="song-text">
+<div
+  (click)="onClick()"
+  (keydown.enter)="onClick()"
+  (keydown.space)="onClick()"
+  [@songSwitch]="sections"
+  [class.chords]="iChordMode !== 'hide'"
+  class="song-text"
+  role="button"
+  tabindex="0"
+>
  @if (showSwitch) {
  <button (click)="onChordClick()" class="menu" mat-icon-button>
    <fa-icon [icon]="faLines"></fa-icon>
--- a/src/app/widget-modules/guards/role.guard.spec.ts
+++ b/src/app/widget-modules/guards/role.guard.spec.ts
@@ -31,9 +31,7 @@ describe('RoleGuard', () => {
  });

  it('should deny access when there is no current user', async () => {
-    await expectAsync(firstValueFrom(guard.canActivate({data: {requiredRoles: ['leader']}} as never))).toBeResolvedTo(
-      {commands: ['brand', 'new-user']} as never
-    );
+    await expectAsync(firstValueFrom(guard.canActivate({data: {requiredRoles: ['leader']}} as never))).toBeResolvedTo({commands: ['brand', 'new-user']} as never);
  });

  it('should allow admins regardless of requiredRoles', async () => {
--- a/src/app/widget-modules/pipes/show-type-translater/show-type.pipe.ts
+++ b/src/app/widget-modules/pipes/show-type-translater/show-type.pipe.ts
@@ -11,7 +11,7 @@ export class ShowTypePipe implements PipeTransform {
      case 'service-praise':
        return 'Gottesdienst Lobpreis';
      case 'home-group-big':
-        return 'großer Hauskreis';
+        return 'Großer Hauskreis';
      case 'home-group':
        return 'Hauskreis';
      case 'prayer-group':
@@ -21,9 +21,9 @@ export class ShowTypePipe implements PipeTransform {
      case 'kids-group':
        return 'Kinderkreis';
      case 'misc-public':
-        return 'sonstige öffentliche Veranstaltung';
+        return 'Sonstige öffentliche Veranstaltung';
      case 'misc-private':
-        return 'sonstige private Veranstaltung';
+        return 'Sonstige private Veranstaltung';
    }

    return 'unbekannter Veranstaltungstyp';
--- a/src/index.html
+++ b/src/index.html
@@ -9,12 +9,12 @@
    <link href="apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
    <link href="favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
    <link href="favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
-    <link color="#4286f4" href="safari-pinned-tab.svg" rel="mask-icon" />
-    <meta content="#4286f4" name="msapplication-TileColor" />
-    <meta content="#4286f4" name="theme-color" />
+    <link color="#6f8f95" href="safari-pinned-tab.svg" rel="mask-icon" />
+    <meta content="#6f8f95" name="msapplication-TileColor" />
+    <meta content="#6f8f95" name="theme-color" />

    <link href="manifest.webmanifest" rel="manifest" />
-    <meta content="#4286f4" name="theme-color" />
+    <meta content="#6f8f95" name="theme-color" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono&display=swap" rel="stylesheet" />
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import {enableProdMode, importProvidersFrom, provideZoneChangeDetection} from '@angular/core';
+import {enableProdMode, importProvidersFrom, inject, provideZoneChangeDetection} from '@angular/core';

 import {environment} from './environments/environment';
 import {MAT_DATE_LOCALE} from '@angular/material/core';
@@ -6,12 +6,13 @@ import {bootstrapApplication, BrowserModule} from '@angular/platform-browser';
 import {provideAnimations} from '@angular/platform-browser/animations';
 import {AppRoutingModule} from './app/app-routing.module';
 import {ServiceWorkerModule} from '@angular/service-worker';
-import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {AppComponent} from './app/app.component';
-import {getApp, initializeApp, provideFirebaseApp} from '@angular/fire/app';
-import {initializeFirestore, persistentLocalCache, persistentMultipleTabManager, provideFirestore} from '@angular/fire/firestore';
-import {getAuth, provideAuth} from '@angular/fire/auth';
-import {getStorage, provideStorage} from '@angular/fire/storage';
+import {FirebaseApp, provideFirebaseApp} from '@angular/fire/app';
+import {provideFirestore} from '@angular/fire/firestore';
+import {provideAuth} from '@angular/fire/auth';
+import {initializeApp} from 'firebase/app';
+import {getAuth} from 'firebase/auth';
+import {initializeFirestore, persistentLocalCache, persistentMultipleTabManager} from 'firebase/firestore';
 import {UserService} from './app/services/user/user.service';

 declare global {
@@ -35,13 +36,15 @@ bootstrapApplication(AppComponent, {
      AppRoutingModule,
      ServiceWorkerModule.register('ngsw-worker.js', {
        enabled: environment.production,
-      }),
-      FontAwesomeModule
+      })
    ),
    provideFirebaseApp(() => initializeApp(environment.firebase)),
-    provideAuth(() => getAuth()),
-    provideFirestore(() => initializeFirestore(getApp(), {localCache: persistentLocalCache({tabManager: persistentMultipleTabManager()})})),
-    provideStorage(() => getStorage()),
+    provideAuth(() => getAuth(inject(FirebaseApp))),
+    provideFirestore(() =>
+      initializeFirestore(inject(FirebaseApp), {
+        localCache: persistentLocalCache({tabManager: persistentMultipleTabManager()}),
+      })
+    ),
    {provide: MAT_DATE_LOCALE, useValue: 'de-DE'},
    provideAnimations(),
  ],
--- a/src/styles/styles.less
+++ b/src/styles/styles.less
@@ -14,8 +14,10 @@
  --text-soft: #7a858c;
  --text-inverse: #f7fbff;

+  --color-primary-dark: #48686e;
  --color-primary: #6f8f95;
  --color-primary-light: #85a4aa;
+  --primary-color-sat: #578f9a;
  --primary-color: #6f8f95;
  --primary-hover: #85a4aa;
  --primary-active: #5b797e;
@@ -41,6 +43,11 @@


  --mat-dialog-supporting-text-color: var(--text);
+  --mat-button-text-label-text-color: var(--color-primary-dark);
+
+  --gap-l: 20px;
+  --gap-m: calc(var(--gap-l) / 1.618);
+  --gap-s: calc(var(--gap-m) / 1.618);
 }

 html {
--- a/src/test-vitest.ts
+++ b/src/test-vitest.ts
@@ -7,11 +7,9 @@ import {ActivatedRoute, provideRouter} from '@angular/router';
 import {BehaviorSubject, Observable, of} from 'rxjs';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {provideNativeDateAdapter} from '@angular/material/core';
-import {getApp, getApps, initializeApp, provideFirebaseApp} from '@angular/fire/app';
-import {getAuth, provideAuth} from '@angular/fire/auth';
-import {initializeFirestore, provideFirestore} from '@angular/fire/firestore';
-import {getStorage, provideStorage} from '@angular/fire/storage';
-import {environment} from './environments/environment';
+import {Auth} from '@angular/fire/auth';
+import {Firestore} from '@angular/fire/firestore';
+import {Storage} from '@angular/fire/storage';
 import {DbService} from './app/services/db.service';

 type TestingModuleDefinition = Parameters<typeof TestBed.configureTestingModule>[0];
@@ -43,16 +41,14 @@ type MockFunction = ReturnType<typeof vi.fn> & {

 const routeParams$ = new BehaviorSubject<Record<string, unknown>>({});
 const queryParams$ = new BehaviorSubject<Record<string, unknown>>({});
-const defaultFirebaseApp = getApps().length > 0 ? getApp() : initializeApp(environment.firebase);

 const defaultTestingProviders: TestingProviderList = [
  provideNoopAnimations(),
  provideNativeDateAdapter(),
  provideRouter([]),
-  provideFirebaseApp(() => defaultFirebaseApp),
-  provideAuth(() => getAuth(defaultFirebaseApp)),
-  provideFirestore(() => initializeFirestore(defaultFirebaseApp, {})),
-  provideStorage(() => getStorage(defaultFirebaseApp)),
+  {provide: Auth, useValue: {}},
+  {provide: Firestore, useValue: {}},
+  {provide: Storage, useValue: {}},
  {
    provide: ActivatedRoute,
    useValue: {
@@ -129,7 +125,8 @@ function decorateMock<T extends ReturnType<typeof vi.fn>>(mock: T): T & MockFunc
    configurable: true,
    get: () => ({
      argsFor(index: number) {
-        return decorated.mock.calls[index] ?? [];
+        const calls = decorated.mock.calls as unknown[][];
+        return calls[index] ?? [];
      },
      mostRecent() {
        const args = decorated.mock.lastCall ?? [];
@@ -150,11 +147,7 @@ function createSpy(name?: string): MockFunction {
  return spy;
 }

-function createSpyObj<T>(
-  baseName: string,
-  methodNames: string[] | Record<string, unknown>,
-  propertyValues?: Record<string, unknown>
-): T {
+function createSpyObj<T>(baseName: string, methodNames: string[] | Record<string, unknown>, propertyValues?: Record<string, unknown>): T {
  const result: Record<string, unknown> = {};
  const methods = Array.isArray(methodNames) ? methodNames : Object.keys(methodNames);

--- a/src/types/jasmine-compat.d.ts
+++ b/src/types/jasmine-compat.d.ts
@@ -1,39 +1,38 @@
+type UnknownFunction = (...args: unknown[]) => unknown;
+
 type SpyAnd = {
  returnValue(value?: unknown): jasmine.Spy;
  resolveTo(value?: unknown): jasmine.Spy;
  rejectWith(value?: unknown): jasmine.Spy;
-  callFake(fn: (...args: any[]) => unknown): jasmine.Spy;
+  callFake(fn: UnknownFunction): jasmine.Spy;
  callThrough(): jasmine.Spy;
 };

 type SpyCalls = {
-  argsFor(index: number): any[];
-  mostRecent(): {args: any[]};
+  argsFor(index: number): unknown[];
+  mostRecent(): {args: unknown[]};
 };

 declare global {
-  function spyOn<T = any>(object: T, methodName: any): jasmine.Spy;
+  function spyOn<T extends object, K extends keyof T>(object: T, methodName: K): jasmine.Spy;
  function expectAsync<T>(value: Promise<T>): {
    toBeResolvedTo(expected: T): Promise<void>;
    toBeRejectedWithError(expected?: string | RegExp | Error): Promise<void>;
  };

  namespace jasmine {
-    type Spy<T extends (...args: any[]) => any = (...args: any[]) => any> = T & ReturnType<typeof import('vitest')['vi']['fn']> & {
+    type Spy<T extends UnknownFunction = UnknownFunction> = T &
+      ReturnType<(typeof import('vitest'))['vi']['fn']> & {
        and: SpyAnd;
        calls: SpyCalls;
      };

    type SpyObj<T> = {
-      [K in keyof T]: T[K] extends (...args: any[]) => any ? Spy<T[K]> : T[K];
+      [K in keyof T]: T[K] extends UnknownFunction ? Spy<T[K]> : T[K];
    };

    function createSpy(name?: string): Spy;
-    function createSpyObj<T>(
-      baseName: string,
-      methodNames: string[] | Record<string, unknown>,
-      propertyValues?: Record<string, unknown>
-    ): SpyObj<T>;
+    function createSpyObj<T>(baseName: string, methodNames: string[] | Record<string, unknown>, propertyValues?: Record<string, unknown>): SpyObj<T>;
    function any(expectedClass: unknown): unknown;
    function anything(): unknown;
    function objectContaining<T>(value: Partial<T>): unknown;
--- a/src/types/vitest-matchers.d.ts
+++ b/src/types/vitest-matchers.d.ts
@@ -1,6 +1,7 @@
 import 'vitest';

 declare module 'vitest' {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  interface Assertion<T = any> {
    toBeTrue(): T;
    toBeFalse(): T;
Author	SHA1	Message	Date
benjamin	e1aacf2707	RELEASE 2.0 Some checks failed Angular Build / build (push) Has been cancelled Details	2026-04-27 23:02:36 +02:00
benjamin	8c637addf5	fix monitor bg contrast Some checks failed Angular Build / build (push) Has been cancelled Details	2026-04-27 23:01:25 +02:00
benjamin	e4bbe6e75c	fix mobile buttons	2026-04-27 22:34:35 +02:00
benjamin	30115da841	fix styling	2026-04-27 22:02:15 +02:00
benjamin	8bfbe7b1cc	fix linting Some checks failed Angular Build / build (push) Has been cancelled Details	2026-03-20 21:04:46 +01:00
benjamin	893a13a8f2	fix linting Some checks failed Angular Build / build (push) Has been cancelled Details	2026-03-20 21:02:02 +01:00
benjamin	d484239429	tokenized text search #2 Some checks failed Angular Build / build (push) Has been cancelled Details	2026-03-20 20:51:17 +01:00
benjamin	16776e2250	tokenized text search Some checks failed Angular Build / build (push) Has been cancelled Details	2026-03-20 20:44:59 +01:00
benjamin	7fe4339ce4	fix bundle size Some checks failed Angular Build / build (push) Has been cancelled Details	2026-03-20 19:47:05 +01:00
benjamin	5efd44e710	fix bundle size Some checks failed Angular Build / build (push) Has been cancelled Details	2026-03-20 19:43:50 +01:00
benjamin	f2986dd420	fix guest component Some checks failed Angular Build / build (push) Has been cancelled Details	2026-03-20 19:14:59 +01:00
benjamin	902f1e97ee	CCLI Button Some checks failed Angular Build / build (push) Has been cancelled Details	2026-03-20 18:39:06 +01:00
benjamin	c5fde72782	mobile view Some checks failed Angular Build / build (push) Has been cancelled Details	2026-03-20 18:33:07 +01:00
benjamin	b5dde11ab1	gittea build #7 All checks were successful Angular Build / build (push) Successful in 1m13s Details	2026-03-17 19:23:30 +01:00
benjamin	733bf5cee4	gittea build #6 All checks were successful Angular Build / build (push) Successful in 10m40s Details	2026-03-17 12:59:05 +01:00
benjamin	e55036d0f7	gittea build #5 Some checks failed Angular Build / build (push) Failing after 5m51s Details	2026-03-17 12:29:55 +01:00
benjamin	80f5e86be5	gittea build #4 Some checks failed Angular Build / build (push) Failing after 6m3s Details	2026-03-17 12:07:17 +01:00
benjamin	2eaf311a09	gittea build #3 Some checks failed Angular Build / build (push) Failing after 43s Details	2026-03-16 22:25:30 +01:00
benjamin	377c3d14fa	gittea build #2	2026-03-16 22:22:37 +01:00
benjamin	4b4641e1b7	gittea build	2026-03-16 22:16:06 +01:00
benjamin	97a299618a	vitest implementation 2	2026-03-16 22:13:01 +01:00