/*
 * DIE SUCHLEISTE — EIN BAUSTEIN, DREI ORTE.
 *
 * Buehne der Startseite, Such-Overlay der Navigation und der Filter der
 * Eventliste zeigen dieselbe weisse Leiste: Beschriftung klein und rot ueber
 * dem Feld, Trennstriche dazwischen, Verlaufsknopf rechts. Der Entwurf
 * (suchform.html) nennt sie `.lea-search` und schreibt ausdruecklich
 * "identisch zum Hero-Baustein" — sie hiess hier eine Weile
 * `.lea-hero__search` und lag in hero.css, was spaetestens im Overlay der
 * Navigation nicht mehr stimmte.
 *
 * EIGENE DATEI, EIGENE VARIABLEN. Die Werte standen an `.lea-hero`; ausserhalb
 * der Buehne waren sie damit undefiniert — und eine undefinierte Custom
 * Property ist kein Fehler, sondern nichts. Sie haengen deshalb an der Leiste
 * selbst, und wer sie anders braucht (die Buehne: schwerer Schatten auf dem
 * Bild), ueberschreibt sie in seiner eigenen Datei.
 */
/*
 * EINE ZEILE AUF DEM DESKTOP, GESTAPELT AUF DEM HANDY — und der Umbruch ist
 * eine Media Query, kein flex-wrap: gestapelt braucht die Leiste andere
 * Trennlinien (unten statt rechts) und einen groesseren Radius, und das kann
 * ein umbrechender Flex-Container nicht von selbst.
 *
 * DER SCHATTEN IST DER LEICHTE. Zwei der drei Orte liegen auf heller Flaeche;
 * nur die Buehne steht auf einem Bild und braucht den schweren — sie setzt ihn
 * in hero.css. Umgekehrt waere die Vorgabe ein Fleck unter jeder Leiste, die
 * auf Weiss steht.
 */
.lea-search {
    --lea-search-bg: #ffffff;
    --lea-search-ink: #0a1b3e;
    --lea-search-radius: 16px;
    --lea-search-line: rgba(10, 27, 62, .1);
    --lea-search-border: #e3e8f2;
    --lea-search-label: #b63032;
    --lea-search-placeholder: #8c95a5;
    --lea-search-accent: #e22225;
    --lea-search-accent-2: #ff7a5c;
    --lea-search-hover-from: #0a1b3e;
    --lea-search-hover-to: #13285a;
    --lea-search-shadow: 0 12px 36px rgba(10, 27, 62, .12);

    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    background: var(--lea-search-bg);
    border-radius: var(--lea-search-radius);
    box-shadow: var(--lea-search-shadow);
}

/*
 * Der Trennstrich haengt rechts an jedem Feld und wird dem letzten wieder
 * genommen. `:last-of-type` zaehlt nur die div-Geschwister — der Knopf ist ein
 * `button` und zaehlt nicht mit.
 */
.lea-search__field {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px 18px;
    border-right: 1px solid var(--lea-search-line);
}

/* "Was" traegt die laengsten Eingaben und bekommt deshalb etwas mehr Breite. */
.lea-search__field--what {
    flex: 1.2;
}

/*
 * "Wann" nimmt sich, was es braucht, und teilt nicht mit. Ein Datumsfeld hat
 * eine Mindestbreite: wird es schmaler, schneidet der Browser hinten Segmente
 * ab, und aus "tt.mm.jjjj" wird "tt.mm." — ein Feld, dem man die Jahreszahl
 * nicht mehr ansieht. Text kuerzt sich dagegen lesbar.
 */
.lea-search__field--when {
    flex: 0 0 auto;
}

.lea-search__input[type="date"] {
    width: 108px;
}

.lea-search__field:last-of-type {
    border-right: 0;
}

.lea-search__label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lea-search-label);
}

/*
 * Das Feld ohne eigenen Rahmen: der Rahmen ist die weisse Leiste drumherum.
 * `width: 100%` mit `min-width: 0` am Elternteil, sonst sprengt ein langer
 * Platzhalter die Flex-Spalte statt zu kuerzen.
 */
.lea-search__input {
    width: 100%;
    min-width: 0;
    padding: 0;
    font-size: 15px;
    color: var(--lea-search-ink);
    background: transparent;
    border: 0;
}

/*
 * DER FOKUS LIEGT AM FELD, NICHT AM EINGABEELEMENT. Der Browser zieht seinen
 * schwarzen Ring sonst eng um den Text, quer durch die Leiste. Weglassen ist
 * keine Loesung: wer mit der Tastatur bedient, saehe dann nicht mehr, wo er
 * ist. Also ein eigener Ring in der Farbe des Entwurfs, innen versetzt, damit
 * er nicht ueber die weisse Leiste hinausragt.
 */
.lea-search__input:focus {
    outline: none;
}

.lea-search__field:focus-within {
    outline: 2px solid var(--lea-search-accent);
    outline-offset: -2px;
    border-radius: 10px;
}

.lea-search__input::placeholder {
    color: var(--lea-search-placeholder);
}

/*
 * Das Kalendersymbol von `type="date"` ist ein Browser-Bild und nimmt keine
 * `color` an; eingefaerbt wird es deshalb mit einem Filter.
 */
.lea-search__input[type="date"]::-webkit-calendar-picker-indicator {
    width: 16px;
    height: 16px;
    opacity: .85;
    cursor: pointer;
    filter: invert(24%) sepia(64%) saturate(2540%) hue-rotate(345deg) brightness(85%);
}

/*
 * DER KNOPF BEHAELT SEINE HOEHE, AUCH WENN DIE LEISTE WAECHST.
 *
 * `align-items: stretch` am Container zog ihn ueber die ganze Zeile — solange
 * die Felder nur Beschriftung und Eingabe trugen, war das genau die Hoehe des
 * Entwurfs. Mit "Aktueller Standort" unter dem Ortsfeld wurde die Zeile hoeher,
 * und aus dem Knopf wurde ein Block. `center` nimmt ihn aus der Streckung; die
 * Zuruecksetzen-Schaltflaeche daneben steht aus demselben Grund schon so.
 */
.lea-search__submit {
    flex-shrink: 0;
    align-self: center;
    padding: 16px 34px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, var(--lea-search-accent), var(--lea-search-accent-2));
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: background .25s ease;
}

.lea-search__submit:hover,
.lea-search__submit:focus-visible {
    background: linear-gradient(90deg, var(--lea-search-hover-from), var(--lea-search-hover-to));
}

/* Der Ring liegt auf der weissen Leiste und ist deshalb dunkel, nicht rot. */
.lea-search__submit:focus-visible {
    outline: 2px solid var(--lea-search-ink);
    outline-offset: 3px;
}

/*
 * DER STANDORT-ZUSTAND DES FELDES "WO".
 *
 * Statt der Eingabe steht dann, worum es geht, plus ein Kreuz zurueck. Kein
 * eigener Kasten: es bleibt dasselbe Feld in derselben Reihe, nur mit Text
 * statt Eingabe — sonst spraenge die Leiste beim Umschalten.
 */
/*
 * Das Standortfeld traegt einen Satz, kein Wort. Es nimmt sich deshalb, was es
 * braucht, und teilt nicht — wie das Datumsfeld daneben: mit einem Anteil an
 * der Restbreite bricht der Satz auf vier Zeilen um oder laeuft, wenn man ihn
 * am Umbruch hindert, ueber das Feld daneben hinaus.
 */
.lea-search__field--location {
    flex: 0 0 auto;
}

.lea-search__location {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
    white-space: nowrap;
    font-size: 15px;
    color: var(--lea-search-ink);
}

.lea-search__location-remove {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(10, 27, 62, .08);
    color: var(--lea-search-ink);
    font: inherit;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.lea-search__location-remove:hover,
.lea-search__location-remove:focus-visible {
    background: var(--lea-search-label);
    color: #fff;
}

/* Das Umkreis-Feld ist so schmal wie sein Inhalt — "100 km" braucht keine Spalte. */
.lea-search__field--radius {
    flex: 0 0 auto;
}

.lea-search__field--radius .lea-search__input {
    width: auto;
    min-width: 88px;
}

/*
 * DER STANDORT ALS ZIELKREUZ IM FELD, mit Popover (Entwurf suchform.html).
 *
 * Als Textzeile unter dem Feld hat er die Leiste auseinandergezogen — der
 * Suchknopf wuchs mit, und auf dem Handy wurde aus der Leiste ein Block. Ein
 * Icon rechts in der Eingabe kostet keine Zeile.
 *
 * Das Feld traegt dafuer die Positionierung, die Eingabe rechts Platz fuers
 * Icon — sonst laeuft ein langer Ortsname darunter.
 */
.lea-search__field--where {
    position: relative;
}

.lea-search__field--where .lea-search__input {
    padding-right: 30px;
}

.lea-search__locate {
    position: absolute;
    right: 14px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--lea-search-label);
    /*
     * DIE BUEHNE VERERBT EINE FUELLFARBE, UND DIE SCHLAEGT `color`.
     *
     * Ihr Abschnitt ist dunkel und setzt `-webkit-text-fill-color` auf Weiss.
     * Die Eigenschaft VERERBT sich, und wo sie gesetzt ist, malt sie den Text —
     * `color` bleibt wirkungslos, egal wie schwer der Selektor waere. Das Icon
     * zeichnet mit `currentColor` und waere davon genauso betroffen.
     */
    -webkit-text-fill-color: currentColor;
    cursor: pointer;
    transition: background .2s ease;
}

.lea-search__locate:hover,
.lea-search__locate:focus-visible {
    background: #f2f5fa;
}

.lea-search__locate:disabled {
    opacity: .5;
    cursor: progress;
}

.lea-search__locate svg {
    display: block;
    width: 17px;
    height: 17px;
}

/*
 * Das Popover. Unsichtbar, bis der Zeiger oder die Tastatur auf dem Knopf
 * steht — `+` verlangt, dass es im Markup direkt DAHINTER steht.
 *
 * `is-visible` setzt das Skript, wenn die Standortabfrage scheitert: die
 * Meldung bleibt dann stehen. Eine, die nur beim Darueberfahren erscheint,
 * liest niemand.
 */
.lea-search__tip {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 5;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--lea-search-ink);
    box-shadow: 0 12px 30px rgba(10, 27, 62, .3);
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.lea-search__tip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 16px;
    border: 5px solid transparent;
    border-top-color: var(--lea-search-ink);
}

.lea-search__locate:hover + .lea-search__tip,
.lea-search__locate:focus-visible + .lea-search__tip,
.lea-search__tip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/*
 * IM SUCH-OVERLAY DER NAVIGATION steht dieselbe Leiste auf Weiss statt auf
 * einem Bild — sie braucht deshalb einen Rahmen und einen leichteren Schatten,
 * sonst schwebt sie ohne Kante auf der weissen Flaeche (Entwurf suchform.html).
 */
.lea-search--nav {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    border: 1px solid var(--lea-search-border);
}

@media (max-width: 860px) {
    .lea-search {
        flex-direction: column;
        gap: 8px;
        border-radius: 20px;
    }

    .lea-search__field,
    .lea-search__field:last-of-type {
        border-right: 0;
        border-bottom: 1px solid var(--lea-search-line);
    }

    .lea-search__submit {
        padding: 14px;
    }
}