/* Leichte Tiefe für die Kästen der Oberfläche.
 *
 * Die Karten des Themes lagen bisher flach auf dem Hintergrund; ein einzelner
 * weicher Schatten war alles. Das hier gibt ihnen ein wenig Körper, ohne in
 * die Spielerei zu kippen: Sie sollen wie Papier auf einem Tisch wirken, nicht
 * wie Knöpfe aus einer Bedienoberfläche der Neunziger.
 *
 * Drei Mittel, alle zurückhaltend dosiert:
 *
 *   Gestaffelte Schatten statt eines einzelnen. Ein enger, dunkler Schatten
 *   direkt an der Kante und ein weiter, heller darunter - so entsteht Abstand
 *   zum Hintergrund, den ein einzelner Weichzeichner nie erzeugt.
 *
 *   Eine helle Kante oben (inset). Licht kommt von oben, also ist die obere
 *   Kante heller als der Rest. Ein Pixel genügt.
 *
 *   Ein sehr flacher Verlauf über die Fläche, der nach unten ausläuft. Er macht
 *   die Karte plastisch, ohne ihre Farbe zu verändern.
 *
 * Angehoben wird nur, was auch anklickbar ist: eine Kachel in einem Link. Ein
 * Kasten, der sich beim Überfahren bewegt, ohne dass etwas passiert, ist eine
 * Täuschung - und für Menschen, die Bewegung schlecht vertragen, unnötiger
 * Reiz. Wer "weniger Bewegung" eingestellt hat, bekommt deshalb nur den
 * Schatten und keine Verschiebung.
 *
 * Geladen nach app.css, damit die Regeln des Themes überschrieben werden -
 * insbesondere .shadow-sm, das viele Karten im Markup mitbringen.
 */

:root {
    /* Neutrales Blaugrau statt reinem Schwarz: Ein schwarzer Schatten wirkt
       auf farbigem Grund schmutzig. */
    --tiefe-farbe: 218 25% 22%;

    --tiefe-ruhe:
        0 1px 2px hsl(var(--tiefe-farbe) / .07),
        0 4px 10px -4px hsl(var(--tiefe-farbe) / .10),
        inset 0 1px 0 rgb(255 255 255 / .60);

    --tiefe-hover:
        0 2px 4px hsl(var(--tiefe-farbe) / .08),
        0 12px 22px -8px hsl(var(--tiefe-farbe) / .18),
        inset 0 1px 0 rgb(255 255 255 / .70);

    --tiefe-verlauf: linear-gradient(
        180deg,
        rgb(255 255 255 / .50) 0%,
        rgb(255 255 255 / .12) 38%,
        rgb(255 255 255 / 0) 100%
    );
}

.adminuiux-card {
    /* Das Theme setzt .shadow-sm mit !important; viele Karten tragen die
       Klasse im Markup. Statt dagegen anzukämpfen, wird die Variable
       umdefiniert, aus der jene Regel ihren Wert zieht - dann greift dieselbe
       Tiefe, ganz gleich, welche der beiden Regeln gewinnt. */
    --bs-box-shadow-sm: var(--tiefe-ruhe);
    --bs-box-shadow: var(--tiefe-ruhe);

    box-shadow: var(--tiefe-ruhe);
    background-image: var(--tiefe-verlauf);
    transition: box-shadow .18s ease, transform .18s ease;
}

/* Karten mit eigenem Farbton (bg-theme-1-subtle und Verwandte) bekommen den
   Verlauf schwächer: Auf farbigem Grund fällt weißes Licht stärker auf. */
.adminuiux-card[class*="bg-theme"],
.adminuiux-card[class*="bg-"][class*="-subtle"] {
    background-image: linear-gradient(
        180deg,
        rgb(255 255 255 / .28) 0%,
        rgb(255 255 255 / 0) 60%
    );
}

/* Anklickbares hebt sich beim Überfahren und beim Tastaturfokus. Der Fokus
   zählt ausdrücklich mit - sonst bekommt nur die Maus die Rückmeldung. */
a:hover > .adminuiux-card,
a:focus-visible > .adminuiux-card,
label:hover > .adminuiux-card {
    --bs-box-shadow-sm: var(--tiefe-hover);
    --bs-box-shadow: var(--tiefe-hover);

    box-shadow: var(--tiefe-hover);
    transform: translateY(-3px);
}

/* Gedrückt wird die Karte wieder flach - die Hand liegt darauf. */
a:active > .adminuiux-card {
    --bs-box-shadow-sm: var(--tiefe-ruhe);
    --bs-box-shadow: var(--tiefe-ruhe);

    box-shadow: var(--tiefe-ruhe);
    transform: translateY(-1px);
}

/* Der Kopf einer Karte sitzt eine Spur höher als ihr Körper. */
.adminuiux-card > .card-header {
    box-shadow: inset 0 -1px 0 hsl(var(--tiefe-farbe) / .07);
}

/* In der Verwaltung stehen viele Karten dicht nebeneinander. Dort bleibt der
   Schatten, der Verlauf entfällt - sonst flimmert die Seite. */
.admin-flaeche .adminuiux-card {
    background-image: none;
}

/* Die öffentliche Startseite bringt ihre Kästen selbst mit; sie greifen auf
   dieselben Variablen zu (siehe templates/start.tpl). Ihre Regeln stehen im
   <style> der Seite und damit nach diesem Stylesheet - dort gesetzt, bleiben
   sie wirksam. */

/* --- Dunkler Modus -------------------------------------------------------
   Im Dunkeln kommt die Tiefe nicht vom Schatten, sondern vom Licht: Der
   Schatten verschwindet im dunklen Grund, die helle Oberkante bleibt sichtbar.
   Das Theme schaltet über html.dark-mode, Bootstrap über data-bs-theme. */
html.dark-mode,
[data-bs-theme="dark"] {
    --tiefe-ruhe:
        0 1px 2px rgb(0 0 0 / .35),
        0 6px 14px -6px rgb(0 0 0 / .45),
        inset 0 1px 0 rgb(255 255 255 / .07);

    --tiefe-hover:
        0 2px 4px rgb(0 0 0 / .40),
        0 14px 26px -10px rgb(0 0 0 / .55),
        inset 0 1px 0 rgb(255 255 255 / .10);

    --tiefe-verlauf: linear-gradient(
        180deg,
        rgb(255 255 255 / .06) 0%,
        rgb(255 255 255 / .02) 40%,
        rgb(255 255 255 / 0) 100%
    );
}

/* --- Rücksichten ---------------------------------------------------------- */

/* Wer Bewegung reduziert haben will, bekommt die Tiefe trotzdem - nur ohne
   Verschiebung und ohne Übergang. */
@media (prefers-reduced-motion: reduce) {
    .adminuiux-card {
        transition: none;
    }

    a:hover > .adminuiux-card,
    a:focus-visible > .adminuiux-card,
    a:active > .adminuiux-card,
    label:hover > .adminuiux-card {
        transform: none;
    }
}

/* Hoher Kontrast und erzwungene Farben: Schatten und Verläufe sind dort
   Störung, nicht Information. */
@media (forced-colors: active) {
    .adminuiux-card,
    .start-karte,
    .start-grenzen {
        box-shadow: none;
        background-image: none;
    }
}

/* Auf Papier wird nichts geworfen. */
@media print {
    .adminuiux-card,
    .start-karte,
    .start-grenzen {
        box-shadow: none;
        background-image: none;
        transform: none;
    }
}

/* ------------------------------------------------------------------
   Globale Suche: Feld und Vorschlagsliste.

   Das Feld sass in einem 300 Punkte breiten Kasten mit engem Innenabstand -
   im breiten Kopfbereich wirkte es geduckt, und die Vorschlaege standen so
   dicht, dass Bild, Titel und Zusatz ineinanderliefen. Hier bekommt beides
   Luft: ein groesseres Feld, groessere Zeilen, deutlichere Abstaende.
   ------------------------------------------------------------------ */
.suche-feld {
    max-width: 520px;
    width: 100%;
}

.suche-feld .input-group {
    background: var(--bs-body-bg);
}

.suche-feld .form-control {
    font-size: 1rem;
    padding-block: .7rem;
}

.suche-feld .input-group-text i {
    font-size: 1.1rem;
}

/* Ein Ring statt eines Rahmens: Das Feld hat keine eigene Linie, der Fokus
   muss trotzdem sichtbar sein - auch fuer Augen, die Farben schlecht trennen. */
.suche-feld .form-control:focus {
    box-shadow: none;
}

.suche-feld .input-group:focus-within {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.suche-liste {
    padding: .5rem;
    max-height: min(70vh, 32rem);
    overflow-y: auto;
}

.suche-liste .dropdown-header {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .6rem .75rem .3rem;
}

.suche-liste .dropdown-item {
    padding: .6rem .75rem;
    border-radius: .5rem;
    font-size: .95rem;
    white-space: normal;
}

.suche-liste .dropdown-item + .dropdown-header {
    margin-top: .25rem;
    border-top: 1px solid var(--bs-border-color, #e5e7eb);
}

/* Das Bild traegt die Zeilenhoehe: fest gesetzt, damit beim Nachladen nichts
   springt. */
.suche-liste .suche-bild {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    flex-shrink: 0;
}

.suche-liste .suche-platzhalter {
    width: 2.5rem;
    height: 2.5rem;
    font-size: .8rem;
    flex-shrink: 0;
}

.suche-liste .suche-platzhalter i {
    font-size: 1.1rem;
}

@media (max-width: 991.98px) {
    .suche-liste .dropdown-item {
        padding: .7rem .75rem;
    }
}