/* ===== Z-INDEX SYSTEM ===== */
/* 
 * Systematische z-index Hierarchie für die gesamte HSC Webplatform
 * 
 * BESCHREIBUNG:
 * Dieses System definiert eine konsistente z-index Hierarchie für alle UI-Elemente
 * der Anwendung. Die Werte reichen von 0-100 und folgen einer logischen Struktur.
 * 
 * HIERARCHIE (von niedrig zu hoch):
 * 
 * 0-9:   Basis-Ebenen
 *   - 0: Basis-Ebene (Standard-Position)
 *   - 1: Normaler Inhalt (Text, Bilder, etc.)
 * 
 * 10-19: Overlays und einfache UI-Elemente
 *   - 10: Overlays (Hintergrund-Elemente)
 * 
 * 20-29: Interaktive UI-Elemente
 *   - 20: Dropdown-Menüs
 * 
 * 30-39: Hilfs-Elemente
 *   - 30: Tooltips (Hilfe-Texte)
 * 
 * 40-49: Popover und Floating Elements
 *   - 40: Popover (FAB, Action Buttons, schwebende Elemente)
 * 
 * 50-59: Modals und Dialoge
 *   - 50: Modal-Hintergrund (Backdrop)
 *   - 60: Modals (Dialoge, Bottom Sheets)
 * 
 * 70-79: Benachrichtigungen
 *   - 70: Toast-Nachrichten
 *   - 80: Mobile Benachrichtigungen (über Navigation)
 * 
 * 90-99: Navigation und System-Elemente
 *   - 90: Mobile Navigation (höchste UI-Ebene)
 * 
 * 100:   System-Elemente
 *   - 100: Impressum (höchste Priorität, überlagert alles)
 * 
 * VERWENDUNG:
 * - Verwende CSS-Variablen: z-index: var(--z-modal);
 * - Verwende CSS-Klassen: class="z-modal"
 * - Füge neue Ebenen nur bei Bedarf hinzu
 * - Halte die Hierarchie logisch und konsistent
 * 
 * BEISPIELE:
 * - Mobile Navigation: z-index: var(--z-navigation) = 90
 * - FAB Button: z-index: var(--z-popover) = 40
 * - Modal Dialog: z-index: var(--z-modal) = 60
 * - Impressum: z-index: var(--z-impressum) = 100
 */

/* Basis-Ebenen (0-99) */
:root {
    --z-base: 0;
    --z-content: 1;
    --z-overlay: 10;
    --z-dropdown: 20;
    --z-tooltip: 30;
    --z-popover: 40;
    --z-modal-backdrop: 50;
    --z-modal: 60;
    --z-toast: 70;
    --z-notification: 91;
    --z-navigation: 90;
    --z-impressum: 91;
}

/* Spezifische z-index Klassen */
.z-base { z-index: var(--z-base); }
.z-content { z-index: var(--z-content); }
.z-overlay { z-index: var(--z-overlay); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-tooltip { z-index: var(--z-tooltip); }
.z-modal-backdrop { z-index: var(--z-modal-backdrop); }
.z-modal { z-index: var(--z-modal); }
.z-popover { z-index: var(--z-popover); }
.z-toast { z-index: var(--z-toast); }
.z-notification { z-index: var(--z-notification); }
.z-navigation { z-index: var(--z-navigation); }
.z-impressum { z-index: var(--z-impressum); }

/* Mobile Navigation */
#mobile-nav {
    z-index: var(--z-navigation) !important;
}

/* Mobile Menu Overlay */
#mobile-menu-overlay {
    z-index: calc(var(--z-navigation) + 1) !important;
}

/* Mobile Notifications */
.mobile-notification {
    z-index: var(--z-notification) !important;
}

/* Modals */
.modal-backdrop {
    z-index: var(--z-modal-backdrop) !important;
}

.modal {
    z-index: var(--z-modal) !important;
}

/* Bottom Sheets */
.ios-bottom-sheet-backdrop {
    z-index: var(--z-modal-backdrop) !important;
}

.ios-bottom-sheet {
    z-index: var(--z-modal) !important;
}

/* Floating Action Buttons */
.ios-fab {
    z-index: var(--z-popover) !important;
}

/* Action Buttons */
.ios-action-button {
    z-index: var(--z-popover) !important;
}

/* Dropdown Menus */
.dropdown-menu {
    z-index: var(--z-dropdown) !important;
}

/* Tooltips */
.tooltip {
    z-index: var(--z-tooltip) !important;
}

/* Impressum Modal - Höchste Priorität */
.impressum-modal {
    z-index: var(--z-impressum) !important;
}

/* Impressum Button und alle Impressum-Elemente */
.impressum-button,
.impressum-link,
[href*="impressum"],
[onclick*="impressum"] {
    z-index: var(--z-impressum) !important;
}

/* Impressum Modal Backdrop */
.impressum-backdrop {
    z-index: calc(var(--z-impressum) - 1) !important;
}

/* Cookie Banner */
.cookie-banner {
    z-index: calc(var(--z-impressum) - 1) !important;
}

/* Cache Bust: Tue Sep  9 20:30:00 CEST 2025 */