/* =============================================================================
   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;

  --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; }

/* 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; }
.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 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); }
.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; }

/* 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. */
.aus-zeile .werk { display: none; cursor: pointer; padding: 1px 5px; border-radius: 5px; }
.aus-zeile:hover .werk { display: inline-block; }
.aus-zeile.fragt .werk { display: inline-block; }
.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. */
.aus-zeile:hover:has(.werk) .anz { display: none; }
.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. */
.dlg-grund {
  position: fixed; inset: 0; background: rgba(4,6,14,.66); z-index: 200;
  display: grid; 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 ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, 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; }

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

/* Die drei Umschalter oben rechts. Der aktive ist eingefaerbt und hinterlegt — ein
   blosser Farbwechsel ist bei drei kurzen Woertern nebeneinander zu leise. */
.kurve-schalter { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.kurve-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 { color: var(--text); background: rgba(124,108,245,.10); }
.kurve-schalter b.an { color: var(--text); background: var(--accent-soft); border-color: var(--accent); }
.kurve-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 ---------- */
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }

/* ---------- 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; }
.tag.aio  { 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; }

/* „+ 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. */
.cal { display: grid; grid-template-columns: repeat(var(--kal-spalten, 7), 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; }
.cal .d .num { color: var(--dim); font-size: 10.5px; }
.cal .d .amt { font-size: 12.5px; font-weight: 650; margin-top: 5px; }
.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; }

/* ---------- 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; }

/* ---------- 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, 1fr); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .split-page { grid-template-columns: 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), 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: rgba(124,108,245,.07); 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); }