/* =============================================================================
   GEMEINSAMER STIL DES TRADING-JOURNALS

   Entstanden aus dem <style>-Block der Dashboard-Seite — dort stand er zuerst,
   und beim zweiten Blatt haette man ihn kopieren muessen. Jetzt steht er einmal
   hier, damit eine Farbaenderung nicht in elf Dateien nachgezogen werden muss.
   Seiten-Eigenheiten bleiben im jeweiligen <style>-Block der Seite.

   FARBEN — eigenstaendig, aber erkennbar aus derselben Familie wie TradeGuard.
   Gleich bleibt: der dunkle Grund und die Bedeutung von Gruen/Rot (wer taeglich
   zwischen den Fenstern springt, darf nicht umlernen muessen).
   Anders ist der Akzent: TradeGuard ist Tuerkis, das Journal ist Violett.
   Damit sieht man auf einen Blick, in welchem Programm man gerade ist.
   ============================================================================= */
:root {
  --bg-deep:  #070912;
  --bg:       #0c1020;
  --card:     rgba(20, 26, 46, 0.92);
  --card-2:   rgba(26, 33, 56, 0.92);
  /* Dieselbe Farbe DECKEND. Kacheln duerfen leicht durchscheinen — sie liegen auf dem
     Hintergrund. Etwas, das UEBER Inhalt schwebt (eine aufgeklappte Liste, ein Fenster),
     darf es nicht: Dann laeuft der Text darunter durch die Zahlen darauf. */
  --card-fest: #1a2138;
  --border:   rgba(124, 108, 245, 0.18);
  --border-2: rgba(124, 108, 245, 0.10);

  --text:     #e4e7f2;
  --muted:    #6d7b9c;
  --dim:      #4a5578;

  --accent:      #7c6cf5;   /* Violett = das Journal */
  --accent-soft: rgba(124, 108, 245, 0.14);
  --accent-2:    #a78bfa;

  /* ---- Der Farbcode der Regeltreue -------------------------------------------
     Vier Zustände, EINE Festlegung — sie gilt für die Liste im Bearbeiten-Fenster UND
     für die Zeichnung des Ansatzes (Vorgabe Dirk, 21.08.2026: „den Code mit blau benutzen
     für beide"). Zwei Farbcodes für dieselben vier Zustände wären schlimmer als ein
     ungewohnter: Man lernt den einen und liest den anderen falsch.

     ⚠️ „TRAF NICHT ZU" WAR VORHER GRAU und „noch nicht beurteilt" blass — beides gedeckte
     Töne, die man nebeneinander kaum unterscheiden konnte. Das ist genau die Verwechslung,
     die man sich nicht leisten kann: „traf nicht zu" ist eine Aussage über den Trade,
     „noch nicht beurteilt" ist das Fehlen jeder Aussage.

     ⚠️ DAS BLAU IST BEWUSST BLÄSSLICH („kein kräftiges Blau", Vorgabe Dirk). Ein sattes
     Blau stünde neben Grün und Rot wie ein dritter Alarm; „traf nicht zu" ist aber der
     ruhigste der vier Zustände. Es muss sich nur vom Weiß unterscheiden lassen.

     ⚠️ WEISS IST HIER DIE AUFFÄLLIGSTE FARBE, und das ist richtig so: Auf dunklem Grund
     sticht sie heraus, und „noch nichts gesagt" ist der Zustand, den man sehen soll. */
  --urteil-ja:    #00e676;   /* beachtet          — grün wie überall im Haus */
  --urteil-nein:  #ff1744;   /* nicht beachtet    — rot wie überall im Haus */
  --urteil-na:    #7fa6cc;   /* traf nicht zu     — blässliches Blau */
  --urteil-offen: #eef2f8;   /* noch nicht beurteilt — weiß */

  /* „Es gibt etwas Neues" — ORANGE, UND ZWAR IM GANZEN HAUS. Dasselbe Orange umgibt im
     TradeGuard das Thermometer, wenn ein Update bereitliegt. Wer die Bedeutung einmal
     gelernt hat, soll sie nicht für jedes Programm neu lernen müssen. Es steht bewusst
     NEBEN dem Farbcode der Regeltreue: Das hier ist keine Aussage über einen Trade. */
  --neu-da:     #ffa726;
  --neu-da-soft: rgba(255, 167, 38, 0.12);

  --green:      #00e676;    /* identisch zu TradeGuard */
  --green-dim:  rgba(0, 230, 118, 0.12);
  --red:        #ff1744;
  --red-dim:    rgba(255, 23, 68, 0.12);
  --gold:       #ffab00;    /* markiert / noch nicht durchgesehen */
  --gold-dim:   rgba(255, 171, 0, 0.12);
  --robot:      #35c8e8;    /* AIO */
  --robot-dim:  rgba(53, 200, 232, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: radial-gradient(1200px 700px at 20% -10%, #141a33 0%, var(--bg) 45%, var(--bg-deep) 100%);
  color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.45;
}
/* Die Spalte wird NICHT fest gesetzt, sondern folgt der Breite der Seitenleiste (`auto`);
   animiert wird dann `width` an der Leiste selbst.
   Beides ginge — `grid-template-columns` laesst sich in heutigen Browsern ebenfalls animieren.
   Der Weg ueber `width` ist nur der unempfindlichere, weil er eine ganz gewoehnliche
   Laengenangabe animiert statt einer Spaltenliste. */
.app { display: grid; grid-template-columns: auto 1fr; min-height: 100vh; }

/* ---------- Seitenleiste: die fuenf Bereiche aus den Vorlagen ----------

   Sie BLEIBT BEIM SCROLLEN STEHEN (position: sticky). Grund: Die Navigation ist auf
   langen Seiten wie der Auswertung sonst nach dem ersten Scrollen weg, und man muss
   erst wieder hochfahren, um irgendwohin zu kommen. `align-self: start` ist noetig,
   weil ein Grid-Kind sonst auf volle Hoehe gedehnt wird und nichts mehr kleben kann.
   `overflow-y: auto` faengt den Fall ab, dass die Punkteliste einmal laenger wird als
   der Bildschirm hoch ist.

   ZWEI SPALTEN — das ist der Kern des Einklappens:

     |  Symbolspalte  |  Textspalte   |
     |     46 px      |  146 px ... 0 |
       fest, ruehrt      schrumpft
       sich NIE          auf null

   Jede Zeile (Marke, Umschalter, Menuepunkte, Zwischenueberschrift) benutzt dasselbe Raster.
   Damit KANN sich links nichts mehr bewegen: Die Symbolspalte ist fest, und beim Einklappen
   laeuft allein die Textspalte auf null. Der erste Versuch hatte statt dessen an Innenabstaenden
   und Ausrichtung gedreht — dabei sprangen die Symbole, weil jede dieser Groessen die Lage
   mitbestimmt. Mit fester Spalte gibt es die Fehlerquelle gar nicht mehr.

   Voraussetzung dafuer: der seitliche Innenabstand der Leiste ist in beiden Zustaenden GLEICH
   (8 px). Sonst wandert die Symbolspalte als Ganzes.
   Rechnung: 8 + 46 + 146 + 8 = 208 (ausgeklappt), 8 + 46 + 0 + 8 = 62 (eingeklappt). */
.side {
  --sp: 46px;                                   /* Breite der Symbolspalte */
  background: rgba(8, 11, 24, 0.75); border-right: 1px solid var(--border-2); padding: 18px 8px;
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; overflow-x: hidden;
  width: 208px; transition: width .16s ease;
}
/* `minmax(0, 1fr)` statt `1fr`: Ein Rasterkind darf sonst nicht schmaler werden als sein Inhalt,
   und die Textspalte kaeme nie auf null. */
.side .brand, .side .nav a, .side .nav .sep {
  display: grid; grid-template-columns: var(--sp) minmax(0, 1fr); align-items: center;
}
/* Der Text wird beim Schrumpfen der Spalte abgeschnitten statt umgebrochen — sonst wuerde die
   Zeile beim Einklappen kurz zwei- oder dreizeilig und die Leiste zuckt in der Hoehe. */
.side .txt, .side .brand-txt { overflow: hidden; white-space: nowrap; }
/* Die Zeile ist in BEIDEN Zustaenden genau so hoch wie das Symbol (30 px). Erreicht ueber die
   Zeilenhoehen: 15px x 1,2 = 18px fuer den Namen plus 10px x 1,2 = 12px fuer den Untertitel.
   Ohne das waere der Textblock hoeher als das Symbol — und beim Einklappen, wenn der Text
   verschwindet, wuerde die Zeile schrumpfen und ALLES darunter nach oben rutschen.
   `line-height` muss dabei auch am .brand selbst stehen, nicht nur an b und small: Der Name ist
   ein Inline-Element, seine Zeile ist mindestens so hoch wie der „Strut" des umgebenden Kastens
   (14px x 1,45 = 20,3px). Genau das war der gemessene Versatz von 2,3 px an jedem Menuepunkt —
   die Markenzeile war 32,3 statt 30 px hoch, und beim Einklappen sackte alles darunter nach.
   Die Hoehe steht deshalb zusaetzlich FEST: 4px oben + 30px Symbol + 20px unten = 54px.
   Gerechnet statt dem Inhalt ueberlassen, weil die Schriftmetrik sonst noch 0,8 px Rest
   uebrig laesst. */
.brand { padding: 4px 0 20px; text-decoration: none; color: inherit; line-height: 1.2; height: 54px; }
.brand .mark {
  justify-self: center;
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 16px;
  background: linear-gradient(135deg, var(--accent) 0%, #4c3fd0 100%);
  box-shadow: 0 3px 14px rgba(124, 108, 245, 0.45);
}
.brand b { font-size: 15px; letter-spacing: .3px; }
.brand small { display: block; color: var(--dim); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; }
.nav a {
  padding: 9px 0; margin-bottom: 3px;
  border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 13.5px;
}
.nav a:hover { background: rgba(124, 108, 245, 0.07); color: var(--text); }
.nav a.on { background: var(--accent-soft); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.nav a .ic { justify-self: center; opacity: .9; }

/* Die Zwischenueberschrift benutzt dasselbe Raster — und daraus entsteht der Strich-Effekt:
   In der SYMBOLSPALTE liegt ein Strich ueber die volle Spaltenbreite (immer sichtbar).
   In der TEXTSPALTE beginnt ganz links ein kurzer Strich, der nahtlos daran anschliesst, danach
   folgt das Wort. Beim Einklappen laeuft die Textspalte auf null: Wort und kurzer Strich werden
   abgeschnitten, der lange Strich bleibt. Es sieht aus, als wuerde der Strich wachsen und
   schrumpfen — ohne dass sich irgendetwas bewegt. (Idee: Dirk, 08.08.2026) */
.nav .sep { color: var(--dim); font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; padding: 18px 0 7px; }
.nav .sep .sep-l { height: 1px; background: var(--border); }
.nav .sep .sep-r { display: flex; align-items: center; gap: 7px; overflow: hidden; white-space: nowrap; }
.nav .sep .sep-dash { width: 10px; height: 1px; background: var(--border); flex: 0 0 auto; }

/* ---------- Menue ein- und ausklappen ----------

   Eingeklappt bleiben NUR die Symbole stehen. Der Umschalter sitzt unter der Marke und
   ist in beiden Zustaenden an derselben Stelle — ein Knopf, der beim Einklappen wandert,
   ist beim zweiten Klick nicht mehr dort, wo der Finger ihn erwartet.
   Der Zustand haelt ueber alle Blaetter (localStorage in journal.js): ein Menue, das
   beim Seitenwechsel wieder aufspringt, waere beim Durchklicken unbrauchbar. */
/* Der Umschalter sitzt in der SYMBOLSPALTE und bewegt sich nie. Er wird nur gedreht.
   Linker Abstand = (46 − 26) / 2 = 10 px, damit seine Mitte genau auf der Mitte der
   Symbolspalte liegt — dort, wo auch alle Symbole stehen. */
.side-toggle {
  display: block; margin: -12px 0 12px 10px; width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2); color: var(--muted);
  cursor: pointer; font-family: inherit; font-size: 13px; line-height: 1;
  transition: transform .16s ease, background .12s ease, color .12s ease;
}
.side-toggle:hover { background: rgba(124,108,245,.12); color: var(--text); }
html.menue-zu .side-toggle { transform: rotate(180deg); }

/* EINGEKLAPPT: eine einzige Aenderung — die Leiste wird schmaler.
   Sonst nichts. Kein anderer Innenabstand, keine andere Ausrichtung, keine andere Schriftgroesse.
   Die Textspalte laeuft dadurch von selbst auf null, die Symbolspalte bleibt, wo sie ist.
   Genau das war beim ersten Versuch anders — dort wurde an Abstaenden und Ausrichtung gedreht,
   und die Symbole sprangen.

   Merker zur Pruefung: In der eingebetteten Browser-Flaeche zeichnet die Seite keine Bilder,
   solange sie nicht sichtbar ist — laufende Uebergaenge kommen dort NIE voran und halten ihren
   Startwert. Eine Messung direkt nach dem Umschalten zeigt deshalb immer noch den alten Wert und
   sieht aus wie „die Animation funktioniert nicht". Richtig geprueft wird mit
   `element.getAnimations().forEach(a => a.finish())` oder voruebergehend `transition: none`. */
html.menue-zu .side { width: 62px; }

/* ---------- Entwicklermodus: der Knopf ganz unten links ----------

   Er benutzt DASSELBE Raster wie die Menuepunkte (Symbolspalte + Textspalte) und faellt
   deshalb beim Einklappen von selbst richtig zusammen — genau wie oben beschrieben: eine
   einzige Aenderung, die Leiste wird schmaler, sonst nichts.

   `margin-top: auto` schiebt ihn an den unteren Rand; dafuer wird die Leiste zur
   Flex-Spalte. Das aendert an den Kindern nichts, die haben ihr eigenes `display: grid`.

   ⚠️ SICHTBAR ANDERS, WENN AN. Ein Schalter, der eingeschaltet genauso aussieht wie
   ausgeschaltet, laesst einen im Zweifel — und hier haengen daran Funktionen, die Daten
   endgueltig loeschen. Deshalb an: rot umrandet, roter Text, leicht leuchtend. */
.side { display: flex; flex-direction: column; }
/* ⚠️ NICHTS DARF SCHRUMPFEN. In einer Flex-Spalte geben die Kinder nach, wenn der Inhalt
   hoeher wird als die Leiste — die Marke (feste 54 px) und die Menuepunkte waeren bei
   kleinem Fenster ploetzlich flacher als zuvor, wo Blocksatz galt. `flex: 0 0 auto` haelt
   jeden auf seiner eigenen Hoehe; ueberzaehliges wandert wie bisher in den Rollbalken. */
.side > * { flex: 0 0 auto; }
.side-entw {
  display: grid; grid-template-columns: var(--sp) minmax(0, 1fr); align-items: center;
  margin-top: auto; padding: 9px 0; border: 0; background: none; border-radius: 8px;
  color: var(--muted); font-family: inherit; font-size: 13.5px; text-align: left;
  cursor: pointer; transition: background .12s ease, color .12s ease;
}
/* ⚠️ DER EINSTELLUNGS-KNOPF NIMMT DAS `margin-top: auto`, nicht mehr der Entwicklermodus.
   Beide sollen unten stehen; schöbe sich jeder für sich nach unten, klafften sie
   auseinander. So bilden sie einen Block, und der Entwicklermodus bleibt der unterste
   (Vorgabe Dirk: „direkt über dem Dev-Mode"). */
.side-einst { margin-top: auto; }
.side-einst + .side-entw { margin-top: 0; }
.side-entw .ic  { justify-self: center; opacity: .9; }
.side-entw .txt { overflow: hidden; white-space: nowrap; }
.side-entw:hover { background: rgba(124, 108, 245, 0.07); color: var(--text); }
.side-entw.an {
  color: var(--red); background: var(--red-dim);
  box-shadow: inset 2px 0 0 var(--red);
}
.side-entw.an:hover { background: rgba(255, 23, 68, 0.2); color: var(--red); }

/* Die PIN in acht Kaestchen — Bauform und Maße wie im TradeGuard (36 x 42 px, 6 px Luft),
   nur in den Farben dieses Hauses statt im Tuerkis des Guards. Warum acht Kaestchen und
   nicht ein Feld: Man sieht beim Tippen, wie weit man ist, ohne dass eine Ziffer sichtbar
   wird. */
.entw-liste { margin: 0 0 14px; padding-left: 18px; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.entw-pin-reihe { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.entw-pin-titel { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.entw-pin-kaesten { display: flex; gap: 6px; justify-content: center; }
.entw-pin-kaesten input {
  width: 36px; height: 42px; text-align: center;
  font-size: 18px; font-weight: 700; font-family: inherit;
  color: var(--accent-2); background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border-2); border-radius: 8px;
  caret-color: var(--accent-2);
}
.entw-pin-kaesten input:focus { outline: none; border-color: var(--accent); }

/* Beim ERSTEN Zeichnen darf nichts animiert werden.
   Sonst sieht man bei jedem Seitenaufruf, wie das Menue von 208 auf 62 px zusammenfaehrt —
   es klappt ja nicht gerade zu, es WAR schon zu. Die Klasse setzt das Kopfzeilen-Schnipsel
   in jeder Seite, journal.js nimmt sie nach dem ersten Bild wieder weg. */
html.ohne-animation .side,
html.ohne-animation .side-toggle { transition: none !important; }

/* ---------- Kopfzeile ----------

   `min-width: 0` statt `overflow: hidden`.

   Beides verhindert dasselbe: dass der Hauptbereich als Rasterkind ueber seine Spalte
   hinauswaechst, wenn etwas darin breiter ist (breite Tabelle, lange Zeile ohne Umbruch).
   Ein Rasterkind darf naemlich von sich aus nicht schmaler werden als sein Inhalt.

   `overflow: hidden` erledigt das, macht den Hauptbereich dabei aber zum Scroll-Container —
   und ein `position: sticky` klebt IMMER am naechsten scrollenden Vorfahren. Die Kopfzeile
   haette also an einem Kasten geklebt, der selbst nie scrollt: Sie waere einfach
   mitgewandert, ohne Fehlermeldung, ohne sichtbaren Grund. `min-width: 0` loest dieselbe
   Aufgabe, ohne einen Scroll-Container zu erzeugen. */
.main { padding: 18px 22px 40px; min-width: 0; }

/* BLEIBT BEIM SCROLLEN STEHEN. Der Grund ist nicht Bequemlichkeit: In der Kopfzeile steht,
   WELCHE KONTEN gerade ausgewaehlt sind. Scrollt sie weg, sieht man Zahlen ohne zu wissen,
   worauf sie sich beziehen — und eine Auswertung, deren Bezug man raten muss, ist schlimmer
   als gar keine.

   Die negativen Raender ziehen die Leiste ueber den Innenabstand des Hauptbereichs nach
   aussen, damit beim Scrollen nichts seitlich daran vorbeischaut; das Polster kommt als
   eigener Innenabstand zurueck. KEIN `overflow` hier — die Konto-Klappliste ragt aus der
   Leiste heraus und wuerde sonst abgeschnitten. */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -18px -22px 18px; padding: 18px 22px 14px;
  background: rgba(8, 11, 24, 0.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-2);
}
.top h1 { font-size: 20px; font-weight: 600; letter-spacing: .2px; }
.top .sub { color: var(--dim); font-size: 12.5px; }

/* ---------- „Es gibt eine neue Fassung" ----------
   Steht links neben dem Fenstertitel (Vorgabe Dirk, 26.08.2026) und erscheint nur, wenn
   der Server einen anderen Stand ausliefert als den, mit dem dieses Fenster geladen wurde.
   Die Logik dazu steht in `journal.js` unter „ES GIBT EINE NEUE FASSUNG".

   ⚠️ AUFFÄLLIG, ABER KEIN ALARM. Rot hieße im Haus „da ist etwas kaputt"; hier ist nur
   etwas neu. Orange sagt dasselbe wie der Rand um das Thermometer im TradeGuard.

   ⚠️ DER PUNKT ATMET, ER BLINKT NICHT. Ein Blinken zieht den Blick immer wieder von der
   Arbeit weg — und das Journal liegt oft stundenlang offen. */
.top .neu-da {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--neu-da-soft);
  border: 1px solid rgba(255, 167, 38, 0.45);
  color: var(--neu-da);
  /* ⚠️ EINZELN UND NICHT ALS KURZBEFEHL. `font: 600 12.5px/1.2 inherit` ist ungültig —
     `inherit` darf im Kurzbefehl nur ALLEIN stehen. Der Browser wirft dann die ganze Zeile
     weg, und der Knopf stand in Arial da statt in der Hausschrift (gemessen 26.08.2026). */
  font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 167, 38, 0.16);
}
.top .neu-da:hover { background: rgba(255, 167, 38, 0.20); }
.top .neu-da:focus-visible { outline: 2px solid var(--neu-da); outline-offset: 2px; }
.top .neu-da .punkt {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--neu-da); flex: 0 0 auto;
  animation: neu-da-atmen 2.4s ease-in-out infinite;
}
@keyframes neu-da-atmen {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255, 167, 38, 0.55); }
  50%      { opacity: .55; box-shadow: 0 0 0 5px rgba(255, 167, 38, 0); }
}
/* Wer Bewegung abgestellt hat, bekommt hier keine. Der Hinweis lebt von der Farbe, nicht
   von der Bewegung — er bleibt also vollständig verständlich. */
@media (prefers-reduced-motion: reduce) {
  .top .neu-da .punkt { animation: none; }
}
.spacer { flex: 1; }
.pick {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 7px 12px; border-radius: 8px; font-size: 12.5px; display: flex; align-items: center; gap: 8px;
}
.pick .chev { color: var(--dim); font-size: 10px; }
.pick b { font-weight: 600; }

/* ---------- Aufklappbare Auswahl (Konto) ----------

   Die Kopfzeilen-Auswahl ist keine Beschriftung mehr, sondern ein Schalter mit einer
   Klappliste darunter. Ausgewaehlt werden koennen mehrere Konten gleichzeitig und ganze
   Sammelordner. Warum das so gebaut ist, steht in BEDIENUNG.md, Abschnitt „Konto-Auswahl". */
/* FESTE BREITE — sonst springt beim Auswaehlen die halbe Kopfzeile.
   Der Knopf ist so breit wie sein Text, die Auswahlfelder stehen rechtsbuendig: Wird aus
   „kein Konto" ein „Alle Konten (7)", wird der Knopf breiter und schiebt sich nach links —
   und die Klappliste haengt an ihm und wandert mit. Gemessen: 23 px Versatz allein durch
   den Namenswechsel. Mit fester Breite bleibt alles stehen; zu lange Namen werden
   abgeschnitten (siehe .pick-wert). */
.pick.klappt { cursor: pointer; position: relative; user-select: none; width: 258px; }
/* Die Herkunft braucht weniger Platz — aber aus demselben Grund eine FESTE Breite.
   Bemessen am laengsten Fall („AIO + Hand"), nicht am kuerzesten: Bei „auto" waere der
   Knopf bei „Alle" schmal und bei zwei gewaehlten Werten breit, und die Kopfzeile
   zuckte bei jedem Klick. */
.pick.klappt.schmal { width: 178px; }
.pick.klappt.schmal .aus { width: 268px; }
/* Der Zeitraum-Knopf traegt den laengsten Fall: eine eigene Spanne wie „01.07.–15.07.2026".
   Auch hier fest, damit die Kopfzeile beim Umschalten nicht zuckt. Die Liste ist breiter als
   die anderen, weil rechts neben jedem Punkt die Spanne steht, die er gerade bedeutet. */
.pick.klappt.zeit { width: 232px; }
.pick.klappt.zeit .aus { width: 312px; }
/* Rechts stehen Datumsangaben — feste Ziffernbreite, sonst tanzt die Spalte von Zeile zu Zeile. */
.aus-zeile .rechts { font-variant-numeric: tabular-nums; }

/* ---------- Der Zusatz rechts in einer Auswahlzeile ----------

   ⚠️ ER MUSS IN DIE ZEILE PASSEN, notfalls abgeschnitten. Eine umbrechende Zeile ist
   doppelt so hoch, und bei zwanzig Eintraegen ist die Liste nicht mehr zu ueberblicken
   (Befund Dirk mit Bild, 17.08.2026: „MNQ — Micro Na…" rutschte nach unten).

   ⚠️ `display: block` IST HIER KEINE KOSMETIK. `.aus-zeile .rechts` ist eine FLEXZEILE, und
   in einem Flex-Container wirkt `text-overflow: ellipsis` nicht — der Text wuerde stumpf
   abgeschnitten statt mit „…" zu enden. Das kostete beim Bauen eine Runde. */
.aus-zeile .rechts.hinweis {
  display: block; color: var(--dim); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* ---------- Listen mit LANGEM Zusatz ----------

   Die 96 px der rechten Spalte passen fuer eine Zahl oder einen kurzen Anbieternamen
   („Apex") — fuer „Micro Nasdaq 100 E-mini Futures" nicht, davon waeren 47 % zu sehen.

   ⚠️ DAFUER GIBT ES EINEN SCHALTER STATT EINER AUTOMATIK. Ich habe zuerst versucht, die
   Spalte ueber `:has(.hinweis)` und `max-content` von selbst wachsen zu lassen. Das ging
   nicht auf: Bei der Konto-Auswahl im Kopf ist es genau umgekehrt — dort ist der NAME lang
   („BTB 20260812_062841") und der Zusatz kurz. Eine Aufteilung kann nicht beiden dienen,
   also sagt der Aufrufer, welchen Fall er hat (`hinweisBreit: true`). */
.aus.hinweis-breit .aus-zeile { grid-template-columns: 56px minmax(0, 1fr); }
/* ⚠️ KEIN HINWEIS IN DER LISTE -> KEINE ZWEITE SPALTE (20.08.2026).
   `.aus-zeile` reserviert sonst 96 px + 9 px Luecke fuer eine Spalte, die leer bleibt. Bei
   einem breiten Feld faellt das nicht auf; bei einem schmalen bleibt fuer den Text nichts
   uebrig, und `overflow: hidden` schneidet ihn auf NULL — man sieht eine leere Zeile und
   haelt die Liste fuer kaputt. Gefunden am Trennzeichen-Feld (130 px), gilt aber ueberall.
   Die Klasse setzt `malen()` in journal.js, bei jedem Zeichnen neu. */
.aus.ohne-hinweis .aus-zeile { grid-template-columns: minmax(0, 1fr); }
.aus.hinweis-breit .aus-zeile .rechts { display: block; }

/* Der eigene Zeitraum sitzt unter der Liste, abgesetzt durch eine Linie. */
.aus-eigen { border-top: 1px solid var(--border-2); margin-top: 7px; padding-top: 4px; }
.aus-eigen.gewaehlt .aus-titel { color: var(--accent); }
.eigen-zeile { display: flex; align-items: center; gap: 7px; padding: 4px 7px 7px; }
.eigen-zeile .bis { color: var(--dim); font-size: 12px; }
.eigen-zeile .hinw { color: var(--red); font-size: 11.5px; }
/* `color-scheme: dark` ist hier nicht Kosmetik: Ohne die Angabe zeichnet der Browser das
   Kalendersymbol im Datumsfeld dunkel auf dunkel — es ist dann schlicht unsichtbar. */
.fld.dat {
  color-scheme: dark;
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2); border-radius: 7px;
  color: var(--text); font: inherit; font-size: 12px; padding: 5px 7px; flex: 1; min-width: 0;
}
.fld.dat:focus { outline: none; border-color: var(--accent); }
/* ---------- Waehler IN einer Formularzeile ----------
   ⚠️ `.pick.klappt` hat eine FESTE Breite (258 px) — richtig fuer die Kopfzeile, wo sie
   das Zucken beim Umschalten verhindert. In einer Formularzeile ist sie falsch: Dort
   sitzt der Waehler in einer Gitterspalte und war dadurch breiter als die Eingabefelder
   daneben (Befund Dirk, 28.08.2026: „Die Auswahl ist etwas gross im Vergleich zu den
   beiden links davon“).

   Die Polsterung ist zusaetzlich um 1 px angeglichen: `.fld` hat 6/11, `.pick` 7/12 —
   nebeneinander sieht man den Unterschied als zwei verschieden hohe Kaesten. */
.pick.klappt.im-feld { width: 100%; padding: 6px 11px; }
.pick.klappt .pick-wert { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick.klappt:hover { border-color: var(--accent); }
.pick.klappt.offen { border-color: var(--accent); background: var(--card-2); }
.pick.klappt.offen .chev { transform: rotate(180deg); }
.pick .chev { transition: transform .12s ease; display: inline-block; }

/* ⚠️ DIE KLASSE `aus` IST BELEGT — und zwar global und wirkungsvoll: `position: absolute`,
   `display: none`, feste Breite. Wer sie irgendwo als „ausgegraut / ausgeschaltet" verwendet,
   nimmt sein Element aus dem Fluss und macht es 352 px breit. Das ist zweimal passiert: am
   08.08.2026 beim „Heute"-Knopf im Kalender (0 × 0 px, spurlos weg) und am 12.08.2026 beim
   Blätterknopf der Trade-Ansicht (rutschte unter die Kopfzeile). Beide heissen jetzt anders:
   `kal-aus` und `gesperrt`. */
.aus {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 60; width: 352px;
  /* DECKEND, nicht var(--card-2). Die Liste schwebt ueber der Tabelle; mit 8 % Transparenz
     schlug deren Text durch die Trefferzahlen rechts und machte sie unlesbar. */
  background: var(--card-fest); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,.55); padding: 9px; cursor: default;
  max-height: 74vh; overflow-y: auto;
  display: none;
}
.pick.klappt.offen .aus { display: block; }

.aus-suche {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--border-2);
  color: var(--text); padding: 7px 10px; border-radius: 8px; font-size: 12.5px;
  font-family: inherit; margin-bottom: 9px;
}
.aus-suche::placeholder { color: var(--dim); }
.aus-suche:focus { outline: 1px solid var(--accent); border-color: transparent; }

.aus-titel {
  color: var(--dim); font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase;
  font-weight: 600; padding: 8px 8px 5px; display: flex; align-items: center; gap: 7px;
}
.aus-titel .zahl { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 500; }

/* Der Kopf des Archivbereichs ist ein Schalter, also sieht er auch aus wie einer:
   Zeigefinger, Aufhellen beim Zeigen, und ein Pfeil, der sich dreht statt getauscht zu
   werden — dieselbe Bewegung wie beim Menue-Umschalter. */
.aus-titel.archiv-kopf {
  cursor: pointer; border-radius: 7px; user-select: none;
  transition: background .12s ease, color .12s ease;
}
.aus-titel.archiv-kopf:hover { background: rgba(255,255,255,.05); color: var(--muted); }
.aus-titel.archiv-kopf .pfeil {
  display: inline-block; font-size: 10px; line-height: 1;
  transition: transform .16s ease;
}
.aus-titel.archiv-kopf.offen .pfeil { transform: rotate(90deg); }

/* ZWEI Spalten, die rechte FEST BREIT.
   Vorher war sie `auto`, also inhaltsabhaengig — und weil rechts mal „1 gewaehlt", mal nichts
   und mal ein Kontostand steht, sprang die ganze Zeile beim Auswaehlen seitlich hin und her.
   Beim schnellen Klicken war das nicht zu treffen. Feste Breite, rechtsbuendig: nichts wandert.

   Die Kaestchen links sind bewusst WEG (Dirk, 08.08.2026). Sie luden dazu ein, genau auf sie zu
   zielen, obwohl die ganze Zeile klickbar ist. Gewaehlt sieht man jetzt am hinterlegten Grund und
   am Balken links — dieselbe Sprache wie beim aktiven Menuepunkt. */
.aus-zeile {
  display: grid; grid-template-columns: 1fr 96px; gap: 9px; align-items: center;
  padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
}
.aus-zeile.gewaehlt { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.aus-zeile.teilweise { box-shadow: inset 2px 0 0 rgba(124,108,245,.45); }

/* ---- Was unter der Maus liegt, muss man SEHEN ----
   Vorher lag der Ueberfahren-Grund bei 9 % und der Gewaehlt-Grund bei 14 % — und weil
   `.gewaehlt` weiter unten steht, gewann er auch noch. In den Filterlisten sind anfangs ALLE
   Zeilen gewaehlt: Da tat sich beim Ueberfahren also buchstaeblich nichts.

   Deshalb hat jetzt JEDER Zustand seine eigene, deutlich hellere Ueberfahren-Stufe, und
   zusaetzlich springt der Balken links an. Ein Grundton allein ist auf einem ohnehin
   eingefaerbten Grund zu wenig Unterschied. */
.aus-zeile:hover { background: rgba(124,108,245,.18); box-shadow: inset 2px 0 0 rgba(124,108,245,.5); }
.aus-zeile:hover .nm { color: var(--text); }
.aus-zeile.gewaehlt:hover { background: rgba(124,108,245,.30); box-shadow: inset 3px 0 0 var(--accent-2); }
.aus-zeile.taub:hover { background: rgba(255,255,255,.05); box-shadow: inset 2px 0 0 rgba(255,255,255,.14); }
.aus-zeile .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aus-zeile.gewaehlt .nm { color: var(--text); font-weight: 600; }
.aus-zeile .nm small { display: block; color: var(--dim); font-size: 10.5px; font-weight: 400; }
.aus-zeile .rechts {
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  width: 96px; overflow: hidden; white-space: nowrap;
}

/* Umbenennen und Loeschen gibt es NUR an Ordnern, die von Hand gebaut sind — und erst,
   wenn die Maus auf der Zeile steht. Sonst stehen zwei Zeichen herum, die man 99 % der
   Zeit nicht braucht. */
/* ⚠️ DIE WERKZEUGE HABEN EINEN FESTEN PLATZ, sie erscheinen nur darin.

   Vorher waren sie `display: none` und traten beim Zeigen an die Stelle der Zahl, die
   dafuer verschwand. Gedacht war: kein Sprung. Gemessen war: 60 px Unterschied zwischen
   einem Ordner mit Zahl („5 von 5") und einem ohne — der Stift lag mal hier, mal dort, und
   man griff daneben (Befund Dirk mit Bild, 17.08.2026).

   Mit `visibility` bleibt der Platz immer belegt, ob die Werkzeuge zu sehen sind oder
   nicht. Damit kann sich nichts mehr verschieben — und die Zahl darf stehen bleiben, statt
   beim Zeigen zu verschwinden. Zwei Fliegen: Der Sprung ist weg, UND man sieht beim
   Umbenennen noch, wie viele Konten der Ordner gerade beisteuert. */
.aus-zeile .werk { visibility: hidden; cursor: pointer; padding: 1px 5px; border-radius: 5px; }
.aus-zeile:hover .werk { visibility: visible; }
.aus-zeile.fragt .werk { visibility: visible; }
/* ⚠️ UND SIE HAENGEN AM RECHTEN RAND DER ZEILE, nicht im Textfluss.

   Erster Versuch war ein fester Platz im Flex-Kasten rechts. Der hat NICHT gereicht:
   Gemessen lagen Stift und Kreuz je nach Ordner 57 px auseinander. Grund ist die linke
   Spalte — sie waechst mit dem Untertitel mit („4 Konten · 1 im Archiv · von Hand" ist
   laenger als „0 Konten · von Hand"), und damit wandert alles rechts davon.

   Absolut gesetzt kann das nicht mehr passieren: Die Werkzeuge sitzen 8 px vom Rand, egal
   was links steht. `padding-right` haelt ihnen den Platz frei, damit sie nichts ueberdecken.
   Gemessen: beide eigenen Ordner bei 684–731 px, also deckungsgleich. */
.aus-ordner .aus-zeile { position: relative; padding-right: 62px; }
.aus-ordner .aus-zeile .werkzeuge {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: inline-flex; justify-content: flex-end; gap: 6px;
}
.aus-zeile .werk:hover { background: rgba(255,255,255,.09); color: var(--text); }
.aus-zeile .werk.loeschen:hover, .aus-zeile .werk.ja { color: var(--red); }
.aus-zeile .werk.ja { background: var(--red-dim); }
/* NUR an Zeilen MIT Werkzeugen. Die Zahl weicht dem Stift und dem Kreuz, die an ihrer Stelle
   erscheinen — das gilt aber allein fuer die Konto-Liste. In den Filterlisten der Trade-Tabelle
   gibt es keine Werkzeuge, dort verschwand die Trefferzahl beim Ueberfahren einfach so. Genau
   an der Zeile, auf die man zeigt, war sie also nicht mehr da. */
/* Die frueher hier stehende Regel „beim Zeigen weicht die Zahl den Werkzeugen"
   (`.aus-zeile:hover:has(.werk) .anz { display: none }`) ist am 17.08.2026 entfallen — sie
   war der Grund fuer den Versatz, siehe oben bei `.werk`. */
.aus-zeile.inaktiv .nm { color: var(--dim); }

.aus-trenn { height: 1px; background: var(--border-2); margin: 8px 4px; }

.aus-fuss {
  display: flex; align-items: center; gap: 8px; padding: 9px 6px 3px; margin-top: 6px;
  border-top: 1px solid var(--border-2); font-size: 12px; color: var(--muted);
}
.aus-fuss .schnell { color: var(--accent-2); cursor: pointer; }
.aus-fuss .schnell:hover { text-decoration: underline; }

/* ---------- Dialogfenster ----------
   Wird gebraucht, sobald eine Eingabe mehr als eine Zeile ist — beim Anlegen eines
   Sammelordners etwa Name UND Kontoliste. In die Klappliste gequetscht waere das eng
   und man verloere beim Scrollen den Ueberblick. */
/* ⚠️ `grid-template-columns: minmax(0, 1fr)` IST DER GRUND, WARUM `max-width: 100%` AM
   FENSTER ÜBERHAUPT WIRKT. Ohne diese Zeile bestimmt der INHALT die Breite der Rasterspur:
   Ein breites Fenster (`.dlg.gross`, 820 px) macht die Spur 820 px breit — und 100 % davon
   sind wieder 820. Die Begrenzung begrenzt sich damit selbst.

   Gemessen am 21.08.2026 in einem 375-px-Fenster: Das Fenster blieb 820 px breit, stand
   nicht mehr mittig, und der Speichern-Knopf lag bei x = 735 bis 819 — also vollständig
   ausserhalb des 360 px breiten Sichtfelds. `.dlg-grund` ist `position: fixed`, es rollt
   also auch nichts: Der Knopf war schlicht nicht erreichbar. Betroffen war JEDES breite
   Fenster — Konto anlegen, Ein- und Auszahlungen, Gebührensatz, Trade bearbeiten.

   ⚠️ AN BREITEN SCHIRMEN ÄNDERT SICH NICHTS. Nachgemessen bei 1500 und 900 px: weiterhin
   820 px und mittig. Die Spur wird nur nach OBEN begrenzt, nicht verkleinert. */
.dlg-grund {
  position: fixed; inset: 0; background: rgba(4,6,14,.66); z-index: 200;
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 20px;
}
.dlg {
  width: 440px; max-width: 100%; max-height: 84vh; display: flex; flex-direction: column;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.62);
}
.dlg-kopf { padding: 17px 20px 12px; border-bottom: 1px solid var(--border-2); }
/* Der Kopf ist der Griff zum Verschieben. Beim Ziehen darf nichts markiert werden —
   sonst hängt hinterher eine blaue Textauswahl im Titel. */
.dlg-kopf.ziehbar { cursor: grab; user-select: none; }
.dlg.zieht .dlg-kopf.ziehbar { cursor: grabbing; }
/* Während des Ziehens keine Übergänge: Ein weicher Nachlauf auf transform würde das
   Fenster hinter der Maus herschleifen. */
.dlg.zieht { transition: none; }
.dlg-kopf h2 { font-size: 15.5px; font-weight: 600; letter-spacing: .2px; }
.dlg-kopf .unter { color: var(--dim); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.dlg-leib { padding: 14px 14px 6px; overflow-y: auto; }
.dlg-fuss {
  display: flex; align-items: center; gap: 8px; padding: 13px 20px 16px;
  border-top: 1px solid var(--border-2); font-size: 12px; color: var(--muted);
}

/* ---------- Erklaerung an der Maus (Flyover) ----------
   Traegt `data-hilfe` — dann erscheint nach kurzem Verweilen ein Kaestchen neben dem Zeiger.
   `pointer-events: none` ist wichtig: Sonst schoebe sich das Kaestchen unter den Zeiger und
   der Verlassen-Melder des Elements wuerde sofort ausgeloest — es flackerte. */
.flyover {
  position: fixed; z-index: 300; max-width: 290px; padding: 8px 11px; border-radius: 9px;
  /* DECKEND. Auch 3 % Transparenz reichen, damit der Text darunter durch die Erklaerung
     schimmert und beide unleserlich werden — dasselbe Problem wie bei den Klapplisten. */
  background: #0a0e1e; border: 1px solid var(--border); color: var(--text);
  font-size: 12px; line-height: 1.5; box-shadow: 0 10px 30px rgba(0,0,0,.6);
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.flyover.an { opacity: 1; }
.flyover b { color: var(--accent-2); }

/* Eigenes Logo oben rechts — steht bewusst NICHT in der Seitenleiste: dort sitzt die
   Programm-Marke (Journal). Oben rechts ist es Absender, nicht Navigation, und es
   kollidiert nicht mit dem Seitentitel links. */
.logo { height: 36px; width: auto; opacity: .95; margin-left: 6px; }

/* ---------- Karten ---------- */
.card {
  background: var(--card); border: 1px solid var(--border-2); border-radius: 13px; padding: 15px 16px;
  backdrop-filter: blur(6px);
}
.card h3 {
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim);
  font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.card h3 .more { margin-left: auto; color: var(--accent-2); font-size: 10.5px; letter-spacing: .4px; text-transform: none; cursor: pointer; }
/* `.more` heisst „hier geht es weiter" — Akzentfarbe und Zeigefinger versprechen einen
   Klick. Steht rechts oben aber nur eine ANGABE (Anzahl, Umfang), ist das Versprechen
   leer, und man klickt ins Nichts. (Gemeldet von Dirk, 10.08.2026: „warum ist die Zahl
   oben rechts ein Link, wenn ich nichts dadurch erreichen kann?")
   Jede Angabe ohne Ziel bekommt deshalb `nur-info` dazu. */
.card h3 .more.nur-info { color: var(--muted); cursor: default; }

/* ---------- Kennzahl-Kacheln ---------- */
/* ⚠️ DIE SPALTENZAHL KOMMT ALS VARIABLE, NICHT ALS STIL AM ELEMENT — dieselbe Regel wie
   beim Kalender weiter unten, und aus demselben Grund. Drei Seiten hatten hier
   `style="grid-template-columns:repeat(4,1fr)"` stehen, und eine Stilangabe am Element
   schlägt JEDE Medienabfrage: Auf 375 px standen die vier Kacheln weiter in vier Spalten zu
   je 69 px, mit abgeschnittenem Text (nachgemessen 21.08.2026 auf der Analytik). Eine
   Variable schlägt nichts — die Abfragen unten setzen `grid-template-columns` als Ganzes
   und gewinnen damit.
   ⚠️ `minmax(0, 1fr)` statt `1fr`: Eine Kachel mit langem Text darf die Reihe sonst
   breiter machen, als das Fenster ist. */
.kpis { display: grid; grid-template-columns: repeat(var(--kpi-spalten, 5), minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--card); border: 1px solid var(--border-2); border-radius: 13px; padding: 14px 15px; position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); opacity: .55; }
.kpi.good::after { background: var(--green); }
.kpi.bad::after  { background: var(--red); }
.kpi .lbl { color: var(--dim); font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 600; }
.kpi .big { font-size: 25px; font-weight: 650; margin: 7px 0 2px; letter-spacing: -.5px; }
.kpi .note { color: var(--muted); font-size: 11.5px; }
/* Die grosse Zahl trägt ihre Aussage in der Farbe: grün gut, rot schlecht, gold „da liegt
   Arbeit". Vorher stand die Goldfarbe als `style=` im HTML — eine Farbe, die etwas bedeutet,
   gehört in die Stildatei, sonst steht sie beim nächsten Mal woanders wieder anders. */
.kpi .big.gold { color: var(--gold); }
.kpi .big.pos { color: var(--green); }
.kpi .big.neg { color: var(--red); }
.pos { color: var(--green); } .neg { color: var(--red); }

/* ---------- Kapitalkurve mit Fadenkreuz ----------

   Linie, Punkt und Kaestchen liegen als gewoehnliche Elemente UEBER dem SVG, nicht darin.
   Im SVG muesste jede Schrift mitskaliert werden (die viewBox wird ja in der Breite
   gestreckt) — Text wuerde dabei verzerrt. Ausserhalb bleibt er scharf und in derselben
   Groesse wie der Rest der Seite. */
.kurve-flaeche { position: relative; height: 210px; cursor: crosshair; }
.kurve-svg { display: block; width: 100%; height: 100%; }

.kurve-linie {
  position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none;
  border-left: 1px dashed rgba(255,255,255,.45);
  opacity: 0; transition: opacity .1s ease;
}
.kurve-punkt {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: #a78bfa; box-shadow: 0 0 0 3px rgba(124,108,245,.28);
  pointer-events: none; opacity: 0; transition: opacity .1s ease;
}
/* Das Kaestchen haengt an der Maus. `pointer-events: none` ist dabei PFLICHT: Sonst
   liegt es unter dem Zeiger, faengt die Bewegung ab, verschwindet, taucht wieder auf —
   es flackert im Takt der Mausbewegung. */
.kurve-box {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s ease;
  background: rgba(8, 11, 24, .96); border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 10px; min-width: 158px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 12px; z-index: 5;
}
.kurve-linie.an, .kurve-punkt.an, .kurve-box.an { opacity: 1; }
.kurve-box .k-tag { color: var(--dim); font-size: 11px; margin-bottom: 4px; white-space: nowrap; }
.kurve-box .k-zeile { display: flex; align-items: baseline; gap: 12px; }
.kurve-box .k-zeile span { color: var(--muted); }
.kurve-box .k-zeile b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Trennt den Stand (wo bin ich) von den Abstaenden (wieviel Luft habe ich). Zwei
   verschiedene Fragen — ohne Trennstrich liest man vier gleich aussehende Zeilen. */
.kurve-box .k-trenner { height: 1px; background: var(--border); margin: 6px -10px 5px; }

/* --- Die Korrektur in der Logbuch-Tabelle ---
   Sie steht zwischen Trades und darf nicht wie einer aussehen: eigene Grundfarbe, ein
   Streifen links. Wer die Tabelle ueberfliegt, soll sie ueberspringen koennen, ohne sie
   fuer einen Trade mit fehlenden Angaben zu halten. */
.tl-korrektur { cursor: pointer; background: var(--accent-soft); }
.tl-korrektur:hover { background: rgba(124,108,245,.14); }
.tl-korrektur td { border-left: 3px solid var(--accent); }
.tl-korrektur .tl-k-konto { color: var(--muted); margin-left: 10px; }
.tl-korrektur .num { margin-left: 10px; font-variant-numeric: tabular-nums; }
.tl-korrektur .tl-k-notiz { color: var(--dim); margin-left: 10px; font-style: italic; }

.kurve-fuss {
  display: flex; justify-content: space-between; gap: 10px;
  color: var(--dim); font-size: 11px; margin-top: 6px;
}

/* Die Umschalter oben rechts in einer Kopfzeile. Der aktive ist eingefaerbt und
   hinterlegt — ein blosser Farbwechsel ist bei kurzen Woertern nebeneinander zu leise.

   ⚠️ ZWEI NAMEN, EINE BAUART. `.kurve-schalter` heisst so, weil es ihn zuerst nur an der
   Kapitalkurve gab; `.kopf-schalter` ist derselbe Baustein ohne diese Herkunft. Die
   Auswertung schaltet damit ihr Balkendiagramm um (Trade/Tag/Woche/Monat, 14.09.2026).
   Die Regeln ein zweites Mal hinzuschreiben hiesse, dass eine Umschaltung auf der einen
   Seite anders aussieht als auf der anderen, sobald jemand eine der beiden anfasst. */
.kurve-schalter, .kopf-schalter { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.kurve-schalter b, .kopf-schalter b {
  font-weight: 500; font-size: 10.5px; letter-spacing: .4px; text-transform: none;
  color: var(--dim); cursor: pointer; padding: 3px 8px; border-radius: 6px;
  border: 1px solid transparent; transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.kurve-schalter b:hover, .kopf-schalter b:hover { color: var(--text); background: rgba(124,108,245,.10); }
.kurve-schalter b.an, .kopf-schalter b.an { color: var(--text); background: var(--accent-soft); border-color: var(--accent); }
.kurve-schalter i, .kopf-schalter i { color: var(--border-2); font-style: normal; font-size: 9px; }

/* ---------- „Meine Aktivitäten" im Fenster ----------
   Breiter als der normale Dialog: Die Leiste braucht Platz, sonst ist ein Tag zwei
   Pixel schmal und man trifft ihn nicht. */
.dlg.gross { width: 820px; }
.akt-fenster { display: flex; flex-direction: column; gap: 10px; }

/* Quartale — mit der Maus verschiebbar, ohne Pfeiltasten.

   Die weichen Ränder sind kein Schmuck: Sie sagen „hier geht es weiter". Zusammen mit
   dem links absichtlich angeschnittenen Knopf (randAnschneiden in journal.js) ist ohne
   Beschriftung erkennbar, dass die Zeile länger ist als das Fenster. */
.akt-quartale {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.q-spur {
  display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: none; padding: 1px;
  cursor: grab;
}
.q-spur.zieht { cursor: grabbing; }
/* Beim Ziehen darf der Text nicht markiert werden — sonst hängt beim Loslassen eine
   blaue Auswahl in der Leiste. */
.q-spur.zieht, .q-spur.zieht * { user-select: none; }
.q-spur::-webkit-scrollbar { display: none; }
.q-knopf {
  flex: 0 0 auto; background: var(--card); border: 1px solid var(--border);
  color: var(--muted); font: inherit; font-size: 12px; padding: 5px 11px;
  border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.q-knopf:hover { color: var(--text); border-color: var(--accent); }
.q-knopf.an { color: var(--text); background: var(--accent-soft); border-color: var(--accent); }

/* Die Leiste: ein Streifen je Tag, Farbe = Menge. */
.akt-leiste { position: relative; height: 34px; user-select: none; }
.l-tage {
  display: flex; gap: 1px; height: 100%; cursor: crosshair;
  border-radius: 7px; overflow: hidden; background: rgba(255,255,255,.02);
}
.l-tage i { flex: 1 1 0; min-width: 0; }
.akt-leiste.zieht .l-tage { cursor: grabbing; }

/* Das Kästchen zeigt den sichtbaren Ausschnitt. `pointer-events: none`, damit man
   durch es hindurch weiterziehen kann — sonst bliebe der Zeiger daran hängen. */
.l-fenster {
  position: absolute; top: -3px; bottom: -3px; pointer-events: none;
  border: 1.5px solid var(--accent); border-radius: 7px;
  background: rgba(124,108,245,.13); transition: left .08s linear, width .08s linear;
}
.l-schrift {
  position: absolute; left: 50%; top: -19px; transform: translateX(-50%);
  white-space: nowrap; font-size: 10.5px; color: var(--text);
  background: rgba(8,11,24,.92); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px;
}
/* Die genaue Stelle, an der man steht — bewusst in einer Farbe, die sonst nirgends
   vorkommt, damit sie sich nicht mit dem Violett der Auswahl vermischt. */
.l-marke {
  position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px;
  background: #ff4fa3; box-shadow: 0 0 7px rgba(255,79,163,.75);
  pointer-events: none; border-radius: 2px;
}
.akt-skala { display: flex; color: var(--dim); font-size: 10px; margin-top: -4px; }
.akt-skala span { text-align: center; }

.akt-liste {
  max-height: 46vh; overflow-y: auto; padding-right: 6px;
  border-top: 1px solid var(--border-2);
}
/* Der Kopf klebt nur innerhalb SEINES Tages-Abschnitts — deshalb der Wrapper.
   Lägen alle Köpfe im selben Container, bliebe jeder ab seiner Stelle oben stehen
   und sie stapelten sich übereinander. */
.akt-tag { position: relative; }
.akt-tagkopf {
  position: sticky; top: 0; z-index: 1;
  background: var(--card-2); color: var(--dim);
  font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase;
  padding: 8px 0 4px;
}
.akt-leer { color: var(--dim); font-size: 12.5px; padding: 22px 0; text-align: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 2px 7px; border-radius: 20px; font-weight: 600; }
.chip.up   { background: var(--green-dim); color: var(--green); }
.chip.down { background: var(--red-dim);   color: var(--red); }

/* zweigeteilte Kachel (Ø Gewinn / Ø Verlust) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.split div { background: rgba(255,255,255,.025); border-radius: 7px; padding: 6px 8px; }
.split .t { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .8px; }
.split .v { font-size: 13.5px; font-weight: 600; margin-top: 1px; }

/* Ring */
.ring-wrap { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.ring-txt .a { font-size: 20px; font-weight: 650; }
.ring-txt .b { color: var(--muted); font-size: 11.5px; }

/* Long/Short-Balken */
.bars { margin-top: 10px; display: grid; gap: 7px; }
/* Die Wertspalte ist AUTO, nicht 52 px fest: „−53.244 $“ passt dort nicht hinein, brach um
   und quetschte die Spur auf 51 Pixel zusammen. `minmax(0, 1fr)` in der Mitte, damit die Spur
   schrumpfen DARF statt überzulaufen — dieselbe Falle wie bei der Balkenreihe im Logbuch. */
.bar-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 11.5px; }
.bar-row .n { color: var(--muted); }
.track { height: 7px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; }
/* ⚠️ `display: block`. Ein <span> ist von Haus aus inline, und an einem inline-Element
   wirken WEDER Breite NOCH Höhe — der Balken war 0 × 0 Pixel und damit unsichtbar, obwohl
   `width: 50.9%` sauber dranstand. Aufgefallen erst, als die Kachel echte Zahlen bekam:
   Im Entwurf sah die leere Spur wie eine gewollte Linie aus. Die Balken im Vergleichs-Fenster
   funktionierten nur deshalb, weil sie zusätzlich `position: absolute` haben — das macht sie
   nebenbei zu Block-Elementen. */
.fill { display: block; height: 100%; border-radius: 4px; }
.bar-row .v { text-align: right; font-weight: 600; font-size: 12px; white-space: nowrap; }

/* ---------- Raster ---------- */
/* ⚠️ `minmax(0, 1fr)` UND NICHT `1fr`. Ein blosses `fr` darf nicht unter die Inhaltsbreite
   seiner Zelle schrumpfen — hat eine Karte darin etwas Breites (eine Tabelle mit
   Mindestbreiten, ein langes Wort), wächst die Zelle darueber hinaus und schiebt die GANZE
   SEITE waagerecht auf. Gemessen am 20.08.2026 auf der Auswertung: Die Gruppentabellen
   bekamen Mindestbreiten von zusammen 356 px, die Kachel hatte bei 1280 px Fenster nur 296
   — und plötzlich hatte das Dokument einen waagerechten Rollbalken. Mit `minmax(0, 1fr)`
   schrumpft die Zelle wie vorgesehen, und das Breite rollt IN SICH.

   Der Unterschied fällt nur auf, wenn eine Karte etwas Unnachgiebiges enthält; bei allem
   anderen ändert sich nichts. Genau deshalb steht es hier und nicht in einer Seitendatei. */
.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
/* Zwei GLEICHE Hälften — `.grid-2` ist 2:1 und damit etwas anderes. Für zwei Tabellen,
   die dasselbe zeigen (die Ranglisten), wäre eine schmaler als die andere. */
.grid-2g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }


/* ---------------------------------------------------------------------------
   GRUPPENTABELLE — Name links, Zahlen rechts, Kopfzeile darüber.

   ⚠️ DAS HIER IST HAUS-MÖBEL, UND ZWAR AUS SCHADEN. Diese Tabelle hiess bis zum
   20.08.2026 `.mhead`/`.mrow`, und gestylt war sie ausschliesslich in
   `seiten/eigenschaften-tags/seite.css`. Jede andere Seite, die die Namen benutzte, bekam
   `display: block` — die Felder liefen als Fliesstext ineinander („Long683−50.302 $40,7 %"
   auf der Auswertung, „Kriteriumbeurteiltgehalten" in der Analytik). Es sah nach einem
   Layout-Geschmacksproblem aus und war ein fehlendes Bauteil.

   Deshalb steht sie jetzt EINMAL hier, mit eigenen Namen, und die Seiten geben nur noch
   ihre Spalten vor.
   --------------------------------------------------------------------------- */
.gr-kopf, .gr-zeile {
  display: grid;
  /* ⚠️ DIE SPALTEN TEILEN SICH DIE BREITE, sie stehen nicht auf festen Werten (Befund
     Dirk mit Bild, 20.08.2026: „Das hier besser verteilen"). Vorher waren es
     `1fr 62px 96px 60px`: Der Name bekam alles, was übrig blieb — 255 px für das Wort
     „Long" —, und die drei Zahlen drängten sich im rechten Drittel zusammen. Auf einer
     schmalen Kachel wirkte das noch richtig; auf einer breiten klaffte in der Mitte ein
     Loch, das mit der Fensterbreite wächst.

     Der Name bekommt 1,3 Anteile, weil er als einziger länger werden kann („September
     2026", „15–60 min"). Die drei Zahlenspalten sind gleich — dadurch stehen sie in
     gleichen Abständen über die Kachel verteilt und nicht als Block am rechten Rand.

     ⚠️ `minmax(0, ...)` und nicht `1.3fr` allein: Ein blosses `fr` darf nicht unter seine
     Inhaltsbreite schrumpfen — ein langer Monatsname schiöbe die Zahlen sonst aus der
     Kachel heraus, statt sich kürzen zu lassen. */
  /* FÜNF GLEICHE ANTEILE. Der Name brauchte früher mehr, weil er die einzige Spalte war,
     die wachsen kann — nachgemessen ist der breiteste überhaupt vorkommende Eintrag aber
     69 px („Haltedauer" als Überschrift; die Daten selbst höchstens 60). Was er nicht
     braucht, verteilt sich auf die Zahlen.

     ⚠️ DIE MINDESTBREITEN SIND KEIN SCHMUCK. Mit `minmax(0, 1fr)` teilen sich die Spalten
     JEDE Breite — auch eine, in der nichts mehr lesbar ist: Bei einem 1280 px breiten
     Fenster ist die Kachel 296 px breit, jede Spalte also 51 px, und „Jun 2022" (57) wie
     „Richtung" (57) wurden mit drei Pünktchen abgeschnitten. Eine Tabelle, die ihre eigenen
     Überschriften kürzt, ist keine Tabelle mehr. 76 px für den Namen (deckt „Haltedauer"),
     60 für jede Zahl (deckt „−50.302 $"). Passt das nicht mehr, rollt die Tabelle
     waagerecht — sichtbar, statt still zu kürzen. */
  /* ⚠️ DIE SPALTEN KOMMEN VON AUSSEN. Die Auswertung hat fünf (Name + vier Zahlen), die
     Analytik drei (Kriterium + zwei) — dieselbe TABELLE, verschiedene Inhalte. Stünde die
     Vorgabe hier fest, bräuchte jede Seite eine eigene Kopie der ganzen Regel, und beim
     nächsten Umbau würden es zwei Wahrheiten. Die Vorgabe unten ist die der Auswertung. */
  grid-template-columns: var(--gr-spalten, minmax(76px, 1fr) repeat(4, minmax(60px, 1fr)));
  gap: 10px; align-items: center;
}
.gr-kopf {
  color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.gr-zeile { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.gr-zeile:last-child { border-bottom: 0; }
.gr-zeile .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ `tabular-nums`: Ohne feste Ziffernbreite steht die 1 schmaler als die 8, und eine
   Spalte untereinander stehender Beträge franst rechts aus, obwohl sie rechtsbündig ist. */
.gr-kopf .r, .gr-zeile .r { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Lange Gruppentabellen rollen in sich (20.08.2026) ----
   ⚠️ DER GRUND IST DAS RASTER, NICHT DIE LÄNGE. `grid-3` macht seine drei Zellen gleich
   hoch — die längste bestimmt also die Reihe. „Nach Monat" mit 51 Zeilen zwang „Nach
   Session" (vier Zeilen) und „Nach Haltedauer" (vier) auf 1.655 px, von denen rund 1.450
   leer blieben. Aufgefallen ist das erst, als die Tabellen überhaupt ein Raster bekamen:
   vorher liefen ihre Felder als Fliesstext ineinander, und die Kachel war kürzer.

   348 px sind rund zehn Zeilen — genug, dass die Tabelle als Tabelle lesbar bleibt, und
   wenig genug, dass die Reihe nicht von einem einzigen langen Blatt regiert wird. */
/* ⚠️ `scrollbar-gutter: stable` — SONST LEGT SICH DER ROLLBALKEN ÜBER DIE LETZTE
   SPALTE. Befund Dirk mit Bild, 20.08.2026: „Die Scrollbar überdeckt etwas den Text."
   Genau so ist es: Der Balken wird über den Inhalt gezeichnet, und rechts steht die
   Trefferquote — die Prozentzahlen lagen halb darunter.

   `stable` hält den Platz IMMER frei, auch wenn gerade nicht gerollt wird. Das ist hier
   sogar der Punkt: Alle fünf Tabellen der Seite behalten damit dieselbe Innenbreite,
   egal ob eine davon lang genug zum Rollen ist. Reservierte man ihn nur bei Bedarf,
   sprängen die Spalten, sobald ein Zeitraum eine Zeile mehr oder weniger ergibt. */
.gr-liste {
  max-height: 348px;
  overflow-y: auto; overflow-x: auto;
  scrollbar-gutter: stable;
  /* ⚠️ DER FREIGEHALTENE PLATZ ALLEIN REICHT NICHT. `scrollbar-gutter` sorgt dafür,
     dass der Balken den Text nicht mehr ÜBERDECKT — die Zahlen enden danach aber exakt an
     seiner Kante und berühren ihn (Befund Dirk, 20.08.2026: „Das sieht so gequetscht
     aus"). Zwei Pixel Luft dazwischen; die letzte Spalte ist die Trefferquote, und die
     steht rechtsbündig direkt an dieser Kante. */
  padding-right: 2px;
}
/* Die Spaltenüberschriften bleiben beim Rollen stehen — ohne sie weiss man nach drei
   Zeilen nicht mehr, ob die mittlere Zahl das Netto oder die Trefferquote ist.
   DECKEND hinterlegt, sonst scheinen die rollenden Zeilen hindurch. */
.gr-liste .gr-kopf {
  position: sticky; top: 0; z-index: 1;
  background: var(--card-fest);
  /* Ohne dieses Gegenstück blitzt beim Rollen eine Zeile zwischen Kartenrand und Kopfzeile
     durch. */
  margin-top: -2px; padding-top: 2px;
}

/* Fusszeile einer Kachel — stand vorher als Stilangabe im HTML und war damit an jeder
   Stelle einzeln festgeschraubt. */
.karten-fuss { color: var(--muted); font-size: 11.5px; margin-top: 10px; line-height: 1.5; }
.karten-fuss:empty { display: none; }

/* ---- Netto je Handelsstunde (20.08.2026 neu gebaut) ----
   Drei Dinge passten vorher nicht zueinander (Befund Dirk: „Da passt auch nicht viel
   zueinander"), und alle drei waren messbar:
     · Das SVG hatte eine viewBox von 900 Einheiten und wurde ohne
       `preserveAspectRatio="none"` mittig eingepasst — in einer 1.619 px breiten Kachel
       blieben links und rechts je rund 360 px leer.
     · Die fünf Stunden-Beschriftungen lagen in einem `display: block`-Kasten und klebten
       als Fliesstext am linken Rand: „12:00" bei x = 68, der 12-Uhr-Balken bei x = 812.
     · Es gab keine Skala — Werte standen nur im Tooltip. */
.std-flaeche { position: relative; height: 190px; }
/* Füllt die Fläche ohne den Platz der Skala. `display: block` verhindert die drei Pixel
   Grundlinien-Abstand, die ein Inline-Element unter sich lässt. */
.std-svg { display: block; width: 100%; height: 100%; }
/* Die Skala liegt über dem freigehaltenen Rand rechts, nicht im Bild.
   ⚠️ Dasselbe Bauteil wie beim Balkendiagramm darunter (`.bal-skala`) — beide halten
   rechts denselben Streifen frei und setzen ihre Marken nach `top` in Prozent. */
.std-skala, .bal-skala { position: absolute; top: 0; right: 0; bottom: 0; pointer-events: none; }
.std-skala span, .bal-skala span {
  position: absolute; right: 0; transform: translateY(-50%);
  color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* ⚠️ 24 GLEICHE ZELLEN — dieselbe Einteilung wie die 24 Fächer des Bildes. Dadurch
   steht jede Zahl unter ihrem Balken, ohne dass irgendwo eine Position gerechnet wird.
   `minmax(0, 1fr)`, damit eine zweistellige Zahl die Zelle nicht aufblasen kann. */
.std-achse {
  display: grid; grid-template-columns: repeat(24, minmax(0, 1fr));
  margin-top: 5px; color: var(--dim); font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.std-achse span { text-align: center; }
/* Stunden ohne einen einzigen Trade — die Zahl bleibt stehen (die Achse soll vollständig
   sein), aber blasser: Eine leere Stunde ist etwas anderes als eine mit Netto null. */
.std-achse span.ohne { opacity: .38; }

/* ---- Ergebnis je Trade / Tag / Woche / Monat (14.09.2026) ----
   Wunsch Dirk: dasselbe Bild wie der Trade-Verlauf im Logbuch, aber mit der Nulllinie in
   der MITTE — Gewinne nach oben, Verluste nach unten.

   ⚠️ HÖHER ALS DAS STUNDENBILD, und zwar weil die Nulllinie in der Mitte liegt: Von 190 px
   blieben je Richtung 95, und ein Balken von 95 px ist zu kurz, um Grössen noch voneinander
   zu unterscheiden. 260 px geben jeder Seite 130.

   ⚠️ DIE ACHSE IST KEIN GITTER. Beim Stundenbild sind es 24 feste Fächer, hier können es
   über tausend sein (Stufe „Trade") — tausend leere Gitterzellen für zwanzig sichtbare
   Beschriftungen. Stattdessen sitzt jede Beschriftung als eigenes Kästchen an ihrer Stelle
   in Prozent, genau über der Mitte ihres Balkens. Der innere Kasten ist der Bezugspunkt
   dafür: Ohne ihn zählte der Browser den freigehaltenen Skalenrand mit, und alle
   Beschriftungen stünden ein Stück zu weit rechts. */
.bal-flaeche { position: relative; height: 260px; }
.bal-svg { display: block; width: 100%; height: 100%; }
.bal-achse {
  margin-top: 5px; color: var(--dim); font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.bal-achse > div { position: relative; height: 14px; }
.bal-achse span { position: absolute; top: 0; white-space: nowrap; }

/* ---- Wärmebild (20.08.2026 überarbeitet) ---- */

/* ⚠️ `table-layout: fixed` GIBT ALLEN SPALTEN DIESELBE BREITE. Für die zwölf Monate
   ist das genau richtig — ein Wärmebild mit ungleichen Feldern wäre keines. Für die
   Wochentagsspalte war es Verschwendung: „Mo" bekam 124 px, so viel wie „−4.156 $".
   Ein <col> setzt sie fest, ohne das Raster der Monate anzutasten. */
.waerme-tab col.wt-spalte { width: 46px; }

/* ⚠️ BLEIBT BEIM WAAGERECHTEN ROLLEN STEHEN. Auf 375 px ist die Tabelle 652 px breit
   und rollt in sich (Regel weiter oben in journal.css). Ohne `sticky` rollt die
   Wochentagsspalte mit hinaus — bei „Dez" weiß man dann nicht mehr, in welcher Zeile
   man liest. DECKEND hinterlegt, sonst scheinen die Färbungen darunter durch. */
.waerme-tab .wt-kopf {
  position: sticky; left: 0; z-index: 1;
  background: var(--card-fest);
  text-align: left; font-weight: 600; color: var(--muted);
  font-size: 11.5px; white-space: nowrap;
}
.waerme-tab .wt-monat { font-size: 10.5px; }
.waerme-tab tbody td.num { font-size: 11px; font-variant-numeric: tabular-nums; }
/* Zwei Fassungen des Betrags; die knappe wartet auf schmale Geräte (siehe seite.js). */
.waerme-tab td .knapp { display: none; }

/* ---- Was die Farbe bedeutet ---- */
.waerme-fuss {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums;
}
/* Derselbe Verlauf, den die Felder benutzen: kräftiges Rot → nichts → kräftiges Grün.
   Die beiden Zahlen daneben sind der kleinste und der grösste Wert der Tabelle.
   ⚠️ DER VERLAUF SELBST KOMMT AUS `seite.js` — die Null sitzt an ihrer echten Stelle,
   und die hängt an den Daten. Hier steht nur der Rueckfall, falls kein Stil ankommt. */
.waerme-verlauf {
  flex: 0 1 220px; height: 9px; border-radius: 5px;
  background: linear-gradient(to right,
    rgba(255,82,82,.58), rgba(255,82,82,.08), rgba(0,230,118,.08), rgba(0,230,118,.58));
}
.waerme-fuss .hinweis { margin-left: auto; color: var(--dim); }

@media (max-width: 700px) {
  /* Auf einem schmalen Gerät hat ein Feld rund 52 px — der genaue Betrag würde
     abgeschnitten. Getauscht, nicht verkleinert; der genaue Wert steht im Hilfetext. */
  .waerme-tab td .lang  { display: none; }
  .waerme-tab td .knapp { display: inline; }
  .waerme-fuss { flex-wrap: wrap; }
  .waerme-fuss .hinweis { margin-left: 0; flex: 1 0 100%; }
}



/* ---------------------------------------------------------------------------
   LEGENDE UNTER EINER KURVE — Punkte und Zahlen in einer Zeile.

   ⚠️ HAUS-MÖBEL AUS SCHADEN, DER DRITTE FALL DERSELBEN ART. Die Regel stand allein in
   `seiten/konten/seite.css`. Die Auswertung benutzt dieselbe Klasse für die Legende unter
   ihrer Kapitalkurve — und bekam nichts: gemessen am 21.08.2026 dort `display: block`,
   14 px, Textfarbe, statt `flex`, 11,5 px, grau. Zwei Zeilen liefen untereinander statt
   nebeneinander.

   Vorher traf es `.mhead`/`.mrow` (Auswertung und Analytik) und danach `.gr-*`. Es sieht
   jedes Mal nach Geschmack aus und ist jedes Mal ein fehlendes Bauteil: Die Regel existiert,
   nur nicht auf DIESEM Blatt. Gefunden hat es diesmal `pruefen-stile.js`, nicht das Auge.

   `.dot-art` gehört dazu — der farbige Punkt ist Teil der Legende, nicht der Kontenseite.
   --------------------------------------------------------------------------- */
.legend {
  display: flex; gap: 15px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted); margin-top: 9px;
}
.dot-art {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px;
}
/* Der kleine Zusatz hinter einem Legendenwert, der sagt, WAS die Zahl ist — heute nur
   „Gewinn" bei den Kontoarten, deren Linie ohne Startkapital beginnt. Blass und kleiner
   als der Wert: Er erklärt ihn, er steht nicht neben ihm. */
.lg-zusatz { color: var(--dim); font-size: 10px; margin-left: 4px; }

/* Zwischenüberschrift in einer Gruppentabelle — etwa „Einstieg" / „Ausstieg" in der
   Regeltreue. Sie steht ZWISCHEN den Zeilen und ist selbst keine: Die Zeilen sind je ein
   eigenes Raster, deshalb braucht sie keine Spaltenvorgabe. */
.gr-gruppe {
  color: var(--dim); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 600; margin: 11px 0 4px;
}
.gr-gruppe:first-child { margin-top: 2px; }

/* ---------- Aktivitaeten ---------- */
.act { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-2); }
.act:last-child { border-bottom: 0; }
.act .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: var(--accent); }
.act .dot.g { background: var(--green); } .act .dot.r { background: var(--red); } .act .dot.y { background: var(--gold); }
.act .txt { font-size: 12.5px; }
.act .when { color: var(--dim); font-size: 11px; margin-top: 1px; }

/* ---------- Trade-Liste ---------- */
/* Die ganze Zeile ist der Link zum Trade — deshalb <a> statt <div>.
   Der Innenabstand wandert von 0 auf 8 px seitlich und wird durch denselben negativen
   Aussenabstand ausgeglichen: Der markierte Bereich beim Überfahren soll etwas breiter
   sein als der Text, sonst klebt die Markierung an den Buchstaben. */
.tr-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  padding: 8px; margin: 0 -8px;
  border-bottom: 1px solid var(--border-2); align-items: center;
  color: inherit; text-decoration: none; border-radius: 8px;
  transition: background .12s ease;
}
.tr-row:hover { background: rgba(124, 108, 245, 0.09); }
/* Sichtbar auch bei Tastaturbedienung — ein Hover-Effekt allein hilft dort nicht. */
.tr-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tr-row:last-child { border-bottom: 0; }
.tr-row .m { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.tr-row .w { color: var(--dim); font-size: 11px; margin-top: 1px; }
.tr-row .p { font-weight: 650; font-size: 13.5px; text-align: right; }
.tag { font-size: 9.5px; padding: 1.5px 6px; border-radius: 5px; font-weight: 700; letter-spacing: .4px; }
/* ⚠️ HIESS BIS ZUM 28.08.2026 `.tag.aio`. Umbenannt mit der Quelle selbst (Korrektur 52);
   ein Klassenname, der einen abgeschafften Wert traegt, ist beim naechsten Lesen eine
   falsche Faehrte. */
.tag.algo { background: var(--robot-dim); color: var(--robot); }
.tag.hand { background: rgba(255,255,255,.07); color: var(--muted); }
.tag.new  { background: var(--gold-dim); color: var(--gold); }

/* ---------- Handelstag ---------- */
.clock { font-size: 27px; font-weight: 650; letter-spacing: -.5px; }
.session { display: inline-block; margin-top: 3px; font-size: 11px; padding: 2px 9px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
/* Aufteilung der Karte (Vorgabe Dirk, 10.08.2026):

     ┌─────────────────────────┐
     │ HANDELSTAG              │  Titel und Uhr stehen OBEN, nicht mittig —
     │ 11:21:32                │  die Uhr ist die Überschrift der Karte.
     │ [Morgen · noch 38 min]  │
     ├─────────────────────────┤
     │      Sessions-Leiste    │  ← obere Hälfte des Restes
     ├─────────────────────────┤
     │      Weltzeiten         │  ← untere Hälfte
     └─────────────────────────┘

   Die beiden unteren Blöcke teilen sich den freien Platz gleichmäßig (flex: 1) und
   zentrieren ihren Inhalt darin. Vorher hing die Uhr in der Mitte und die Weltzeiten
   klebten am Boden — die Karte sah unten schwer aus. */
.card.handelstag { display: flex; flex-direction: column; }
.card.handelstag h3, .card.handelstag .ht-jetzt { flex: 0 0 auto; }
.card.handelstag .ht-verlauf,
.card.handelstag .world { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; }

.clock { font-variant-numeric: tabular-nums; }

/* Die Balken sind so breit wie ihr Abschnitt lang ist — vier Stunden „Morgen" sollen
   nicht aussehen wie anderthalb Stunden „Abend". Deshalb flex statt fünf gleicher Spalten. */
.strip { display: flex; gap: 3px; margin: 0 0 6px; }
.strip div { height: 7px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.strip div.done { background: var(--accent); opacity: .45; }
.strip div.now  { background: rgba(124,108,245,.22); box-shadow: 0 0 9px rgba(124,108,245,.5); }
/* Der laufende Abschnitt zeigt zusätzlich, wie weit er fortgeschritten ist. Der Streifen
   steckt in JEDEM Balken und ist sonst nur null Pixel breit — so muss im Sekundentakt
   kein Element entstehen oder verschwinden, und die Erklärung an der Maus bleibt stehen. */
.strip div i { display: block; height: 100%; width: 0; border-radius: 4px; }
.strip div.now i { background: var(--accent); }
.strip-lbl { display: flex; gap: 3px; font-size: 10px; color: var(--dim); }
.strip-lbl span { text-align: center; }
.strip-lbl span.an { color: var(--accent-2); font-weight: 600; }

/* So groß wie die Hauptuhr (Vorgabe Dirk). Vier davon nebeneinander sind knapp —
   deshalb `clamp`: In einer breiten Karte stehen sie in voller Größe, in einer schmalen
   schrumpfen sie mit, statt umzubrechen oder überzulaufen. */
.world { position: relative; border-top: 1px solid var(--border-2); padding-top: 12px; }
.world .zeilen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.world .zeilen > div { text-align: center; }

/* Das Zahnrad für die Städte erscheint erst beim Zeigen auf den Bereich. Dauerhaft
   sichtbar wäre es ein zweites Bedienelement neben dem in der Überschrift, und die
   untere Kachelhälfte soll Uhrzeiten zeigen, keine Knöpfe. Dasselbe Muster wie bei
   den Werkzeugen in den Auswahllisten. */
.wu-einstellen {
  position: absolute; top: 8px; right: 0; opacity: 0; cursor: pointer;
  color: var(--dim); font-size: 12px; padding: 1px 5px; border-radius: 6px;
  transition: opacity .12s;
}
.world:hover .wu-einstellen { opacity: 1; }
.wu-einstellen:hover { color: var(--text); background: rgba(255,255,255,.09); }

.wu-liste { max-height: 340px; overflow-y: auto; }
.wu-liste .aus-zeile .rechts { color: var(--muted); }
.world .c { color: var(--dim); font-size: 10px; letter-spacing: .7px; text-transform: uppercase; }
.world .t {
  font-size: clamp(17px, 4.9vw, 27px);
  font-weight: 650; letter-spacing: -.5px; margin-top: 2px; font-variant-numeric: tabular-nums;
}
/* Steht dort schon ein anderer Tag, gehört das dazu — sonst vergleicht man Uhrzeiten
   über die Datumsgrenze hinweg, ohne es zu merken. */
.world .d { color: var(--gold); font-size: 9.5px; margin-top: 1px; }

/* ---------- BAUSTEIN: Uhrzeit wählen ----------
   Sieht aus und bedient sich wie im TradeGuard und in der App. Wer hier etwas ändert,
   ändert es dort mit — sonst driften die drei Oberflächen wieder auseinander. */
.zw { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zw-anzeige { display: flex; align-items: baseline; gap: 2px; }
.zw-teil {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 34px; font-weight: 650; letter-spacing: -1px;
  padding: 2px 8px; border-radius: 9px; font-variant-numeric: tabular-nums;
}
.zw-teil.an { color: var(--text); background: var(--accent-soft); }
.zw-punkt { font-size: 30px; font-weight: 650; color: var(--dim); }
.zw-hinweis { color: var(--dim); font-size: 12px; margin-bottom: 4px; }

.zw-blatt {
  position: relative; width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,.035); cursor: pointer; user-select: none;
  touch-action: none;
}
.zw-zahl {
  position: absolute; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text);
  pointer-events: none;                 /* der Griff liegt auf dem Blatt, nicht auf den Zahlen */
}
.zw-zahl.innen { font-size: 11.5px; color: var(--muted); }
.zw-zahl.sel { color: #fff; font-weight: 650; }
.zw-zeiger {
  position: absolute; left: 50%; bottom: 50%; width: 2px;
  background: var(--accent); transform-origin: 50% 100%; pointer-events: none;
}
.zw-knopf {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent);
}
.zw-mitte {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}

/* Der Name der laufenden Einteilung steht im Knopf selbst. So sagt dieselbe Stelle,
   was gerade gilt UND führt zum Ändern — statt einer Beschriftung „Einteilung", die
   nichts verrät. */
.ht-einstellen .ht-name { color: var(--accent-2); font-weight: 600; }

/* ---------- Einteilung des Handelstages einstellen ---------- */
.ht-einst { display: flex; flex-direction: column; gap: 4px; }
.ht-eigen { margin-top: 8px; border-top: 1px solid var(--border-2); padding-top: 6px; }
.ht-zeile { display: flex; align-items: center; gap: 7px; padding: 3px 7px; }
.ht-zeile.name { padding-bottom: 6px; }
.ht-zeile .fld {
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2); border-radius: 7px;
  color: var(--text); font: inherit; font-size: 12.5px; padding: 5px 8px;
}
.ht-zeile .fld:focus { outline: none; border-color: var(--accent); }
.ht-zeile .fld.nm { flex: 1; min-width: 0; }
/* Die Uhrzeit ist ein KNOPF, kein Textfeld — sie wird über das runde Zifferblatt
   eingegeben wie überall sonst im Haus. Deshalb Zeigefinger statt Schreibmarke. */
.ht-zeile .fld.zeit { width: 74px; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; }
.ht-zeile .fld.zeit:hover:not(:disabled) { border-color: var(--accent); }
/* Der erste Abschnitt beginnt immer um 0 Uhr — sein Feld ist gesperrt, und das soll
   man sehen, statt es vergeblich zu versuchen. */
.ht-zeile .fld.zeit:disabled { opacity: .45; cursor: not-allowed; }
.ht-zeile .ab { color: var(--dim); font-size: 11.5px; }
.ht-zeile .werk { cursor: pointer; color: var(--dim); font-size: 12px; padding: 0 4px; }
.ht-zeile .werk:hover { color: var(--red); }
.ht-hinweis { color: var(--dim); font-size: 11.5px; line-height: 1.5; padding: 8px 7px 2px; }

/* Eine geänderte Vorgabe traegt eine Marke — sonst sieht „Futures" aus wie „Futures",
   und niemand faende die Stelle wieder, an der er etwas verstellt hat. Das Zeichen
   daneben setzt sie zurueck; es ist DAUERHAFT sichtbar und nicht erst beim Zeigen,
   weil es sonst auf dem Tablet gar nicht erreichbar waere. */
.aus-zeile .nm .ht-marke {
  display: inline; margin-left: 6px; padding: 1px 6px; border-radius: 6px;
  background: var(--accent-dim, rgba(124,108,245,.18)); color: var(--accent-2);
  font-size: 10.5px; font-weight: 600;
}
.aus-zeile .werk.zurueck { visibility: visible; color: var(--accent-2); font-size: 14px; }
.aus-zeile .werk.zurueck:hover { color: var(--text); }

/* „+ Abschnitt" ist ein <button>. Ohne diese Zeilen erbt er das Aussehen des Browsers
   und zeigt beim Zeigen eine SCHREIBMARKE statt des Zeigefingers — es sah aus, als
   könnte man hineinschreiben. */
.schnell { color: var(--accent-2); cursor: pointer; }
.schnell:hover { text-decoration: underline; }
.aus-titel .schnell { font-size: 11.5px; }
button.schnell {
  background: transparent; border: 0; font: inherit; font-size: 11.5px;
  padding: 6px 7px; text-align: left;
}
.dlg-fuss .hinweis.warn { color: var(--gold); }

/* ---------- AIO vs. Hand ----------
   Aufteilung ANNÄHERND wie bei der Handelstag-Kachel (Vorgabe Dirk: „in etwa auch so
   verteilen … aber nicht identisch, sondern nur annähernd"):

     ┌─────────────────────────┐
     │ AIO ODER HAND   Umfang  │
     ├─────────────────────────┤
     │  [🤖 AIO]   [✋ Hand]   │  ← obere Hälfte, eine davon gewählt
     ├─────────────────────────┤
     │  Einzelheiten dazu      │  ← untere Hälfte
     └─────────────────────────┘

   Anders als dort: Die obere Hälfte ist hier BEDIENBAR, nicht nur Anzeige — deshalb
   bekommen die beiden Felder Zeigefinger, Hover und eine sichtbare Auswahl. Und die
   Trennlinie sitzt über der unteren Hälfte statt zwischen allen Blöcken; zwei Linien
   in einer so kleinen Karte wirken wie ein Gitter. */
.card.vergleich { display: flex; flex-direction: column; }
.card.vergleich h3 { flex: 0 0 auto; }
.card.vergleich .vg-paar,
.card.vergleich .vg-detail { flex: 1 1 0; }
/* Die beiden Hälften bleiben NEBENEINANDER. `flex-direction: column` von der Karte darf
   hier nicht durchschlagen — sonst stehen AIO und Hand untereinander und vergleichen
   sich nicht mehr, sie stapeln sich nur. */
.card.vergleich .vg-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; }
.card.vergleich .vg-detail {
  display: flex; flex-direction: column; justify-content: center;
  border-top: 1px solid var(--border-2); padding-top: 12px; margin-top: 12px;
}

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; }
.vs > div { border-radius: 9px; padding: 10px 11px; }
.vs .a { background: var(--robot-dim); border: 1px solid rgba(53,200,232,.22); }
.vs .b { background: rgba(255,255,255,.03); border: 1px solid var(--border-2); }
.vs .h { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.vs .n { font-size: 18px; font-weight: 650; margin: 4px 0 1px; }
.vs .s { font-size: 11px; color: var(--muted); }
.vs .n.leer, .wert.leer { color: var(--dim); }

/* Wählbar: Die Hälfte, deren Einzelheiten unten stehen, ist deutlich markiert — sonst
   weiss man beim Umschalten nicht, was man gerade sieht. */
.vg-paar > div { cursor: pointer; transition: border-color .12s, background .12s; }
.vg-paar > div:hover:not(.gesperrt) { border-color: var(--accent); }
.vg-paar > div.an { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft); }
/* Oben abgewählt: sichtbar, aber nicht bedienbar. Ausblenden würde die Frage aufwerfen,
   wo die andere Seite hin ist. */
.vg-paar > div.gesperrt { opacity: .38; cursor: not-allowed; }

.vg-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vg-zeile + .vg-zeile { margin-top: 5px; }
.vg-zeile .lbl { color: var(--muted); font-size: 12px; }
.vg-zeile .wert { font-weight: 650; font-size: 16px; font-variant-numeric: tabular-nums; }
.vg-zeile .wert.klein { font-weight: 600; font-size: 13px; color: var(--text); }

/* Die Mitte des Balkens ist der Tagesschnitt. Ohne diese Marke wäre eine Füllung von
   50 % nur eine halbe Leiste und würde nichts bedeuten. */
/* Der Balken wächst aus der Mitte nach beiden Seiten, deshalb `left` statt nur `width`.
   `overflow: hidden` vom `.track` bleibt: Bei gedeckeltem Ausschlag soll nichts überstehen. */
.vg-balken { position: relative; margin-top: 9px; }
.vg-balken .fill { position: absolute; top: 0; }
/* Die Marke liegt INNERHALB des Balkens (er schneidet ab, was übersteht) und über der
   Füllung — sonst verschwindet sie genau dann, wenn der Tag im Schnitt liegt. */
.vg-balken .mitte {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--text); opacity: .5; z-index: 1;
}
.vg-fuss { color: var(--dim); font-size: 11px; margin-top: 5px; }
.vg-detail.leer .vg-fuss { color: var(--muted); }
.vg-umfang { font-variant-numeric: tabular-nums; }

/* ---------- Kalender ---------- */
/* Die Spaltenzahl kommt als Variable aus dem Programm, nicht als fester Stil am Element:
   Ein `style="grid-template-columns:…"` schlägt jede Medienabfrage, und auf dem Handy
   stünde die Wochenspalte dann weiter daneben, statt darunter zu rutschen.
   Die letzte Spalte ist 108 px breit — bei 92 brach das grössere Monatsergebnis um. */
/* ⚠️ `minmax(0, 1fr)` UND NICHT `1fr` — bei einem Kalender fällt der Unterschied sofort
   auf. Ein blosses `fr` wird mindestens so breit wie sein Inhalt, und der Inhalt ist je
   Spalte ein anderer Betrag: Auf 375 px gemessen (20.08.2026) ergab das fünf UNGLEICHE
   Spalten — 66,7 / 58,6 / 79,0 / 79,0 / 66,7 — zusammen 370 px in einer 278 px breiten
   Karte, weshalb die ganze Seite waagerecht rollte. Ein Kalender, dessen Montag schmaler
   ist als sein Mittwoch, ist kein Gitter mehr. */
.cal { display: grid; grid-template-columns: repeat(var(--kal-spalten, 7), minmax(0, 1fr)) 108px; gap: 5px; }
.cal .hd { color: var(--dim); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; text-align: center; padding-bottom: 4px; font-weight: 600; }
.cal .d { background: rgba(255,255,255,.022); border: 1px solid var(--border-2); border-radius: 8px; padding: 7px 8px; min-height: 60px; position: relative; }
/* ⚠️ DAMIT DIE ZELLE WIRKLICH SCHRUMPFEN DARF. `minmax(0, 1fr)` erlaubt es der SPALTE,
   aber ein zu breiter Betrag darin rägte weiterhin heraus — sichtbar als Zahl, die über
   den Rand der Nachbarzelle läuft. Lieber abgeschnitten als überlappend; wie schmal es
   werden darf, regelt die Medienabfrage weiter unten. */
.cal .d { overflow: hidden; }
.cal .d .num { color: var(--dim); font-size: 10.5px; }
.cal .d .amt { font-size: 12.5px; font-weight: 650; margin-top: 5px; white-space: nowrap; }
/* Normalfall: der genaue Betrag. Die abgekürzte Fassung wartet auf schmale Geräte. */
.cal .d .amt.knapp { display: none; }
.cal .d .cnt { color: var(--dim); font-size: 9.5px; margin-top: 1px; }
.cal .d.win  { background: var(--green-dim); border-color: rgba(0,230,118,.22); }
.cal .d.loss { background: var(--red-dim);   border-color: rgba(255,23,68,.22); }
.cal .d.off  { background: transparent; border-color: transparent; }
.cal .d.today { outline: 1.5px solid var(--accent); outline-offset: -1.5px; }
/* Wochen-Ergebnis rechts UND Wochentag-Ergebnis unten sind dasselbe Kästchen: beide
   summieren eine Richtung des Gitters. Deshalb eine Regel für beide, nicht mehr nur für
   die Spalte rechts (Vorgabe Dirk, 10.08.2026: „genauso kenntlich gemacht"). */
.wk { background: var(--card-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; display: flex; flex-direction: column; justify-content: center; }
.wk .t { color: var(--dim); font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; }
/* `nowrap`: Eine Summe, die zwischen Zahl und Währung umbricht, liest sich einen Moment
   lang wie zwei Zahlen. */
.wk .v { font-size: 13.5px; font-weight: 650; margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk .v.aus { color: var(--dim); }
/* Nur der Rand wird eingefärbt, nicht die Fläche: Die Tageskacheln im Gitter leben von
   ihrem grün/roten Hintergrund — bekämen die Summen ihn auch, verschwämme das Gitter. */
.wk.win  { border-color: rgba(0,230,118,.28); }
.wk.loss { border-color: rgba(255,23,68,.28); }
.wk.leer { opacity: .5; }

/* Die Trennlinie über der Fusszeile ist eine eigene Gitterzeile über die volle Breite —
   die Fusszeile steht im selben Gitter wie die Tage. */
.cal-trenn { grid-column: 1 / -1; height: 1px; background: var(--border-2); margin: 7px 0 3px; }

/* Die Ecke rechts unten ist im Normalfall die wichtigste Zahl der Karte (Dirk) — sie
   bekommt deshalb mehr Gewicht als die Wochentage links davon. */
.wk.monat { background: var(--card); border-color: var(--accent); }
.wk.monat .v { font-size: 18px; letter-spacing: -.4px; }
.wk.monat .t { color: var(--accent-2); }
/* Kein Trade im Umfang: Der Hinweis steht MITTEN in der leeren Fläche, nicht klein
   darunter — eine leere Kurvenfläche liest sich sonst wie ein Ladefehler. */
.kurve-leer {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  color: var(--dim); font-size: 12.5px; pointer-events: none;
}
.kurve-leer.an { display: flex; }

/* ---------- Fadenkreuz im Kalender ----------
   Beim Überfahren leuchtet, was zu der Zelle gehört: über einem Tag Spalte UND Zeile,
   über einem Ergebniskästchen nur dessen Richtung (Vorgabe Dirk, 10.08.2026).

   EIN BAND JE RICHTUNG, nicht ein Rand je Zelle. Der erste Versuch umrandete jede
   einzelne Zelle — das war von der Umrandung für „heute" nicht zu unterscheiden und
   wirkte als Kette von Kästchen statt als eine Markierung. Über einem Tag liegen beide
   Bänder übereinander und ergeben von selbst ein Kreuz.

   Das Band ist ein Gitter-Element und wird über `grid-column`/`grid-row` gesetzt; es
   deckt damit auch die Lücken zwischen den Zellen ab und läuft wirklich durch. Es liegt
   OBEN und ist durchsichtig — die Markierung ist eine Tönung, kein Kasten. `margin: -3px`
   schiebt den Rand knapp neben die Zellen, statt ihren eigenen zu überdecken.

   Kein `transition`: Beim schnellen Überfahren liefe die Tönung sonst hinter der Maus her. */
.cal { position: relative; }
.cal-band {
  position: absolute; pointer-events: none; z-index: 3;
  margin: -3px; border-radius: 11px;
  background: rgba(124,108,245,.10);
  border: 1px solid rgba(124,108,245,.55);
  box-sizing: content-box;      /* die gemessene Grösse ist der INHALT, der Rand kommt aussen dazu */
}

/* Ein Tag mit Trades führt in die Tagesansicht. */
.cal a.d { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.cal a.d:hover { border-color: var(--accent); }

/* „Heute" bleibt die einzige durchgehende Umrandung im Gitter — jetzt, wo das Fadenkreuz
   keine mehr setzt, ist sie wieder eindeutig. */

/* Feiertag: Die CME ist zu, es KANN dort nichts stehen. Ohne Markierung sieht der Tag aus
   wie ein Handelstag, an dem man nichts getan hat — ein Unterschied, der zählt. Schräge
   Streifen statt einer Farbe: Grün und Rot sind im Gitter schon vergeben. */
.cal .d.feiertag {
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.045) 0 6px, transparent 6px 12px);
}
.cal .d .fname {
  color: var(--dim); font-size: 9px; line-height: 1.25; margin-top: 4px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Die Monatspfeile rechts oben sind Knöpfe, keine Beschriftung. */
.kal-nav { display: inline-flex; align-items: center; gap: 10px; }
.kal-nav .kal-zurueck, .kal-nav .kal-vor, .kal-nav .kal-heute { cursor: pointer; }
.kal-nav .kal-zurueck:hover, .kal-nav .kal-vor:hover { color: var(--accent-2); }
.kal-nav b { font-weight: 600; }

/* „Heute" liegt zwischen den Pfeilen — dort, wo man beim Blättern ohnehin hinsieht.
   Im laufenden Monat bleibt der Knopf STEHEN und wird nur blass: Ausgeblendet würden die
   Pfeile daneben bei jedem Monatswechsel seitlich springen. */
.kal-heute {
  border: 1px solid var(--border); border-radius: 7px; padding: 2px 9px;
  background: var(--card-2); color: var(--accent-2); font-weight: 600;
}
.kal-heute:hover { border-color: var(--accent); background: var(--accent-soft); }
/* `kal-aus`, nicht `aus`: `.aus` ist die aufklappende Liste der Kopfzeilen-Auswahlen und
   steht global auf `position: absolute; display: none`. Ein Knopf mit dieser Klasse
   verschwindet spurlos — gemessen 0 × 0 px, ohne dass irgendwo etwas meldet. */
.kal-heute.kal-aus { opacity: .55; cursor: default; color: var(--muted); }
.kal-heute.kal-aus:hover { border-color: var(--border); background: var(--card-2); }

/* Die Kalenderwoche war mit 9,5 px in --dim so leise, dass man sie überlas (Dirk,
   10.08.2026: „ich würde auch gerne die Wochennummer sehen"). Nur im WOCHEN-Kästchen
   angehoben — die Wochentagskürzel in der Fusszeile stehen schon als Spaltenkopf darüber
   und brauchen kein zweites Gewicht. */
.cal .wk:not(.tag):not(.monat) .t {
  color: var(--muted); font-size: 11px; letter-spacing: .3px; font-weight: 600;
}

.month-sum { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border-2); flex-wrap: wrap; }
.month-sum .b { font-size: 21px; font-weight: 650; }
.month-sum .m { color: var(--muted); font-size: 12px; }

.foot-note {
  margin-top: 22px; padding: 13px 15px; border-radius: 11px;
  background: rgba(124,108,245,.05); border: 1px dashed var(--border);
  color: var(--muted); font-size: 12px; line-height: 1.6;
}
.foot-note b { color: var(--accent-2); }

/* =============================================================================
   AB HIER: Bausteine, die erst mit den weiteren Seiten dazugekommen sind.
   ============================================================================= */

/* ---------- Schaltflaechen ---------- */
/* ⚠️ `hidden` MUSS STÄRKER SEIN ALS JEDE `display`-REGEL.
   Der Browser bringt dafür nur `[hidden] { display: none }` mit — und das ist eine Regel
   OHNE Klasse, also schwächer als jedes `.btn { display: inline-flex }`. Ein Knopf mit
   gesetztem `hidden` blieb damit sichtbar (gemessen am 14.08.2026: Speichern und Verwerfen
   standen im Ruhezustand des Tagesjournals weiter da, obwohl das Merkmal gesetzt war).

   Besonders tückisch: Im Programm liest sich `el.hidden === true` völlig richtig — die
   Eigenschaft stimmt ja. Nur sieht man das Element trotzdem. Wer das prüft, muss die
   DARSTELLUNG ansehen (`getComputedStyle`), nicht die Eigenschaft. */
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid var(--border);
  background: var(--card); color: var(--text); font-family: inherit;
}
.btn:hover { background: rgba(124,108,245,.10); }
.btn.primary { background: linear-gradient(135deg, var(--accent) 0%, #5b4bd8 100%); border-color: transparent; color: #fff; box-shadow: 0 3px 14px rgba(124,108,245,.35); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 4px 9px; font-size: 11.5px; }
/* Fuer Knoepfe, die etwas UNWIEDERBRINGLICH entfernen. Bewusst nicht vollflaechig rot: Ein
   knallroter Klotz in der Fusszeile zieht den Blick auf sich und wird dadurch haeufiger
   getroffen, nicht seltener. Umrandet und rot beschriftet ist er eindeutig, draengt sich
   aber nicht auf — erst beim Zeigen wird er kraeftig. */
.btn.gefahr { color: var(--red); border-color: rgba(255, 23, 68, .45); background: transparent; }
.btn.gefahr:hover { background: var(--red-dim); }

/* ---------- Das kleine Loeschkreuz in Listen und Tabellen ----------

   ⚠️ ES MUSS ZU SEHEN SEIN. Vorher stand an vier Stellen ein `×` in `--dim` — auf dem
   dunklen Grund praktisch unsichtbar (Befund Dirk mit Bild, 16.08.2026). Es rot zu faerben
   ist kein Widerspruch zur Zurueckhaltung beim `.btn.gefahr`: Ein Knopf traegt Text und
   faellt schon dadurch auf, ein einzelnes Zeichen von 12 px hat nur die Farbe.

   ⚠️ UEBERNOMMEN AUS TRADEGUARD UND BTB (ausdruecklicher Wunsch Dirk: „einige
   Designelemente kannst Du von dort uebernehmen, da sie das Gefuehl verstaerken, dass alles
   zusammengehoert"). Dort: kein Rahmen, kein Hintergrund, rote Schrift, 1,2 rem. Hier
   dasselbe, plus ein roter Schimmer beim Zeigen — das Journal markiert seine Ziele so. */
.weg-x {
  background: none; border: 0; padding: 0 5px; border-radius: 6px;
  color: var(--red); font-family: inherit; font-size: 19px; line-height: 1;
  cursor: pointer; opacity: .78; transition: opacity .12s ease, background .12s ease;
}
.weg-x:hover { opacity: 1; background: var(--red-dim); }

/* ---------- Zwei Felder, die zusammengehoeren (halber und ganzer Rundlauf) ----------

   Die Beschriftung steht UEBER dem Feld, nicht davor: Nebeneinander braeuchte jedes Paar
   eine dritte Spalte, und die Zeile liefe im Fenster auseinander. */
/* ---------- Ein zuklappbarer Abschnitt in einem Fenster ----------
   Gebraucht fuer die Spielregeln im Konto-Fenster: Bei einem EK-Konto sind sie leer und
   waeren als fuenf Pflichtzeilen mitten in der Maske nur Laerm. Bauform wie der
   Archiv-Kopf in der Konto-Auswahl — derselbe Handgriff soll gleich aussehen. */
.regeln { margin-top: 16px; border-top: 1px solid var(--border-2); padding-top: 4px; }
.regeln-kopf {
  display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  padding: 8px 8px 7px; border-radius: 7px;
  color: var(--dim); font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase;
  font-weight: 600; transition: background .12s ease, color .12s ease;
}
.regeln-kopf:hover { background: rgba(255,255,255,.05); color: var(--muted); }
.regeln-kopf .pfeil { font-size: 10px; line-height: 1; transition: transform .16s ease; }
.regeln-kopf.offen .pfeil { transform: rotate(90deg); }
.regeln-kopf .zahl { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 500; }
.regeln .regeln-leib { display: none; padding: 6px 2px 2px; }
.regeln.offen .regeln-leib { display: block; }

/* Die Klartext-Zeile unter einer Regel („so lese ich diese Zahl"). Sie steht UNTER den
   Feldern und nicht als Hilfetext daneben: Sie aendert sich beim Tippen, und ein Zusatz, der
   sich bewegt, gehoert dorthin, wo man gerade hinsieht. */
.regel-erklaerung {
  margin-top: 6px; color: var(--accent-2); font-size: 11.5px; line-height: 1.5; min-height: 1.4em;
}

.ht-rt { display: flex; gap: 10px; }
.ht-rt label { flex: 1; display: block; min-width: 0; }
.ht-rt label span {
  display: block; color: var(--dim); font-size: 11px; margin-bottom: 3px; line-height: 1.4;
}

/* ---------- Reiter innerhalb einer Seite ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-2); margin-bottom: 14px; flex-wrap: wrap; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted);
  padding: 8px 13px; font-size: 13px; cursor: pointer; font-family: inherit; font-weight: 600;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--accent-2); border-bottom-color: var(--accent); }
.tabpane { display: none; }
.tabpane.on { display: block; }

/* ---------- Tabellen ---------- */
/* `table-layout: fixed` -- sonst ignoriert der Browser die Breiten aus <colgroup>, sobald
   ihm der Inhalt anders gefaellt, und blaeht einzelne Spalten auf. Genau das war im Bild vom
   12.08.2026 zu sehen: handbreite Luecken zwischen Spalten, in denen nie mehr als ein Datum
   stehen wird. Mit `fixed` gilt, was in der Spalten-Liste steht; die einzige Spalte ohne
   Vorgabe (Setup) bekommt den Rest. */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
/* Was doch einmal zu lang ist, wird abgeschnitten statt die Spalte zu sprengen. */
.tbl td, .tbl th { overflow: hidden; text-overflow: ellipsis; }
.tbl th {
  text-align: left; color: var(--dim); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 600; padding: 0 10px 9px; border-bottom: 1px solid var(--border-2); white-space: nowrap;
}
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--border-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: rgba(124,108,245,.05); }
.tbl .r { text-align: right; }
.tbl .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.tbl a.rowlink { color: inherit; text-decoration: none; }
.tbl a.rowlink:hover { color: var(--accent-2); }

/* ---------- Zustands-Pillen ---------- */
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 700; letter-spacing: .3px; }
.pill.ok      { background: var(--green-dim); color: var(--green); }
.pill.bad     { background: var(--red-dim); color: var(--red); }
.pill.warn    { background: var(--gold-dim); color: var(--gold); }
.pill.info    { background: var(--accent-soft); color: var(--accent-2); }
.pill.quiet   { background: rgba(255,255,255,.06); color: var(--muted); }
.pill.robot   { background: var(--robot-dim); color: var(--robot); }

/* ---------- Filterzeile ---------- */
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 13px; }
.fld {
  background: rgba(255,255,255,.03); border: 1px solid var(--border-2); color: var(--text);
  padding: 6px 11px; border-radius: 8px; font-size: 12.5px; font-family: inherit;
}
.fld::placeholder { color: var(--dim); }
.fld:focus { outline: 1px solid var(--accent); border-color: transparent; }

/* ---------- Blaetterleiste ---------- */
.pager { display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin-top: 13px; font-size: 12.5px; }
.pager a, .pager span {
  min-width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px;
  color: var(--muted); text-decoration: none; border: 1px solid transparent; padding: 0 8px;
}
.pager a:hover { background: rgba(124,108,245,.08); color: var(--text); }
.pager .on { background: var(--accent-soft); color: var(--text); border-color: var(--border); font-weight: 600; }

/* ---------- Formularzeilen (Einstellungsseiten) ---------- */
.frm { display: grid; gap: 13px; }
.frm-row { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: start; }
.frm-row > .k { color: var(--muted); font-size: 12.5px; padding-top: 7px; }
.frm-row > .k small { display: block; color: var(--dim); font-size: 11px; margin-top: 2px; line-height: 1.4; }
.frm-row .fld, .frm-row textarea { width: 100%; }
textarea.fld { resize: vertical; min-height: 74px; line-height: 1.5; }

/* ---------- Schalter ---------- */
.sw { width: 38px; height: 21px; border-radius: 20px; background: rgba(255,255,255,.10); position: relative; display: inline-block; cursor: pointer; flex: 0 0 auto; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--muted); transition: .15s; }
.sw.on { background: var(--accent-soft); }
.sw.on::after { left: 20px; background: var(--accent); }

/* ---------- Zwei-Spalten-Seiten (Liste links, Inhalt rechts) ---------- */
.split-page { display: grid; grid-template-columns: 300px 1fr; gap: 12px; align-items: start; }
.listitem {
  display: block; padding: 9px 11px; border-radius: 8px; text-decoration: none; color: var(--muted);
  border: 1px solid transparent; margin-bottom: 3px; font-size: 13px;
}
.listitem:hover { background: rgba(124,108,245,.06); color: var(--text); }
.listitem.on { background: var(--accent-soft); color: var(--text); border-color: var(--border); }
.listitem .s { display: block; color: var(--dim); font-size: 11px; margin-top: 1px; }

/* Handgriffe am rechten Rand einer Listenzeile (Umbenennen, Loeschen).

   ⚠️ ABSOLUT GESETZT, damit `.listitem` ein `block` bleiben kann. Der Name steht als
   `<b>` mitten im Textfluss und der Untertitel als eigener Block darunter — aus dem ein
   Raster oder eine Flexzeile zu machen hiesse, beide neu einzupassen. So bleibt der
   Textfluss unangetastet, und rechts wird nur Platz freigehalten.
   Ohne das rutschte das Zeichen unter den Untertitel, links an den Rand. */
.listitem { position: relative; padding-right: 34px; }
.listitem .stift, .listitem .weg-x {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
}
/* Der Stift ist KEIN Loeschknopf und darf nicht so aussehen: gedeckt, und er zeigt sich
   erst, wenn die Maus auf der Zeile steht — anders als das rote Kreuz, das man suchen
   koennen muss, ohne die Zeile zu treffen. */
.listitem .stift {
  color: var(--dim); font-size: 13px; cursor: pointer; padding: 3px 5px; border-radius: 6px;
  opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.listitem:hover .stift, .listitem.on .stift { opacity: 1; }
.listitem .stift:hover { color: var(--text); background: rgba(255,255,255,.09); }

/* Derselbe Stift, aber frei stehend (neben einem Auswahlfeld statt in einer Listenzeile):
   immer sichtbar, weil es hier keine Zeile gibt, auf die man zeigen könnte. */
.stift.frei {
  display: inline-block; margin-left: 7px; vertical-align: middle;
  color: var(--dim); font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 6px;
  transition: color .12s ease, background .12s ease;
}
.stift.frei:hover { color: var(--text); background: rgba(255,255,255,.09); }

/* Die Notiz am Broker. Zeilenumbrüche des Nutzers bleiben stehen — wer eine Kontonummer
   und darunter einen Ansprechpartner notiert, meint zwei Zeilen. */
.broker-notiz {
  white-space: pre-line; color: var(--muted); font-size: 12.5px; line-height: 1.6;
  background: rgba(255,255,255,.03); border-left: 2px solid var(--border);
  border-radius: 0 8px 8px 0; padding: 9px 12px; margin: -6px 0 15px;
}

/* ---------- Waermebild (Auswertung) ---------- */
.heat { display: grid; gap: 3px; }
.heat .hrow { display: grid; grid-template-columns: 38px repeat(12, 1fr); gap: 3px; align-items: center; }
.heat .hlbl { color: var(--dim); font-size: 10px; text-align: right; padding-right: 3px; }
.heat .cellx { height: 26px; border-radius: 5px; background: rgba(255,255,255,.03); display: grid; place-items: center; font-size: 9.5px; color: var(--text); }

/* ---------- Fortschrittsbalken mit Beschriftung ---------- */
.pbar { display: grid; grid-template-columns: 1fr 56px; gap: 9px; align-items: center; margin-top: 6px; }
.pbar .v { text-align: right; font-size: 12px; font-weight: 600; }

/* ---------- Hinweis auf ein noch nicht gebautes Blatt ---------- */
.soon { color: var(--dim); font-size: 12px; font-style: italic; }

@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* ⚠️ AUCH HIER `minmax(0, 1fr)`. Hier stand `1fr`, und damit galt die Falle von oben
     unvermändert weiter — nur eben erst unterhalb von 1180 px: Auf 375 px Breite blies eine
     356 px breite Tabelle die Karte auf 390 px auf, und das Dokument bekam einen
     waagerechten Rollbalken (gemessen 20.08.2026). Eine einspaltige Zelle schrumpft nicht
     von selbst; sie muss es dürfen. */
  .grid-2, .grid-2g, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .split-page { grid-template-columns: minmax(0, 1fr); }
}

/* Breite Tabellen muessen auf schmalen Fenstern IN SICH scrollen koennen.
   `.main` hat overflow:hidden — ohne diese Regel wird eine 790 px breite Tabelle in einer
   331 px schmalen Karte schlicht abgeschnitten, und die letzten Spalten sind unerreichbar
   (auf 375 px nachgemessen: letzte Spalte endete bei x = 829). Nur unterhalb 900 px, damit
   die Tabellen auf dem Schreibtisch weiter die volle Kartenbreite fuellen. */
@media (max-width: 900px) {
  .tbl { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  /* Auf schmalen Geräten fällt die Wochenspalte weg und rutscht unter die Woche. Die
     Wochentag-Ergebnisse der Fusszeile bleiben aber in ihren Spalten — sie gehören zu
     den Spalten darüber, das ist ihr ganzer Sinn. */
  .cal { grid-template-columns: repeat(var(--kal-spalten, 7), minmax(0, 1fr)); }
  .cal .wk:not(.tag):not(.monat) { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; }
  .cal .wk.monat { grid-column: 1 / -1; }
  .frm-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Trade-Liste — Filterzeile, Marken, sortierbare Spalten.

   Die Filter benutzen dieselben Bausteine wie die Kopfzeile (.pick.klappt + .aus). Ein
   zweites Aussehen fuer dieselbe Sache waere genau das, was „aus einem Guss" verhindern soll.
   --------------------------------------------------------------------------- */

/* Schmaler als die Auswahlfelder in der Kopfzeile: Dort stehen Kontonamen, hier nur „Alle",
   „nur Verlust" oder „3 von 4". Mit der Kopfzeilen-Breite passten die fuenf Filter nicht mehr
   neben das Suchfeld, und „Durchgesehen" rutschte allein in die zweite Zeile.
   FEST bleibt die Breite trotzdem — waechst und schrumpft sie mit dem Wert, wandern beim
   Auswaehlen alle Filter rechts davon zur Seite. */
.tradeliste .pick.klappt.schmal { width: 160px; }

/* Ein gesetzter Filter muss man SEHEN, ohne die Liste aufzuklappen. */
.tradeliste .pick.klappt.aktiv { border-color: var(--accent); background: var(--accent-soft); }
.tradeliste .pick.klappt.aktiv .pick-wert { color: var(--text); font-weight: 600; }

/* Option ohne Treffer: sichtbar, aber sichtlich sinnlos. Ausblenden waere schlechter —
   dann fragt man sich, wo das Produkt hin ist. */
.aus-zeile.taub { opacity: .38; }
.aus-zeile.taub:hover { opacity: .6; }        /* auch eine tote Option zeigt, dass sie gemeint ist */
/* Die Trefferzahl ist der Grund, warum man die Liste ueberhaupt aufklappt — sie war in
   var(--dim) gehalten und damit kaum zu lesen. Jetzt mitlaufend hell, und beim Ueberfahren
   so hell wie der Name daneben. */
.aus-zeile .anz { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.aus-zeile.gewaehlt .anz { color: var(--text); }
.aus-zeile:hover .anz { color: var(--text); }
.aus-zeile.taub .anz { color: var(--dim); font-weight: 500; }

/* ---- Marken der gesetzten Filter ---- */
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.tl-chips.leer { display: none; }
.tl-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
  background: var(--accent-soft); border: 1px solid var(--border); color: var(--text);
  padding: 4px 9px; border-radius: 999px; font-size: 11.5px;
}
.tl-chip:hover { border-color: var(--accent); }
.tl-chip b { color: var(--dim); font-weight: 600; }
.tl-chip:hover b { color: var(--accent-2); }
.tl-chip.frei { background: transparent; color: var(--muted); }

/* ---- Sortierbare Spaltenkoepfe ---- */
.tbl th.sortbar { cursor: pointer; user-select: none; }
.tbl th.sortbar:hover { color: var(--text); }
.tbl th.sort-an { color: var(--text); }
.tbl th.sort-an::after { content: attr(data-pfeil); margin-left: 5px; color: var(--accent-2); }

/* Die ganze Zeile fuehrt in den Trade, nicht nur das Produkt — also auch so aussehen. */
.tl-tabelle tbody tr { cursor: pointer; }
.tl-leer { color: var(--dim); text-align: center; padding: 26px 10px !important; cursor: default; }
.tl-tabelle tbody tr:has(.tl-leer):hover { background: transparent; }

.tl-kopfzahl { color: var(--dim); font-weight: 400; font-size: 12px; margin-left: 7px; }
.tl-summe { margin-right: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-summe b { font-variant-numeric: tabular-nums; }
.pager .tl-summe { min-width: 0; height: auto; padding: 0; }

/* ---- Kette Kurve -> Balken -> Liste ----
   Drei Stufen, drei Markierungen. Sie muessen unterscheidbar sein, sonst weiss man nicht
   mehr, was man gerade zeigt und was man gewaehlt hat. */

/* Aus der Kurve GEWAEHLTER Tag: bleibt stehen, anders als das blosse Ueberfahren. */
.tv-balken.tag-wahl { outline: 1px solid var(--accent-2); outline-offset: 1px; }

/* Der EINE angeklickte Balken. */
.tv-balken.gewaehlt {
  outline: 2px solid var(--gold); outline-offset: 1px; border-radius: 2px;
}

/* Die Zeile, die dazu unten geholt wurde. Kurz aufleuchten und dann ruhig stehen bleiben --
   ein dauerhaft grelles Band waere nach dem dritten Sprung nur noch stoerend. */
.tl-tabelle tbody tr.tl-treffer { background: rgba(255,171,0,.10) !important; }
.tl-tabelle tbody tr.tl-treffer td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.tl-tabelle tbody tr.tl-treffer { animation: tl-aufleuchten 1.4s ease-out 1; }
@keyframes tl-aufleuchten {
  0%   { background: rgba(255,171,0,.34); }
  100% { background: rgba(255,171,0,.10); }
}

.tl-chip.warn { background: var(--gold-dim, rgba(255,171,0,.14)); border-color: rgba(255,171,0,.4); }
.tl-chip.warn b { color: var(--gold); }

/* ---------------------------------------------------------------------------
   Eingabefenster "Neuer Trade".
   --------------------------------------------------------------------------- */
.neu-trade .frm-row { margin-bottom: 12px; }
.neu-trade .paar { display: flex; gap: 8px; }
.neu-trade .paar .fld.zeit { width: 84px; flex: none; }
.neu-trade .fld.zahl { font-variant-numeric: tabular-nums; }

/* Auswahl mit zwei bis vier Moeglichkeiten wird NICHT zur Klappliste. Aufklappen, um unter
   zwei Woertern eines zu waehlen, ist ein Klick zu viel -- und man sieht nicht, was es gibt. */
.wahlreihe { display: flex; gap: 6px; flex-wrap: wrap; }
.wahlreihe .wahl {
  background: rgba(255,255,255,.03); border: 1px solid var(--border-2); color: var(--muted);
  padding: 6px 14px; border-radius: 8px; font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.wahlreihe .wahl:hover { border-color: var(--accent); color: var(--text); }
.wahlreihe .wahl.an {
  background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 600;
}

/* Abgeleitete Angabe unter einem Feld: sagt, womit gerechnet wird. Ein Tickwert, den man
   nicht sieht, ist ein Tickwert, dem man glauben muss. */
.neu-hinweis { color: var(--dim); font-size: 11px; margin-top: 6px; }

select.fld.sel {
  width: 100%; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
                    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px;
}
select.fld.sel option { background: #1a2138; color: var(--text); }

/* ---- Das Ergebnis: gerechnet, nicht eingetippt ----
   Steht bewusst am Fuss und in anderer Farbe als die Eingabefelder. Wer es fuer ein
   weiteres Feld haelt, sucht den Cursor. */
.neu-ergebnis {
  margin-top: 4px; padding: 12px 14px; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid var(--border-2);
}
.neu-ergebnis .titel {
  color: var(--dim); font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase;
  font-weight: 600; margin-bottom: 9px;
}
.neu-ergebnis .werte { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: flex-end; }
.neu-ergebnis .werte > div { display: flex; flex-direction: column; gap: 2px; }
.neu-ergebnis span { color: var(--muted); font-size: 11px; }
.neu-ergebnis b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text); }
.neu-ergebnis .gross b { font-size: 21px; }
.neu-ergebnis .gross span { color: var(--text); }

.btn:disabled { opacity: .4; cursor: not-allowed; }

/* Sekundenfeld in der Uhrzeit: kleiner als Stunde und Minute. Sekunden sind eine Praezisierung,
   keine gleichrangige Angabe -- gleich gross gesetzt wuerde die Anzeige zur Stoppuhr. */
.zw-teil.klein { font-size: .62em; opacity: .85; }

/* Nachtrag-Knopf in einer Knopfreihe: gleiche Form, aber ohne Gewicht. */
.wahlreihe .wahl.neu-instrument { color: var(--accent-2); padding: 6px 11px; font-weight: 600; }

/* Anklickbarer Teil eines Hinweises (Satz merken). */
.neu-hinweis .merken { color: var(--accent-2); cursor: pointer; font-weight: 600; }
.neu-hinweis .merken:hover { text-decoration: underline; }

/* Kein Instrument beim Anbieter: Der Platz bleibt, aber er sagt WARUM er leer ist. */
.wahlreihe .neu-leer { color: var(--dim); font-size: 12px; align-self: center; padding: 6px 2px; }
.neu-trade .k small.anbieter-hin { color: var(--dim); }
.neu-fuss { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-2);
  color: var(--dim); font-size: 11.5px; line-height: 1.55; }
.neu-fuss a { color: var(--accent-2); }

/* ---- Teilausfuehrungen in der Trade-Maske ---- */
.teil-zeile .paar { align-items: center; }
.teil-zeile .k { font-size: 12px; }
.teil-zeile .k small.schnitt-hin { color: var(--gold); font-variant-numeric: tabular-nums; }
.wahlreihe.klein .wahl { padding: 6px 10px; font-size: 11.5px; }
.teil-zeile .teil-lots { width: 74px; flex: none; text-align: center; }
.teil-zeile .teil-zeit { width: 84px; flex: none; }
.teil-zeile .teil-preis { flex: 1; min-width: 0; }
.teil-zeile .teil-weg {
  background: transparent; border: 0; color: var(--dim); cursor: pointer;
  font-size: 13px; padding: 4px 6px; border-radius: 6px; flex: none;
}
.teil-zeile .teil-weg:hover { color: var(--red); background: var(--red-dim); }

/* Der Knopf gehoert zu den anderen beiden, steht aber links -- er beendet nichts, er
   erweitert. Rechts stehen die Entscheidungen. */
.dlg-fuss .teil-neu { margin-right: auto; }
.tbl .mittel { color: var(--gold); font-weight: 600; }

/* Umschalter in der Ecke einer Kennzahl-Kachel. Er sagt, was man SIEHT -- nicht, was ein
   Klick taete. Sonst muss man raten, in welchem der beiden Zustaende man gerade ist. */
.kpi .lbl { display: flex; align-items: center; gap: 8px; }
.kk-schalter {
  margin-left: auto; cursor: pointer; user-select: none;
  color: var(--accent-2); letter-spacing: 0; text-transform: none; font-weight: 600;
  font-size: 10.5px; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--border-2); background: rgba(255,255,255,.03);
}
.kk-schalter:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---- Fenster "Spalten" ---- */
.sp-wahl { display: flex; flex-direction: column; gap: 3px; }
.sp-zeile {
  display: grid; grid-template-columns: 18px 26px 1fr auto; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; font-size: 12.5px; color: var(--muted);
  border: 1px solid transparent;
}
.sp-zeile.an { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); color: var(--text); }
.sp-zeile:hover { border-color: var(--border); }
.sp-haken { cursor: pointer; text-align: center; color: var(--accent-2); font-weight: 700; }
.sp-zeile:not(.an) .sp-haken::before { content: "\2013"; color: var(--dim); }
.sp-pfeile { display: flex; gap: 3px; }
.sp-pfeile button {
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2); color: var(--muted);
  width: 26px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 11px; line-height: 1;
}
.sp-pfeile button:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.sp-pfeile button:disabled { opacity: .3; cursor: default; }
.sp-fuss {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-2);
  color: var(--dim); font-size: 11.5px;
}
.sp-fuss .sp-zurueck { color: var(--accent-2); cursor: pointer; }
.sp-fuss .sp-zurueck:hover { text-decoration: underline; }

/* Der Schraubenschluessel neben den beiden Knoepfen der Filterzeile. */
.tl-spalten { padding: 6px 10px; font-size: 13px; line-height: 1; }

/* Der Griff zum Ziehen. Ohne ihn probiert niemand aus, dass die Zeile beweglich ist. Die
   Pfeile daneben bleiben: Ziehen ist fuer weite Wege, Pfeile fuer den letzten Platz. */
.sp-griff { cursor: grab; color: var(--dim); text-align: center; user-select: none; font-size: 14px; }
.sp-zeile:hover .sp-griff { color: var(--accent-2); }
.sp-zeile.zieht { opacity: .45; }
.sp-zeile.zieht .sp-griff { cursor: grabbing; }


/* ---------------------------------------------------------------------------
   Die Anmeldung: ein runder Knopf mit den Anfangsbuchstaben, wie im Browser.

   Ein Auswahlfeld mit Beschriftung sah aus wie ein weiterer Filter. Das hier
   sieht aus, wonach man sucht, wenn man wissen will, als wer man angemeldet ist.
   --------------------------------------------------------------------------- */
.benutzer { position: relative; }
.bn-kreis {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--accent-soft); color: var(--text);
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .5px;
  display: grid; place-items: center;
}
.bn-kreis:hover { border-color: var(--accent); background: rgba(124,108,245,.26); }
.benutzer.offen .bn-kreis { border-color: var(--accent); background: rgba(124,108,245,.30); }

.bn-menue {
  display: none; position: absolute; top: calc(100% + 9px); right: 0; z-index: 60; width: 268px;
  background: var(--card-fest); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,.55); padding: 12px; cursor: default; text-align: left;
}
.benutzer.offen .bn-menue { display: block; }

.bn-kopf { display: flex; align-items: center; gap: 11px; padding-bottom: 11px;
  border-bottom: 1px solid var(--border-2); }
.bn-gross {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--accent-soft); border: 1px solid var(--border); color: var(--text);
  font-size: 14px; font-weight: 700; display: grid; place-items: center;
}
.bn-wer b { display: block; font-size: 13.5px; }
.bn-wer small { color: var(--dim); font-size: 11.5px; }

.bn-titel { color: var(--dim); font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase;
  font-weight: 600; padding: 11px 2px 6px; }
.bn-zeile {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 9px;
  width: 100%; text-align: left; padding: 7px 8px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--muted); font-family: inherit;
  font-size: 12.5px;
}
.bn-zeile:hover { background: rgba(124,108,245,.12); color: var(--text); }
.bn-zeile.an { background: var(--accent-soft); color: var(--text); cursor: default; }
.bn-mini {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.06);
  display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--muted);
}
.bn-zeile.an .bn-mini { background: var(--accent); color: #fff; }
.bn-nm small { display: block; color: var(--dim); font-size: 10.5px; }
.bn-haken { color: var(--accent-2); font-weight: 700; }

/* Trennt die angemeldeten KONTEN von dem, was man mit ihnen tun kann. Ohne den Strich
   liest sich „Alle abmelden" wie ein weiteres Konto (Mehrfachanmeldung, 13.08.2026). */
.bn-strich { height: 1px; background: var(--border-2); margin: 6px 2px; }

/* Woher die Daten kommen. Steht bewusst hier und nicht versteckt: Ohne Datenbank
   faellt das Journal STILL auf die erzeugten Beispiele zurueck, und ein stiller
   Rueckfall ist die Sorte Fehler, die man erst drei Rechner spaeter bemerkt. */
.bn-quelle {
  margin-top: 11px; padding: 8px 10px; border-radius: 8px; font-size: 11.5px;
  border: 1px solid var(--border-2);
}
.bn-quelle.gut  { background: var(--green-dim); color: var(--muted); }
.bn-quelle.gut b  { color: var(--green); }
.bn-quelle.warn { background: var(--gold-dim); color: var(--muted); }
.bn-quelle.warn b { color: var(--gold); }

/* Die drei Regeln, die hier fuer native `<select>` standen, sind am 13.08.2026 ersatzlos
   entfallen: Das Journal hat keine mehr. Sie hatten Systemfarben nachgebaut, die CSS nur
   halb erreicht -- zweimal war der gewaehlte Eintrag dadurch unlesbar. Die Haus-Auswahl
   (`window.journalAuswahl`) ist ein `<div>` und braucht nichts davon. */

/* ---- Aufklappliste der Haus-Auswahl (window.journalAuswahl) ----
   Sie sitzt IN Fenstern und Tabellen, nicht frei ueber der Seite. Deshalb folgt sie der
   Breite ihres Feldes statt der festen 352 px des globalen `.aus` -- sonst ragt sie aus dem
   Fenster heraus und erzeugt einen waagerechten Rollbalken. */
.pick.klappt .aus.aus-eigen {
  width: auto;
  min-width: 100%;
  max-width: min(340px, 92vw);
  max-height: 46vh;
}
/* Ausgehaengt am Seitenkoerper: Dann entscheidet nicht mehr `.pick.offen` ueber die
   Sichtbarkeit -- die Liste haengt ja nicht mehr im Feld. Sie zeigt sich selbst. */
body > .aus.aus-eigen { display: block; z-index: 4000; }
.pick.klappt .aus.aus-eigen .aus-zeile { display: flex; align-items: center; gap: 8px; }

/* Rollbalken im Schema des Hauses. Vorher waren es die hellen des Betriebssystems -- auf
   dunklem Grund ein heller Streifen quer durchs Bild (Befund Dirk, 13.08.2026). */
.dlg-leib, .aus, .aus-liste, .dlg { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.dlg-leib::-webkit-scrollbar, .aus::-webkit-scrollbar, .aus-liste::-webkit-scrollbar { width: 9px; height: 9px; }
.dlg-leib::-webkit-scrollbar-track, .aus::-webkit-scrollbar-track,
.aus-liste::-webkit-scrollbar-track { background: transparent; }
.dlg-leib::-webkit-scrollbar-thumb, .aus::-webkit-scrollbar-thumb,
.aus-liste::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
.dlg-leib::-webkit-scrollbar-thumb:hover, .aus::-webkit-scrollbar-thumb:hover,
.aus-liste::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ⚠️ DAS PFEILCHEN MUSS MAN SEHEN. Es erbte `--dim` bei 10 px -- im Kopfbereich neben einer
   breiten Beschriftung reicht das, in einem Formularfeld nicht: Dirk hat es zweimal fuer
   fehlend gehalten und angenommen, das Feld liesse sich gar nicht aufklappen (13.08.2026).
   Gemessen war es da: 8 x 15 px, Farbe rgb(74,85,120) auf dunklem Grund.

   Ein Bedienhinweis, den man suchen muss, ist keiner. Deshalb hier groesser, heller und mit
   etwas Luft davor -- und nur an der Haus-Auswahl, nicht an den Kopfzeilen-Filtern. */
.pick.auswahl-eigen { justify-content: space-between; }
.pick.auswahl-eigen .chev {
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  padding-left: 6px;
  flex: 0 0 auto;
}
.pick.auswahl-eigen:hover .chev { color: var(--accent-2); }
.pick.auswahl-eigen.offen .chev { color: var(--accent-2); }

/* ---- Anmeldeschirm ----
   Deckt alles ab. Bewusst kein Fenster ueber dem Journal: Solange nicht feststeht, wer da
   ist, gibt es nichts zu sehen -- ein halb sichtbares Journal im Hintergrund wuerde nur
   Daten zeigen, die man noch gar nicht sehen darf. */
.anmeldung-grund {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center;
  background: var(--bg, #0c1020);
}
.anmeldung {
  width: min(420px, 92vw); background: var(--card-fest); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px 26px 22px; box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.an-kopf { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.an-mark { font-size: 26px; }
.an-kopf b { display: block; font-size: 15px; }
.an-kopf small { color: var(--dim); font-size: 11px; }
.anmeldung h2 { font-size: 17px; margin: 0 0 6px; }
.an-hinweis { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin: 0 0 14px; }
.anmeldung label { display: block; margin-bottom: 11px; color: var(--dim);
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.anmeldung label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.anmeldung label .fld, .anmeldung label .pick { width: 100%; margin-top: 4px; }
.an-fehler { display: none; color: var(--red); font-size: 12.5px; margin: 2px 0 10px; }
.an-los { width: 100%; justify-content: center; margin-top: 4px; }
.an-wechsel { color: var(--dim); font-size: 11.5px; margin-top: 12px; text-align: center; line-height: 1.5; }
.an-wechsel a { color: var(--accent-2); text-decoration: none; }

/* ---- Kennwort sichtbar machen ----
   ⚠️ DIE NATIVE ANZEIGE WIRD ABGESCHALTET. Edge und Chrome setzen von sich aus ein Auge in
   das Feld; es hat die Farben des Betriebssystems, auf dunklem Grund kaum sichtbar, und es
   laesst sich nicht einfaerben (Befund Dirk mit Bild, 13.08.2026). Also weg damit und ein
   eigener Knopf daneben, der sich ans Schema haelt. */
input[type="password"]::-ms-reveal,
input[type="password"]::-webkit-credentials-auto-fill-button { display: none; }

.pw-feld { position: relative; }
.pw-feld .fld { padding-right: 38px; }
.pw-auge {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 4px 6px;
  color: var(--muted); font-size: 14px; line-height: 1;
}
.pw-auge:hover { color: var(--accent-2); }

/* ---- Häkchen ----
   Das erste im Journal (Teilen-Schalter, 14.08.2026). `accent-color` färbt das native
   Kästchen ein, statt es nachzubauen: Ein nachgebautes Häkchen verliert Tastaturbedienung
   und Vorlesbarkeit, und beides wieder anzuflicken kostet mehr, als es einbringt.

   ⚠️ `.hk.aus` ist nicht dasselbe wie `disabled`, auch wenn es gleich aussieht: `disabled`
   heißt „geht gerade nicht", `.hk.aus` heißt „es gibt nichts zum Mitgeben". Der Text daneben
   sagt, was fehlt — ein graues Kästchen ohne Grund lässt einen sonst suchen. */
.hk { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
      font-size: 12.5px; color: var(--text); line-height: 1.5; }
.hk input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.hk .neben { color: var(--dim); font-size: 11.5px; }
.hk.aus { cursor: default; color: var(--dim); }
.hk.aus input { cursor: default; }

/* ---- Anhangliste ----
   ⚠️ GEHÖRT HIERHER, NICHT ZU EINER SEITE. Sie stand zuerst in `seiten/journale/seite.css`,
   weil sie dort gebraucht wurde. Als die Anhänge auch an den Trade kamen, war die Klasse
   plötzlich auf zwei Seiten in Gebrauch — aber nur eine lud die Datei. Wer die Trade-Seite
   direkt aufrief, sah eine Liste ohne Aussehen; wer über „Journale" hineinkam, sah sie
   richtig, weil die fremde CSS noch im Dokument hing. Merksatz: Das Aussehen eines
   Haus-Bausteins gehört ins Haus-CSS — sonst hängt es davon ab, woher man kommt. */
.att { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.att a {
  display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 8px; font-size: 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border-2); color: var(--muted); text-decoration: none;
}
.att a:hover { color: var(--text); border-color: var(--border); }

/* ---------- Ein-/Ausblenden-Leiste unter einem Chart ----------
   Kommt aus dem Trade-Blatt (MAE/MFE, Durchschnitt, Auf-/Abbau) und wird seit dem
   15.08.2026 auch auf der Seite "Konten" fuer die Kontoarten benutzt. Deshalb steht sie
   hier und nicht mehr in einer Seiten-CSS: Dieselbe Handlung soll ueberall gleich
   aussehen und sich gleich anfuehlen. */
.linien-wahl { display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.linien-wahl .lw-titel { color: var(--dim); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; margin-right: 3px; }
.linien-wahl button {
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2); color: var(--dim);
  border-radius: 6px; padding: 2px 9px; font-size: 10.5px; font-weight: 600; cursor: pointer;
}
.linien-wahl button:hover { border-color: var(--accent); color: var(--text); }
.linien-wahl button.an { background: rgba(124,108,245,.26); border-color: var(--accent); color: var(--text); }

/* ---------- Farbwähler (Haus-Baustein, Vorlage: AIO) ----------------------------------
   Aufbau wie im AIO: Feld fuer Saettigung und Helligkeit, Farbtonleiste daneben, Vorschau
   mit Hex-Feld rechts, darunter R/G/B und die Schnellfarben. Wer die Fenster
   nebeneinanderlegt, soll dasselbe sehen. */
.fw { display: flex; gap: 12px; }
.fw-feld {
  position: relative; width: 210px; height: 180px; border-radius: 8px; cursor: crosshair;
  border: 1px solid var(--border-2); overflow: hidden; touch-action: none;
}
/* Die beiden Verlaeufe liegen UEBER der Farbtonflaeche: weiss nach rechts durchsichtig
   (Saettigung), schwarz nach oben durchsichtig (Helligkeit). Zusammen ergeben sie das
   uebliche Quadrat — ohne eine einzige Zeile JavaScript beim Zeichnen. */
.fw-weiss, .fw-schwarz { position: absolute; inset: 0; }
.fw-weiss   { background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.fw-schwarz { background: linear-gradient(to top, #000, rgba(0,0,0,0)); }
.fw-punkt {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55);
  transform: translate(-50%, -50%); pointer-events: none;
}
.fw-ton {
  position: relative; width: 26px; height: 180px; border-radius: 8px; cursor: ns-resize;
  border: 1px solid var(--border-2); touch-action: none;
  background: linear-gradient(to bottom, #f00 0%, #ff0 16.66%, #0f0 33.33%,
                              #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
}
.fw-tonpunkt {
  position: absolute; left: -2px; right: -2px; height: 4px; border-radius: 2px;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.55);
  transform: translateY(-50%); pointer-events: none;
}
.fw-rechts { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.fw-vorschau { flex: 1; min-height: 96px; border-radius: 8px; border: 1px solid var(--border-2); }
.fw-hexzeile { display: flex; align-items: center; gap: 8px; }
.fw-hexzeile span { color: var(--dim); font-size: 11.5px; }
.fw-hexzeile input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; }

.fw-regler { display: grid; gap: 7px; margin-top: 14px; }
.fw-regler label { display: grid; grid-template-columns: 16px 1fr 34px; gap: 9px; align-items: center; }
.fw-regler span { color: var(--dim); font-size: 11.5px; font-weight: 600; }
.fw-regler b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; font-size: 12px; }
.fw-regler input[type="range"] { width: 100%; accent-color: var(--accent); }

.fw-schnell-titel {
  color: var(--dim); font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase;
  font-weight: 600; margin: 14px 0 6px;
}
.fw-schnell { display: flex; flex-wrap: wrap; gap: 7px; }
.fw-probe {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border-2); transition: transform .1s ease;
}
.fw-probe:hover { transform: scale(1.12); }

/* Der Knopf, der den Waehler oeffnet: ein Farbfleck mit dem Hex-Wert daneben. Er ersetzt
   das blosse Textfeld — Hex von Hand zu tippen war der Befund (Dirk, 17.08.2026). */
.farbknopf {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2);
  border-radius: 8px; padding: 6px 11px 6px 7px; font: inherit; font-size: 12.5px;
  color: var(--text); transition: background .12s ease, border-color .12s ease;
}
.farbknopf:hover { background: rgba(124,108,245,.10); border-color: var(--border); }
.farbknopf .fleck {
  width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--border-2);
  flex: 0 0 auto;
}
/* „ohne Farbe" ist ein eigener Zustand und darf nicht wie Schwarz aussehen: schraeger
   Strich auf leerem Grund, wie ihn Zeichenprogramme dafuer benutzen. */
.farbknopf .fleck.leer {
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--border) 5px 6px);
}
.farbknopf .hexwert { font-family: ui-monospace, Consolas, monospace; color: var(--muted); }

/* ---- Lange Namen nicht abkuerzen, sondern umbrechen ----
   `text-overflow: ellipsis` braucht `nowrap` — beides zusammen schneidet also zwangslaeufig
   ab. Wo der Name die Aussage IST (Signalarten des AIO: „DI & SMA gleiche Richtung"), ist
   ein „DI & SMA gleiche ..." wertlos: Genau das Wort, das die Wahl entscheidet, faellt weg.
   Deshalb hier: umbrechen statt kuerzen. Angefordert von Dirk am 19.08.2026. */
.aus.namen-ganz .aus-zeile { align-items: flex-start; }
.aus.namen-ganz .aus-zeile .nm { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---- Am Listenende darf die Rollbewegung nicht auf die SEITE ueberlaufen ----
   Rollt man ueber das Ende hinaus, gibt der Browser den Rest an das naechste rollbare
   Element weiter — die Seite. Die aufgeklappte Liste haengt aber `position: fixed` am Feld
   und klappt bei Seiten-Scrollen zu: Ein bisschen zu kraeftig gerollt, und sie schnappt zu,
   sobald die Bewegung ausklingt (Befund Dirk, 19.08.2026: „wenn ich ein bisschen zu stark
   scrolle ... und ich bewege dann die Maus, schliesst sich die Liste sofort wieder").
   `contain` haelt die Bewegung im Kasten. */
.aus, .aus-liste { overscroll-behavior: contain; }

/* ---------------------------------------------------------------------------
   Der Kalender auf schmalen Geräten (20.08.2026).

   ⚠️ EIGENE GRENZE BEI 560 px, nicht die 1180er von oben. Bei 1180 px ist eine Tageszelle
   noch 148 px breit — dort ist nichts eng, und den genauen Betrag gegen eine Abkürzung zu
   tauschen wäre ein Verlust ohne Gegenwert. Eng wird es erst unter rund 560 px: Gemessen
   auf 375 px bleiben je Zelle 42 px Inhalt, und „+123.456 $" braucht 49.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* 3 px seitlich statt 8: Jedes Pixel Polsterung fehlt der Zahl. Aus 42 px Inhalt
     werden so 44 — genug für „−12,3k $" bei 10,5 px Schrift. */
  .cal .d { padding: 5px 3px; min-height: 52px; }
  .cal .d .amt { font-size: 10.5px; margin-top: 3px; letter-spacing: -.2px; }
  /* Getauscht, nicht verkleinert: Eine Zahl, die man mit der Lupe suchen muss, ist so
     unbrauchbar wie eine abgeschnittene. Der genaue Wert steht im Hilfetext der Zelle. */
  .cal .d .amt.lang  { display: none; }
  .cal .d .amt.knapp { display: block; }
  /* Die dritte Angabe fällt weg — in einer Zelle, in der schon die ersten beiden um Platz
     ringen, ist „3 Trades" das Entbehrlichste. */
  .cal .d .cnt { display: none; }
  .cal .hd { font-size: 9.5px; letter-spacing: 0; }
}

/* =============================================================================
   DIE UHR — Zifferblatt statt Zahlenspalten.
   Begründung in `gemeinsam/uhr.js`; kurz: Was `<input type="time">` mitbringt, zeichnet
   der Browser, und auf dunklem Grund ist sein Uhr-Symbol schwarz.
   ============================================================================= */
.uhr-feld { position: relative; display: inline-block; width: 100%; }
.uhr-feld > input { width: 100%; padding-right: 30px; }

/* Der Knopf sitzt IM Feld, rechts. Als eigenes Element daneben bräuchte jede Zeile, die
   ein Zeitfeld enthält, eine andere Breite. */
.uhr-knopf {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 3px; cursor: pointer; line-height: 0;
  color: var(--muted); border-radius: 5px;
}
.uhr-knopf:hover { color: var(--accent-2); background: var(--accent-soft); }

.uhr-kopf { text-align: center; font-size: 30px; font-weight: 700; letter-spacing: 1px; }
.uhr-kopf .uhr-z {
  color: var(--muted); cursor: pointer; padding: 2px 5px; border-radius: 7px;
}
.uhr-kopf .uhr-z:hover { background: var(--accent-soft); }
.uhr-kopf .uhr-z.an { color: var(--accent-2); background: var(--accent-soft); }
.uhr-kopf .uhr-tr { color: var(--dim); }
.uhr-was {
  text-align: center; color: var(--muted); font-size: 12px; margin: 3px 0 12px;
}
.uhr-blatt { margin: 0 auto; }

.uhr-grund  { fill: rgba(124, 108, 245, 0.07); }
.uhr-zeiger { stroke: var(--accent); stroke-width: 2; }
.uhr-nabe   { fill: var(--accent); }
.uhr-knauf  { fill: var(--accent); }
.uhr-zahl {
  fill: var(--text); font-size: 14px; font-weight: 600; cursor: pointer;
  text-anchor: middle; dominant-baseline: central; user-select: none;
}
.uhr-zahl.klein  { fill: var(--muted); font-size: 11.5px; font-weight: 500; }
.uhr-zahl:hover  { fill: var(--accent-2); }
/* ⚠️ Die gewählte Zahl steht AUF dem Knauf — sie muss sich von ihm abheben, nicht von
   der Fläche dahinter. */
.uhr-zahl.gewaehlt { fill: #fff; }

/* ---------------------------------------------------------------------------
   SPRACHWAHL — links neben dem Benutzerkreis.

   Vorgabe Dirk, 23.08.2026: „links neben den User genau wie beim TG die
   Sprachauswahl über Flaggen".

   Der Knopf ist RECHTECKIG und nicht rund wie der Benutzerkreis daneben. Zwei
   gleich aussehende Kreise nebeneinander liest man als ein Paar — hier gehören
   sie aber verschiedenen Dingen: der eine sagt, WER man ist, der andere WIE die
   Oberfläche spricht. Die Flagge füllt den Knopf ganz aus; ein Rand um sie herum
   liesse sie wie ein Bild in einem Rahmen aussehen statt wie einen Schalter.
   --------------------------------------------------------------------------- */
/* ⚠️ RUND UND OHNE EIGENEN RAND — wie im TradeGuard (Vorgabe Dirk, 23.08.2026:
   „Die Flagge im TG ist rund, im TJ ist sie eckig. Passe sie bitte an den Stil des TG an.").
   Die Flagge FÜLLT den Knopf, statt als Rechteck darin zu stehen: Sonst stünden zwei
   Konturen ineinander — der Rand der Flagge und der Rand des Knopfs — und der Knopf sässe
   daneben wie ein Aufkleber, während der Benutzerkreis satt in seiner Rundung sitzt.
   34 px, also genau so groß wie `.bn-kreis` daneben. */
.sprache { position: relative; margin-right: 10px; }
.sp-knopf {
  width: 34px; height: 34px; padding: 0; cursor: pointer; overflow: hidden;
  border: 1px solid transparent; border-radius: 50%; background: none;
  display: grid; place-items: center; line-height: 0;
}
.sp-knopf svg { width: 34px; height: 34px; display: block; border-radius: 50%; }
.sp-knopf:hover { box-shadow: 0 0 0 2px rgba(124,108,245,.55); }
.sprache.offen .sp-knopf { box-shadow: 0 0 0 2px var(--accent); }

.sp-menue {
  display: none; position: absolute; top: calc(100% + 9px); right: 0; z-index: 60; width: 200px;
  background: var(--card-fest); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,.55); padding: 8px; cursor: default; text-align: left;
}
.sprache.offen .sp-menue { display: block; }

.sp-titel { color: var(--dim); font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase;
  font-weight: 600; padding: 3px 6px 7px; }

/* Der Name steht IMMER neben der Flagge. Eine Flagge ist ein Land, keine Sprache —
   Englisch spricht man in vier Dutzend Ländern. Nur der zugeklappte Knopf zeigt sie
   allein; dort ist sie eine Erinnerung, keine Auskunft. */
.sp-zeile {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 7px 8px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  font-family: inherit; font-size: 12.5px;
}
.sp-zeile:hover { background: rgba(124,108,245,.12); color: var(--text); }
.sp-zeile.an { background: var(--accent-soft); color: var(--text); cursor: default; }
.sp-flagge { line-height: 0; }
.sp-flagge svg { width: 20px; height: 14px; display: block; border-radius: 2px; }
.sp-haken { color: var(--accent-2); font-weight: 700; }


/* ---------------------------------------------------------------------------
   ⚠️ DER VORHANG, BIS DIE ÜBERSETZUNG LIEGT.

   Befund Dirk, 23.08.2026: „warum kommt immer erst ein deutscher Text und der wandelt
   sich dann in chinesisch?" — Im HTML steht der deutsche Text als Inhalt der Elemente,
   und der Browser malt ihn, bevor `sprachen.js` ihn tauschen konnte.

   Gesetzt wird die Klasse im Kopf JEDER Seite (inline, vor dem ersten Zeichnen) und nur
   dann, wenn eine fremde Sprache eingestellt ist. Auf Deutsch gibt es nichts zu tauschen,
   also auch nichts zu verbergen — dort ändert sich gar nichts.

   ⚠️ `visibility`, NICHT `display`: Das Blatt behält seine Maße, es wird nur nicht
   gezeigt. Mit `display:none` würde jede Breitenrechnung (Kurven, Tabellen) auf 0 laufen.

   ⚠️ Und es gibt ZWEI Wege zurück: `sprachen.js` nimmt die Klasse weg, sobald die Texte
   stehen — und der Kopf der Seite hat zusätzlich einen Zeitgeber, falls diese Datei gar
   nicht erst ankommt. Eine dauerhaft unsichtbare Seite wäre der schlimmere Fehler.
   --------------------------------------------------------------------------- */
html.sprache-laedt body { visibility: hidden; }

/* ⚠️ EIN GESTRICHENER TRADE MUSS AUF EINEN BLICK ZU ERKENNEN SEIN. Er steht in der Liste,
   zählt aber in keiner Rechnung mit — ohne Kennzeichnung sucht man den Betrag später in
   einer Auswertung, in der er absichtlich fehlt. Rot wie ein Verlust wäre falsch: Er ist
   kein Verlust, er ist gar nichts. Deshalb gedämpft und durchgestrichen. */
.tag.annulliert {
  background: rgba(255, 23, 68, .12);
  color: var(--red);
  border: 1px solid rgba(255, 23, 68, .35);
  text-decoration: line-through;
}

/* ⚠️ EIN ANNULLIERTER TRADE STEHT IN DER LISTE, ZÄHLT ABER NICHT. Gedämpft und
   durchgestrichen — nicht rot: Er ist kein Verlust, er ist gar nichts. Ohne diese
   Kennzeichnung sucht man den Unterschied zur Summe darunter im Rechenfehler statt im
   Haken (Befund Dirk, 02.09.2026: „wo sind die hin?"). */
tr.tl-annulliert > td { opacity: .45; text-decoration: line-through; }
tr.tl-annulliert > td .num,
tr.tl-annulliert > td .pos,
tr.tl-annulliert > td .neg { color: var(--dim) !important; }