﻿/* 16.10.2026 (Martin): Lang_List.aspx - list of all languages (filter / sort in lang_list.js) */
.ll { max-width: 1180px; color: #1d2433; font: 14px/1.45 Arial, Helvetica, sans-serif; }
.ll-lead { margin: 4px 0 16px; color: #28468C; font-size: 15px; }

/* 16.10.2026: title with the button to the price list on the right (the line of the master's h2 moves to the bar) */
.ll-titlebar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px;
  border-bottom: 1px solid #aaa; margin-bottom: 6px; padding-bottom: 7px; }
#col-right .ll-titlebar h2.info-title { margin: 0; padding: 0; border-bottom: 0; }
a.ll-prices { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 6px; background: #28468c; color: #fff;
  font: 600 13px/1.2 Arial, Helvetica, sans-serif; text-decoration: none; white-space: nowrap; }
a.ll-prices::after { content: "\2192"; }
a.ll-prices:hover, a.ll-prices:focus-visible { background: #1d3366; color: #fff; text-decoration: none; }
a.ll-prices:focus-visible { outline: 2px solid #28468c; outline-offset: 2px; }

/* 16.10.2026: flag in front of the language name, hover = same tooltip as the name */
.ll-flag { display: inline-block; margin-right: 8px; vertical-align: -3px; cursor: help; }
.ll-flag img { display: block; width: 24px; height: 16px; border: 1px solid #d6dfec; border-radius: 2px; }
.ll-flag.li-lang.li-has { border-bottom: 0; }
.ll-flag.li-lang.li-has:hover img { border-color: #1e4fa3; }
.ll-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ll-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; margin-bottom: 14px;
  background: #eef2f8; border: 1px solid #d6dfec; border-radius: 8px; }
.ll-bar input[type=search], .ll-bar select { height: 32px; box-sizing: border-box; padding: 0 10px; font: 14px Arial, Helvetica, sans-serif;
  color: #1d2433; background: #fff; border: 1px solid #b9c6da; border-radius: 6px; }
.ll-bar input[type=search] { width: 360px; max-width: 100%; }
.ll-bar input:focus, .ll-bar select:focus, .ll-reset:focus-visible { outline: 2px solid #28468c; outline-offset: 1px; }
.ll-check { display: inline-flex; align-items: center; gap: 6px; color: #28468C; cursor: pointer; }
.ll-check input { width: 16px; height: 16px; margin: 0; accent-color: #28468c; }
.ll-reset { height: 32px; padding: 0 12px; font: 13px Arial, Helvetica, sans-serif; color: #28468c; background: #fff;
  border: 1px solid #b9c6da; border-radius: 6px; cursor: pointer; }
.ll-reset:hover { background: #28468c; border-color: #28468c; color: #fff; }
.ll-count { margin-left: auto; color: #4a5872; font-size: 13px; font-variant-numeric: tabular-nums; }

.ll-scroll { overflow-x: auto; border: 1px solid #d6dfec; border-radius: 8px; }
.ll-table { width: 100%; border-collapse: collapse; }
.ll-table th, .ll-table td { padding: 7px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid #e6ebf3; }
.ll-table thead th { position: sticky; top: 0; z-index: 1; background: #28468c; color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; }
.ll-table th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ll-table th button::after { content: "\2195"; font-size: 11px; opacity: .45; }
.ll-table th[aria-sort=ascending] button::after { content: "\25B2"; opacity: 1; font-size: 9px; }
.ll-table th[aria-sort=descending] button::after { content: "\25BC"; opacity: 1; font-size: 9px; }
.ll-table th button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
.ll-table tbody tr:nth-child(even) { background: #f7f9fc; }
.ll-table tbody tr:hover { background: #eaf0f9; }
.ll-table tbody tr[data-has="0"] td:not(:first-child) { color: #9aa6b8; }
.ll-table td:first-child { font-weight: 700; color: #13284d; white-space: nowrap; }
.ll-table td small { display: block; color: #6b7891; font-size: 12px; }
.ll-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ll-iso { font-family: Consolas, "Courier New", monospace; font-size: 13px; color: #4a5872; white-space: nowrap; }
.ll-empty { margin: 0; padding: 18px 14px; color: #4a5872; }
.ll-note { margin: 12px 0 0; color: #6b7891; font-size: 12px; }
/* 16.10.2026: the name links to the language page (/Sprachen/Zulu-Uebersetzung) */
a.ll-name { color: inherit; text-decoration: none; }
a.ll-name:hover, a.ll-name:focus { color: #1e4fa3; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .ll-bar input[type=search] { width: 100%; }
  .ll-count { margin-left: 0; }
}
