/* ===============================
   Zentrierte Searchbar mit lila Akzent
   =============================== */
.searchBox {
    display: flex;
    max-width: 400px;       /* breiter für größere Inputs */
    width: 90%;             /* responsive Breite */
    margin: 2rem auto;      /* zentriert horizontal */
    align-items: center;
    justify-content: center; /* Input + Button mittig */
    gap: 8px;
    background: #2f3640;
    border-radius: 50px;
    position: relative;
    padding: 4px;           /* minimaler Innenabstand */
}

/* Inputfeld */
.searchInput {
    border: none;
    background: none;
    outline: none;
    color: white;
    font-size: 18px;       /* größere Schrift */
    padding: 20px 60px 20px 26px; /* rechts Platz für Button */
    border-radius: 50px;
    width: 100%;
}

/* Button */
.searchButton {
    color: white;
    position: absolute;
    right: 6px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(90deg, #a000ff 0%, #ff33ff 100%); /* lila Akzent */
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(.23, 1, 0.32, 1);
}

/* Hover-Effekt */
.searchButton:hover {
    box-shadow: 0 0 15px rgba(160, 0, 255, 0.7); /* lila Glow */
    transform: translateY(-3px);
}

/* Klick-Effekt */
.searchButton:active {
    box-shadow: none;
    transform: translateY(0);
}

/* SVG im Button anpassen */
.searchButton svg {
    width: 28px;
    height: 28px;
    fill: white;
}

/* ===============================
   Stylische Überschrift: Karaoke-Songliste
   =============================== */
.karaoke-title {
    font-family: 'Poppins', 'Arial', sans-serif;
    font-size: 3.5rem;                /* noch größer für bessere Lesbarkeit */
    font-weight: 900;                  /* fett für mehr Wirkung */
    text-align: center;
    background: linear-gradient(135deg, #a000ff, #ff33ff); /* lila Farbverlauf */
    -webkit-background-clip: text;    /* Farbverlauf auf Text */
    -webkit-text-fill-color: transparent;
    position: relative;
    margin: 2rem 0 3rem 0;
    text-transform: uppercase;
    letter-spacing: 2px;

    /* leichter 3D Schatten */
    text-shadow:
            2px 2px 4px rgba(0,0,0,0.5),
            0 0 10px rgba(160,0,255,0.7);

    transform: rotateZ(-1deg);        /* dauerhaft leicht schief */

    /* Glow-Animation */
    animation: glow 2s infinite alternate;
}

/* Keyframes für den animierten Glow */
@keyframes glow {
    0% {
        text-shadow:
                2px 2px 4px rgba(0,0,0,0.5),
                0 0 10px rgba(160,0,255,0.7),
                0 0 5px rgba(255,0,255,0.5);
    }
    50% {
        text-shadow:
                2px 2px 4px rgba(0,0,0,0.5),
                0 0 15px rgba(160,0,255,1),
                0 0 10px rgba(255,0,255,0.7);
    }
    100% {
        text-shadow:
                2px 2px 4px rgba(0,0,0,0.5),
                0 0 10px rgba(160,0,255,0.7),
                0 0 5px rgba(255,0,255,0.5);
    }
}

/* Optional: Hover-Effekt für zusätzliches Pop-Out */
.karaoke-title:hover {
    text-shadow:
            3px 3px 6px rgba(0,0,0,0.6),
            0 0 20px rgba(160,0,255,1),
            0 0 15px rgba(255,0,255,0.8);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    background:
            linear-gradient(rgba(30,30,30,0.7), rgba(30,30,30,0.7)), /* leicht transparentes Grau */
            url('/ressources/images/KaraokeSVG.png') no-repeat center center fixed; /* Platzhalterbild */
    background-size: cover;
    color: white;
}