#search-container
{

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

}



#inputfield-search
{

    width: 88%;
    
    background-color: var(--webpage-text-color-green);
    color: var(--webpage-text-color-page-button);
    
    border-radius: clamp(4px, var(--radius-dynamic), 12px);
    padding: 8px clamp(10px, 2vw, 20px);
    
    text-decoration: none;

    font-weight: var(--weight-black);
    font-size: var(--size-text-2);

    

}



#inputfield-search::placeholder 
{
    color: var(--webpage-text-color-regular-dark);
}



/* Färbt das originale X ein (z. B. ins Rötliche) */
input[type="search"]::-webkit-search-cancel-button 
{

    /*filter: hue-rotate(70deg) saturate(0) brightness(0.66);*/
    filter: hue-rotate(290deg) saturate(1.5) brightness(1.0);
    cursor: pointer;

}



#contant-container
{

    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;
    flex-direction: row;

    width: 98%;
    min-height: 50%;
    height: auto;

}



#no-result
{

    display: none; 
    font-weight: var(--weight-bold); 
    font-size: var(--size-text-1); 
    width: 100%; 
    height: 9vw;

}



/* Suchleisten-Container */
.search-container 
{

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

}



/* Das Eingabefeld (Einfluss von Disney+ & Loki) */
.search-input 
{

    width: 88%;
    padding: 14px 20px 14px 50px;
    font-size: 16px;

    color: #e2e8f0;

    background: rgba(255, 255, 255, 0.06); /* Minimal transparent */
    border: 1px solid rgba(0, 255, 136, 0.15); /* Dezentes Loki-Grün im Ruhezustand */

    border-radius: 50px; /* Stark abgerundete Ecken */
    backdrop-filter: blur(12px); /* Milchglas-Effekt */
    -webkit-backdrop-filter: blur(12px);
    outline: none;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    letter-spacing: 0.5px;





    color: var(--webpage-text-color-page-button);
    
    border-radius: clamp(4px, var(--radius-dynamic), 12px);
    padding: 8px clamp(10px, 2vw, 20px);
    
    text-decoration: none;

    font-weight: var(--weight-black);
    font-size: var(--size-text-2);
    
}



/* Platzhalter-Text Styling */
.search-input::placeholder 
{

    color: rgba(226, 232, 240, 0.4);
    transition: color 0.3s ease;

}



/* Hover-Effekt: Suchleiste wird präsenter */
.search-input:hover 
{

    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(0, 255, 136, 0.35);
    
}



/* Fokus-Effekt: Das magische Loki-Leuchten (Asgard/TVA-Vibe) */
.search-input:focus 
{

    background: rgba(13, 24, 33, 0.6);
    border-color: #00ff88; /* Knalliges Loki-Grün */
    box-shadow: 
        0 0 0 1px #00ff88,
        0 0 20px rgba(0, 255, 136, 0.35),
        0 10px 30px rgba(0, 0, 0, 0.5);
    color: #bbbbbb;

}



/* Wenn fokussiert, blendet sich der Platzhalter leicht aus */
.search-input:focus::placeholder 
{
    color: rgba(226, 232, 240, 0.2);
}