/**
 * NPL Market Dashboard - Custom Styles
 * BKS Corporate Design
 */

/* Scrollbar-Platz reservieren — verhindert Layout-Sprung */
/* ====== Base Typography (identisch mit Bank-Level) ====== */
/* html-Schriftgroesse zentral hier — alle Tailwind-rem-Werte
   (text-xs, text-sm, text-base ...) skalieren proportional mit. */
html {
    font-size: 17px;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

/* Erklaerungstexte (Block-Hints, Sub-Titel unter Headern, Status-Leiste,
   KPI-Sublabels, Filter-Chips, Filter-Labels) sollen spuerbar lesbarer
   sein als reine Beilagen-Disclaimers. Tailwind text-xs in Kombination
   mit grauer Schrift wird hier flaechendeckend leicht angehoben — ohne
   in jeder der ~50 Stellen einzeln eingreifen zu muessen. */
p.text-xs,
div.text-xs.text-gray-500,
div.text-xs.text-gray-600,
.text-xs.text-gray-500.mb-3,
.text-xs.text-gray-500.mb-1.max-w-3xl {
    font-size: 0.84rem;     /* ~14px bei html=17px */
    line-height: 1.55;
}

/* BKS Corporate Design Fonts */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, .font-bold, .font-medium {
    font-weight: 500;
}

/* Toast notifications */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}
.toast {
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease;
}
.toast-success { background: #22c55e; color: white; }
.toast-error { background: #ef4444; color: white; }
.toast-info { background: #006699; color: white; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
.toast-exit { animation: slideOut 0.3s ease forwards; }

/* Loading spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff40;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
    margin-right: 8px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Tooltip styles */
.tooltip-container {
    position: relative;
}
.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: normal;
    max-width: 250px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 50;
    margin-bottom: 8px;
    line-height: 1.4;
}
.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f2937;
}
.tooltip-container:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/* Vue cloak */
[v-cloak] { display: none; }

/* Transitions */
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
    opacity: 0;
}

/* KPI Cards — PAKET C-5: Kartenflaeche aus Ebenen-Tokens statt Tailwind
   (bg-white rounded-xl shadow-lg p-5), analog .kpi-card in
   bank-level/web/frontend/css/styles.css bzw. frontend/src/design/hub/css/card.css.
   Der linke Akzentbalken (border-l-4 + dynamische Tailwind-Border-Farbe aus
   getKpiBorderClass) bleibt: er ist die bestehende Ampel-Aussage der Kachel,
   fuer die es kein Ebenen-Pattern gibt, und wird hier nicht neu erfunden. */
.kpi-card {
    background: var(--white);
    border: var(--rule);
    border-radius: var(--r-md);
    padding: var(--s-4);
    transition: all 0.3s ease;
}

/* Laender-Flagge im KPI-Switcher — selbst gehostetes SVG statt Emoji (C-8).
   Masse/Radius/Rahmen uebernommen von .op-flag in der SPA (OrgProfile.vue),
   das ist das etablierte Muster fuer Flaggen-Icons in dieser Groesse. */
.mk-flag {
    flex: none;
    width: 18px;
    height: 13px;
    border-radius: 2px;
    object-fit: cover;
    border: var(--rule);
}

/* Laender-Schnellauswahl der KPI-Kacheln (PAKET C-9) — .hub-chip ist ein
   <button> ohne eigenes internes Layout; hier nur die Anordnung von Flagge
   + Code in einer Zeile, Rahmen/Zustand/Typo bleiben unveraendert aus
   .hub-chip (hub-layer.css). Kein neuer Farbwert. */
.mk-chip--flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Laender-Ranking — PAKET C-5: Tabellenzelle mit eingebettetem Rankingbalken.
   Kein Ebenen-Pattern fuer eine Grafik-in-Zelle vorhanden; Balkenfarben
   (getRankingBarClass) und Wertfarben (getRankingValueClass) bleiben die
   bestehenden Tailwind-Ampelklassen, hier nur neu verortet in hub-table. */
.hub-table td.mk-rank__valcell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-2);
}
.mk-rankbar {
    display: inline-block;
    width: 80px;
    height: 6px;
    background: var(--surface);
    border-radius: 999px;
    overflow: hidden;
    vertical-align: middle;
}
.mk-rankbar__fill {
    display: block;
    height: 100%;
}

/* Fullscreen modal */
.fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fullscreen-chart {
    width: 95vw;
    height: 85vh;
    background: white;
    border-radius: 12px;
    padding: 20px;
}

/* Macro panel */
.macro-panel {
    transition: all 0.3s ease;
}

/* Correlation bar - farbenblinde-freundlich: Orange (negativ) → Grau → Blau (positiv) */
.correlation-bar {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #ea580c 0%, #fdba74 25%, #d1d5db 50%, #93c5fd 75%, #2563eb 100%);
}

/* ══════════════════════════════════════════════════════════════════════════
   PAKET C-3 · Datentabellen und Analysefilter in der Hub-Designebene
   ──────────────────────────────────────────────────────────────────────────
   Was hier steht und was NICHT hier steht:

   · NICHT hier: Behaelter, Hairlines, Zahlenausrichtung, Mono-Ziffern,
     Spaltenkopf-Typo, Filterrahmen, Segmentgruppe, Zustandsbloecke. Das
     alles kommt aus hub-layer.css (D-016) und wird konsumiert, nicht
     nachgebaut. Wo unten trotzdem ein `.hub-*` im Selektor auftaucht, ist
     es AHN oder Traeger einer app-lokalen Klasse — nie eine Umlackierung
     der Ebene, und immer aus einem Spezifitaetsgrund, der danebensteht.

   · Hier: die drei Farbaussagen, die der Inhalt traegt und die kein
     Bauteil der Ebene abbildet — Schweregrad einer NPL-Quote, Richtung
     einer Veraenderung, Vorzeichen und Staerke einer Korrelation. Alle
     drei sind aus Tokens der Ebene abgeleitet; unten steht kein einziger
     neuer Rohhexwert.

   Praefix `mk-` (Marktentwicklung), damit keine Klasse dieser Datei je
   mit einem Bauteil der Ebene verwechselt wird.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Abgeleitete Farbwerte ─────────────────────────────────────────────────
   `#app` traegt die Klasse `bks-hub`; die Tokens der Ebene haengen dort.
   Die Rampe wird deshalb genau dort definiert, wo ihre Zutaten liegen.

   WARUM ZWEI RICHTUNGEN AUS ZWEI TOKENS UND KEINE ERFUNDENE RAMPE:
   Eine Korrelation ist vorzeichenbehaftet, die Matrix braucht also zwei
   Rampen, die sich in der Mitte treffen. Jede Richtung ist fuer sich
   sequenziell — ein Farbton, drei Helligkeitsstufen, erzeugt durch
   `color-mix` gegen --white. Es kommt kein Farbton dazu, der nicht schon
   in tokens-data.css steht:
     positiv  --chart-1  #006699  BKS-Blau
     negativ  --chart-4  #c07a2b  Ocker
   Das Paar 1+4 ist nach D-010 zulaessig (es steckt im kanonischen Tripel
   1+2+4). --orange bleibt bewusst aussen vor: der Akzent ist Chrome und
   nie Datenfarbe (tokens-common.css). Die Mitte ist --surface, die
   Ruheflaeche der Ebene, keine erfundene Graustufe.

   Nachgerechnet gegen --ink (#231f20), WCAG-Kontrast der Zellenschrift:
     14 %  13,2 : 1 (Blau)  ·  14,0 : 1 (Ocker)
     34 %   9,6 : 1         ·  11,2 : 1
     62 %   5,8 : 1         ·   7,9 : 1
   Die dunkelste Stufe haelt AA fuer Fliesstext mit Reserve.               */
#app.bks-hub {
    --mk-corr-pos-1: color-mix(in oklab, var(--chart-1) 14%, var(--white));
    --mk-corr-pos-2: color-mix(in oklab, var(--chart-1) 34%, var(--white));
    --mk-corr-pos-3: color-mix(in oklab, var(--chart-1) 62%, var(--white));
    --mk-corr-neg-1: color-mix(in oklab, var(--chart-4) 14%, var(--white));
    --mk-corr-neg-2: color-mix(in oklab, var(--chart-4) 34%, var(--white));
    --mk-corr-neg-3: color-mix(in oklab, var(--chart-4) 62%, var(--white));
}

/* ══ TABELLEN ═════════════════════════════════════════════════════════════ */

/* Zweizeiliger Spaltenkopf: Einheit ueber Kennzahl. Die Ebene fuehrt dafuer
   `.hub-th__sub`, aber ausdruecklich fuer den STICHTAG einer Spalte — Mono,
   gesperrt, als Datum lesbar. Eine Kennzahlbezeichnung als Datum zu setzen
   waere falsch, deshalb eine eigene Zeile in der Textschrift. Alles andere
   (Groesse, Farbe, Abstand) ist von `.hub-th__sub` uebernommen.            */
.mk-th__metric {
    display: block;
    font-size: var(--dens-micro);
    letter-spacing: 0.04em;
    color: var(--grey-500);
    font-weight: 400;
    margin-top: 3px;
    text-transform: none;
}

/* Spaltengruppen (ein Land, eine Kennzahlfamilie) werden durch LUFT
   getrennt, nicht durch Linien und nicht durch Flaechentoene:
   · Vertikallinien verbietet die Ebene (Kopf von table.css).
   · Vier verschieden getoente Gruppenbaender waeren ein kategoriales
     Viererset — das existiert in diesem Register nicht (D-010, Regel 4).
   Spezifitaet (0,2,2) — muss die Polsterkurzschrift aus `.hub-table tbody td`
   (0,1,2) schlagen, sonst bleibt die Gruppe unsichtbar.                    */
.hub-table thead th.mk-colgroup,
.hub-table tbody td.mk-colgroup {
    padding-left: var(--s-6);
}

/* Gruppenzeile eines zweistoeckigen Kopfes. Die STARKE Linie gehoert unter
   die unterste Kopfzeile; die Gruppenzeile darueber traegt nur eine
   Hairline, sonst stehen zwei starke Linien uebereinander. */
.hub-table thead th.mk-thgroup {
    border-bottom: var(--rule);
    text-align: center;
    color: var(--grey-700);
}

/* Periodenspalte der Zeitreihe: Zeilenkopf, aber ein Zeitstempel — Mono,
   damit die Quartale untereinander stehen. (0,2,2) gegen `.hub-table tbody
   th` (0,1,2). */
.hub-table tbody th.mk-period {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Zwei Schaltflaechen im Kartenkopf brauchen eine Fuge; `.hub-card__headaside`
   ist nur ein Platzhalter am rechten Rand. */
.mk-actions { display: flex; gap: var(--s-2); }

/* ── Ampel: Schweregrad einer NPL-Quote ───────────────────────────────────
   Uebersetzt in das Statusvokabular der Ebene (--err/--ok, tokens-common).
   DREI Toene fuer vier Baender, und das ist eine Entscheidung, keine
   Verkuerzung: --warn (#b8762b) haelt gegen Weiss nur 3,71 : 1 und darf
   damit keine Zahl faerben. Das Band ueber 5 % traegt deshalb --err PLUS
   Schriftschnitt, das Band darueber --err allein — Farbe traegt die
   Aussage nie zweimal allein (D-010, Regel 5). Gemeldet ist das als
   Luecke der Ebene, nicht hier geflickt.                                    */
.mk-sev--high { color: var(--err); font-weight: 500; }
.mk-sev--raised { color: var(--err); }
.mk-sev--mid { color: var(--grey-700); }
.mk-sev--low { color: var(--ok); }

/* ── Richtung einer Veraenderung ──────────────────────────────────────────
   Zweitkodierung ist im Text schon da: die Differenz traegt ihr Vorzeichen,
   der Trend seinen Pfeil. Die Farbe verstaerkt nur.                        */
/* Die Differenz steht als ganze ZELLE farbig, nicht als Span darin — und
   `.hub-table tbody td` faerbt jede Zelle auf --grey-700 (0,1,2). Ohne den
   Tabellenkontext im Selektor bliebe die Richtung unsichtbar; genau das war
   im ersten Bilddurchgang zu sehen. */
.hub-table tbody td.mk-delta--good { color: var(--ok); font-weight: 500; }
.hub-table tbody td.mk-delta--bad { color: var(--err); font-weight: 500; }

/* Der Trendpfeil bekommt einen FESTEN Platz, auch wenn er leer ist. Sonst
   ruecken die Zeilen ohne Vorgaenger (die aelteste) um die Pfeilbreite nach
   rechts, und die Zahlenspalte steht nicht mehr — die eine Zusage, die eine
   Hairline-Tabelle geben muss. Im Bilddurchgang an Q4 2014 aufgefallen. */
.mk-trend {
    display: inline-block;
    width: 0.85em;
    margin-left: var(--s-1);
    text-align: left;
    font-size: var(--dens-micro);
}
.mk-trend--good { color: var(--ok); }
.mk-trend--bad { color: var(--err); }

/* ── Korrelationsmatrix ───────────────────────────────────────────────────
   Spezifitaet: die Zeilenhervorhebung der Ebene (`.hub-table tbody
   tr:hover td`) liegt bei (0,2,3) und wuerde eine Heatmap-Zelle beim
   Ueberfahren ausbleichen — genau die Farbe, die hier den Inhalt traegt.
   Die Regeln unten liegen bei (0,3,2) und gewinnen ueber die Klassenzahl. */
.hub-table.mk-corrtable tbody td.mk-corr {
    text-align: center;
    color: var(--ink);
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
}

.hub-table.mk-corrtable tbody td.mk-corr--p1 { background: var(--mk-corr-pos-1); }
.hub-table.mk-corrtable tbody td.mk-corr--p2 { background: var(--mk-corr-pos-2); }
.hub-table.mk-corrtable tbody td.mk-corr--p3 { background: var(--mk-corr-pos-3); }
.hub-table.mk-corrtable tbody td.mk-corr--n1 { background: var(--mk-corr-neg-1); }
.hub-table.mk-corrtable tbody td.mk-corr--n2 { background: var(--mk-corr-neg-2); }
.hub-table.mk-corrtable tbody td.mk-corr--n3 { background: var(--mk-corr-neg-3); }
.hub-table.mk-corrtable tbody td.mk-corr--zero { background: var(--surface); }
.hub-table.mk-corrtable tbody td.mk-corr--none { color: var(--grey-500); }

.mk-corr__r { font-weight: 500; font-size: var(--dens-base); line-height: 1.2; }
/* Die Lag-Zeile liegt AUF der Rampe. --grey-700 haelt gegen die dunkelste
   Stufe nur 2,9 : 1 (Blau 62 %) — fuer 11px zu wenig. --ink haelt dort 5,8 : 1
   und auf jeder helleren Stufe mehr. */
.mk-corr__lag {
    display: block;
    font-size: var(--dens-micro);
    color: var(--ink);
    opacity: 0.72;
    margin-top: 2px;
}

/* Legende der Rampe. Kein Farbfleck ohne Zahl: die Stufengrenzen stehen
   dran, sonst behauptet die Legende eine Skala, die niemand ablesen kann. */
.mk-ramp {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    font-size: var(--dens-micro);
    color: var(--grey-600);
}
.mk-ramp__steps { display: flex; }
.mk-ramp__step {
    width: 26px;
    height: 12px;
    border-top: var(--rule);
    border-bottom: var(--rule);
}
.mk-ramp__step:first-child { border-left: var(--rule); }
.mk-ramp__step:last-child { border-right: var(--rule); }

/* ══ ANALYSE-FILTERLEISTE ═════════════════════════════════════════════════
   Rahmen, Zeilenpolster, Beschriftungstypo, Segmentgruppe, Zustandszeile:
   alles aus filters.css. Hier steht nur, was die Ebene nicht kennt — eine
   Mehrfachauswahl, ein Regler und ein Ereignis-Picker.                     */

/* Zeilen der Leiste trennen sich mit derselben Hairline wie die
   Zustandszeile. (0,2,0), damit die Regel nicht von der Reihenfolge lebt. */
.hub-filters__row.mk-rule-top { border-top: var(--rule); }

.mk-filters__head { align-items: center; }
.mk-filters__head .hub-sechead { margin-bottom: 5px; }
.mk-filters__sum { line-height: 1.5; }
.mk-filters__sum b { color: var(--bks-blue); }

/* Fuenf Spalten auf dem Schreibtisch, zwei auf dem Tablet, eine auf dem
   Telefon. Polster und Umbruch kommen weiter aus `.hub-filters__row`;
   getauscht wird nur die Achse, deshalb (0,2,0). */
.hub-filters__row.mk-filtergrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-5) 22px;
    align-items: start;
}

/* Filterspalte ohne Select/Input — bewusst NICHT `.hub-filter`, weil
   `.hub-filter input` (filters.css) jedes Feld auf Textfeldmasse zieht und
   ein Kontrollkaestchen damit 220px breit waere. Uebernommen ist nur, was
   die Ebene an dieser Klasse selbst regelt: volle Breite unter 900px. */
.mk-filter { min-width: 0; }

/* Eine der fuenf Beschriftungen bricht auf zwei Zeilen ("Makro-Indikatoren
   auswaehlen (mehrere moeglich)") und schob ihre Spalte um eine Zeilenhoehe
   nach unten. Zwei Zeilen sind reserviert, damit alle fuenf Listen auf
   derselben Kante beginnen. */
.mk-filtergrid > .mk-filter > .hub-filter__label { min-height: 2.7em; }

.mk-filter__hint {
    margin: var(--s-2) 0 0;
    font-size: var(--dens-micro);
    color: var(--grey-600);
    line-height: 1.45;
}

.mk-filter__sub {
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: var(--rule);
}

/* Selects der Zeitraumwahl stehen zu zweit nebeneinander; die Grundbreite
   von `.hub-filter select` (190px) ist dafuer zu gross. Gleiche Spezifitaet
   wie dort (0,1,1) — styles.css laedt nach hub-layer.css, also gewinnt
   diese Regel. Nur die Breite, sonst nichts. */
.mk-filter--narrow select { min-width: 104px; }
.mk-range { display: flex; align-items: center; gap: var(--s-2); }
.mk-range__dash { color: var(--grey-500); }

/* ── Mehrfachauswahl als Marken (Laender) ─────────────────────────────────
   Optisch aus `.hub-chip` abgeleitet — dieselben drei Signale im
   Aktivzustand (Rahmen, Flaeche, Schriftschnitt), damit die Leiste nicht
   zwei Auswahlsprachen spricht. Eigene Klasse, weil `aria-pressed` an
   einem <label> nicht zulaessig ist und der Aktivzustand von `.hub-chip`
   genau daran haengt. */
.mk-optbox {
    /* Hoehe an der laengsten Nachbarspalte ausgerichtet, damit die fuenf
       Dimensionen als ein Block lesen und nicht als Treppe. */
    max-height: 248px;
    overflow-y: auto;
    border: var(--rule);
    border-radius: var(--r-sm);
    background: var(--surface);
    padding: var(--s-2);
}

.mk-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }

.mk-tag {
    font-size: var(--dens-table);
    line-height: 1.2;
    padding: 5px var(--s-2);
    border: var(--rule-strong);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--grey-700);
    cursor: pointer;
    white-space: nowrap;
}

.mk-tag:hover { border-color: var(--grey-500); color: var(--ink); }

.mk-tag.is-on {
    border-color: var(--bks-blue);
    background: var(--bks-blue-050);
    color: var(--bks-blue);
    font-weight: 700;
}

/* Das Kontrollkaestchen liegt unter `.hub-sr` — sichtbar ist die Marke,
   bedienbar bleibt das Feld (Tastatur, Screenreader). Der Fokusring ist
   derselbe wie in base.css, nur am Elternteil. */
.mk-tag:focus-within {
    outline: none;
    box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--bks-blue);
}

/* ── Kontrollkaestchen-Listen (Assetklassen, Kennzahlen, Makro, Ereignisse) */
.mk-checks { display: flex; flex-direction: column; gap: 3px; }

.mk-checks--scroll { max-height: 168px; overflow-y: auto; }

.mk-check {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--dens-table);
    line-height: 1.3;
    padding: 5px var(--s-2);
    border: var(--rule);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--grey-700);
    cursor: pointer;
}

.mk-check:hover { background: var(--surface); }

.mk-check.is-on {
    border-color: var(--bks-blue);
    background: var(--bks-blue-050);
    color: var(--ink);
    font-weight: 500;
}

.mk-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--bks-blue);
}

.mk-check__unit { color: var(--grey-500); font-weight: 400; }

/* Ereignis- und Makrofarben sind Legendenwerte: sie zeigen, welche Marke im
   Diagramm zu dieser Zeile gehoert. Als Flaeche der ganzen Zeile waeren sie
   acht konkurrierende Toene in einer Filterleiste; als Plaettchen bleibt die
   Zuordnung erhalten und die Leiste ruhig. */
.mk-swatch {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 1px;
    border: 1px solid rgba(0, 0, 0, 0.18);
}

/* ── Zeitverschiebung ─────────────────────────────────────────────────────
   Der alte Regler trug einen Verlauf Blau→Grau→Orange und behauptete damit
   eine Richtungsfarbe. Die Richtung steht aber im Text darueber ("Makro
   laeuft vor" / "NPL laeuft vor"), und Orange ist in dieser Ebene Chrome,
   keine Datenfarbe. Die Bahn ist deshalb neutral, die Mitte (Lag 0) traegt
   eine Hairline-Marke. */
.mk-lag__head {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}

.mk-lag__val {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--dens-table);
    font-weight: 700;
    color: var(--bks-blue);
}

.mk-lag__hint { font-size: var(--dens-micro); color: var(--grey-500); }

.mk-lag__track {
    position: relative;
    padding: var(--s-1) 0;
}

.mk-lag__track::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--hairline-2);
}

.mk-lag__input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: block;
    width: 100%;
    height: 4px;
    border-radius: var(--r-sm);
    background: var(--hairline);
    outline: none;
}

.mk-lag__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bks-blue);
    border: 2px solid var(--white);
    box-shadow: var(--shadow-1);
    cursor: pointer;
}

.mk-lag__input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bks-blue);
    border: 2px solid var(--white);
    box-shadow: var(--shadow-1);
    cursor: pointer;
}

/* Der Ladebalken der Ebene sitzt in der Zustandszeile und braucht dort
   weder Aussenabstand noch die Vorgabebreite. */
.hub-filters__state .hub-bar-indet { margin-top: 0; width: 120px; }

@media (max-width: 1100px) {
    .hub-filters__row.mk-filtergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .hub-filters__row.mk-filtergrid { grid-template-columns: 1fr; }
    .mk-filter { width: 100%; }
    /* Mit dem Kartenpolster mitziehen, wie es filters.css fuer die eigenen
       Zeilen tut — sonst brechen die Filterlabels aus der Textkante. */
    .hub-table thead th.mk-colgroup,
    .hub-table tbody td.mk-colgroup { padding-left: var(--s-4); }
}