/* ==========================================================================
   LayerNX © – LNX Search: komplettes Theme für SearXNG (simple) im Stil des LNX-Wikis
   Wird beim Image-Build an sxng-ltr/rtl.min.css angehängt (lnx_brand.py).
   :root:root:root schlägt die Theme-Selektoren (.theme-dark, :root.theme-auto …).
   Schriften lokal (SIL OFL): Syne (Überschriften), Space Mono (Uhr/Daten), Text: System-Sans.
   ========================================================================== */
@font-face { font-family: "Syne"; font-weight: 400; font-display: swap; src: url(lnx/fonts/syne-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Syne"; font-weight: 700; font-display: swap; src: url(lnx/fonts/syne-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Syne"; font-weight: 800; font-display: swap; src: url(lnx/fonts/syne-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 400; font-display: swap; src: url(lnx/fonts/space-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 700; font-display: swap; src: url(lnx/fonts/space-mono-latin-700-normal.woff2) format("woff2"); }

:root:root:root {
  --lnx-bg: #0b0b0f;
  --lnx-bg-2: #101016;
  --lnx-bg-3: #16161e;
  --lnx-hover: #1c1c26;
  --lnx-line: rgba(255, 255, 255, .09);
  --lnx-line-2: rgba(255, 255, 255, .17);
  --lnx-text: #f2f2f5;
  --lnx-text-2: #d0d0d8;
  --lnx-muted: #9d9daa;
  --lnx-faint: #6c6c79;
  --lnx-accent: #552ffb;
  --lnx-accent-2: #6d4dff;
  --lnx-link: #a99cff;
  --lnx-font: Arial, "Helvetica Neue", Helvetica, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lnx-head: "Syne", Arial, sans-serif;
  --lnx-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --color-base-font: #d0d0d8;
  --color-base-font-rgb: 208, 208, 216;
  --color-base-background: #0b0b0f;
  --color-base-background-mobile: #0b0b0f;
  --color-url-font: #a99cff;
  --color-url-visited-font: #c9bfff;
  --color-header-background: #101016;
  --color-header-border: rgba(255, 255, 255, .09);
  --color-footer-background: #101016;
  --color-footer-border: rgba(255, 255, 255, .09);
  --color-sidebar-border: rgba(255, 255, 255, .09);
  --color-sidebar-font: #f2f2f5;
  --color-sidebar-background: #101016;
  --color-backtotop-font: #d0d0d8;
  --color-backtotop-border: rgba(255, 255, 255, .17);
  --color-backtotop-background: #16161e;
  --color-btn-background: #552ffb;
  --color-btn-font: #fff;
  --color-show-btn-background: #16161e;
  --color-show-btn-font: #f2f2f5;
  --color-search-border: rgba(255, 255, 255, .17);
  --color-search-shadow: none;
  --color-search-background: #0b0b0f;
  --color-search-font: #f2f2f5;
  --color-search-background-hover: #552ffb;
  --color-error: #f0566b;
  --color-error-background: #2a0d13;
  --color-warning: #f2b84b;
  --color-warning-background: #2a2009;
  --color-success: #3ccf8e;
  --color-success-background: #0b2a1d;
  --color-categories-item-selected-font: #f2f2f5;
  --color-categories-item-border-selected: #6d4dff;
  --color-autocomplete-font: #f2f2f5;
  --color-autocomplete-border: rgba(255, 255, 255, .17);
  --color-autocomplete-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --color-autocomplete-background: #101016;
  --color-autocomplete-background-hover: #1c1c26;
  --color-answer-font: #d0d0d8;
  --color-answer-background: #101016;
  --color-result-keyvalue-col-table: #101016;
  --color-result-keyvalue-odd: #101016;
  --color-result-keyvalue-even: #0b0b0f;
  --color-result-background: transparent;
  --color-result-border: rgba(255, 255, 255, .09);
  --color-result-url-font: #9d9daa;
  --color-result-vim-selected: rgba(85, 47, 251, .1);
  --color-result-vim-arrow: #a99cff;
  --color-result-description-highlight-font: #fff;
  --color-result-link-font: #a99cff;
  --color-result-link-font-highlight: #c9bfff;
  --color-result-link-visited-font: #c9a8ff;
  --color-result-publishdate-font: #6c6c79;
  --color-result-engines-font: #6c6c79;
  --color-result-search-url-border: rgba(255, 255, 255, .17);
  --color-result-search-url-font: #f2f2f5;
  --color-result-detail-background: #101016;
  --color-result-detail-link: #a99cff;
  --color-result-image-span-font: #d0d0d8;
  --color-result-image-span-font-selected: #fff;
  --color-result-image-background: #101016;
  --color-settings-tr-hover: #16161e;
  --color-settings-engine-description-font: #9d9daa;
  --color-settings-table-group-background: #101016;
  --color-toolkit-badge-font: #fff;
  --color-toolkit-badge-background: #2a2a35;
  --color-toolkit-dialog-border: rgba(255, 255, 255, .17);
  --color-toolkit-dialog-background: #101016;
  --color-toolkit-tabs-label-border: #0b0b0f;
  --color-toolkit-tabs-section-border: rgba(255, 255, 255, .09);
  --color-toolkit-select-background: #16161e;
  --color-toolkit-select-border: rgba(255, 255, 255, .17);
  --color-toolkit-select-background-hover: #1c1c26;
  --color-toolkit-input-text-font: #f2f2f5;
  --color-toolkit-checkbox-onoff-off-background: #1c1c26;
  --color-toolkit-checkbox-onoff-on-background: #1c1c26;
  --color-toolkit-checkbox-onoff-on-mark-background: #552ffb;
  --color-toolkit-checkbox-onoff-on-mark-color: #fff;
  --color-toolkit-checkbox-onoff-off-mark-background: #3a3a46;
  --color-toolkit-checkbox-onoff-off-mark-color: #fff;
  --color-toolkit-checkbox-label-background: #2a2a35;
  --color-toolkit-checkbox-label-border: rgba(255, 255, 255, .17);
  --color-toolkit-checkbox-input-border: #552ffb;
  --color-toolkit-engine-tooltip-border: rgba(255, 255, 255, .17);
  --color-toolkit-engine-tooltip-background: #101016;
  --color-toolkit-loader-border: rgba(255, 255, 255, .17);
  --color-toolkit-loader-borderleft: transparent;
  --color-doc-code: #d0d0d8;
  --color-doc-code-background: #16161e;
  color-scheme: dark;
}

/* --- Grundlagen ------------------------------------------------------------- */
html, body, input, button, select, textarea { font-family: var(--lnx-font); }
body { background: var(--lnx-bg); }
::selection { background: #552ffb; color: #fff; }
a { color: var(--lnx-link); }
h1, h2, h3, legend { font-family: var(--lnx-head); }

/* --- Leiste oben rechts (Über, Einstellungen, Konto) ------------------------ */
#links_on_top { top: 0; right: 0; height: 56px; padding: 0 14px; gap: 4px; z-index: 50; }
#links_on_top a { margin: 0; padding: 6px 10px; border-radius: 4px; font-size: .88rem; color: var(--lnx-muted); }
#links_on_top a:hover { background: var(--lnx-hover); }
#links_on_top a, #links_on_top a * { color: var(--lnx-muted); }
#links_on_top a:hover, #links_on_top a:hover * { color: var(--lnx-text); }
#links_on_top svg { font-size: 1.05em; margin-right: 5px; }
#links_on_top .link_on_top_account { border: 1px solid var(--lnx-line-2); color: var(--lnx-text); }
#links_on_top .link_on_top_account.is-in { border-color: transparent; color: var(--lnx-link); }
#links_on_top .link_on_top_account img { width: 18px; height: 18px; margin-right: 6px; }

/* --- Kopfbereich der Ergebnisseite (Wiki-Leiste) ---------------------------- */
#search_header { padding-top: 0; min-height: 56px; background: var(--lnx-bg-2); border-bottom: 1px solid var(--lnx-line); row-gap: 0; }
#search_logo { padding: 0; align-items: center; }
#search_logo svg.lnx-mark { flex: 0 0 34px; width: 34px; height: 34px; margin: 0; }
#search_view { padding-top: 10px; }
.search_box {
  border: 1px solid var(--lnx-line-2); border-radius: 4px; overflow: hidden; background: var(--lnx-bg);
}
.search_box:focus-within { border-color: var(--lnx-accent-2); box-shadow: 0 0 0 2px rgba(85, 47, 251, .25); }
#q { border-radius: 0 !important; font-size: 1rem; padding-top: .7rem; padding-bottom: .7rem; }
#send_search { border-radius: 0 !important; background: var(--lnx-accent); color: #fff; padding: .7rem .9rem; }
#send_search:hover { background: var(--lnx-accent-2); color: #fff; }
#clear_search { padding: .7rem .2rem; }
.autocomplete { border-radius: 4px; }

/* Kategorien als Reiter wie im Wiki */
.search_categories { margin-top: 6px; }
.category_checkbox label, button.category_button {
  padding: 8px 2px 9px; border-bottom: 2px solid transparent; color: var(--lnx-muted); font-size: .86rem; text-transform: none;
}
.category_checkbox label:hover, button.category_button:hover { color: var(--lnx-text); }
.category_checkbox input[type="checkbox"]:checked + label, button.category_button.selected { color: var(--lnx-text); border-bottom-color: var(--lnx-accent-2); }
.search_filters select { border-radius: 4px; border: 1px solid var(--lnx-line); padding: 4px 8px; margin-right: 6px; font-size: .84rem; }

/* --- Ergebnisse --------------------------------------------------------------- */
.result { padding: 14px 0 16px; margin: 0; border: 0; border-bottom: 1px solid var(--lnx-line); border-radius: 0; background: none; }
.result:hover { background: none; }
.result .url_header, .result .url_wrapper { color: var(--lnx-muted); font-family: var(--lnx-mono); font-size: .76rem; }
.result h3 { font-family: var(--lnx-font); font-size: 1.08rem; font-weight: 600; margin: 4px 0 4px; }
.result h3 a { color: var(--lnx-link); }
.result h3 a:visited { color: #c9a8ff; }
.result h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.result .content { color: var(--lnx-text-2); line-height: 1.55; }
.result .engines { font-family: var(--lnx-mono); font-size: .7rem; }
.result .favicon img { border-radius: 3px; }
.result-images, .result-videos { border-bottom: 0; }
.result-images img { border-radius: 4px; }
#answers, #infoboxes .infobox, #sidebar .infobox, #suggestions, #engines_msg, #search_url, #apis, .sidebar-collapsible {
  border: 1px solid var(--lnx-line); border-radius: 4px; background: var(--lnx-bg-2); box-shadow: none;
}
#sidebar .title, #answers .title { font-family: var(--lnx-head); }
#suggestions .suggestion input[type="submit"], #corrections input[type="submit"] { color: var(--lnx-link); }
#pagination button, #pagination input[type="submit"], .page_number input[type="submit"], #backToTop {
  border: 1px solid var(--lnx-line-2); border-radius: 4px; background: var(--lnx-bg-3); color: var(--lnx-text);
}
#pagination .page_number_current { border-radius: 4px; background: var(--lnx-accent); color: #fff; }
input[type="submit"], .button, button.button, #results button[type="submit"] { border-radius: 4px; }
.dialog-error, .dialog-warning { border-radius: 4px; }

/* --- Einstellungen / Info-Seiten --------------------------------------------- */
.page_with_header { margin-top: 70px; }
.page_with_header svg.lnx-logo { width: min(240px, 70vw); height: auto; display: block; margin-bottom: 8px; }
.tabs > label { border-radius: 4px 4px 0 0; font-family: var(--lnx-font); }
.tabs > input:checked + label { border-bottom-color: var(--lnx-accent-2); color: var(--lnx-text); }
fieldset { border-radius: 4px; }
table.table_engines, .table_engines td, .table_engines th { border-color: var(--lnx-line); }
#main_preferences legend, #main_stats h1, #main_info h1 { font-family: var(--lnx-head); }

/* --- Footer (wie überall bei LayerNX) ------------------------------------------ */
footer.lnx-foot { box-sizing: border-box; width: 100%; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding: 16px 18px; border-top: 1px solid var(--lnx-line); background: var(--lnx-bg-2); color: var(--lnx-faint); font-size: .8rem; text-align: center; }
footer.lnx-foot p { margin: 0; font-size: .8rem; }
footer.lnx-foot a { color: var(--lnx-muted); }
footer.lnx-foot a:hover { color: var(--lnx-text); }
footer.lnx-foot .sx { flex-basis: 100%; color: var(--lnx-faint); }

/* ===========================================================================
   Startseite von search.layernx.de: Logo „LayerNX Search“ + Suchfeld (Begrüßung gibt es auf hello.layernx.de)
   =========================================================================== */
#main_index { margin: 0; padding: 0; }
body.index_endpoint { min-height: 100vh; display: flex; flex-direction: column; }
body.index_endpoint main { flex: 1; display: flex; }
.lnx-home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; width: 100%; padding: 90px 18px 60px; text-align: center; }
.lnx-logo-wrap { margin: 0; line-height: 0; }
.lnx-logo-wrap svg.lnx-logo { width: min(520px, 88vw); height: auto; }
.lnx-home #search { width: min(640px, 100%); min-width: 0; max-width: 100%; }
.lnx-home #search_header { display: block; padding: 0; background: none; border: 0; min-height: 0; }
.lnx-home #search_view { position: static !important; left: auto !important; padding: 0; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.lnx-home .search_box { display: flex; max-width: 100%; width: 100%; min-width: 0; box-sizing: border-box; }
.lnx-home #q { font-size: 1.08rem; padding: .95rem 1.1rem; }
/* Begrüßung (angemeldet) statt Logo */
.lnx-greet { margin: 0; font: 700 clamp(1.7rem, 4.4vw, 2.6rem)/1.15 var(--lnx-head, "Syne", sans-serif); letter-spacing: -.01em; color: var(--lnx-text, #f2f2f5); }
.lnx-greet .name { color: var(--lnx-link, #a99cff); }
.lnx-greet[hidden], .lnx-logo-wrap[hidden] { display: none !important; }
/* Dienste als schlichte Buttons */
.lnx-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lnx-tiles a { padding: 8px 16px; border: 1px solid var(--lnx-line-2); border-radius: 4px; background: var(--lnx-bg-2, #101016); color: var(--lnx-text-2, #d0d0d8) !important; font-size: .9rem; text-decoration: none !important; transition: background-color .12s, border-color .12s; }
.lnx-tiles a:hover { background: var(--lnx-hover); border-color: rgba(255, 255, 255, .3); color: #fff !important; }
.lnx-tiles a[hidden], .lnx-tiles[hidden] { display: none; }
@media (max-width: 1000px) {
  body.results_endpoint #links_on_top { position: static; justify-content: flex-end; height: auto; padding: 6px 10px 0; background: var(--lnx-bg-2); }
}
@media (max-width: 520px) {
  #links_on_top a span { display: none; }
  .lnx-home { padding-top: 70px; }
}

/* Uhr links – gestapelt, in LayerNX-Farben; schmal: eine Zeile über der Begrüßung */
.lnx-home { position: relative; }
.lnx-clock { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; user-select: none; }
.lnx-clock .seg { font: 700 7.2rem/.98 var(--lnx-mono); letter-spacing: -.06em; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #552ffb 0%, #7d63ff 45%, #c9bfff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lnx-clock .lbl { margin: -2px 0 12px 4px; color: var(--lnx-faint); font: .6rem var(--lnx-mono); letter-spacing: .18em; text-transform: uppercase; }
@media (min-width: 1100px) {
  .lnx-clock { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); }
}
@media (max-width: 1099px) {
  .lnx-clock { flex-direction: row; align-items: baseline; gap: 2px; }
  .lnx-clock .seg { font-size: 2.6rem; }
  .lnx-clock .lbl { display: none; }
  .lnx-clock .seg + .lbl + .seg::before { content: ":"; color: var(--lnx-faint); -webkit-text-fill-color: var(--lnx-faint); margin: 0 2px; }
}
/* Schmal: Suchfeld und Vorschläge nie breiter als der Bildschirm (auch nach dem Verkleinern) */
@media (max-width: 50em) {
  #search_view, .search_box { max-width: 100vw; box-sizing: border-box; }
  .autocomplete { max-width: calc(100vw - 4px); box-sizing: border-box; }
  html, body { overflow-x: hidden; }
}
.lnx-home .search_box { position: relative; }
.lnx-home .autocomplete { left: 0 !important; right: 0 !important; width: auto !important; max-width: 100%; }