vor kompletter umsetllung

src/app/shared/components/ui/snackbar/snackbar.component.css

@@ -0,0 +1,47 @@
+/* src\app\shared\snackbar\components\snackbar\snackbar.component.css */
+/* Stile, die NUR für eine einzelne Snackbar gelten */
+:host {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem;
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--box-shadow-md);
+  pointer-events: auto;
+  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.snackbar-icon-container {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background-color: #dcfce7;
+  color: #166534;
+}
+:host-context(body.dark-theme) .snackbar-icon-container {
+  background-color: #166534;
+  color: #dcfce7;
+}
+.snackbar-message {
+  flex-grow: 1;
+  font-weight: 500;
+}
+.snackbar-close-btn {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  font-size: 1.5rem;
+  color: var(--color-text-light);
+}
+.snackbar-close-btn:hover {
+  background-color: var(--color-body-bg);
+}

src/app/shared/components/ui/snackbar/snackbar.component.html

@@ -0,0 +1,10 @@
+<div class="snackbar-icon-container">
+  <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">
+    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+    <polyline points="22 4 12 14.01 9 11.01"></polyline>
+  </svg>
+</div>
+<span class="snackbar-message">{{ message }}</span>
+<button class="btn btn-icon snackbar-close-btn" (click)="onClose()" data-tooltip="Schließen">
+  &times;
+</button>

src/app/shared/components/ui/snackbar/snackbar.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-snackbar',
+   
+  imports: [],
+  templateUrl: './snackbar.component.html',
+  styleUrl: './snackbar.component.css'
+})
+export class SnackbarComponent {
+  @Input() message: string = '';
+  @Output() close = new EventEmitter<void>();
+
+  onClose() {
+    this.close.emit();
+  }
+}