/* ============================================================================= DER ABLAUFPLAN — Stil. ⚠️ HAUS-MÖBEL SEIT DEM 21.08.2026. Der Plan wurde für die Seite Handelsansätze gebaut und lag dort. Seit Dirk ihn auch im Trade-Fenster zum Beurteilen benutzen will („beides behalten und umschaltbar machen"), zeichnen ihn ZWEI Seiten — und zwei Nachbauten desselben Bildes wären irgendwann zwei Bilder. Deshalb liegen Stil, Texte und Programm jetzt zusammen im Haus: gemeinsam/plan.css — diese Datei gemeinsam/plan.texte.de.js — die Beschriftungen (`plan_*`) gemeinsam/plan.js — `window.journalPlan(wirt, opts)` Was hier NICHT steht: die Fenster zum Ändern eines Signals, eines Zeitfensters oder einer Grenze. Die gibt es nur beim Bearbeiten des Ansatzes, also weiterhin in `seiten/handelsansaetze/seite.css`. ============================================================================= */ /* =========================================================================== DER ABLAUFPLAN (seit 19.08.2026) Farbe je FORM, nicht je Zustand: Dirk erkennt im Bild zuerst „was ist das", nicht „ist es ausgewaehlt". Die Auswahl kommt deshalb als heller Rand dazu, nicht als andere Fuellung -- sonst wuerde ein gewaehltes Bauteil aussehen wie eine SM. =========================================================================== */ /* Der Formenkasten ist schmaler geworden, seit der Plan in der rechten Spalte steht: Dort zaehlt jeder Punkt Breite fuer die Zeichenflaeche. */ .plan-koerper { display: grid; grid-template-columns: 152px 1fr; gap: 10px; align-items: start; } .plan-formen { display: grid; gap: 5px; } .plan-formen-titel { color: var(--dim); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; margin-bottom: 2px; } .plan-form { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: rgba(255,255,255,.03); border: 1px solid var(--border-2); border-radius: 8px; color: var(--muted); font-family: inherit; font-size: 12px; padding: 5px 8px; cursor: pointer; } .plan-form:hover { background: rgba(124,108,245,.09); color: var(--text); } /* Die scharfe Form: Sie ist der einzige Hinweis darauf, dass der naechste Klick auf die Flaeche etwas SETZT statt nur die Auswahl aufzuheben. */ .plan-form.an { border-color: var(--accent); background: var(--accent-soft); color: var(--text); } .plan-form svg { flex: 0 0 46px; } /* ⚠️ `grab`, nicht `pointer`: Die Form laesst sich ziehen UND anklicken, und der Zeiger ist das einzige, was das Ziehen vorher verraet. */ .plan-form { cursor: grab; } .plan-form.zieht { opacity: .45; cursor: grabbing; } .plan-lupe { display: flex; gap: 4px; margin-top: 8px; } .plan-lupe button { flex: 1; background: rgba(255,255,255,.03); border: 1px solid var(--border-2); border-radius: 7px; color: var(--muted); font-family: inherit; font-size: 11.5px; padding: 4px 0; cursor: pointer; } .plan-lupe button:hover { color: var(--text); background: rgba(124,108,245,.09); } /* ⚠️ HOEHE, NICHT NUR HOECHSTHOEHE — sonst laesst sie sich nicht ziehen (Wunsch Dirk, 19.08.2026: „mach das Fenster in dem die Zeichnung wohnt so, das ich es nach unten vergroessern kann"). `resize` braucht eine gesetzte Hoehe und `overflow` ungleich `visible`; mit `max-height` waere bei 640 px Schluss, egal wie weit man zieht. Nur senkrecht: Die Breite gehoert der Spalte, und eine breitere Flaeche wuerde die Aufteilung der Seite sprengen. */ .plan-flaeche { overflow: auto; height: 640px; min-height: 260px; resize: vertical; border: 1px solid var(--border-2); border-radius: 10px; background: rgba(8,11,24,.45); } .plan-flaeche svg { display: block; } /* Waehrend eine Form darueber schwebt: Die Flaeche sagt, dass sie sie annimmt. Ohne das weiss man beim Loslassen nicht, ob man ueber dem richtigen Ort ist. */ .plan-flaeche.zielt { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft); } /* ---------- Reiter ---------- */ .plan-reiter { margin-bottom: 10px; } .plan-blatt-neu, .plan-blatt-weg { font-size: 15px !important; padding: 4px 9px !important; } .plan-blatt-weg { color: var(--red) !important; opacity: .55; } .plan-blatt-weg:hover { opacity: 1; } /* ---------- Fusszeile ---------- */ .plan-fuss { margin-top: 9px; font-size: 12px; min-height: 18px; } .plan-regel { color: var(--dim); } .plan-sagt { color: var(--accent-2); } /* ---------- Raster und Linien ---------- */ .plan-flaeche .raster { fill: rgba(124,108,245,.16); } .plan-leer { fill: var(--dim); font-size: 13px; font-family: inherit; } .kante .strich { stroke: #8b96b8; stroke-width: 1.6; fill: none; } .kante .pfeil, .plan-flaeche .pfeil { fill: #8b96b8; } /* Unsichtbar, aber dick: sie faengt den Klick auf eine 1,6 px duenne Linie. */ .kante .fang { stroke: transparent; stroke-width: 14; fill: none; cursor: pointer; } .kante:hover .strich { stroke: var(--accent-2); } .kante.gewaehlt .strich { stroke: var(--accent); stroke-width: 2.4; } /* Der Kreis am Eingang = NICHT. Rot, weil er eine Aussage UMKEHRT -- das darf man beim Ueberfliegen nicht uebersehen. Er gehoert seit dem 19.08.2026 dem KAESTCHEN. */ .kn .nicht { fill: var(--card); stroke: var(--red); stroke-width: 1.8; } .faden { stroke: var(--accent-2); stroke-width: 1.8; stroke-dasharray: 5 4; pointer-events: none; } /* ⚠️ DAS NICHT MUSS MAN SEHEN KOENNEN. Es lag bis zum 19.08.2026 ausschliesslich auf einem Doppelklick auf die Linie — Dirk hat danach gesucht und es nicht gefunden („Wo ist mein NICHT?"). Jetzt sitzt ein Knopf in der Mitte jeder Linie, sichtbar beim Zeigen. */ .kante-weg { opacity: 0; transition: opacity .12s; } .kante:hover .kante-weg, .kante.gewaehlt .kante-weg { opacity: 1; } .kante-weg circle { fill: var(--card); stroke: var(--muted); stroke-width: 1.2; cursor: pointer; } .kante-weg text { fill: var(--muted); font-size: 11px; font-family: inherit; cursor: pointer; } .kante-weg:hover circle { fill: var(--red); stroke: var(--red); } .kante-weg:hover text { fill: #fff; } /* ---------- Kaestchen ---------- */ .kn { cursor: grab; } .kn.zieht { cursor: grabbing; } .kn .gestalt rect, .kn .gestalt polygon, .kn .gestalt circle { stroke-width: 1.6; } /* ⚠️ HIER STAND `stroke: inherit`, UND DAS HIESS `none`. Die Regel ist mit drei Klassen staerker als `.g-sm .balken` weiter unten, wo die Farbe steht -- also gewann sie, und `inherit` holte sich den Wert vom Eltern-`g`, das keinen hat: Anfangswert `none`. Die Balken der SM waren damit auf der Flaeche UNSICHTBAR, im Formenkasten aber da (dort greift `.kn` nicht). Zweimal von Dirk gemeldet; beim ersten Mal habe ich die Geometrie nachgemessen statt der FARBE und deshalb das Falsche behoben. Lehre: Ein `inherit` auf einer Eigenschaft, die niemand oberhalb setzt, ist kein Erben, sondern ein Loeschen. */ .kn .gestalt .balken { stroke-width: 1.6; } .kn-text { fill: var(--text); font-size: 12px; font-family: inherit; text-anchor: middle; pointer-events: none; user-select: none; } .kn-text.verkn { font-weight: 700; letter-spacing: 1.2px; font-size: 12.5px; } .g-signal rect { fill: rgba(124,108,245,.20); stroke: #7c6cf5; } .g-sm rect { fill: rgba(56,120,255,.20); stroke: #4d86ff; } .g-sm .balken { stroke: #4d86ff; } .g-verknuepfung polygon { fill: rgba(255,183,77,.20); stroke: #ffb74d; } .g-start rect { fill: rgba(0,230,118,.16); stroke: #00e676; } .g-ende rect { fill: rgba(255,23,68,.14); stroke: #ff5c7a; } .g-manuell polygon { fill: rgba(38,208,206,.18); stroke: #26d0ce; } .g-punkt circle { fill: rgba(255,255,255,.10); stroke: #8b96b8; } .kn.gewaehlt .gestalt rect, .kn.gewaehlt .gestalt polygon, .kn.gewaehlt .gestalt circle { stroke-width: 2.6; filter: drop-shadow(0 0 6px rgba(167,139,250,.55)); } /* Loeschkreuz und Verbindungsgriffe erscheinen erst beim Zeigen -- sonst steht das Blatt voller Bedienelemente und man sieht den Ablauf nicht mehr. */ .kn-weg, .kn-stift, .kn-nicht, .kn-griff { opacity: 0; transition: opacity .12s; } .kn:hover .kn-weg, .kn:hover .kn-stift, .kn:hover .kn-nicht, .kn:hover .kn-griff, .kn.gewaehlt .kn-weg, .kn.gewaehlt .kn-stift, .kn.gewaehlt .kn-nicht, .kn.gewaehlt .kn-griff { opacity: 1; } /* ⚠️ DER SCHALTER BLEIBT NICHT STEHEN, AUCH NICHT WENN DAS NICHT GESETZT IST. Er tat es einen halben Tag lang, mit der Begruendung „sonst sieht man beim Zeigen einen leeren Kreis und weiss nicht, ob er setzt oder entfernt". Das Ergebnis waren ZWEI rote Kreise an demselben Kaestchen fuer EINE Aussage (Befund Dirk mit Bild, 19.08.2026: „das muss nicht zweimal angezeigt werden ... der Kreis an der Linie reicht voellig"). Die urspruengliche Sorge bleibt beantwortet: Beim Zeigen ist der Schalter GEFUELLT, wenn das NICHT steht, und hohl, wenn nicht — man sieht also weiterhin, was ein Klick tut. */ .kn-nicht circle { fill: var(--card); stroke: var(--red); stroke-width: 1.6; cursor: pointer; } .kn-nicht:hover circle { fill: var(--red-dim); } .kn-nicht.an circle { fill: var(--red); } /* Der Stift traegt die Hausfarbe fuer „aendern", das Kreuz die fuer „weg" — dieselbe Zuordnung wie bei den Kategorien und den Sammelordnern. */ .kn-stift circle { fill: var(--card); stroke: var(--accent); stroke-width: 1.2; cursor: pointer; } .kn-stift text { fill: var(--accent-2); font-size: 10px; font-family: inherit; cursor: pointer; } .kn-stift:hover circle { fill: var(--accent); } .kn-stift:hover text { fill: #fff; } .kn-weg circle { fill: var(--red-dim); stroke: var(--red); stroke-width: 1.2; cursor: pointer; } .kn-weg text { fill: var(--red); font-size: 11px; font-family: inherit; cursor: pointer; } .kn-weg:hover circle { fill: var(--red); } .kn-weg:hover text { fill: #fff; } .kn-griff { fill: var(--accent-2); stroke: var(--card); stroke-width: 2; cursor: crosshair; } .kn-griff:hover { fill: #fff; } @media (max-width: 1100px) { .plan-koerper { grid-template-columns: 1fr; } .plan-formen { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } /* Ein SM-Reiter gehoert nicht zu den Ablaeufen daneben, sondern in eine SM hinein -- deshalb eine andere Farbe (dieselbe wie die Form) und das Zeichen davor. */ .plan-reiter button.blatt-sm { color: #4d86ff; } .plan-reiter button.blatt-sm.on { color: #7fb0ff; border-bottom-color: #4d86ff; } /* ---------- Der Schritt einer SM ---------- */ /* Doppelter Rand: ein Schritt ist kein einzelnes Signal, sondern eine GRUPPE von Bedingungen. Das muss man im Bild sehen, ohne den Text zu lesen. */ .g-schritt rect { fill: rgba(77,134,255,.14); stroke: #4d86ff; } .g-schritt rect.innen { fill: none; stroke: #4d86ff; opacity: .5; } /* ---------- Die Leiste ueber einem SM-Blatt ---------- */ .plan-sm-leiste { display: flex; align-items: center; gap: 9px; margin: -4px 0 10px; font-size: 12.5px; } .plan-sm-wort { color: var(--muted); } .plan-sm-feld { width: 74px; text-align: right; } .plan-sm-erklaerung { color: var(--dim); font-size: 12px; } /* ---------- Rahmen zum Markieren mehrerer ---------- */ .rahmen { fill: rgba(124,108,245,.10); stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 3; pointer-events: none; } /* Eine Linie IN einen Schritt, die nicht aus der Sequenz kommt, ist eine BEDINGUNG -- sie sagt „gehoert dazu", nicht „danach". Deshalb in der Farbe der Signale und duenner: Beides mit demselben Strich zu zeichnen hiesse, ein Blatt zweimal lesen zu muessen. */ .kante.bedingung .strich { stroke: #7c6cf5; stroke-width: 1.3; stroke-dasharray: 6 3; } .kante.bedingung:hover .strich { stroke: var(--accent-2); } /* ============================================================================= DIE FENSTER DES PLANS — Signal, Zeitfenster, Grenze. ⚠️ SIE GEHÖREN ZU `plan.js` UND DESHALB HIERHER. Sie lagen bis zum 21.08.2026 in `seiten/handelsansaetze/seite.css`. Solange nur diese eine Seite den Plan zeichnete, fiel das nicht auf; seit die Trade-Seite ihn ebenfalls lädt, wären die Fenster dort ungestylt gewesen. Gefunden hat es `pruefen-stile.js` — vier Klassen, deren Regel es im Projekt gab, nur nicht auf dem Blatt, das sie benutzt. ============================================================================= */ /* ---------- Das Signal-Fenster ---------- */ /* Die Vorschau sagt, wie das Kaestchen danach heisst. Ohne sie setzt man drei Auswahlen und sieht das Ergebnis erst, wenn das Fenster zu ist. */ .sig-vorschau { margin-top: 4px; padding: 9px 11px; border-radius: 8px; font-size: 13px; background: var(--accent-soft); color: var(--text); border: 1px solid var(--border-2); } .sig-vorschau.leer { background: rgba(255,255,255,.03); color: var(--dim); font-style: italic; } /* Die Zahlenfelder der TF-Sorte. Bei EINER Zahl steht sie neben der Zeiteinheit; bei dreien (RangeUS) bekommt jede ihre Beschriftung -- sonst weiss niemand, welche welche ist. */ .sig-zahlen { margin-top: 7px; } .sig-zahlen .sig-zahl-zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .sig-zahlen .sig-zahl-zeile span { flex: 0 0 132px; color: var(--muted); font-size: 12px; } .sig-zahlen .sig-zahl { width: 96px; text-align: right; } .sig-zahlen:not(.mehrere) .sig-zahl { width: 110px; } .sig-kerzen-wort { color: var(--muted); font-size: 12px; } .sig-fussnote { margin-top: 9px; color: var(--dim); font-size: 11.5px; } /* ---- Der Zeitfilter am Signal (19.08.2026) ---- Eine Zeile je Fenster: Von-Knopf, Strich, Bis-Knopf, Wegwerfen. Nach dem Vorbild des AIO-Fensters, das Dirk im Bild gezeigt hat -- wer beide nebeneinander offen hat, soll nicht uebersetzen muessen. */ .sig-zeiten { margin-top: 8px; } .sig-zeit-reihe { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .sig-zeit-reihe .zeit { width: 96px; text-align: center; } .sig-zeit-reihe .z-strich { color: var(--muted); } .sig-zeit-reihe .z-weg { background: none; border: 0; cursor: pointer; color: #e06060; font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 6px; } .sig-zeit-reihe .z-weg:hover { background: rgba(224,96,96,.14); } /* „immer“ bzw. der ODER-Hinweis. ⚠️ Er MUSS lesbar sein, nicht nur vorhanden: Zwei Fenster untereinander sehen aus wie eine Reihe, und eine Reihe heisst im Plan sonst ueberall UND. Ohne das Wort liest man die Bedingung genau falsch herum. */ .sig-zeit-hinweis { margin-top: 4px; color: var(--dim); font-size: 11.5px; } /* ---------- Zeitfenster und Grenze ---------- Eigene Farben, weil es etwas anderes ist als ein Indikator: Zeit in Bernstein (eine Uhr-Sache), Grenze in Rot (sie begrenzt). Wer ein Blatt ueberfliegt, sieht damit sofort, was am MARKT haengt und was an der eigenen Regel. */ .g-zeit polygon { fill: rgba(255,171,0,.16); stroke: #ffab00; } .g-grenze polygon { fill: rgba(255,92,122,.14); stroke: #ff5c7a; } /* Die abgeschnittene Ecke als Knick nachgezeichnet — sonst sieht die Form aus wie ein schief geratenes Viereck statt wie eines, dem bewusst etwas fehlt. */ .g-grenze .kante-ab { fill: none; stroke: #ff5c7a; stroke-width: 1.1; opacity: .45; } /* Die Uhrzeit-Knoepfe im Zeitfenster-Fenster. Dieselbe Bauform wie im Bearbeiten-Fenster eines Trades (`.ht-zeile .fld.zeit`) — dort ist sie aber an jene Zeile gebunden, deshalb hier noch einmal fuer diesen Ort. Ein Knopf und kein Textfeld: Getippt wird nicht, es geht die Uhr auf. */ .frm .fld.zeit { width: 96px; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; font-family: inherit; font-size: 13.5px; } .frm .fld.zeit:hover { border-color: var(--accent); color: var(--text); } /* Die Befunde des Importeurs. Sie stehen im Fenster, BEVOR uebernommen wird — nachher waere es eine Meldung ueber etwas, das schon passiert ist. */ .imp-befunde { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(255,171,0,.09); border: 1px solid rgba(255,171,0,.28); font-size: 12.5px; color: var(--muted); } .imp-befunde b { color: #ffab00; display: block; margin-bottom: 5px; } .imp-befunde ul { margin: 0; padding-left: 18px; line-height: 1.6; } /* Der Knopf in der Kopfzeile ist ein echter Weg, kein Hinweis — deshalb ohne `nur-info`. */ #setupLaden { cursor: pointer; } /* ============================================================================= BEURTEILEN IM PLAN (21.08.2026) Vier Knöpfe je Kästchen: zwei links, zwei rechts, in der Höhe innerhalb der Form. Jeder trägt SEINE Farbe — man wählt die Farbe, nicht einen Text. ⚠️ DIE FARBEN KOMMEN AUS `journal.css` (`--urteil-*`) und gelten auch für die Liste im Trade-Fenster. Zwei Farbcodes für dieselben vier Zustände wären schlimmer als ein ungewohnter. ⚠️ DIESE REGELN STEHEN AM ENDE DER DATEI, und das ist kein Zufall: Der Rand eines Kästchens ist weiter oben je FORM gesetzt (`.t-signal .gestalt rect` …). Gleiche Gewichtung — also gewinnt, was später steht. Ein `!important` wäre der bequemere Weg und der schlechtere: Es nimmt der nächsten Regel die Möglichkeit, es anders zu machen. ============================================================================= */ .kn-urteil { cursor: pointer; } .kn-urteil circle { fill: var(--card-fest); stroke-width: 2; transition: stroke-width .1s; } .kn-urteil:hover circle { stroke-width: 3.5; } .kn-urteil circle.u-ja { stroke: var(--urteil-ja); } .kn-urteil circle.u-nein { stroke: var(--urteil-nein); } .kn-urteil circle.u-na { stroke: var(--urteil-na); } .kn-urteil circle.u-offen { stroke: var(--urteil-offen); } /* Gewählt = ausgefüllt. Ein blosser dickerer Rand wäre bei vier Knöpfen nebeneinander zu leise — man soll auf einen Blick sehen, welcher gilt, nicht suchen. */ .kn-urteil.an circle.u-ja { fill: var(--urteil-ja); } .kn-urteil.an circle.u-nein { fill: var(--urteil-nein); } .kn-urteil.an circle.u-na { fill: var(--urteil-na); } .kn-urteil.an circle.u-offen { fill: var(--urteil-offen); } /* Automatisch bestimmt: nur die Farbe, kein Schalter. Der Grund steht an der Maus. */ .kn-urteil-fest circle { stroke-width: 2; cursor: help; } .kn-urteil-fest circle.u-ja { fill: var(--urteil-ja); stroke: var(--urteil-ja); } .kn-urteil-fest circle.u-nein { fill: var(--urteil-nein); stroke: var(--urteil-nein); } .kn-urteil-fest circle.u-na { fill: var(--urteil-na); stroke: var(--urteil-na); } .kn-urteil-fest circle.u-offen { fill: var(--urteil-offen); stroke: var(--urteil-offen); } /* Der Rand des Kästchens sagt dasselbe wie der gewählte Knopf — damit man das Urteil auch sieht, wenn man die Knöpfe gerade nicht ansieht. Die Füllung bleibt die der FORM, sonst wäre nicht mehr zu erkennen, was ein Signal und was eine Grenze ist. */ .kn.urteil-ja .gestalt rect, .kn.urteil-ja .gestalt polygon, .kn.urteil-ja .gestalt path, .kn.urteil-ja .gestalt circle { stroke: var(--urteil-ja); } .kn.urteil-nein .gestalt rect, .kn.urteil-nein .gestalt polygon, .kn.urteil-nein .gestalt path, .kn.urteil-nein .gestalt circle { stroke: var(--urteil-nein); } .kn.urteil-na .gestalt rect, .kn.urteil-na .gestalt polygon, .kn.urteil-na .gestalt path, .kn.urteil-na .gestalt circle { stroke: var(--urteil-na); } .kn.urteil-offen .gestalt rect, .kn.urteil-offen .gestalt polygon, .kn.urteil-offen .gestalt path, .kn.urteil-offen .gestalt circle { stroke: var(--urteil-offen); } /* Im Beurteilungs-Modus wird nichts verschoben — der Zeiger soll das auch nicht versprechen. */ .plan-flaeche.urteilen .kn { cursor: default; }