styles

2025-09-08 19:27:46 +02:00
parent ee8974e2ff
commit c65aef11ca
66 changed files with 1691 additions and 108 deletions
--- a/src/app/shared/components/data-display/kpi-card/kpi-card.component.css
+++ b/src/app/shared/components/data-display/kpi-card/kpi-card.component.css
@@ -0,0 +1,47 @@
+/* WICHTIG: Diese Stile sollten aus der globalen styles.css HIERHER VERSCHOBEN werden. */
+:host {
+  display: block;
+}
+
+.kpi-card {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+.kpi-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.kpi-icon ::ng-deep svg {
+  width: 24px;
+  height: 24px;
+}
+
+.icon-sales { background: linear-gradient(135deg, #2ecc71, #27ae60); }
+.icon-users { background: linear-gradient(135deg, #3498db, #2980b9); }
+.icon-orders { background: linear-gradient(135deg, #f39c12, #f1c40f); }
+.icon-performance { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
+
+.kpi-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.kpi-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.kpi-label {
+  font-size: 0.9rem;
+  color: var(--color-text-light);
+}
--- a/src/app/shared/components/data-display/kpi-card/kpi-card.component.html
+++ b/src/app/shared/components/data-display/kpi-card/kpi-card.component.html
@@ -1 +1,15 @@
-<p>kpi-card works!</p>
+<div class="card kpi-card">
+  <div 
+    class="kpi-icon"
+    [class.icon-sales]="color === 'sales'"
+    [class.icon-users]="color === 'users'"
+    [class.icon-orders]="color === 'orders'"
+    [class.icon-performance]="color === 'performance'">
+    <!-- ng-content erlaubt es, ein spezifisches SVG-Icon von außen einzufügen -->
+    <ng-content></ng-content>
+  </div>
+  <div class="kpi-content">
+    <span class="kpi-value">{{ value }}</span>
+    <span class="kpi-label">{{ label }}</span>
+  </div>
+</div>
--- a/src/app/shared/components/data-display/kpi-card/kpi-card.component.ts
+++ b/src/app/shared/components/data-display/kpi-card/kpi-card.component.ts
@@ -1,11 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+type KpiColor = 'sales' | 'users' | 'orders' | 'performance';

@Component({
  selector: 'app-kpi-card',
-  imports: [],
+  standalone: true,
+  imports: [CommonModule],
  templateUrl: './kpi-card.component.html',
  styleUrl: './kpi-card.component.css'
 })
 export class KpiCardComponent {
-
-}
+  @Input() value: string = '';
+  @Input() label: string = '';
+  @Input() color: KpiColor = 'users';
+}
--- a/src/app/shared/components/data-display/paginator/paginator.component.css
+++ b/src/app/shared/components/data-display/paginator/paginator.component.css
@@ -0,0 +1,22 @@
+/* Verschieben Sie diese Stile aus der globalen styles.css hierher */
+:host {
+  display: block;
+}
+
+.paginator {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1rem;
+  border-top: 1px solid var(--color-border);
+}
+.paginator-info {
+  font-size: 0.9rem;
+  color: var(--color-text-light);
+  font-weight: 500;
+}
+.paginator-controls {
+  display: flex;
+  gap: 0.5rem;
+}
--- a/src/app/shared/components/data-display/paginator/paginator.component.html
+++ b/src/app/shared/components/data-display/paginator/paginator.component.html
@@ -0,0 +1,21 @@
+<div class="paginator">
+  <span class="paginator-info">
+    {{ rangeStart }} - {{ rangeEnd }} von {{ totalItems }}
+  </span>
+  <div class="paginator-controls">
+    <app-button 
+      color="icon" 
+      (click)="goToPrevious()" 
+      [disabled]="currentPage === 1"
+      tooltip="Vorherige Seite">
+      &lt;
+    </app-button>
+    <app-button 
+      color="icon" 
+      (click)="goToNext()" 
+      [disabled]="currentPage === totalPages"
+      tooltip="Nächste Seite">
+      &gt;
+    </app-button>
+  </div>
+</div>
--- a/src/app/shared/components/data-display/paginator/paginator.component.ts
+++ b/src/app/shared/components/data-display/paginator/paginator.component.ts
@@ -0,0 +1,46 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonComponent } from '../../ui/button/button.component';
+
+@Component({
+  selector: 'app-paginator',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
+  templateUrl: './paginator.component.html',
+  styleUrl: './paginator.component.css'
+})
+export class PaginatorComponent {
+  // --- EINGABEN von außen ---
+  @Input() currentPage = 1;
+  @Input() totalItems = 0;
+  @Input() itemsPerPage = 10;
+
+  // --- AUSGABE nach außen ---
+  @Output() pageChange = new EventEmitter<number>();
+
+  // --- Interne Logik ---
+  get totalPages(): number {
+    return Math.ceil(this.totalItems / this.itemsPerPage);
+  }
+
+  get rangeStart(): number {
+    return (this.currentPage - 1) * this.itemsPerPage + 1;
+  }
+  
+  get rangeEnd(): number {
+    const end = this.currentPage * this.itemsPerPage;
+    return end > this.totalItems ? this.totalItems : end;
+  }
+
+  goToPrevious(): void {
+    if (this.currentPage > 1) {
+      this.pageChange.emit(this.currentPage - 1);
+    }
+  }
+
+  goToNext(): void {
+    if (this.currentPage < this.totalPages) {
+      this.pageChange.emit(this.currentPage + 1);
+    }
+  }
+}
--- a/src/app/shared/components/form/form-field/form-field.component.html
+++ b/src/app/shared/components/form/form-field/form-field.component.html
@@ -1 +1,12 @@
-<p>form-field works!</p>
+<div class="form-field">
+  <input 
+    [type]="type"
+    class="form-input"
+    [id]="label"
+    placeholder=" "
+    [(ngModel)]="value"
+    (ngModelChange)="onChange($event)"
+    (blur)="onTouched()"
+    [disabled]="disabled">
+  <label [for]="label" class="form-label">{{ label }}</label>
+</div>
--- a/src/app/shared/components/form/form-field/form-field.component.ts
+++ b/src/app/shared/components/form/form-field/form-field.component.ts
@@ -1,11 +1,37 @@
-import { Component } from '@angular/core';
+import { Component, Input, forwardRef } from '@angular/core';
+// ControlValueAccessor und NG_VALUE_ACCESSOR sind Typen, kein Modul
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms'; // <-- FormsModule hier importieren
+import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-form-field',
-  imports: [],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule 
+  ],
  templateUrl: './form-field.component.html',
-  styleUrl: './form-field.component.css'
+  styleUrl: './form-field.component.css',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FormFieldComponent),
+      multi: true
+    }
+  ]
 })
-export class FormFieldComponent {
+export class FormFieldComponent implements ControlValueAccessor {
+  @Input() label: string = '';
+  @Input() type: 'text' | 'email' | 'password' = 'text';
+  
+  // Interne Logik für ControlValueAccessor
+  value: string = '';
+  onChange: (value: any) => void = () => {};
+  onTouched: () => void = () => {};
+  disabled = false;

-}
+  writeValue(value: any): void { this.value = value; }
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  registerOnTouched(fn: any): void { this.onTouched = fn; }
+  setDisabledState?(isDisabled: boolean): void { this.disabled = isDisabled; }
+}
--- a/src/app/shared/components/form/slide-toggle/slide-toggle.component.css
+++ b/src/app/shared/components/form/slide-toggle/slide-toggle.component.css
@@ -0,0 +1,38 @@
+/* Autarke Komponente. Verschieben Sie die .slide-toggle-*-Klassen aus styles.css hierher. */
+.slide-toggle {
+  display: inline-block;
+}
+.slide-toggle-input {
+  display: none;
+}
+.slide-toggle-label {
+  display: block;
+  width: 44px;
+  height: 24px;
+  background-color: var(--color-border);
+  border-radius: 12px;
+  position: relative;
+  cursor: pointer;
+  transition: background-color var(--transition-speed);
+}
+.slide-toggle-label::before {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: #fff;
+  top: 2px;
+  left: 2px;
+  transition: transform var(--transition-speed);
+}
+.slide-toggle-input:checked + .slide-toggle-label {
+  background-color: var(--color-primary);
+}
+.slide-toggle-input:checked + .slide-toggle-label::before {
+  transform: translateX(20px);
+}
+.slide-toggle-input:disabled + .slide-toggle-label {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
--- a/src/app/shared/components/form/slide-toggle/slide-toggle.component.html
+++ b/src/app/shared/components/form/slide-toggle/slide-toggle.component.html
@@ -1 +1,10 @@
-<p>slide-toggle works!</p>
+<div class="slide-toggle">
+  <input 
+    type="checkbox" 
+    class="slide-toggle-input" 
+    [id]="id"
+    [checked]="value"
+    [disabled]="disabled"
+    (change)="onToggle()">
+  <label [for]="id" class="slide-toggle-label"></label>
+</div>
--- a/src/app/shared/components/form/slide-toggle/slide-toggle.component.ts
+++ b/src/app/shared/components/form/slide-toggle/slide-toggle.component.ts
@@ -1,11 +1,48 @@
-import { Component } from '@angular/core';
+import { Component, Input, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-slide-toggle',
-  imports: [],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule 
+  ],
  templateUrl: './slide-toggle.component.html',
-  styleUrl: './slide-toggle.component.css'
+  styleUrl: './slide-toggle.component.css',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SlideToggleComponent),
+      multi: true
+    }
+  ]
 })
-export class SlideToggleComponent {
+export class SlideToggleComponent implements ControlValueAccessor {
+  @Input() id = `slide-toggle-${Math.random().toString(36).substring(2)}`;
+  
+  // Interne Logik für ControlValueAccessor
+  value = false;
+  onChange: (value: any) => void = () => {};
+  onTouched: () => void = () => {};
+  disabled = false;

-}
+  writeValue(value: any): void { this.value = !!value; }
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  registerOnTouched(fn: any): void { this.onTouched = fn; }
+  setDisabledState?(isDisabled: boolean): void { this.disabled = isDisabled; }
+
+  // +++ HIER IST DIE FEHLENDE METHODE +++
+  /**
+   * Wird aufgerufen, wenn der Benutzer auf den Schalter klickt.
+   * Aktualisiert den internen Wert und benachrichtigt Angular Forms.
+   */
+  onToggle(): void {
+    if (!this.disabled) {
+      this.value = !this.value;
+      this.onChange(this.value);
+      this.onTouched();
+    }
+  }
+}
--- a/src/app/shared/components/layout/expansion-panel/expansion-panel.component.css
+++ b/src/app/shared/components/layout/expansion-panel/expansion-panel.component.css
@@ -0,0 +1,40 @@
+.expansion-panel {
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  transition: box-shadow var(--transition-speed);
+}
+.expansion-panel.is-open {
+  box-shadow: var(--box-shadow-sm);
+}
+.expansion-panel-header {
+  background: none;
+  border: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0.75rem 1.25rem;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+.expansion-panel-icon {
+  transition: transform 0.3s ease-out;
+}
+.expansion-panel.is-open .expansion-panel-icon {
+  transform: rotate(180deg);
+}
+.expansion-panel-content-wrapper {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.35s ease-in-out;
+}
+.expansion-panel.is-open .expansion-panel-content-wrapper {
+  max-height: 200px;
+}
+.expansion-panel-content {
+  padding: 0 1.25rem 1.25rem 1.25rem;
+}
--- a/src/app/shared/components/layout/expansion-panel/expansion-panel.component.html
+++ b/src/app/shared/components/layout/expansion-panel/expansion-panel.component.html
@@ -0,0 +1,12 @@
+<div class="expansion-panel" [class.is-open]="isOpen">
+  <button type="button" class="expansion-panel-header" (click)="togglePanel()">
+    <span>{{ title }}</span>
+    <svg class="expansion-panel-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
+  </button>
+  <div class="expansion-panel-content-wrapper">
+    <div class="expansion-panel-content">
+      <!-- Der Inhalt des Panels wird von außen über ng-content eingefügt -->
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>
--- a/src/app/shared/components/layout/expansion-panel/expansion-panel.component.ts
+++ b/src/app/shared/components/layout/expansion-panel/expansion-panel.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-expansion-panel',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './expansion-panel.component.html',
+  styleUrl: './expansion-panel.component.css'
+})
+export class ExpansionPanelComponent {
+  @Input() title: string = 'Details anzeigen'; // Titel für den Header
+  isOpen = false; // Interner Zustand, ob das Panel geöffnet ist
+
+  togglePanel(): void {
+    this.isOpen = !this.isOpen;
+  }
+}
--- a/src/app/shared/components/layout/page-header/page-header.component.css
+++ b/src/app/shared/components/layout/page-header/page-header.component.css
@@ -0,0 +1,26 @@
+/* Verschieben Sie diese Stile aus der globalen styles.css hierher */
+:host {
+  display: block;
+}
+
+.main-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+/* Responsivität für den Header */
+@media (max-width: 768px) {
+  .main-header {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+}
--- a/src/app/shared/components/layout/page-header/page-header.component.html
+++ b/src/app/shared/components/layout/page-header/page-header.component.html
@@ -1 +1,14 @@
-<p>page-header works!</p>
+<header class="main-header">
+  
+  <!-- Linker Bereich: Hier könnte später ein Titel oder Breadcrumbs via ng-content platziert werden -->
+  <div class="header-left">
+    <app-search-bar></app-search-bar>
+  </div>
+  
+  <!-- Rechter Bereich mit den Aktionen -->
+  <div class="header-actions">
+    <app-theme-switcher></app-theme-switcher>
+    <app-user-profile></app-user-profile>
+  </div>
+
+</header>
--- a/src/app/shared/components/layout/page-header/page-header.component.ts
+++ b/src/app/shared/components/layout/page-header/page-header.component.ts
@@ -1,11 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SearchBarComponent } from '../search-bar/search-bar.component';
+import { ThemeSwitcherComponent } from '../theme-switcher/theme-switcher.component';
+import { UserProfileComponent } from '../user-profile/user-profile.component';

@Component({
  selector: 'app-page-header',
-  imports: [],
+  standalone: true,
+  imports: [
+    CommonModule,
+    SearchBarComponent,
+    ThemeSwitcherComponent,
+    UserProfileComponent
+  ],
  templateUrl: './page-header.component.html',
  styleUrl: './page-header.component.css'
 })
 export class PageHeaderComponent {
-
-}
+  // Hier könnten später z.B. der Seitentitel oder Breadcrumbs übergeben werden
+}
--- a/src/app/shared/components/layout/search-bar/search-bar.component.css
+++ b/src/app/shared/components/layout/search-bar/search-bar.component.css
@@ -0,0 +1,32 @@
+/* Verschieben Sie diese Stile aus styles.css hierher */
+:host {
+  display: block;
+}
+
+.search-bar {
+  position: relative;
+  width: 300px;
+}
+.search-bar svg {
+  position: absolute;
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-text-light);
+  pointer-events: none; /* Verhindert, dass das Icon Klicks abfängt */
+}
+.search-bar input {
+  width: 100%;
+  padding: 0.75rem 1rem 0.75rem 3rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  font-size: 1rem;
+  transition: all var(--transition-speed);
+}
+.search-bar input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
+}
--- a/src/app/shared/components/layout/search-bar/search-bar.component.html
+++ b/src/app/shared/components/layout/search-bar/search-bar.component.html
@@ -1 +1,7 @@
-<p>search-bar works!</p>
+<div class="search-bar">
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="11" cy="11" r="8"></circle>
+    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+  </svg>
+  <input type="text" placeholder="Dashboard durchsuchen..." (input)="onSearch($event)" />
+</div>
--- a/src/app/shared/components/layout/search-bar/search-bar.component.ts
+++ b/src/app/shared/components/layout/search-bar/search-bar.component.ts
@@ -1,11 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-search-bar',
+  standalone: true,
  imports: [],
  templateUrl: './search-bar.component.html',
  styleUrl: './search-bar.component.css'
 })
 export class SearchBarComponent {
+  // Gibt den Suchbegriff aus, wenn der Benutzer tippt (mit debounce) oder Enter drückt
+  @Output() search = new EventEmitter<string>();

-}
+  onSearch(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.search.emit(input.value);
+  }
+}
--- a/src/app/shared/components/layout/theme-switcher/theme-switcher.component.css
+++ b/src/app/shared/components/layout/theme-switcher/theme-switcher.component.css
@@ -0,0 +1,12 @@
+:host {
+  display: block;
+}
+
+.theme-switcher {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--color-text-light);
+  font-weight: 500;
+  font-size: 0.9rem;
+}
--- a/src/app/shared/components/layout/theme-switcher/theme-switcher.component.html
+++ b/src/app/shared/components/layout/theme-switcher/theme-switcher.component.html
@@ -0,0 +1,5 @@
+<div class="theme-switcher">
+  <label>Dark Mode</label>
+
+  <app-slide-toggle [(ngModel)]="isDarkMode" (ngModelChange)="toggleTheme($event)"></app-slide-toggle>
+</div>
--- a/src/app/shared/components/layout/theme-switcher/theme-switcher.component.ts
+++ b/src/app/shared/components/layout/theme-switcher/theme-switcher.component.ts
@@ -0,0 +1,35 @@
+import { Component, Renderer2, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms'; // FormsModule importieren
+import { SlideToggleComponent } from '../../form/slide-toggle/slide-toggle.component';
+
+@Component({
+  selector: 'app-theme-switcher',
+  standalone: true,
+  imports: [
+    CommonModule, 
+    SlideToggleComponent,
+    FormsModule // <-- HIER IST DIE KORREKTUR
+  ],
+  templateUrl: './theme-switcher.component.html',
+  styleUrl: './theme-switcher.component.css'
+})
+export class ThemeSwitcherComponent implements OnInit {
+  isDarkMode = false;
+
+  constructor(private renderer: Renderer2) {}
+
+  ngOnInit(): void {
+    // Hier könnte man den Zustand aus dem localStorage laden
+  }
+
+  // Die Methode akzeptiert jetzt direkt den neuen boolean-Wert
+  toggleTheme(isDarkMode: boolean): void {
+    this.isDarkMode = isDarkMode;
+    if (this.isDarkMode) {
+      this.renderer.addClass(document.body, 'dark-theme');
+    } else {
+      this.renderer.removeClass(document.body, 'dark-theme');
+    }
+  }
+}
--- a/src/app/shared/components/layout/user-profile/user-profile.component.css
+++ b/src/app/shared/components/layout/user-profile/user-profile.component.css
@@ -0,0 +1,18 @@
+/* Verschieben Sie diese Stile aus styles.css hierher */
+:host {
+  display: block;
+}
+
+.user-profile img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  cursor: pointer;
+  border: 2px solid var(--color-border);
+  transition: border-color var(--transition-speed);
+}
+
+.user-profile img:hover {
+  border-color: var(--color-primary);
+}
--- a/src/app/shared/components/layout/user-profile/user-profile.component.html
+++ b/src/app/shared/components/layout/user-profile/user-profile.component.html
@@ -1 +1,3 @@
-<p>user-profile works!</p>
+<div class="user-profile">
+  <img [src]="avatarUrl" alt="User Avatar" />
+</div>
--- a/src/app/shared/components/layout/user-profile/user-profile.component.ts
+++ b/src/app/shared/components/layout/user-profile/user-profile.component.ts
@@ -1,11 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-user-profile',
+  standalone: true,
  imports: [],
  templateUrl: './user-profile.component.html',
  styleUrl: './user-profile.component.css'
 })
 export class UserProfileComponent {
-
-}
+  // Später könnte hier ein User-Objekt übergeben werden
+  @Input() avatarUrl = 'https://i.pravatar.cc/40';
+}
--- a/src/app/shared/components/overlays/dialog/dialog.component.css
+++ b/src/app/shared/components/overlays/dialog/dialog.component.css
@@ -0,0 +1,52 @@
+/* Verschieben Sie diese Stile aus styles.css hierher */
+:host { display: contents; }
+
+.dialog-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: grid;
+  place-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(4px);
+}
+.dialog-container {
+  width: 100%;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--box-shadow-md);
+  border: 1px solid var(--color-border);
+}
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.dialog-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0;
+}
+.dialog-content {
+  padding: 1.5rem;
+}
+.dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--color-border);
+  background-color: var(--color-body-bg);
+}
+
+/* Style-Anpassungen für projizierten Inhalt */
+::ng-deep [dialog-content] {
+  line-height: 1.7;
+  text-align: center;
+}
--- a/src/app/shared/components/overlays/dialog/dialog.component.html
+++ b/src/app/shared/components/overlays/dialog/dialog.component.html
@@ -1 +1,20 @@
-<p>dialog works!</p>
+<div class="dialog-backdrop" *ngIf="isOpen" (click)="onClose()" @fade>
+  <div class="dialog-container card" (click)="$event.stopPropagation()" @slideIn>
+    
+    <div class="dialog-header">
+      <h3 class="dialog-title">{{ title }}</h3>
+      <app-button color="icon" (click)="onClose()" tooltip="Schließen">&times;</app-button>
+    </div>
+
+    <div class="dialog-content">
+      <!-- Der Hauptinhalt des Dialogs wird von außen projiziert -->
+      <ng-content select="[dialog-content]"></ng-content>
+    </div>
+
+    <div class="dialog-actions">
+      <!-- Die Aktions-Buttons werden ebenfalls von außen projiziert -->
+      <ng-content select="[dialog-actions]"></ng-content>
+    </div>
+
+  </div>
+</div>
--- a/src/app/shared/components/overlays/dialog/dialog.component.ts
+++ b/src/app/shared/components/overlays/dialog/dialog.component.ts
@@ -1,11 +1,39 @@
-import { Component } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { ButtonComponent } from '../../ui/button/button.component';

@Component({
  selector: 'app-dialog',
-  imports: [],
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
  templateUrl: './dialog.component.html',
-  styleUrl: './dialog.component.css'
+  styleUrl: './dialog.component.css',
+  animations: [
+    trigger('fade', [
+      transition(':enter', [style({ opacity: 0 }), animate('300ms ease-out', style({ opacity: 1 }))]),
+      transition(':leave', [animate('300ms ease-in', style({ opacity: 0 }))])
+    ]),
+    trigger('slideIn', [
+      transition(':enter', [style({ transform: 'translateY(20px) scale(0.95)', opacity: 0 }), animate('300ms ease-out', style({ transform: 'translateY(0) scale(1)', opacity: 1 }))]),
+      transition(':leave', [animate('300ms ease-in', style({ transform: 'translateY(20px) scale(0.95)', opacity: 0 }))])
+    ])
+  ]
 })
 export class DialogComponent {
+  @Input() title = 'Aktion bestätigen';
+  @Input() isOpen = false;
+  
+  // Events, um die Aktionen nach außen zu kommunizieren
+  @Output() close = new EventEmitter<void>();
+  @Output() confirm = new EventEmitter<void>();

-}
+  onClose() {
+    this.close.emit();
+  }
+
+  onConfirm() {
+    this.confirm.emit();
+    this.onClose(); // Schließt den Dialog nach der Bestätigung
+  }
+}
--- a/src/app/shared/components/overlays/menu/menu.component.css
+++ b/src/app/shared/components/overlays/menu/menu.component.css
@@ -0,0 +1,44 @@
+/* Verschieben Sie diese Stile aus styles.css hierher */
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+.menu-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 200px;
+  padding: 0.5rem 0;
+  z-index: 900;
+  border: 1px solid var(--color-border);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: opacity var(--transition-speed), transform var(--transition-speed);
+}
+
+:host-context(.open) .menu-panel {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+/* Wir verwenden ::ng-deep, um die Stile auf die von außen projizierten Elemente anzuwenden */
+::ng-deep .menu-item {
+  display: block;
+  padding: 0.6rem 1.25rem;
+  color: var(--color-text);
+  text-decoration: none;
+  font-size: 0.95rem;
+  transition: background-color 0.2s ease-out;
+  cursor: pointer;
+}
+
+::ng-deep .menu-item:hover {
+  background-color: var(--color-body-bg);
+}
+
+::ng-deep .menu-item-danger {
+  color: var(--color-danger);
+}
--- a/src/app/shared/components/overlays/menu/menu.component.html
+++ b/src/app/shared/components/overlays/menu/menu.component.html
@@ -1 +1,11 @@
-<p>menu works!</p>
+<div class="menu-container" [class.open]="isOpen">
+  <!-- Hier wird der Button, der das Menü auslöst, von außen eingefügt -->
+  <div (click)="toggle()">
+    <ng-content select="[menu-trigger]"></ng-content>
+  </div>
+  
+  <div class="menu-panel card">
+    <!-- Hier werden die Menü-Einträge von außen eingefügt -->
+    <ng-content></ng-content>
+  </div>
+</div>
--- a/src/app/shared/components/overlays/menu/menu.component.ts
+++ b/src/app/shared/components/overlays/menu/menu.component.ts
@@ -1,11 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-menu',
-  imports: [],
+  standalone: true,
+  imports: [CommonModule],
  templateUrl: './menu.component.html',
  styleUrl: './menu.component.css'
 })
 export class MenuComponent {
+  @Input() triggerText = 'Menü öffnen';
+  isOpen = false;

-}
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+}
--- a/src/app/shared/components/snackbar-container/snackbar-container.component.ts
+++ b/src/app/shared/components/snackbar-container/snackbar-container.component.ts
@@ -6,7 +6,7 @@ import { SnackbarComponent } from '../snackbar/snackbar.component';

@Component({
  selector: 'app-snackbar-container',
-  standalone: true,
+   
  imports: [CommonModule, SnackbarComponent],
  templateUrl: './snackbar-container.component.html',
  styleUrl: './snackbar-container.component.css'
@@ -26,8 +26,8 @@ export class SnackbarContainerComponent {
    const verticalOffset = index * snackbarHeight;
    const positionProperty = position === 'bottom' ? 'bottom' : 'top';

-    const opacity = 1 - (index * 0.2);
-    const scale = 1 - (index * 0.02);
+    const opacity = 1 - (index * 0.1);
+    const scale = 1 - (index * 0.01);

    const visibleStyle = {
      [positionProperty]: `${verticalOffset}px`,
--- a/src/app/shared/components/snackbar/snackbar.component.ts
+++ b/src/app/shared/components/snackbar/snackbar.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-snackbar',
-  standalone: true,
+   
  imports: [],
  templateUrl: './snackbar.component.html',
  styleUrl: './snackbar.component.css'
--- a/src/app/shared/components/ui/alert/alert.component.css
+++ b/src/app/shared/components/ui/alert/alert.component.css
@@ -0,0 +1,60 @@
+/* WICHTIG: Verschieben Sie die .alert-Klassen aus Ihrer globalen 
+   styles.css hierher und löschen Sie sie anschließend dort. */
+:host {
+  display: block;
+}
+
+.alert {
+  padding: 1rem;
+  border-radius: var(--border-radius-md);
+  border: 1px solid transparent;
+  font-weight: 500;
+}
+
+/* Success */
+.alert-success {
+  background-color: #d1fae5;
+  color: #065f46;
+  border-color: #6ee7b7;
+}
+:host-context(body.dark-theme) .alert-success {
+  background-color: #064e3b;
+  color: #a7f3d0;
+  border-color: #34d399;
+}
+
+/* Danger */
+.alert-danger {
+  background-color: #fee2e2;
+  color: #991b1b;
+  border-color: #fca5a5;
+}
+:host-context(body.dark-theme) .alert-danger {
+  background-color: #7f1d1d;
+  color: #fecaca;
+  border-color: #f87171;
+}
+
+/* Info */
+.alert-info {
+  background-color: #dbeafe;
+  color: #1e40af;
+  border-color: #93c5fd;
+}
+:host-context(body.dark-theme) .alert-info {
+  background-color: #1e3a8a;
+  color: #bfdbfe;
+  border-color: #60a5fa;
+}
+
+/* Warning */
+.alert-warning {
+  background-color: #fef9c3;
+  color: #854d0e;
+  border-color: #fde047;
+}
+:host-context(body.dark-theme) .alert-warning {
+  background-color: #713f12;
+  color: #fef08a;
+  border-color: #facc15;
+}
--- a/src/app/shared/components/ui/alert/alert.component.html
+++ b/src/app/shared/components/ui/alert/alert.component.html
@@ -1 +1,11 @@
-<p>alert works!</p>
+<div 
+  class="alert"
+  [ngClass]="{
+    'alert-success': type === 'success',
+    'alert-danger': type === 'danger',
+    'alert-info': type === 'info',
+    'alert-warning': type === 'warning'
+  }">
+  <!-- Der Inhalt des Alerts wird von außen über ng-content eingefügt -->
+  <ng-content></ng-content>
+</div>
--- a/src/app/shared/components/ui/alert/alert.component.ts
+++ b/src/app/shared/components/ui/alert/alert.component.ts
@@ -1,11 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// Definiert die erlaubten Alert-Typen für Typsicherheit
+type AlertType = 'success' | 'danger' | 'info' | 'warning';

@Component({
  selector: 'app-alert',
-  imports: [],
+  standalone: true,
+  imports: [CommonModule],
  templateUrl: './alert.component.html',
  styleUrl: './alert.component.css'
 })
 export class AlertComponent {
-
-}
+  @Input() type: AlertType = 'info'; // 'info' ist ein guter Standardwert
+}
--- a/src/app/shared/components/ui/button/button.component.html
+++ b/src/app/shared/components/ui/button/button.component.html
@@ -1 +1,16 @@
-<p>button works!</p>
+<button
+  [type]="type"
+  [disabled]="disabled"
+  class="btn"
+  [class.btn-primary]="color === 'primary'"
+  [class.btn-secondary]="color === 'secondary'"
+  [class.btn-stroked]="color === 'stroked'"
+  [class.btn-flat]="color === 'flat'"
+  [class.btn-icon]="color === 'icon' || color === 'icon-danger'"
+  [class.btn-icon-danger]="color === 'icon-danger'"
+  [class.btn-full-width]="fullWidth"
+  [attr.data-tooltip]="tooltip">
+  
+  <!-- ng-content erlaubt es, Text oder SVGs von außen in den Button einzufügen -->
+  <ng-content></ng-content>
+</button>
--- a/src/app/shared/components/ui/button/button.component.ts
+++ b/src/app/shared/components/ui/button/button.component.ts
@@ -1,11 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// Definiert die erlaubten Varianten für den Button
+type ButtonColor = 'primary' | 'secondary' | 'stroked' | 'flat' | 'icon' | 'icon-danger';

@Component({
  selector: 'app-button',
-  imports: [],
+   
+  imports: [CommonModule],
  templateUrl: './button.component.html',
  styleUrl: './button.component.css'
 })
 export class ButtonComponent {
+  @Input() color: ButtonColor = 'primary';
+  @Input() type: 'button' | 'submit' = 'button';
+  @Input() disabled = false;
+  @Input() fullWidth = false;

-}
+  // Ein spezieller Input für Tooltips
+  @Input() tooltip: string | null = null;
+}
--- a/src/app/shared/components/ui/card/card.component.html
+++ b/src/app/shared/components/ui/card/card.component.html
@@ -1 +1,12 @@
-<p>card works!</p>
+<section class="card">
+  <!-- Der Header wird nur gerendert, wenn Inhalt dafür bereitgestellt wird -->
+  <div class="card-header" *ngIf="hasHeader">
+    <!-- Hier wird der Header-Inhalt projiziert -->
+    <ng-content select="[card-header]"></ng-content>
+  </div>
+  
+  <div class="card-body">
+    <!-- Hier wird der restliche Inhalt projiziert -->
+    <ng-content></ng-content>
+  </div>
+</section>
--- a/src/app/shared/components/ui/card/card.component.ts
+++ b/src/app/shared/components/ui/card/card.component.ts
@@ -1,11 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, ContentChild, ElementRef, AfterContentInit } from '@angular/core';
+import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-card',
-  imports: [],
+  standalone: true,
+  imports: [CommonModule],
  templateUrl: './card.component.html',
  styleUrl: './card.component.css'
 })
-export class CardComponent {
+export class CardComponent implements AfterContentInit {
+  // Wir prüfen, ob der Benutzer einen Header-Inhalt bereitgestellt hat.
+  hasHeader = false;

-}
+  // Sucht nach einem Element, das mit dem Attribut [card-header] markiert ist.
+  @ContentChild('header') headerContent: ElementRef | undefined;
+
+  ngAfterContentInit(): void {
+    // Wenn ein Header-Element gefunden wurde, setzen wir die Eigenschaft auf true.
+    this.hasHeader = !!this.headerContent;
+  }
+}
--- a/src/app/shared/components/ui/chip/chip.component.css
+++ b/src/app/shared/components/ui/chip/chip.component.css
@@ -0,0 +1,41 @@
+/* Diese Komponente ist autark und benötigt KEINE globalen Klassen mehr.
+   Sie können die .chip-Klassen aus styles.css hierher verschieben und dort löschen. */
+:host {
+  display: inline-block;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  background-color: var(--color-border);
+  color: var(--color-text);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all var(--transition-speed);
+}
+
+.chip:hover {
+  background-color: #d1d5db;
+}
+
+:host-context(body.dark-theme) .chip:hover {
+  background-color: #5a6578;
+}
+
+.chip.chip-active {
+  background-color: var(--color-primary);
+  color: #fff;
+}
+
+.chip-remove {
+  margin-left: 0.5rem;
+  font-weight: bold;
+  opacity: 0.5;
+  transition: opacity var(--transition-speed);
+}
+
+.chip-remove:hover {
+  opacity: 1;
+}
--- a/src/app/shared/components/ui/chip/chip.component.html
+++ b/src/app/shared/components/ui/chip/chip.component.html
@@ -1 +1,6 @@
-<p>chip works!</p>
+<!-- [class.chip-active] wendet die aktive Klasse nur an, wenn der Input 'active' true ist -->
+<span class="chip" [class.chip-active]="active">
+  {{ label }}
+  <!-- Der "Entfernen"-Button wird nur angezeigt, wenn 'removable' true ist -->
+  <span *ngIf="removable" class="chip-remove" (click)="onRemove($event)">&times;</span>
+</span>
--- a/src/app/shared/components/ui/chip/chip.component.ts
+++ b/src/app/shared/components/ui/chip/chip.component.ts
@@ -1,11 +1,28 @@
-import { Component } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-chip',
-  imports: [],
+  standalone: true,
+  imports: [CommonModule],
  templateUrl: './chip.component.html',
  styleUrl: './chip.component.css'
 })
 export class ChipComponent {
+  // Der Text, der im Chip angezeigt wird
+  @Input() label: string = '';
+  // Ob der Chip als "aktiv" oder "ausgewählt" angezeigt werden soll
+  @Input() active = false;
+  // Ob ein "Entfernen"-Button angezeigt werden soll
+  @Input() removable = false;

-}
+  // Event, das ausgelöst wird, wenn auf den "Entfernen"-Button geklickt wird
+  @Output() remove = new EventEmitter<void>();
+
+  onRemove(event: MouseEvent) {
+    // Verhindert, dass ein Klick auf den "Entfernen"-Button
+    // auch ein Klick-Event auf dem gesamten Chip auslöst.
+    event.stopPropagation();
+    this.remove.emit();
+  }
+}
--- a/src/app/shared/components/ui/icon/icon.component.css
+++ b/src/app/shared/components/ui/icon/icon.component.css
@@ -0,0 +1,14 @@
+/* Globale Stile für alle per <app-icon> geladenen SVGs */
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em; /* Passt sich an die Schriftgröße des Elternelements an */
+  height: 1em;
+}
+
+/* Wir verwenden ::ng-deep, da das SVG-Element dynamisch eingefügt wird */
+::ng-deep .icon-svg {
+  width: 100%;
+  height: 100%;
+}
--- a/src/app/shared/components/ui/icon/icon.component.html
+++ b/src/app/shared/components/ui/icon/icon.component.html
@@ -1 +0,0 @@
-<p>icon works!</p>
--- a/src/app/shared/components/ui/icon/icon.component.ts
+++ b/src/app/shared/components/ui/icon/icon.component.ts
@@ -1,11 +1,35 @@
-import { Component } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, ElementRef, Renderer2 } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClient, HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-icon',
-  imports: [],
-  templateUrl: './icon.component.html',
+  standalone: true,
+  imports: [CommonModule, HttpClientModule],
+  template: '<ng-content></ng-content>', // Leeres Template, da wir das SVG direkt einfügen
  styleUrl: './icon.component.css'
 })
-export class IconComponent {
+export class IconComponent implements OnChanges {
+  @Input() name: string = '';

-}
+  constructor(
+    private http: HttpClient,
+    private el: ElementRef,
+    private renderer: Renderer2
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['name'] && this.name) {
+      // Lädt das SVG aus dem assets-Ordner und fügt es in die Komponente ein
+      this.http.get(`assets/icons/${this.name}.svg`, { responseType: 'text' })
+        .subscribe(svg => {
+          this.el.nativeElement.innerHTML = svg;
+          // Optional: Fügt dem <svg>-Element selbst eine Klasse hinzu
+          const svgElement = this.el.nativeElement.querySelector('svg');
+          if (svgElement) {
+            this.renderer.addClass(svgElement, 'icon-svg');
+          }
+        });
+    }
+  }
+}
--- a/src/app/shared/components/ui/skeleton/skeleton.component.css
+++ b/src/app/shared/components/ui/skeleton/skeleton.component.css
@@ -0,0 +1,26 @@
+/* Verschieben Sie die Skeleton-Stile hierher */
+@keyframes skeleton-shimmer {
+  0% { background-position: -200px 0; }
+  100% { background-position: calc(200px + 100%) 0; }
+}
+
+.skeleton-item {
+  background-color: var(--color-border);
+  background-image: linear-gradient(
+    90deg,
+    var(--color-border) 0px,
+    var(--color-body-bg) 40px,
+    var(--color-border) 80px
+  );
+  background-size: 200px 100%;
+  background-repeat: no-repeat;
+  animation: skeleton-shimmer 1.5s infinite;
+}
+
+.skeleton-line {
+  border-radius: var(--border-radius-sm);
+}
+
+.skeleton-avatar {
+  border-radius: 50%;
+}
--- a/src/app/shared/components/ui/skeleton/skeleton.component.html
+++ b/src/app/shared/components/ui/skeleton/skeleton.component.html
@@ -0,0 +1,6 @@
+<div 
+  class="skeleton-item"
+  [ngClass]="'skeleton-' + type"
+  [style.width]="type === 'line' ? width : '50px'"
+  [style.height]="type === 'line' ? height : '50px'">
+</div>
--- a/src/app/shared/components/ui/skeleton/skeleton.component.ts
+++ b/src/app/shared/components/ui/skeleton/skeleton.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-skeleton',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './skeleton.component.html',
+  styleUrl: './skeleton.component.css'
+})
+export class SkeletonComponent {
+  @Input() type: 'line' | 'avatar' = 'line';
+  @Input() width: string = '100%';
+  @Input() height: string = '1rem';
+}
--- a/src/app/shared/components/ui/status-pill/status-pill.component.css
+++ b/src/app/shared/components/ui/status-pill/status-pill.component.css
@@ -0,0 +1,45 @@
+/* Diese Komponente ist ebenfalls autark. Verschieben Sie die .status-pill- und .pill-*-Klassen
+   aus styles.css hierher und löschen Sie sie dort. */
+:host {
+  display: inline-block;
+}
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  transition: all 0.2s ease-out;
+}
+
+.status-pill:hover {
+  transform: scale(1.05);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.status-pill::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+
+/* Farbvarianten */
+.pill-success { color: #15803d; background-color: #ecfdf5; border-color: #bbf7d0; }
+:host-context(body.dark-theme) .pill-success { color: #a7f3d0; background-color: #166534; border-color: #22c55e; }
+
+.pill-warning { color: #b45309; background-color: #fffbeb; border-color: #fde68a; }
+:host-context(body.dark-theme) .pill-warning { color: #fde047; background-color: #92400e; border-color: #f59e0b; }
+
+.pill-danger { color: #b91c1c; background-color: #fef2f2; border-color: #fecaca; }
+:host-context(body.dark-theme) .pill-danger { color: #fca5a5; background-color: #991b1b; border-color: #ef4444; }
+
+.pill-info { color: #1d4ed8; background-color: #eff6ff; border-color: #bfdbfe; }
+:host-context(body.dark-theme) .pill-info { color: #93c5fd; background-color: #1e40af; border-color: #3b82f6; }
--- a/src/app/shared/components/ui/status-pill/status-pill.component.html
+++ b/src/app/shared/components/ui/status-pill/status-pill.component.html
@@ -1 +1,11 @@
-<p>status-pill works!</p>
+<span 
+  class="status-pill"
+  [ngClass]="{
+    'pill-success': status === 'success',
+    'pill-warning': status === 'warning',
+    'pill-danger': status === 'danger',
+    'pill-info': status === 'info'
+  }">
+  <!-- Der Text für die Pille wird von außen über ng-content eingefügt -->
+  <ng-content></ng-content>
+</span>
--- a/src/app/shared/components/ui/status-pill/status-pill.component.ts
+++ b/src/app/shared/components/ui/status-pill/status-pill.component.ts
@@ -1,11 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+// Definiert die erlaubten Status-Typen für Typsicherheit
+type PillStatus = 'success' | 'warning' | 'danger' | 'info';

@Component({
  selector: 'app-status-pill',
-  imports: [],
+  standalone: true,
+  imports: [CommonModule],
  templateUrl: './status-pill.component.html',
  styleUrl: './status-pill.component.css'
 })
 export class StatusPillComponent {
-
-}
+  @Input() status: PillStatus = 'info';
+}
--- a/src/app/shared/services/snackbar.service.ts
+++ b/src/app/shared/services/snackbar.service.ts
@@ -44,7 +44,7 @@ export class SnackbarService {
      setTimeout(() => {
        currentSnackbars = this.snackbarsSubject.value.filter(s => s.id !== id);
        this.snackbarsSubject.next(currentSnackbars);
-      }, 100); // Muss zur CSS-Dauer passen
+      }, 60); // Muss zur CSS-Dauer passen
    }
  }