/* Basic reset and font application */
body {
    font-family: 'Inter', sans-serif; /* Apply Inter font globally */
    line-height: 1.6;
    color: #333;
    overflow-x: hidden; /* Prevent horizontal scroll */
}


/* Hero braucht position:relative, ok */
.hero {
  position: relative;
  overflow: hidden;
}

/* Background-Layer mit Overlay & Bild */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;  /* ganz wichtig, sonst liegt es über dem Text */
  background:
    /* dunkles Overlay */
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url('assets/hero-banner.png') no-repeat center/cover;
  animation: float 30s ease-in-out infinite;
}

#datenschutz .container {
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
  padding: 0 1rem;
}

/* Custom CSS für das Burger-Menü */
.hamburger-menu {
    display: none; /* Standardmäßig versteckt auf größeren Bildschirmen */
}

@media (max-width: 767px) {
    .hamburger-menu {
        display: block; /* Auf kleinen Bildschirmen anzeigen */
    }
    .nav-links {
        justify-content: center;
        display: none; /* Navigationslinks standardmäßig verstecken */
        flex-direction: column;
        width: 100%;
        background-color: white;
        position: absolute;
        top: 100%; /* Unter dem Header positionieren */
        left: 0;
        padding: 1rem 0;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        border-top: 1px solid #eee;
        /* Entfernt den horizontalen Abstand auf Mobilgeräten */
        gap: 0; /* Setzt den Abstand zwischen Flex-Items auf 0 */
        margin-left: 0 !important; /* Stellt sicher, dass kein margin von space-x-8 übrig bleibt */
        margin-right: 0 !important; /* Stellt sicher, dass kein margin von space-x-8 übrig bleibt */
    }
    .nav-links.active {
        display: flex !important; /* Menü anzeigen, wenn aktiv */
        align-items: center; /* Zentriert die Elemente horizontal */
    }
    .nav-links li {
        width: 100%;
        text-align: center;
        padding: 0.75rem 0;
    }
    .nav-links li a {
        display: block;
        padding: 0.5rem 1rem;
    }
}

/* Desktop-Abstand für Navigationslinks */
@media (min-width: 768px) {
    .nav-links {
        display: flex; /* Stellt sicher, dass es auf Desktop sichtbar ist */
        /* Fügt den Abstand für Desktop-Ansicht hinzu, der vorher durch space-x-8 gegeben war */
        gap: 2rem; /* Entspricht space-x-8 */
    }
}

/* Keyframe animations */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Custom underline for section titles */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(135deg, var(--tw-gradient-stops)); /* Use Tailwind gradients */
    @apply from-accentGold to-lightOrange rounded-md; /* Apply Tailwind classes */
}

/* Custom scrollbar for review section if it overflows */
.reviews-grid {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #FFC107 #2A2A2A; /* For Firefox */
}

.reviews-grid::-webkit-scrollbar {
    height: 8px; /* Height of horizontal scrollbar */
}

.reviews-grid::-webkit-scrollbar-track {
    background: #2A2A2A; /* Color of the track */
    border-radius: 10px;
}

.reviews-grid::-webkit-scrollbar-thumb {
    background-color: #FFC107; /* Color of the scroll thumb */
    border-radius: 10px;
    border: 2px solid #2A2A2A; /* Padding around thumb */
}