/* ==========================================================================
   kategorien.css
   Styles für kategorien/index.php – derzeit die Suche in der Kategorienliste.
   ========================================================================== */

/* --- Anlege-Formular (linke Spalte) ------------------------------------- */

/* Bewusst nicht feststehend.
 *
 * Ein Versuch mit position:sticky und eigenem Scrollbereich scheiterte an den
 * Inline-Editoren: TinyMCE haengt deren Werkzeugleiste als freischwebendes
 * Panel an document.body und positioniert sie absolut zum Dokument. Scrollt
 * die Spalte intern, wandert das Eingabefeld, die Leiste nicht – beides lief
 * auseinander.
 *
 * fixed_toolbar_container behebt das technisch, sammelt aber alle Leisten an
 * einer Stelle am Spaltenkopf, weit entfernt vom bearbeiteten Feld. Und ohne
 * inneren Scrollbereich waeren bei drei Sprachen die unteren Felder gar nicht
 * erreichbar, weil das Formular hoeher ist als die meisten Fenster.
 *
 * Deshalb scrollt die Spalte mit. Wer beides braucht, muesste die
 * Beschreibungsfelder auf den klassischen Editor umstellen
 * (setupTextAreaNoP) – dort gehoert die Leiste zum Editor-Kasten.
 */

/* --- Suchleiste ---------------------------------------------------------- */

/* Bleibt beim Scrollen stehen. top: 80px, weil .navi (fixed, top 0, 70px hoch)
   und .subnavi (fixed, top 60px, 20px hoch) darueber liegen und dort enden.
   z-index unter deren 100/200, damit die Leiste beim Scrollen darunter
   verschwindet und nicht die Navigation ueberdeckt. */
.ls-bar {
    position: sticky;
    top: 80px;
    z-index: 50;
    margin: 0 0 12px 0;
    padding: 10px 12px;
    background: #6b6b6b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Steuerelemente in einer Zeile, ausdruecklich ohne Umbruch. Die rechte
   Spalte ist 700px breit; mit fixer Feldbreite lief die Zeile darueber und
   der letzte Button rutschte nach unten. Stattdessen gibt das Suchfeld nach. */
.ls-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

.ls-controls label {
    flex: 0 0 auto;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
}

/* Das einzige Element, das schrumpfen darf. min-width:0 ist noetig, weil
   Eingabefelder sonst nicht unter ihre Standardbreite gehen. */
.ls-controls input[type="search"],
.ls-controls input[type="text"] {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    padding: 4px 6px;
}

/* Trefferzähler: feste Breite, damit die Buttons beim Tippen nicht wandern */
.ls-count {
    flex: 0 0 auto;
    min-width: 84px;
    font-size: 12px;
    color: #eee;
    white-space: nowrap;
}

/* Buttons behalten ihre Breite, damit die Beschriftungen lesbar bleiben */
.ls-bar .button {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 9px;
    white-space: nowrap;
}

/* Trennt die Sprungnavigation vom Details-Schalter: verschiedene Aufgaben,
   gleiche Leiste. */
.ls-sep {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.35);
    margin: 0 2px;
}

.ls-hint {
    display: block;
    font-size: 11px;
    color: #ddd;
    margin-top: 5px;
}

/* --- Treffer ------------------------------------------------------------- */

/* Alle Treffer bleiben markiert, damit man mehrere auf einmal sieht.
   Nichts wird ausgeblendet – der Baum bleibt vollständig lesbar.
   Nur ein Rahmen, keine Hintergrundfarbe: der Titel bleibt so unveraendert
   lesbar. outline beansprucht keinen Platz, die Zeilen springen also nicht. */
.ls-hit {
    outline: 2px solid #e0b400;
    outline-offset: 2px;
    /* Abstand, den scrollIntoView oben freihaelt – sonst koennen Treffer am
       Dokumentanfang unter der fixierten Navigation und der Suchleiste landen. */
    scroll-margin-top: 130px;
}

/* Der gerade angesprungene Treffer: kraeftiger und etwas weiter abgesetzt */
.ls-hit-current {
    outline: 3px solid #ffb300;
    outline-offset: 3px;
}