/* ==========================================================================
   DESIGN FÜR FRONTEND 0037 - MARITIMES SUCHE-THEMA (ORDNER: css/)
   ========================================================================== */

body { 
    font-family: Arial, sans-serif; 
    margin: 0; 
    padding: 30px 15px; 
    /* Blau-Verlauf von unten (dunkles Marineblau) nach oben (helles Himmelblau) */
    background: linear-gradient(0deg, #003366 0%, #005599 40%, #e6f2ff 100%); 
    color: #333333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* Der zentrale Suchcontainer - hochflexibel für mobile Bildschirme */
.suche-container { 
    width: 100%;
    max-width: 460px;       /* Ideale Breite für Desktop und Tablets */
    min-width: 280px;       /* Passt garantiert auf jedes einfache Smartphone */
    background: #ffffff;    /* Weiße Box für perfekten Kontrast */
    padding: 20px;          /* Platzsparendes Padding für kleine Handys */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); 
    border: 1px solid #d1d8e0;
    box-sizing: border-box;
    position: relative; 
    margin-bottom: 10px;
}

/* Alle Überschriften innerhalb der Box im tiefen maritimen Blau */
.suche-container h2 { 
    text-align: center; 
    color: #004e92;         /* Maritimes Tiefblau */
    margin-top: 0; 
    margin-bottom: 20px; 
    font-size: 21px;
}

/* Das Eingabefeld - Jetzt im augenschonenden Leichtgrau */
input[type="text"] { 
    width: 100%; 
    padding: 12px; 
    font-size: 15px; 
    border: 2px solid #004e92; 
    border-radius: 4px; 
    box-sizing: border-box; 
    background: #f4f6f9;    /* Leichtes Grau statt hartem Weiß */
    color: #333333;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

input[type="text"]:focus {
    border-color: #007BFF;
    background: #ffffff;    /* Wird beim Reinklicken weiß */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
}

input[type="text"]::placeholder { 
    color: #999999; 
}

/* Die dynamische Vorschlagsliste */
.vorschlaege-liste { 
    position: absolute; 
    width: calc(100% - 40px); /* Exakt angepasst an das Box-Padding (20px links/rechts) */
    background: #ffffff; 
    border: 2px solid #007BFF; 
    border-top: none; 
    border-radius: 0 0 4px 4px; 
    max-height: 250px; 
    overflow-y: auto; 
    display: none; 
    z-index: 10; 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

/* Die einzelnen Treffer-Zeilen in der Dropdown-Vorschlagsliste */
.vorschlaege-liste li { 
    padding: 12px; 
    cursor: pointer; 
    border-bottom: 1px solid #eef2f7; 
    color: #333333; 
    font-size: 13px;
    line-height: 1.4;
}

.vorschlaege-liste li:hover { 
    background-color: #e6f2ff; /* Sanftes Hellblau beim Überfahren */
    color: #004e92; 
}

.vorschlaege-liste li:last-child { 
    border-bottom: none; 
}

/* Blaue Akzent-Texte für Kategorien und Termine im Vorschlag */
.info-text { 
    font-size: 11px; 
    color: #007BFF; 
    font-weight: bold;
}

/* Oberer Aktions-Button (Einreichen) */
.btn-navigation {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px;
    margin-bottom: 25px;
    background: #004e92;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    box-sizing: border-box;
    transition: background 0.2s;
}

.btn-navigation:hover { 
    background: #007BFF; 
}

/* Link-Style für den oberen Zurück-Button */
.btn-back-link {
    color: #00d2ff; /* Helles Cyan für beste Lesbarkeit auf dem Verlauf ganz oben */
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    transition: color 0.2s;
}
.btn-back-link:hover { 
    color: #ffffff; 
    text-decoration: underline; 
}