/* =============================================================================
   KONTENLISTE MIT WISCH-GESTE — dieselbe Bedienung wie im TradeGuard.

   ⚠️ AUS EINER TABELLE WURDEN ZEILEN, und das hat einen Grund: Eine Tabellenzeile laesst
   sich nicht sauber verschieben (Zellen bleiben im Raster haengen), und der Wisch ist die
   Geste, die hier gewuenscht ist. Die Spalten entstehen jetzt ueber `flex` mit festen
   Breiten — dieselbe Optik, aber jede Zeile ist EIN Element, das man anfassen kann.

   ⚠️ WARUM EIN WRAPPER: Der Hintergrund („Archiv ➜") muss stehen bleiben, waehrend die
   Zeile darueber wandert. Zwei Ebenen, sonst wandert der Hinweis mit und ist nie zu sehen.
   ============================================================================= */
.k-wrap { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
/* ⚠️ DIE AUSRICHTUNG IST GENAU ANDERSHERUM, ALS MAN ZUERST TIPPT — und ich habe es zuerst
   falsch getippt (Befund Dirk, 15.08.2026: „da ist nur eine Farbe, keiner weiss was das
   bedeutet"). Der Text WAR da, nur unter der Zeile: Wer nach RECHTS zieht, legt die LINKE
   Seite frei — der Hinweis für den Rechtswisch muss also LINKS stehen. Und umgekehrt.
   Genauso macht es der TradeGuard (`.account-swipe-bg-left { justify-content: flex-end }`). */
.k-bg-links, .k-bg-rechts {
  position: absolute; top: 0; bottom: 0; width: 100%; display: flex; align-items: center;
  font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .12s;
  pointer-events: none;
}
.k-bg-links  { right: 0; justify-content: flex-end;   padding-right: 20px;
               background: rgba(0,230,118,.14);  color: var(--green); }
.k-bg-rechts { left: 0;  justify-content: flex-start; padding-left: 20px;
               background: rgba(124,108,245,.16); color: var(--accent-2); }

/* ⚠️ KEINE FARBE OHNE BEDEUTUNG. In der aktiven Liste bewirkt ein Zug nach links nichts —
   dann darf dort auch nichts aufleuchten. Sonst verspricht die Fläche eine Wirkung, die es
   nicht gibt. */
.k-bg-links:empty, .k-bg-rechts:empty { background: none; }

.k-zeile {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; background: var(--card); cursor: pointer;
  transition: transform .16s; user-select: none; touch-action: pan-y;
}
.k-zeile:hover { background: rgba(255,255,255,.02); }
/* ⚠️ DIE FREIE BREITE TEILEN SICH DREI SPALTEN, nicht der Name allein. Vorher hatte nur er
   `flex-grow` — auf einem breiten Schirm zog er sich alles und schob Art, Start und Stand
   an den rechten Rand, waehrend links Leere stand (Befund Dirk mit Bild, 15.08.2026).
   Name, Broker und Art wachsen jetzt gemeinsam, die Zahlenspalten bleiben fest: Zahlen
   nebeneinander liest man nur, wenn sie an derselben Stelle stehen. */
.k-zeile .k-name   { flex: 3 1 170px; min-width: 0; font-weight: 600;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-zeile .k-broker { flex: 2 1 100px; min-width: 0; color: var(--muted);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-zeile .k-art    { flex: 2 1 100px; min-width: 0; }
.k-zeile .k-herk   { flex: 2 1 100px; min-width: 0; }
.k-zeile .k-sp     { flex: 0 0 122px; text-align: right; }
.k-zeile .k-sp-s   { flex: 0 0 72px; text-align: right; }
.k-kopf {
  display: flex; gap: 10px; padding: 0 4px 6px; font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--dim); font-weight: 600;
}
.k-kopf .k-name   { flex: 3 1 170px; min-width: 0; }
.k-kopf .k-broker { flex: 2 1 100px; min-width: 0; }
.k-kopf .k-art    { flex: 2 1 100px; min-width: 0; }
.k-kopf .k-herk   { flex: 2 1 100px; min-width: 0; }
.k-kopf .k-sp     { flex: 0 0 122px; text-align: right; }
.k-kopf .k-sp-s   { flex: 0 0 72px; text-align: right; }

/* Der offene Rest — die zweite Zeile in der Stand-Spalte.
   ⚠️ SIE STEHT UNTER DER ZAHL, NICHT DANEBEN. Die Spalte ist 96 px breit und fest; ein
   Zusatz in derselben Zeile schoebe entweder den Stand aus dem Raster oder wuerde
   abgeschnitten. Und die Farbe ist gedaempft, nicht rot: Es ist ein Hinweis auf etwas
   Undokumentiertes, kein Fehler. Rot ist im Journal der Verlust. */
.k-zeile .k-offen {
  display: block; font-size: 10.5px; font-weight: 500; line-height: 1.3;
  color: var(--gold); margin-top: 1px; white-space: nowrap;
}

/* ⚠️ DIE SELBSTPRUEFUNG DER KURVE — sichtbar nur, wenn etwas nicht stimmt.
   Rot und mit Rahmen: Sie meldet einen Widerspruch zwischen zwei Rechenwegen, und das ist
   kein Hinweis, den man beim Ueberfliegen auslassen darf. */
.k-probe {
  margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 12px; line-height: 1.6;
  background: rgba(255,82,82,.10); border: 1px solid rgba(255,82,82,.34); color: var(--red);
}
.k-probe b { display: block; margin-bottom: 3px; }

/* Der Hinweis auf die Geste steht EINMAL ueber der Liste, nicht in jeder Zeile. */
.k-gestenhinweis { color: var(--dim); font-size: 11.5px; margin: 0 0 8px; }

/* Eval-Simulation: ein Demo-Konto, das im TradeGuard gerade ein Eval spielt.
   Bewusst eine ZWEITE Pille neben der Kontoart und keine andere Farbe fuer „Demo" —
   die Kontoart bleibt, was sie ist. */
.pill.sim {
  margin-left: 6px;
  background: rgba(255, 183, 77, 0.16);
  color: #ffb74d;
  border: 1px solid rgba(255, 183, 77, 0.35);
}