/* ==========================================================================
   GLOSSARSUCHE
   ==========================================================================
   Die Vorschlagsliste liegt über dem Fließtext. Sie darf den Hero nicht
   auseinanderschieben – deshalb position:absolute mit einem
   positionierten Vorfahren, nicht ein Kasten im Textfluss.
   ========================================================================== */

.gs-wrap {
    position: relative;
    max-width: 640px;
    margin: 2rem auto 0;
    text-align: left;
}

.gs-feld {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--white);
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 0.5rem 0.75rem 0.5rem 1.25rem;
    box-shadow: 0 12px 40px rgba(2, 6, 23, 0.28);
    transition: border-color 0.15s ease;
}

/* :focus-within statt :focus am Feld – der Rahmen gehört um die ganze
   Zeile, nicht nur um das Eingabefeld darin. */
.gs-wrap:focus-within .gs-feld {
    border-color: var(--primary);
}

.gs-icon {
    font-size: 1.15rem;
    line-height: 1;
    flex: 0 0 auto;
}

.gs-feld input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    font-size: 1.02rem;
    color: var(--text-dark);
    padding: 0.55rem 0;
}

.gs-feld input::placeholder { color: var(--medium-gray); }

/* Die Suche braucht keinen Knopf – sie sucht beim Tippen. Der Verweis
   führt dorthin, wo die vollständige Liste steht. */
.gs-alle {
    flex: 0 0 auto;
    display: inline-block;
    background: var(--primary-dark);
    color: var(--white);
    border-radius: 999px;
    padding: 0.6rem 1.15rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.gs-alle:hover, .gs-alle:focus { background: var(--navy); color: var(--white); }

/* --- Vorschlagsliste --------------------------------------------------- */

.gs-treffer {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    top: calc(100% + 0.6rem);
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.32);
    overflow: hidden;
    max-height: 26rem;
    overflow-y: auto;
}

.gs-treffer[hidden] { display: none; }

.gs-liste { list-style: none; margin: 0; padding: 0.4rem; }

.gs-liste a {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-dark);
}

.gs-liste a:hover,
.gs-liste [aria-selected="true"] a {
    background: var(--light);
}

.gs-t { font-weight: 700; font-size: 1rem; }

.gs-k {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary-text);
    white-space: nowrap;
}

.gs-alias {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: var(--accent-text);
    font-weight: 600;
}

.gs-b {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-medium);
}

.gs-leer {
    margin: 0;
    padding: 1.1rem 1.25rem;
    font-size: 0.92rem;
    color: var(--text-medium);
}

.gs-leer a { color: var(--primary-text); font-weight: 700; }

@media (max-width: 560px) {
    .gs-feld { flex-wrap: wrap; border-radius: 20px; padding: 0.75rem; }
    .gs-feld input { flex-basis: 100%; order: 2; padding: 0.5rem 0.25rem; }
    .gs-alle { order: 3; margin-left: auto; }
    .gs-icon { order: 1; }
    .gs-t { font-size: 0.95rem; }
}