<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SambAlegria Bremervörde - Rhythmus des Lebens</title>

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Dancing+Script:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --samba-primary: #F5C842;
            --samba-secondary: #FF6B35;
            --samba-success: #2E8B57;
            --samba-dark: #1a1a1a;
            --samba-light: #f8f9fa;
            --gradient-primary: linear-gradient(135deg, #F5C842 0%, #FF6B35 100%);
            --gradient-secondary: linear-gradient(135deg, #2E8B57 0%, #20B2AA 100%);
            --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
            --border-radius: 1rem;
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: var(--samba-dark);
            color: var(--samba-light);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* Fix für überlappende Elemente im Hero-Bereich */
        .hero-section {
            position: relative;
            z-index: 1;
        }

        .floating-instruments {
            z-index: 0; /* Niedriger als Hero-Content */
            pointer-events: none; /* Verhindert Klick-Interference */
        }

        .hero-section .btn {
            position: relative;
            z-index: 10; /* Buttons über allen anderen Elementen */
            pointer-events: auto; /* Explizit klickbar machen */
        }

        /* Zusätzliche Sicherheit für alle wichtigen Interaktionselemente */
        .hero-section a,
        .hero-section button {
            position: relative;
            z-index: 10;
        }

        /* Cookie Banner */
        .cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(26, 26, 26, 0.95);
            backdrop-filter: blur(15px);
            border-top: 2px solid var(--samba-primary);
            padding: 1.5rem;
            z-index: 10000;
            transform: translateY(100%);
            transition: transform 0.5s ease;
        }

        .cookie-banner.show {
            transform: translateY(0);
        }

        .cookie-banner .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .cookie-banner .cookie-text {
            flex: 1;
            min-width: 300px;
        }

        .cookie-banner .cookie-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .cookie-banner .btn {
            white-space: nowrap;
        }

        /* Custom Bootstrap Overrides */
        .btn-samba-primary {
            background: var(--gradient-primary);
            border: none;
            color: var(--samba-dark);
            font-weight: 600;
            border-radius: 50px;
            padding: 0.75rem 2rem;
            transition: var(--transition);
            box-shadow: var(--shadow);
        }

        .btn-samba-primary:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
            color: var(--samba-dark);
        }

        .btn-samba-secondary {
            background: var(--gradient-secondary);
            border: none;
            color: white;
            font-weight: 600;
            border-radius: 50px;
            padding: 0.75rem 2rem;
            transition: var(--transition);
            box-shadow: var(--shadow);
        }

        .btn-samba-secondary:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
            color: white;
        }

        .btn-outline-samba {
            border: 2px solid var(--samba-primary);
            color: var(--samba-primary);
            background: transparent;
            border-radius: 50px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            transition: var(--transition);
        }

        .btn-outline-samba:hover {
            background: var(--gradient-primary);
            color: var(--samba-dark);
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }

        /* Enhanced Cards */
        .card-samba {
            background: rgba(255, 255, 255, 0.08) !important;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .card-samba:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-lg);
            border-color: var(--samba-primary) !important;
            background: rgba(255, 255, 255, 0.12) !important;
        }

        .card-gradient {
            background: var(--gradient-primary);
            color: var(--samba-dark);
        }

        /* Verbesserte Kontakt-Karten */
        .card-samba h5 {
            font-weight: 600;
            font-size: 1.2rem;
            color: var(--samba-primary) !important;
        }

        .card-samba p {
            font-size: 1rem;
            line-height: 1.5;
            color: var(--samba-light) !important;
            font-weight: 500;
        }

        /* Icon Styling */
        .card-samba .fa-envelope {
            color: var(--samba-primary) !important;
        }

        .card-samba .fa-map-marker-alt {
            color: var(--samba-success) !important;
        }

        /* Modern Navigation */
        .navbar-custom {
            background: rgba(26, 26, 26, 0.95) !important;
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
            padding: 1rem 0;
        }

        .navbar-custom.scrolled {
            background: rgba(26, 26, 26, 0.98) !important;
            box-shadow: var(--shadow-lg);
        }

        .navbar-brand {
            font-family: 'Dancing Script', cursive;
            font-size: 2.2rem;
            font-weight: 700;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .navbar-brand .logo-icon {
            width: 45px;
            height: 45px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--samba-dark);
            animation: pulse-glow 3s infinite;
        }

        @keyframes pulse-glow {
            0%, 100% {
                box-shadow: 0 0 20px rgba(245, 200, 66, 0.4);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 0 30px rgba(245, 200, 66, 0.6);
                transform: scale(1.05);
            }
        }

        .navbar-nav .nav-link {
            color: var(--samba-light) !important;
            font-weight: 500;
            margin: 0 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 25px;
            transition: var(--transition);
            position: relative;
        }

        .navbar-nav .nav-link:hover {
            background: rgba(245, 200, 66, 0.2);
            color: var(--samba-primary) !important;
            transform: translateY(-2px);
        }

        /* Hero Section */
        .hero-section {
            min-height: 100vh;
            background: radial-gradient(circle at 30% 20%, rgba(245, 200, 66, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 70% 80%, rgba(46, 139, 87, 0.1) 0%, transparent 50%),
            var(--samba-dark);
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a"><stop offset="20%" stop-color="%23F5C842" stop-opacity=".05"/><stop offset="100%" stop-color="%23F5C842" stop-opacity="0"/></radialGradient></defs><circle fill="url(%23a)" cx="10" cy="10" r="8"/><circle fill="url(%23a)" cx="50" cy="10" r="12"/><circle fill="url(%23a)" cx="90" cy="10" r="6"/></svg>') repeat;
            animation: float-bg 20s ease-in-out infinite;
            opacity: 0.4;
        }

        @keyframes float-bg {
            0%, 100% { transform: translateX(0) translateY(0); }
            25% { transform: translateX(20px) translateY(-10px); }
            50% { transform: translateX(-15px) translateY(-20px); }
            75% { transform: translateX(-25px) translateY(5px); }
        }

        .hero-title {
            font-size: clamp(2.5rem, 8vw, 5rem);
            font-weight: 800;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            color: rgba(248, 249, 250, 0.8);
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        /* Floating Instruments */
        .floating-instruments {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .instrument {
            position: absolute;
            font-size: 2rem;
            animation: float-instruments 15s linear infinite;
            opacity: 0;
            filter: drop-shadow(0 0 15px rgba(245, 200, 66, 0.4));
        }

        @keyframes float-instruments {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% { opacity: 0.6; }
            90% { opacity: 0.6; }
            100% {
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }

        /* Section Styles */
        .section-padding {
            padding: 6rem 0;
        }

        .section-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 700;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--gradient-secondary);
            border-radius: 2px;
        }

        /* Stats Cards */
        .stat-card {
            background: var(--gradient-primary);
            color: var(--samba-dark);
            border-radius: var(--border-radius);
            padding: 2rem;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
            height: 100%;
        }

        .stat-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-lg);
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
            display: block;
        }

        .stat-label {
            font-weight: 600;
            font-size: 1rem;
        }

        /* Event Cards */
        .event-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--border-radius);
            padding: 2rem;
            margin-bottom: 1.5rem;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .event-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(245, 200, 66, 0.1), transparent);
            transition: left 0.6s ease;
        }

        .event-card:hover::before {
            left: 100%;
        }

        .event-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            border-color: var(--samba-primary);
        }

        .event-date {
            color: var(--samba-primary);
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }

        .event-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--samba-light);
            margin-bottom: 1rem;
        }

        .event-location {
            color: rgba(248, 249, 250, 0.7);
            font-size: 0.9rem;
            margin-top: 1rem;
        }

        /* Erweiterte Galerie Styles */
        .gallery-item {
            aspect-ratio: 1;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: var(--samba-primary);
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .gallery-item.enhanced {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.4s ease;
            cursor: pointer;
        }

        .gallery-item.enhanced:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 20px 40px rgba(245, 200, 66, 0.3);
            border-color: var(--samba-primary);
        }

        .gallery-image-container {
            position: relative;
            aspect-ratio: 1;
            overflow: hidden;
        }

        .gallery-thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .gallery-item.enhanced:hover .gallery-thumbnail {
            transform: scale(1.1);
        }

        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(26, 26, 26, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .gallery-item.enhanced:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-view-btn {
            background: var(--gradient-primary);
            border: none;
            color: var(--samba-dark);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .gallery-view-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(245, 200, 66, 0.5);
        }

        .gallery-video-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--samba-secondary);
            color: white;
            padding: 0.5rem;
            border-radius: 50%;
            font-size: 0.8rem;
        }

        .gallery-info {
            padding: 1rem;
            text-align: center;
        }

        .gallery-title {
            color: var(--samba-primary);
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

        .gallery-category {
            color: rgba(248, 249, 250, 0.7);
            font-size: 0.8rem;
        }

        /* Lightbox Styles */
        #gallery-lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        #gallery-lightbox.active {
            opacity: 1;
            visibility: visible;
        }

        .lightbox-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lightbox-container {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .lightbox-image {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
            border-radius: 10px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .lightbox-close,
        .lightbox-prev,
        .lightbox-next {
            position: absolute;
            background: rgba(245, 200, 66, 0.9);
            color: var(--samba-dark);
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lightbox-close {
            top: -70px;
            right: 0;
            font-size: 1.5rem;
        }

        .lightbox-prev {
            left: -70px;
            top: 50%;
            transform: translateY(-50%);
        }

        .lightbox-next {
            right: -70px;
            top: 50%;
            transform: translateY(-50%);
        }

        .lightbox-close:hover,
        .lightbox-prev:hover,
        .lightbox-next:hover {
            background: var(--samba-primary);
            transform: scale(1.1);
        }

        .lightbox-info {
            margin-top: 2rem;
            text-align: center;
            color: white;
        }

        .lightbox-title {
            color: var(--samba-primary);
            margin-bottom: 0.5rem;
        }

        .lightbox-counter {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }

        .lightbox-open {
            overflow: hidden;
        }

        /* Responsive Lightbox */
        @media (max-width: 768px) {
            .lightbox-close {
                top: 20px;
                right: 20px;
                width: 40px;
                height: 40px;
            }

            .lightbox-prev,
            .lightbox-next {
                width: 40px;
                height: 40px;
                bottom: 20px;
                top: auto;
                transform: none;
            }

            .lightbox-prev {
                left: 20px;
            }

            .lightbox-next {
                right: 20px;
                left: auto;
            }
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--border-radius);
        }

        .gallery-item::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: var(--gradient-primary);
            opacity: 0.1;
            border-radius: 50%;
            transition: all 0.6s ease;
            transform: translate(-50%, -50%);
        }

        .gallery-item:hover::before {
            width: 200%;
            height: 200%;
        }

        .gallery-item:hover {
            transform: scale(1.05);
            box-shadow: var(--shadow-lg);
            border-color: var(--samba-primary);
        }

        /* Contact Form */
        .form-floating > .form-control {
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            color: var(--samba-light);
            backdrop-filter: blur(10px);
        }

        .form-floating > .form-control:focus {
            background: rgba(255, 255, 255, 0.08);
            border-color: var(--samba-primary);
            box-shadow: 0 0 20px rgba(245, 200, 66, 0.2);
            color: var(--samba-light);
        }

        .form-floating > label {
            color: rgba(245, 200, 66, 0.8);
        }

        /* Footer */
        .footer {
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding: 3rem 0 2rem;
            margin-top: 5rem;
        }

        .social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: var(--samba-primary);
            font-size: 1.25rem;
            margin: 0 0.5rem;
            transition: var(--transition);
            backdrop-filter: blur(10px);
        }

        .social-links a:hover {
            background: var(--gradient-primary);
            color: var(--samba-dark);
            transform: translateY(-5px);
        }

        /* Dropdown Styling */
        .dropdown-menu {
            background: rgba(26, 26, 26, 0.95) !important;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 0.5rem 0;
            margin-top: 0.5rem;
            box-shadow: var(--shadow-lg);
        }

        .dropdown-item {
            color: var(--samba-light) !important;
            padding: 0.75rem 1.5rem;
            transition: var(--transition);
            border-radius: 10px;
            margin: 0.2rem 0.5rem;
            display: flex;
            align-items: center;
        }

        .dropdown-item:hover {
            background: rgba(245, 200, 66, 0.2) !important;
            color: var(--samba-primary) !important;
            transform: translateX(5px);
        }

        .dropdown-item i {
            color: var(--samba-primary);
            width: 20px;
        }

        .dropdown-toggle::after {
            color: var(--samba-primary);
        }

        .navbar-nav .nav-link.dropdown-toggle:hover {
            background: rgba(245, 200, 66, 0.2);
            color: var(--samba-primary) !important;
        }

        /* Footer Links (remove old footer links) */
        .footer-link {
            color: var(--samba-primary);
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 25px;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            font-weight: 500;
            border: 1px solid transparent;
        }

        .footer-link:hover {
            color: var(--samba-dark);
            background: var(--gradient-primary);
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }

        /* Admin Link */
        .admin-link {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: var(--gradient-primary);
            color: var(--samba-dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 1.5rem;
            box-shadow: var(--shadow-lg);
            transition: var(--transition);
            z-index: 1000;
        }

        .admin-link:hover {
            transform: translateY(-5px) scale(1.1);
            color: var(--samba-dark);
        }

        /* Loading States */
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }

            .hero-subtitle {
                font-size: 1.1rem;
            }

            .section-padding {
                padding: 4rem 0;
            }

            .navbar-brand {
                font-size: 1.8rem;
            }

            .navbar-brand .logo-icon {
                width: 35px;
                height: 35px;
            }

            .cookie-banner .container {
                flex-direction: column;
                text-align: center;
            }

            .cookie-banner .cookie-actions {
                justify-content: center;
            }
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--samba-dark);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--gradient-primary);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--samba-primary);
        }
    </style>
</head>
<body>
<!-- DSGVO Cookie Banner -->
<div class="cookie-banner" id="cookieBanner">
    <div class="container">
        <div class="cookie-text">
            <h6 class="text-warning mb-2">Wir verwenden Cookies</h6>
            <p class="mb-0">Diese Website verwendet Cookies, um Ihnen die bestmögliche Erfahrung zu bieten. Weitere Informationen finden Sie in unserer <a href="datenschutz.html" class="text-warning">Datenschutzerklärung</a>.</p>
        </div>
        <div class="cookie-actions">
            <button class="btn btn-outline-light btn-sm" onclick="cookieConsent.reject()">Ablehnen</button>
            <button class="btn btn-samba-primary btn-sm" onclick="cookieConsent.accept()">Akzeptieren</button>
        </div>
    </div>
</div>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom" id="mainNav">
    <div class="container">
        <a class="navbar-brand" href="#home">
            <div class="logo-icon">
                <i class="fas fa-drum"></i>
            </div>
            SambAlegria
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">Über uns</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#events">Termine</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#gallery">Galerie</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Kontakt</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="legalDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-gavel me-1"></i>Rechtliches
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="legalDropdown">
                        <li><a class="dropdown-item" href="impressum.html">
                                <i class="fas fa-info-circle me-2"></i>Impressum
                            </a></li>
                        <li><a class="dropdown-item" href="datenschutz.html">
                                <i class="fas fa-shield-alt me-2"></i>Datenschutz
                            </a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Hero Section -->
<section id="home" class="hero-section">
    <div class="floating-instruments">
        <div class="instrument" style="left: 10%; animation-delay: 0s;">🥁</div>
        <div class="instrument" style="left: 20%; animation-delay: 2s;">🪘</div>
        <div class="instrument" style="left: 30%; animation-delay: 4s;">🎺</div>
        <div class="instrument" style="left: 40%; animation-delay: 6s;">🎵</div>
        <div class="instrument" style="left: 50%; animation-delay: 8s;">🎶</div>
        <div class="instrument" style="left: 60%; animation-delay: 10s;">🥁</div>
        <div class="instrument" style="left: 70%; animation-delay: 12s;">🪘</div>
        <div class="instrument" style="left: 80%; animation-delay: 14s;">🎺</div>
        <div class="instrument" style="left: 90%; animation-delay: 16s;">🎵</div>
    </div>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10 text-center">
                <h1 class="hero-title" data-aos="fade-up" data-aos-duration="1000">
                    SambAlegria Bremervörde
                </h1>
                <p class="hero-subtitle" data-aos="fade-up" data-aos-delay="200">
                    Erleben Sie den mitreißenden Rhythmus brasilianischer Samba-Musik mit unserer leidenschaftlichen Trommelgruppe aus Bremervörde, Gnarrenburg und Umgebung!
                </p>
                <div data-aos="zoom-in" data-aos-delay="400">
                    <a href="#contact" class="btn btn-samba-primary btn-lg me-3">
                        <i class="fas fa-envelope me-2"></i>Kontaktieren
                    </a>
                    <a href="#about" class="btn btn-outline-samba btn-lg">
                        <i class="fas fa-info-circle me-2"></i>Über uns
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- About Section -->
<section id="about" class="section-padding">
    <div class="container">
        <h2 class="section-title" data-aos="fade-up">Über uns</h2>

        <div class="row g-5 align-items-center">
            <div class="col-lg-6" data-aos="fade-right">
                <div class="pe-lg-4">
                    <h3 class="mb-4 text-gradient">Unsere Geschichte</h3>
                    <p class="fs-5 mb-4">
                        Wir sind SambAlegria Bremervörde, eine lebendige Sambatrommelgruppe aus Bremervörde, Gnarrenburg und Umgebung. Seit 2008 bringen wir brasilianische Rhythmen und pure Lebensfreude zu verschiedensten Anlässen.
                    </p>
                    <p class="mb-4">
                        Unter der Leitung von Christian Auer haben wir uns von einer kleinen Gruppe von 6-7 Trommlerinnen und Trommlern zu einer großen Familie von 17 begeisterten Musikern entwickelt.
                    </p>
                    <p class="mb-4">
                        Von Geburtstagen über Hochzeiten bis hin zu Stadtfesten und Firmenfeiern - wir sorgen für unvergessliche Stimmung und mitreißende Rhythmen!
                    </p>
                    <a href="#events" class="btn btn-samba-secondary">
                        <i class="fas fa-calendar me-2"></i>Termine ansehen
                    </a>
                </div>
            </div>

            <div class="col-lg-6" data-aos="fade-left">
                <div class="row g-4">
                    <div class="col-6">
                        <div class="stat-card" data-aos="zoom-in" data-aos-delay="100">
                            <span class="stat-number counter" data-count="17">0</span>
                            <span class="stat-label">Musikerinnen & Musiker</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-card" data-aos="zoom-in" data-aos-delay="200">
                            <span class="stat-number counter" data-count="17">0</span>
                            <span class="stat-label">Jahre Erfahrung</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-card" data-aos="zoom-in" data-aos-delay="300">
                            <span class="stat-number counter" data-count="100">0</span>
                            <span class="stat-label">Auftritte</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-card" data-aos="zoom-in" data-aos-delay="400">
                            <span class="stat-number counter" data-count="10">0</span>
                            <span class="stat-label">Instrumente</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Events Section -->
<section id="events" class="section-padding bg-dark">
    <div class="container">
        <h2 class="section-title" data-aos="fade-up">Kommende Termine</h2>

        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div id="events-container">
                    <!-- Events werden dynamisch geladen -->
                    <div class="text-center py-5">
                        <div class="loading-spinner"></div>
                        <p class="mt-3">Lade Events...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Gallery Section -->
<section id="gallery" class="section-padding">
    <div class="container">
        <h2 class="section-title" data-aos="fade-up">Galerie</h2>
        <div id="gallery-grid" class="row g-3" data-aos="fade-up" data-aos-delay="100">
            <!-- Galerie wird dynamisch geladen -->
            <div class="col-12 text-center">
                <div class="loading-spinner"></div>
                <p class="mt-3">Lade Galerie...</p>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="section-padding bg-dark">
    <div class="container">
        <h2 class="section-title" data-aos="fade-up">Kontakt</h2>

        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card card-samba p-4" data-aos="fade-up" data-aos-delay="200">
                    <!-- Status Messages -->
                    <div id="form-messages"></div>

                    <form method="POST" action="contact.php" id="contactForm">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="Ihr Name" required>
                                    <label for="name">Name *</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="email" class="form-control" id="email" name="email" placeholder="Ihre E-Mail" required>
                                    <label for="email">E-Mail *</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="subject" name="subject" placeholder="Betreff" required>
                                    <label for="subject">Betreff *</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <textarea class="form-control" id="text" name="text" placeholder="Ihre Nachricht" style="height: 120px" required></textarea>
                                    <label for="text">Ihre Nachricht *</label>
                                </div>
                            </div>
                            <div class="col-12 text-center">
                                <button type="submit" class="btn btn-samba-primary btn-lg">
                                    <i class="fas fa-paper-plane me-2"></i>
                                    Anfrage senden
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Contact Info - Updated without Phone -->
        <div class="row mt-5">
            <div class="col-lg-6 text-center mb-4" data-aos="fade-up" data-aos-delay="100">
                <div class="card card-samba h-100 p-4">
                    <div class="mb-3">
                        <i class="fas fa-envelope fa-2x" style="color: var(--samba-primary);"></i>
                    </div>
                    <h5 class="mb-3" style="color: var(--samba-primary);">E-Mail</h5>
                    <p class="mb-0" style="color: var(--samba-light); font-weight: 500;">kontakt@sambalegria-bremervoerde.de</p>
                </div>
            </div>
            <div class="col-lg-6 text-center mb-4" data-aos="fade-up" data-aos-delay="200">
                <div class="card card-samba h-100 p-4">
                    <div class="mb-3">
                        <i class="fas fa-map-marker-alt fa-2x" style="color: var(--samba-success);"></i>
                    </div>
                    <h5 class="mb-3" style="color: var(--samba-success);">Region</h5>
                    <p class="mb-0" style="color: var(--samba-light); font-weight: 500;">Bremervörde, Gnarrenburg & Umgebung</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="d-flex align-items-center mb-3 mb-lg-0">
                    <div class="navbar-brand me-4">
                        <div class="logo-icon">
                            <i class="fas fa-drum"></i>
                        </div>
                        SambAlegria
                    </div>
                    <p class="mb-0">&copy; 2025 SambAlegria Bremervörde. Alle Rechte vorbehalten.</p>
                </div>
            </div>
            <div class="col-lg-6 text-lg-end">
                <div class="social-links">
                    <a href="#" aria-label="Facebook">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" aria-label="Instagram">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="#" aria-label="YouTube">
                        <i class="fab fa-youtube"></i>
                    </a>
                    <a href="#" aria-label="TikTok">
                        <i class="fab fa-tiktok"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="container text-center py-3">
        <p class="text-muted mb-0">
            <small>Rechtliche Hinweise finden Sie in der Navigation unter "Rechtliches"</small>
        </p>
    </div>
</footer>

<?php
// Admin Link nur für eingeloggte Administratoren anzeigen
session_start();
if (isset($_SESSION['admin_logged_in']) && $_SESSION['admin_logged_in'] === true): ?>
    <!-- Admin Link -->
    <a href="admin/" class="admin-link" title="Admin Panel">
        <i class="fas fa-cog"></i>
    </a>
<?php endif; ?>

<!-- Map Modal -->
<div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mapModalLabel">Standort</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <div style="height: 400px; border-radius: 0 0 15px 15px; overflow: hidden;">
                    <iframe id="mapFrame" src="" style="width: 100%; height: 100%; border: none;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- AOS JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

<script>
    // Cookie Consent System
    const cookieConsent = {
        accept() {
            localStorage.setItem('cookieConsent', 'accepted');
            this.hideBanner();
            this.loadOptionalScripts();
        },

        reject() {
            localStorage.setItem('cookieConsent', 'rejected');
            this.hideBanner();
        },

        hideBanner() {
            document.getElementById('cookieBanner').classList.remove('show');
        },

        showBanner() {
            document.getElementById('cookieBanner').classList.add('show');
        },

        loadOptionalScripts() {
            // Hier können Analytics, Maps etc. geladen werden
            console.log('Optional scripts loaded');
        },

        init() {
            const consent = localStorage.getItem('cookieConsent');
            if (!consent) {
                setTimeout(() => this.showBanner(), 1000);
            } else if (consent === 'accepted') {
                this.loadOptionalScripts();
            }
        }
    };

    // Erweiterte Galerie-Funktionalität
    class SambaGallery {
        constructor() {
            this.currentImageIndex = 0;
            this.images = [];
            this.init();
        }

        init() {
            this.createLightbox();
            this.bindEvents();
            this.updateGalleryGrid();
        }

        createLightbox() {
            const lightbox = document.createElement('div');
            lightbox.id = 'gallery-lightbox';
            lightbox.innerHTML = `
                <div class="lightbox-overlay">
                    <div class="lightbox-container">
                        <button class="lightbox-close">&times;</button>
                        <button class="lightbox-prev"><i class="fas fa-chevron-left"></i></button>
                        <button class="lightbox-next"><i class="fas fa-chevron-right"></i></button>
                        <img class="lightbox-image" src="" alt="">
                        <div class="lightbox-info">
                            <h4 class="lightbox-title"></h4>
                            <p class="lightbox-description"></p>
                            <span class="lightbox-counter"></span>
                        </div>
                    </div>
                </div>
            `;
            document.body.appendChild(lightbox);
        }

        updateGalleryGrid() {
            // Aktualisierte Galerie mit besseren Thumbnails
            const galleryContainer = document.getElementById('gallery-grid');
            if (!galleryContainer) return;

            // Lade Galerie-Daten und erstelle verbesserte Grid
            this.loadGalleryData();
        }

        async loadGalleryData() {
            try {
                const response = await fetch('get_content.php?type=gallery&limit=12');
                const data = await response.json();

                if (data.success && data.data.length > 0) {
                    this.images = data.data;
                    this.renderGallery(data.data);
                } else {
                    this.renderEmptyGallery();
                }
            } catch (error) {
                console.error('Error loading gallery:', error);
                this.renderErrorGallery();
            }
        }

        renderGallery(items) {
            const container = document.getElementById('gallery-grid');
            const galleryHTML = items.map((item, index) => `
                <div class="col-6 col-md-4 col-lg-3 mb-4" data-aos="fade-up" data-aos-delay="${index * 100}">
                    <div class="gallery-item enhanced" data-index="${index}">
                        <div class="gallery-image-container">
                            <img src="${item.image_url}" alt="${item.title}" loading="lazy" class="gallery-thumbnail">
                            <div class="gallery-overlay">
                                <button class="gallery-view-btn" onclick="gallery.openLightbox(${index})">
                                    <i class="fas fa-search-plus"></i>
                                </button>
                                ${item.file_type === 'video' ? '<span class="gallery-video-badge"><i class="fas fa-play"></i></span>' : ''}
                            </div>
                        </div>
                        <div class="gallery-info">
                            <h6 class="gallery-title">${item.title}</h6>
                            ${item.category ? `<small class="gallery-category">${item.category}</small>` : ''}
                        </div>
                    </div>
                </div>
            `).join('');

            container.innerHTML = galleryHTML;
        }

        renderEmptyGallery() {
            const container = document.getElementById('gallery-grid');
            container.innerHTML = `
                <div class="col-12 text-center py-5">
                    <i class="fas fa-images fa-4x text-muted mb-3"></i>
                    <h4 class="text-muted">Keine Bilder verfügbar</h4>
                    <p class="text-muted">Die Galerie wird bald mit Inhalten gefüllt.</p>
                </div>
            `;
        }

        renderErrorGallery() {
            const container = document.getElementById('gallery-grid');
            container.innerHTML = `
                <div class="col-12 text-center py-5">
                    <i class="fas fa-exclamation-triangle fa-4x text-danger mb-3"></i>
                    <h4 class="text-danger">Fehler beim Laden der Galerie</h4>
                    <button class="btn btn-samba-primary" onclick="gallery.loadGalleryData()">Erneut versuchen</button>
                </div>
            `;
        }

        openLightbox(index) {
            this.currentImageIndex = index;
            const lightbox = document.getElementById('gallery-lightbox');
            const image = this.images[index];

            // Lightbox Inhalt aktualisieren
            lightbox.querySelector('.lightbox-image').src = image.image_url;
            lightbox.querySelector('.lightbox-title').textContent = image.title;
            lightbox.querySelector('.lightbox-description').textContent = image.description || '';
            lightbox.querySelector('.lightbox-counter').textContent = `${index + 1} von ${this.images.length}`;

            // Lightbox anzeigen
            lightbox.classList.add('active');
            document.body.classList.add('lightbox-open');
        }

        closeLightbox() {
            const lightbox = document.getElementById('gallery-lightbox');
            lightbox.classList.remove('active');
            document.body.classList.remove('lightbox-open');
        }

        nextImage() {
            this.currentImageIndex = (this.currentImageIndex + 1) % this.images.length;
            this.openLightbox(this.currentImageIndex);
        }

        prevImage() {
            this.currentImageIndex = (this.currentImageIndex - 1 + this.images.length) % this.images.length;
            this.openLightbox(this.currentImageIndex);
        }

        bindEvents() {
            // Event Listeners für Lightbox
            document.addEventListener('click', (e) => {
                if (e.target.closest('.lightbox-close') || e.target.classList.contains('lightbox-overlay')) {
                    this.closeLightbox();
                }
                if (e.target.closest('.lightbox-next')) {
                    this.nextImage();
                }
                if (e.target.closest('.lightbox-prev')) {
                    this.prevImage();
                }
            });

            // Keyboard Navigation
            document.addEventListener('keydown', (e) => {
                const lightbox = document.getElementById('gallery-lightbox');
                if (lightbox && lightbox.classList.contains('active')) {
                    switch(e.key) {
                        case 'Escape':
                            this.closeLightbox();
                            break;
                        case 'ArrowRight':
                            this.nextImage();
                            break;
                        case 'ArrowLeft':
                            this.prevImage();
                            break;
                    }
                }
            });
        }
    }

    // Initialize AOS
    AOS.init({
        duration: 1000,
        once: true,
        offset: 100,
        easing: 'ease-out-cubic'
    });

    // Navbar scroll effect
    window.addEventListener('scroll', function() {
        const navbar = document.getElementById('mainNav');
        if (window.scrollY > 100) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });

    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                const headerHeight = document.querySelector('.navbar').offsetHeight;
                const targetPosition = target.offsetTop - headerHeight - 20;

                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });

    // Counter animation
    function initCounters() {
        const counters = document.querySelectorAll('.counter');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const counter = entry.target;
                    const target = parseInt(counter.dataset.count);
                    const duration = 2000;
                    const step = target / (duration / 16);
                    let current = 0;

                    const timer = setInterval(() => {
                        current += step;
                        const value = Math.floor(current);
                        counter.textContent = value;

                        if (current >= target) {
                            counter.textContent = target + '+';
                            clearInterval(timer);
                        }
                    }, 16);

                    observer.unobserve(counter);
                }
            });
        }, { threshold: 0.5 });

        counters.forEach(counter => observer.observe(counter));
    }

    // Floating instruments
    function addFloatingInstrument() {
        const instruments = ['🥁', '🪘', '🎺', '🎵', '🎶', '🎪', '🎭', '🎨', '🎹', '🎷', '🎸'];
        const container = document.querySelector('.floating-instruments');

        if (container) {
            const instrument = document.createElement('div');
            instrument.className = 'instrument';
            instrument.textContent = instruments[Math.floor(Math.random() * instruments.length)];
            instrument.style.left = Math.random() * 100 + '%';
            instrument.style.animationDuration = (Math.random() * 8 + 10) + 's';
            instrument.style.animationDelay = Math.random() * 3 + 's';

            container.appendChild(instrument);

            setTimeout(() => {
                if (instrument.parentNode) {
                    instrument.parentNode.removeChild(instrument);
                }
            }, 18000);
        }
    }

    // Load Events dynamically
    async function loadEvents() {
        try {
            const response = await fetch('get_content.php?type=events&limit=3');
            const data = await response.json();

            const container = document.getElementById('events-container');

            if (data.success && data.data.length > 0) {
                const eventsHTML = data.data.map(event => {
                    const eventDate = new Date(event.event_date);
                    const formattedDate = eventDate.toLocaleDateString('de-DE', {
                        weekday: 'long',
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric'
                    });
                    const formattedTime = eventDate.toLocaleTimeString('de-DE', {
                        hour: '2-digit',
                        minute: '2-digit'
                    });

                    return `
                        <div class="event-card" data-aos="slide-right" data-aos-delay="100">
                            <div class="d-flex justify-content-between align-items-start flex-wrap mb-3">
                                <div class="flex-grow-1">
                                    <div class="event-date">
                                        <i class="fas fa-calendar me-2"></i>${formattedDate} - ${formattedTime} Uhr
                                    </div>
                                    <h3 class="event-title">${event.title}</h3>
                                    ${event.description ? `<p class="mb-3">${event.description}</p>` : ''}
                                    ${event.location ? `
                                        <div class="event-location">
                                            <i class="fas fa-map-marker-alt me-2"></i>
                                            ${event.location}
                                        </div>
                                    ` : ''}
                                </div>
                                <div class="d-flex gap-2 mt-3">
                                    ${event.location ? `
                                        <button class="btn btn-outline-samba btn-sm" onclick="showMap('${event.location}', '${event.title}')">
                                            <i class="fas fa-map me-1"></i>Karte
                                        </button>
                                    ` : ''}
                                    <button class="btn btn-samba-secondary btn-sm" onclick="downloadCalendar(${event.id})">
                                        <i class="fas fa-calendar-plus me-1"></i>Termin
                                    </button>
                                </div>
                            </div>
                        </div>
                    `;
                }).join('');

                container.innerHTML = eventsHTML;
            } else {
                container.innerHTML = `
                    <div class="text-center py-5">
                        <i class="fas fa-calendar-times fa-4x text-muted mb-3"></i>
                        <h4 class="text-muted">Keine kommenden Events</h4>
                        <p class="text-muted">Derzeit sind keine Events geplant. Schauen Sie bald wieder vorbei!</p>
                    </div>
                `;
            }
        } catch (error) {
            console.error('Error loading events:', error);
            document.getElementById('events-container').innerHTML = `
                <div class="text-center py-5">
                    <i class="fas fa-exclamation-triangle fa-4x text-danger mb-3"></i>
                    <h4 class="text-danger">Fehler beim Laden der Events</h4>
                    <button class="btn btn-samba-primary" onclick="loadEvents()">Erneut versuchen</button>
                </div>
            `;
        }
    }

    // Map functionality
    function showMap(address, eventTitle) {
        const modal = new bootstrap.Modal(document.getElementById('mapModal'));
        const mapFrame = document.getElementById('mapFrame');
        const modalTitle = document.getElementById('mapModalLabel');

        const encodedAddress = encodeURIComponent(address);
        const mapUrl = `https://maps.google.com/maps?q=${encodedAddress}&t=&z=15&ie=UTF8&iwloc=&output=embed`;

        mapFrame.src = mapUrl;
        modalTitle.textContent = eventTitle + ' - Standort';
        modal.show();
    }

    // Calendar download
    function downloadCalendar(eventId) {
        window.location.href = `calendar-download.php?id=${eventId}`;
        showToast('Kalender-Datei wird heruntergeladen...', 'success');
    }

    // Lightbox functionality
    function openLightbox(src, title) {
        // Simple lightbox implementation
        const lightbox = document.createElement('div');
        lightbox.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            cursor: pointer;
        `;

        lightbox.innerHTML = `
            <img src="${src}" alt="${title}" style="max-width: 90%; max-height: 90%; border-radius: 10px;">
            <button style="position: absolute; top: 20px; right: 20px; background: none; border: none; color: white; font-size: 2rem; cursor: pointer;">&times;</button>
        `;

        lightbox.onclick = () => document.body.removeChild(lightbox);
        document.body.appendChild(lightbox);
    }

    // Toast notification
    function showToast(message, type = 'success') {
        const toastContainer = document.getElementById('toast-container') || createToastContainer();

        const toast = document.createElement('div');
        toast.className = `alert alert-${type} alert-dismissible fade show`;
        toast.innerHTML = `
            ${message}
            <button type="button" class="btn-close" onclick="this.parentElement.remove()"></button>
        `;

        toastContainer.appendChild(toast);
        setTimeout(() => toast.remove(), 4000);
    }

    function createToastContainer() {
        const container = document.createElement('div');
        container.id = 'toast-container';
        container.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 9999;';
        document.body.appendChild(container);
        return container;
    }

    // Contact form handling
    document.getElementById('contactForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const submitBtn = this.querySelector('button[type="submit"]');
        const originalHTML = submitBtn.innerHTML;
        const messagesDiv = document.getElementById('form-messages');

        submitBtn.innerHTML = '<span class="loading-spinner"></span> Wird gesendet...';
        submitBtn.disabled = true;

        try {
            const formData = new FormData(this);
            const response = await fetch('contact.php', {
                method: 'POST',
                body: formData
            });

            const result = await response.text();

            if (response.ok) {
                messagesDiv.innerHTML = `
                    <div class="alert alert-success" role="alert">
                        <i class="fas fa-check-circle me-2"></i>
                        Vielen Dank! Ihre Nachricht wurde erfolgreich gesendet.
                    </div>
                `;
                this.reset();
            } else {
                throw new Error('Server error');
            }
        } catch (error) {
            messagesDiv.innerHTML = `
                <div class="alert alert-danger" role="alert">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Fehler beim Senden der Nachricht. Bitte versuchen Sie es erneut.
                </div>
            `;
        } finally {
            submitBtn.innerHTML = originalHTML;
            submitBtn.disabled = false;
        }
    });

    // Initialize everything when DOM is loaded
    document.addEventListener('DOMContentLoaded', function() {
        cookieConsent.init();
        initCounters();
        loadEvents();

        // Initialisierung der erweiterten Galerie
        window.gallery = new SambaGallery();

        // Start floating instruments
        setInterval(addFloatingInstrument, 4000);
        for (let i = 0; i < 5; i++) {
            setTimeout(addFloatingInstrument, i * 1000);
        }
    });

    // Clean up map when modal is hidden
    document.getElementById('mapModal').addEventListener('hidden.bs.modal', function () {
        document.getElementById('mapFrame').src = '';
    });
</script>

</body>
</html>