/* ═══════════════════════════════════════════════════════════════════════ layout-varianten.css · v1635 — fünf Raumordnungen, eine App Diese Datei ORDNET DEN RAUM. Sie färbt ihn nicht: der helle Grund kommt von `body.dp-chrome-hell` (103 geprüfte Regeln), das `layout-varianten.js` beim Umschalten mitsetzt. Eine zweite Hellfassung danebenzustellen hiesse, jede künftige Änderung an zwei Stellen zu pflegen. ── WAS JEDES LAYOUT GEMEINSAM TUT ─────────────────────────────────── 1. `.sc-main` (der grosse Investor Deal Score) verschwindet, und `#hdr-score-mini` tritt an seine Stelle. DEN GIBT ES SCHON - er ist heute nur leer. Marcel: „brauchen wir nicht gross oben … wäre aber gut, wenn man ihn noch irgendwo stehen hätte." 2. Die fünf `.sc-pill` werden zu einer Zeile von 40 px statt eines Blocks von 141. 3. Die Reiterzeile verliert ihre Fülle und trägt den aktiven Reiter über eine Goldkante - ein Millimeter Gold wirkt teurer als eine goldene Kachel. ── DIE SPEZIFITÄTSFRAGE ───────────────────────────────────────────── `style.css` hat 36.929 Zeilen und 4.198 `!important`. Gegen die kommt man nicht mit Token an - deshalb trägt hier jede Regel den Anker `html[data-dp-layout]` (ein Attribut am Wurzelelement, 0-1-0) UND wo nötig `!important`. Beides ist hier kein Faulheitszeichen, sondern die einzige Art, eine 36.000-Zeilen-Datei punktuell zu überstimmen, ohne sie anzufassen. ── DIE SCHIENE ────────────────────────────────────────────────────── Bei `links`/`rechts` steht sie `position:fixed` - `.main-col` hat über sechzig Kinder, ein `display:grid` darauf würde jedes sichtbare davon einsortieren. Aus dem Fluss genommen kollidiert sie mit keinem. Bei `leiste`/`fuss` bleibt sie im Fluss und wird über `order` gesetzt. ═══════════════════════════════════════════════════════════════════════ */ html[data-dp-layout]{ --dpl-schiene-b: 208px; --dpl-papier:#FDFCFA; --dpl-flaeche:#FFFFFF; --dpl-grau:#F4F2ED; --dpl-linie:#E6E1D6; --dpl-linie-stark:#CEC6B6; --dpl-tinte:#1A1A18; --dpl-leise:#6B645A; --dpl-sehr-leise:#9A9287; --dpl-gold: var(--wl-c9a84c, #C9A84C); --dpl-gold-lo: var(--wl-b8932f, #b8932f); } /* ═══ 1 · GEMEINSAM: der Kopf wird schmal ═══════════════════════════ */ /* Der grosse Score geht - der kleine kommt. */ html[data-dp-layout] .hdr-v61-row2 .sc-main{ display:none !important; } html[data-dp-layout] .hdr-v61-row2{ height:auto !important; min-height:0 !important; padding:6px 16px !important; border-bottom:1px solid var(--dpl-linie) !important; } html[data-dp-layout] .hdr-v61-row2 .scores{ display:flex !important; gap:0 !important; height:auto !important; min-height:0 !important; padding:0 !important; border:1px solid var(--dpl-linie) !important; border-radius:2px !important; background:var(--dpl-flaeche) !important; overflow:hidden; } /* Die Kachel wird zur ZEILE. Gemessen war sie 93 px hoch, weil vier Blöcke untereinander stehen: Beschriftung 15, Wert 33, Zusatz 15, Balken 4. Beschriftung und Wert rücken nebeneinander, der Zusatz ("4 / 4 KPIs") entfällt - er wiederholt, was die Vollständigkeits- anzeige im Kopf schon sagt -, und der Balken legt sich als 2-px-Linie an den unteren Rand. */ html[data-dp-layout] .hdr-v61-row2 .sc-pill{ flex:1 1 0 !important; min-width:0 !important; height:auto !important; min-height:0 !important; margin:0 !important; position:relative !important; display:grid !important; grid-template-columns:auto 1fr !important; align-items:baseline !important; gap:0 8px !important; padding:6px 12px 8px !important; border:0 !important; border-right:1px solid var(--dpl-linie) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } html[data-dp-layout] .hdr-v61-row2 .sc-pill:last-child{ border-right:0 !important; } html[data-dp-layout] .hdr-v61-row2 .sc-pill-l{ font-size:9px !important; letter-spacing:.1em !important; margin:0 !important; color:var(--dpl-sehr-leise) !important; } html[data-dp-layout] .hdr-v61-row2 .sc-pill-v{ font-size:15px !important; line-height:1.15 !important; margin:0 !important; text-align:right !important; } html[data-dp-layout] .hdr-v61-row2 .sc-pill-sub{ display:none !important; } html[data-dp-layout] .hdr-v61-row2 .sc-bar{ position:absolute !important; left:12px; right:12px; bottom:3px; height:2px !important; margin:0 !important; grid-column:1 / -1; } /* Der kleine Score im Kopf - er ist da, er war nur leer. */ html[data-dp-layout] #hdr-score-mini{ display:inline-flex !important; align-items:center; gap:6px; padding:3px 10px !important; margin-left:10px; border:1px solid var(--dpl-linie-stark) !important; border-radius:2px !important; background:var(--dpl-flaeche) !important; cursor:pointer; white-space:nowrap; font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; font-weight:700; color:var(--dpl-tinte) !important; } html[data-dp-layout] #hdr-score-mini::before{ content:'SCORE'; font-size:8.5px; letter-spacing:.11em; font-weight:500; color:var(--dpl-sehr-leise); } /* Die Reiter: Haarlinie statt Fläche, Gold nur als Kante. */ html[data-dp-layout] nav.tabs{ background:var(--dpl-flaeche) !important; border-bottom:1px solid var(--dpl-linie) !important; box-shadow:none !important; } html[data-dp-layout] nav.tabs .tab{ background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; color:var(--dpl-leise) !important; border-bottom:2px solid transparent !important; } html[data-dp-layout] nav.tabs .tab.active{ color:var(--dpl-tinte) !important; font-weight:600 !important; border-bottom-color:var(--dpl-gold) !important; background:transparent !important; } /* ═══ 2 · DIE SCHIENE ═══════════════════════════════════════════════ */ html[data-dp-layout] .dpl-schiene{ background:var(--dpl-grau); border-right:1px solid var(--dpl-linie); display:flex; flex-direction:column; min-width:0; font-family:'Inter', system-ui, sans-serif; } /* ── ORT UND FARBE SIND ZWEI FRAGEN ────────────────────────────────── v1653b · Beim Umstellen der FARBE auf `data-ton` habe ich ein Skript benutzt, dessen Anker frueher traf als gedacht - und damit auch diese drei STRUKTURregeln erwischt. Ergebnis: `[data-ton="dunkel"]{left:0}` UND `[data-ton="dunkel"]{right:0}` trafen dieselbe Schiene, die spaetere gewann, und die Aktenmappe stand RECHTS. > **Ein Skript, dessen Anker man nicht nachzaehlt, ist ein > Suchen-und-Ersetzen mit verbundenen Augen.** Die Zeilennummer > gehoert geprueft, BEVOR es laeuft. Die gemeinsame Grammatik gilt fuer jede Schiene, der Ort haengt an der Stellung, die Farbe am Ton. */ html[data-dp-layout] .dpl-schiene{ position:fixed; top:0; bottom:0; width:var(--dpl-schiene-b); z-index:60; overflow:auto; } html[data-dp-layout] .dpl-schiene[data-stellung="links"]{ left:0; } html[data-dp-layout] .dpl-schiene[data-stellung="rechts"]{ right:0; left:auto; border-right:0; border-left:1px solid var(--dpl-linie); } .dpl-marke{ height:46px; flex:0 0 auto; display:flex; align-items:center; padding:0 14px; border-bottom:1px solid var(--dpl-linie); background:var(--dpl-flaeche); } .dpl-wm{ font-family:'Space Grotesk', system-ui, sans-serif; font-weight:700; font-size:15px; letter-spacing:-.02em; color:var(--dpl-tinte); } .dpl-wm i{ font-style:normal; color:var(--dpl-gold-lo); } .dpl-portfolio{ display:flex; align-items:center; gap:9px; width:calc(100% - 16px); margin:10px 8px 4px; padding:7px 10px; border:1px solid var(--dpl-linie-stark); background:var(--dpl-flaeche); border-radius:2px; cursor:pointer; font-size:12.5px; color:var(--dpl-tinte); font-family:inherit; } .dpl-portfolio:hover{ border-color:var(--dpl-gold-lo); } .dpl-portfolio .dpl-i{ color:var(--dpl-gold-lo); } .dpl-portfolio .dpl-n{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--dpl-sehr-leise); } .dpl-teil{ min-width:0; } .dpl-teil-tabs{ padding:6px 8px; } .dpl-teil-aktionen{ padding:4px 8px 8px; } .dpl-teil-nutzer{ margin-top:auto; border-top:1px solid var(--dpl-linie); background:var(--dpl-flaeche); } /* Die Reiter senkrecht - nur in der Schiene, nicht global. */ .dpl-teil-tabs nav.tabs{ display:flex !important; flex-direction:column !important; background:transparent !important; border:0 !important; padding:0 !important; overflow:visible !important; height:auto !important; } .dpl-teil-tabs nav.tabs .tab{ justify-content:flex-start !important; text-align:left !important; width:100% !important; padding:6px 10px !important; margin:0 0 1px !important; border-bottom:0 !important; border-left:2px solid transparent !important; border-radius:2px !important; font-size:12.5px !important; } .dpl-teil-tabs nav.tabs .tab.active{ background:var(--dpl-flaeche) !important; border-left-color:var(--dpl-gold) !important; border-bottom-color:transparent !important; } /* Die Aktionen: in der Schiene immer offen - ein Menü, das man erst aufklappen muss, ist in einer 208-px-Spalte kein Gewinn. */ .dpl-teil-aktionen #sb-actions-accordion{ display:block !important; height:auto !important; max-height:none !important; overflow:visible !important; opacity:1 !important; visibility:visible !important; padding:0 !important; margin:0 !important; } .dpl-teil-aktionen #sb-actions-trigger-btn{ display:none !important; } .dpl-teil-nutzer #sb-user{ margin:0 !important; border:0 !important; } /* GEMESSEN: der Aktionsblock hat einen INNEREN Behaelter (.sb-actions-accordion-inner). Die Zeilenregel am aeusseren Knoten bewirkte nichts - der innere blieb eine Spalte, und die Leiste war 144 statt 48 px hoch. Eine Regel am Elternteil ordnet nicht, was im Kind steht. */ html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] .sb-actions-accordion-inner, html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] .sb-actions-accordion-inner{ display:flex !important; flex-direction:row !important; align-items:center; gap:6px !important; width:auto !important; height:auto !important; padding:0 !important; margin:0 !important; flex-wrap:nowrap; } html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] .sb-actions-accordion-inner > *, html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] .sb-actions-accordion-inner > *{ flex:0 0 auto !important; width:auto !important; margin:0 !important; white-space:nowrap; } /* In der senkrechten Schiene bleibt der innere Behaelter eine Spalte, nur ohne eigene Breite - 208 px sind knapp. */ .dpl-teil-aktionen .sb-actions-accordion-inner{ width:auto !important; padding:0 !important; margin:0 !important; } /* ═══ 3 · DIE OBJEKTSPALTE ALS SCHUBLADE ════════════════════════════ GEMESSEN am 26.09.2026, und es war nicht das, was ich erwartet hatte: **`.app-wrap` ist ein GRID**, nicht flex - `grid-template-columns: 380px 1118px`. Nimmt man die Objektspalte mit `position:fixed` aus dem Fluss, verschwindet sie NICHT aus dem Gitter-Raster: die Hauptspalte rutscht in die erste Spur und war 380 px breit statt 1499. > Eine Spur bleibt stehen, auch wenn ihr Kind sie verlässt. Das Raster > gehört dem Elternteil, nicht dem Kind. Deshalb wird hier ausdrücklich auf EINE Spur gestellt. */ html[data-dp-layout^="v1"] .app-wrap, html[data-dp-layout="v3"] .app-wrap, html[data-dp-layout="v4"] .app-wrap{ grid-template-columns:1fr !important; } /* v1653c · Die Spur, die niemand mehr belegt. `.app-wrap` ist ein GRID. Solange die Objektspalte darin stand, war `264px 1fr` richtig. Seit die Kanzlei sie als Schublade führt, steht sie `position:fixed` - und **das nimmt sie aus dem Fluss, aber nicht aus dem Gitter**: die 264-px-Spur blieb reserviert, und `.main-col` rutschte als erstes verbliebenes Kind hinein. Gemessen: Arbeitsfläche 264 px breit bei 2133 px Fenster, rechts daneben 1421 px leer. > Denselben Fehler hatte ich in v1 schon einmal behoben und beim > Umstellen von v2 auf Schublade nicht mitgedacht. Eine Spurbreite > gehört zur Frage „wer steht im Gitter" - nicht zur Frage „wie > breit ist die Spalte". */ html[data-dp-layout^="v2"] .app-wrap{ grid-template-columns:1fr !important; } /* v1653b: an den ZUSTAND gehängt, nicht an eine Layout-Liste. `data-dpl-portfolio` setzt `setze()` bei jedem Layout, das die Objekte als Schublade führt - und das sind seit v1653 beide. > Eine Aufzählung von Layoutnamen vergisst den nächsten. Genau das > ist gerade passiert: v2 wurde von „Spalte" auf „Schublade" > umgestellt, stand aber nicht in dieser Liste - und die Objektliste > lag offen über der Arbeitsfläche. */ html[data-dp-layout][data-dpl-portfolio] #sidebar{ position:fixed !important; top:0; bottom:0; left:0 !important; z-index:70; width:360px !important; max-width:88vw; /* Zweiter Messbefund: `translateX(-102%)` schiebt um die EIGENE Breite. Mit `left:208px` blieben 159 px sichtbar stehen - eine Schublade, die halb offen klemmt. Jetzt links bündig und ganz weg. > DAS `!important` HIER IST EIN DENKMAL AN EINE FALSCHE DIAGNOSE. > Ich hielt die Regel für überstimmt, weil `getComputedStyle` die > Einheitsmatrix zurückgab - auch bei INLINE gesetztem Wert. Der > Kaskaden-Walker fand aber keinen Überstimmer, und mit > `transition:none` sass der Wert sofort bei -367 px. > > **Der Tab lief im Hintergrund.** In einem versteckten Tab friert > Chrome jeden CSS-Übergang beim STARTWERT ein - die Messung zeigte > also nicht den Zielzustand, sondern den ersten Einzelbild eines > Übergangs, der nie weiterlief. `visibilityState` gehört vor jede > Messung an einer Animation. > > Das `!important` bleibt stehen, weil es nicht schadet und in > dieser Datei ohnehin die Hausordnung ist - aber es löst nicht das > Problem, für das ich es gesetzt habe. */ transform:translateX(-102%) !important; transition:transform .18s ease; box-shadow:0 0 40px -12px rgba(0,0,0,.45); } html[data-dp-layout][data-dpl-portfolio="auf"] #sidebar{ transform:translateX(0) !important; } /* ── v1656b · DER ABDUNKLER, DER DIE LISTE UNBEDIENBAR MACHTE ──────── Hier stand: html[data-dpl-portfolio="auf"]::after{ content:''; position:fixed; inset:0; z-index:65; background:rgba(20,18,15,.34); } Das war der Schleier hinter der SCHUBLADE - richtig, solange sie ueber der Arbeitsflaeche lag. Seit v1654 gibt es keine Schublade mehr, die Liste steht IN der Schiene. Der Schleier blieb. **Er deckt `inset:0` mit `z-index:65`, die Schiene hat 60.** Also lag er ueber ihr - und zwar genau ab dem Moment, in dem man Portfolio oeffnet. Marcel: „wenn wir auf Portfolio klicken, dann kann ich kein Objekt auswaehlen. Es wird zwar was angezeigt, aber so richtig auswaehlen kann man das nicht." Gemessen mit `elementsFromPoint(103,96)`: HTML <- der Schleier, als Pseudoelement des .dpl-portfolio .dpl-schiene Der Kopf blieb bedienbar, weil er `z-index:300` traegt - deshalb traf `#hdr-obj` und sonst nichts links davon. > **Ein Pseudoelement erscheint in `elementsFromPoint` unter dem > Namen seines Elements.** „HTML liegt ganz oben" heisst nie, dass > das Wurzelelement etwas tut - es heisst, dass an ihm ein > `::before` oder `::after` haengt. Ich habe diesen Befund zweimal > gesehen und beim ersten Mal als Artefakt abgetan. */ /* ═══ 4 · DIE FÜNF ══════════════════════════════════════════════════ */ /* ── v1 · AKTENMAPPE ───────────────────────────────────────────────── Schiene links: Reiter als Gliederung, darunter Aktionen, unten Nutzer. Die Objektspalte wird zur Schublade. */ html[data-dp-layout^="v1"] .app-wrap{ padding-left:var(--dpl-schiene-b) !important; } /* ── v2 · KANZLEI ──────────────────────────────────────────────────── v1653b · Dieser Block beschrieb die ALTE Kanzlei: Objektspalte links stehend, Aktionen rechts. Der Entwurf will es anders (dunkle Navigation links, helle Kontextschiene rechts, Objekte als Schublade), und die maßgeblichen Regeln stehen jetzt am Ende dieser Datei unter „v1653 · Punkt 7 und 8". Was hier stand und WEG musste: `[data-stellung="rechts"] .dpl-marke{display:none}` - gedacht gegen eine doppelte Marke, als die Objektspalte links noch ihre eigene trug. Nach der Umstellung auf `data-ton` traf die Regel die DUNKLE Schiene, also die linke - und versteckte genau die Marke, die dort stehen soll. */ html[data-dp-layout^="v2"] .dpl-schiene[data-stellung="rechts"] .dpl-marke{ display:none; } /* ── v3 · WERKBANK ─────────────────────────────────────────────────── Keine Seitenspalte. Die Aktionsleiste kommt auf den Hauptbildschirm, direkt über den Inhalt, auf den sie sich bezieht. */ html[data-dp-layout="v3"] .main-col > *{ order:0; } html[data-dp-layout="v3"] header.hdr{ order:-3; } html[data-dp-layout="v3"] nav.tabs{ order:-2; } html[data-dp-layout="v3"] .dpl-schiene[data-stellung="leiste"]{ order:-1; } html[data-dp-layout] .dpl-schiene[data-stellung="leiste"]{ flex:0 0 auto; flex-direction:row; align-items:center; gap:8px; padding:7px 16px; background:#FBF6E9; border-right:0; border-bottom:1px solid var(--dpl-linie-stark); overflow-x:auto; } html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] .dpl-portfolio{ margin:0; width:auto; flex:0 0 auto; } html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] .dpl-teil{ padding:0; } html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] .dpl-teil-nutzer{ margin-left:auto; margin-top:0; border-top:0; background:transparent; } html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] #sb-actions-accordion{ display:flex !important; flex-direction:row !important; gap:6px; height:auto !important; max-height:none !important; overflow:visible !important; opacity:1 !important; visibility:visible !important; white-space:nowrap; } html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] #sb-actions-trigger-btn{ display:none !important; } /* ── v4 · DOSSIER ──────────────────────────────────────────────────── Die Anwendung sieht aus wie das Dokument, das am Ende herauskommt: mittige Blattspalte auf grauem Grund, Aktionen in der Fussleiste. */ html[data-dp-layout="v4"] .main-col{ background:#EDEAE3 !important; } html[data-dp-layout="v4"] header.hdr, html[data-dp-layout="v4"] nav.tabs, html[data-dp-layout="v4"] .body{ max-width:1080px; margin-left:auto !important; margin-right:auto !important; width:100% !important; } html[data-dp-layout="v4"] .body{ background:var(--dpl-papier) !important; border-left:1px solid var(--dpl-linie); border-right:1px solid var(--dpl-linie); } html[data-dp-layout="v4"] header.hdr{ background:var(--dpl-papier) !important; border-left:1px solid var(--dpl-linie); border-right:1px solid var(--dpl-linie); } html[data-dp-layout="v4"] .main-col > *{ order:0; } html[data-dp-layout="v4"] header.hdr{ order:-3; } html[data-dp-layout="v4"] nav.tabs{ order:-2; } html[data-dp-layout="v4"] .dpl-schiene[data-stellung="fuss"]{ order:999; } html[data-dp-layout] .dpl-schiene[data-stellung="fuss"]{ position:sticky; bottom:0; z-index:40; flex:0 0 auto; flex-direction:row; align-items:center; gap:8px; padding:7px 20px; background:var(--dpl-flaeche); border-right:0; border-top:1px solid var(--dpl-linie-stark); overflow-x:auto; } html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] .dpl-portfolio{ margin:0; width:auto; flex:0 0 auto; } html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] .dpl-teil{ padding:0; } html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] .dpl-teil-nutzer{ margin-left:auto; margin-top:0; border-top:0; background:transparent; } html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] #sb-actions-accordion{ display:flex !important; flex-direction:row !important; gap:6px; height:auto !important; max-height:none !important; overflow:visible !important; opacity:1 !important; visibility:visible !important; white-space:nowrap; } html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] #sb-actions-trigger-btn{ display:none !important; } /* ── v5 · COCKPIT HELL ─────────────────────────────────────────────── Die heutige Struktur, nur entschlackt: Objektspalte von 380 auf 276, Kopf von 189 auf rund 95. Kein Umlernen. */ html[data-dp-layout="v5"] #sidebar{ width:auto !important; } html[data-dp-layout="v5"] .sb-header{ padding:8px 12px !important; } html[data-dp-layout="v5"] .sb-header .app-logo-simple-wrap{ max-height:40px !important; } /* ═══ 5 · DER UMSCHALTER ════════════════════════════════════════════ */ .dpl-schalter{ position:fixed; left:12px; bottom:12px; z-index:2147483000; display:flex; align-items:center; gap:4px; flex-wrap:wrap; max-width:min(96vw,760px); background:rgba(253,252,250,.97); border:1px solid #CEC6B6; border-radius:3px; padding:6px 8px; box-shadow:0 8px 26px -14px rgba(0,0,0,.6); font-family:'JetBrains Mono', ui-monospace, monospace; } .dpl-schalter-k{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; /* v2090: stand auf #9A9287 — auf dem hellen Grund rgb(253,252,250) ergibt das Kontrast 3,00 bei 9 px (gemessen 10.10.2026), Schwelle 4,5. #7A736B ist derselbe Ton um 21 % abgedunkelt: 4,56. Die Beschriftung bleibt zurückgenommen, ist aber lesbar. */ color:#7A736B; padding-right:4px; } .dpl-schalter button{ font-family:inherit; font-size:10.5px; letter-spacing:.05em; padding:5px 9px; border:1px solid #CEC6B6; background:#fff; color:#6B645A; cursor:pointer; border-radius:2px; } .dpl-schalter button:hover{ border-color:var(--wl-b8932f, #b8932f); color:#1A1A18; } .dpl-schalter button[aria-pressed="true"]{ background:#141310; color:#F2EDE3; border-color:#141310; } .dpl-schalter-zu{ margin-left:2px; } /* ═══ 8 · TABLET UND HANDY ══════════════════════════════════════════ GEMESSEN am 26.09.2026 im gleich-Origin-iframe bei 390 px: Layout 2 liess der Arbeitsflaeche **260 von 390 px** - die Schiene stand weiterhin `position:fixed` mit 208 px Breite am rechten Rand. Ursache war ZUM DRITTEN MAL an diesem Tag dieselbe: die Regeln in dieser Media-Query trugen den Anker `html[data-dp-layout]` nicht und waren damit (0,2,0) gegen (0,3,1) der Grundregel. > **Eine Media-Query hebt die Spezifitaet nicht an.** Sie schraenkt > nur ein, WANN eine Regel gilt - nicht, wie stark sie ist. Wer eine > Grundregel innerhalb einer Media-Query ueberschreiben will, braucht > dort denselben Anker oder mehr. Inhaltlich: auf schmalen Geraeten wird aus jeder senkrechten Schiene eine WAAGERECHTE Leiste oben. Eine 208-px-Spalte neben 182 px Inhalt ist keine Bedienung, sondern eine Schikane. */ @media (max-width:900px){ html[data-dp-layout] .app-wrap{ padding-left:0 !important; padding-right:0 !important; grid-template-columns:1fr !important; } html[data-dp-layout] .dpl-schiene{ position:static !important; width:auto !important; flex-direction:row !important; align-items:center !important; gap:8px; overflow-x:auto !important; overflow-y:visible !important; border-right:0 !important; border-left:0 !important; border-bottom:1px solid var(--dpl-linie) !important; padding:6px 10px; } /* Die Marke und der Nutzerblock kosten in einer Leiste nur Platz - das Logo steht oben im Kopf, der Nutzer im Portfolio. */ html[data-dp-layout] .dpl-schiene .dpl-marke{ display:none !important; } html[data-dp-layout] .dpl-schiene .dpl-teil{ padding:0 !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer{ margin-top:0 !important; border-top:0 !important; background:transparent !important; } html[data-dp-layout] .dpl-portfolio{ margin:0 !important; width:auto !important; flex:0 0 auto; } /* Die Reiter werden in der Leiste wieder waagerecht. */ html[data-dp-layout] .dpl-teil-tabs nav.tabs{ flex-direction:row !important; overflow-x:auto !important; } html[data-dp-layout] .dpl-teil-tabs nav.tabs .tab{ width:auto !important; border-left:0 !important; border-bottom:2px solid transparent !important; } html[data-dp-layout] .dpl-teil-tabs nav.tabs .tab.active{ border-left-color:transparent !important; border-bottom-color:var(--dpl-gold) !important; } /* Auch die Aktionen liegen dann in einer Reihe. */ html[data-dp-layout] .dpl-schiene .sb-actions-accordion-inner{ display:flex !important; flex-direction:row !important; gap:6px !important; width:auto !important; flex-wrap:nowrap; } /* Objektspalte bei den SPALTEN-Layouts (v2, v5): hier wird NICHTS eigenes gebaut. Die App hat unter 900 px längst ihre eigene Schublade (`body #sidebar.sidebar{transform:translateX(-100%)}` in style.css) samt Umschalter `#dp-sb-toggle`. > Der beste Handy-Entwurf ist der, den es schon gibt. Ein zweiter > daneben hätte einen zweiten Zustand - und zwei Zustände für > dieselbe Schublade laufen auseinander. Gesorgt werden muss nur dafür, dass die Gitterspur verschwindet - das erledigt `grid-template-columns:1fr` weiter oben. */ html[data-dp-layout] .dpl-schiene .dpl-portfolio{ display:flex !important; } /* Dossier: die Blattspalte nimmt die volle Breite. */ html[data-dp-layout="v4"] header.hdr, html[data-dp-layout="v4"] nav.tabs, html[data-dp-layout="v4"] .body{ max-width:none !important; } } /* ═══ 6 · DIE FASSUNGSWAHL VOR DEM EXPORT (v1636) ═══════════════════ Gehört inhaltlich zu js/pdf-wahl.js, steht aber hier, weil sie dieselbe helle Formensprache trägt und sonst eine dritte winzige CSS-Datei entstünde. */ .dpw-ov{ position:fixed; inset:0; z-index:2147482000; display:grid; place-items:center; background:rgba(18,16,14,.46); padding:20px; } .dpw-kasten{ width:min(560px,100%); background:#FDFCFA; border:1px solid #CEC6B6; border-radius:3px; box-shadow:0 26px 70px -30px rgba(0,0,0,.7); padding:18px 20px 16px; font-family:'Inter', system-ui, sans-serif; color:#1A1A18; } .dpw-kopf{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; } .dpw-kopf b{ font-family:'Space Grotesk', system-ui, sans-serif; font-size:17px; } .dpw-zu{ border:0; background:transparent; font-size:20px; line-height:1; cursor:pointer; color:#9A9287; padding:2px 6px; } .dpw-zu:hover{ color:#1A1A18; } .dpw-vor{ margin:0 0 14px; font-size:13px; color:#6B645A; } .dpw-liste{ display:grid; gap:8px; } .dpw-k{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:11px 13px; border:1px solid #E6E1D6; background:#fff; border-radius:2px; cursor:pointer; font-family:inherit; } .dpw-k:hover{ border-color:var(--wl-b8932f, #b8932f); } .dpw-k.dpw-an{ border-color:var(--wl-c9a84c, #C9A84C); box-shadow:inset 3px 0 0 var(--wl-c9a84c, #C9A84C); } .dpw-probe{ width:34px; height:44px; flex:0 0 auto; border:1px solid #CEC6B6; border-radius:1px; } .dpw-probe-hell{ background:linear-gradient(#fff 0 38%, #F4F2ED 38% 100%); border-top:3px solid var(--wl-c9a84c, #C9A84C); } .dpw-probe-dunkel{ background:linear-gradient(#0A0A09 0 38%, #fff 38% 100%); border-top:3px solid var(--wl-c9a84c, #C9A84C); } .dpw-tx{ min-width:0; } .dpw-tx b{ display:block; font-size:13.5px; font-weight:600; } .dpw-u{ display:block; font-size:12px; color:#6B645A; margin-top:1px; } .dpw-f{ display:block; font-family:'JetBrains Mono', ui-monospace, monospace; font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:#9A9287; margin-top:4px; } .dpw-merk{ display:flex; align-items:center; gap:7px; margin-top:14px; font-size:12.5px; color:#6B645A; cursor:pointer; } .dpw-merk input{ width:14px; height:14px; } .dpw-merk span{ color:#9A9287; } /* v1748 · Ein Weg, der eine Voraussetzung hat, wird ausgegraut und sagt warum - statt still etwas anderes zu tun. Statusfarben bleiben hier bewusst aussen vor: das ist kein Fehler, sondern eine Reihenfolge. */ .dpw-k.dpw-aus{ opacity:.52; cursor:not-allowed; background:#F7F5F0; } .dpw-k.dpw-aus:hover{ border-color:#E6E1D6; } .dpw-k.dpw-aus .dpw-f{ color:#8A7F6B; } /* Gruppenüberschriften ("PORTFOLIO", "WERKZEUGE") ordnen eine SPALTE. In einer waagerechten Leiste stehen sie zwischen den Knöpfen und machen sie 95 px hoch, ohne etwas zu ordnen. Statt ihrer ein Trennstrich - dieselbe Gliederung, ein Zehntel des Platzes. */ html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] .sb-act-section-title, html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] .sb-act-section-title{ width:1px !important; min-width:1px !important; height:20px !important; padding:0 !important; margin:0 4px !important; overflow:hidden !important; text-indent:-999px !important; background:#CEC6B6 !important; border:0 !important; border-radius:0 !important; align-self:center !important; } html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] .sb-act-section-title:first-child, html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] .sb-act-section-title:first-child{ display:none !important; } html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] .sb-act-item, html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] .sb-act-item{ padding:6px 10px !important; font-size:12px !important; } /* Das Mandantenlogo in der Schiene: proportional, nie verzerrt, und nie hoeher als die Markenleiste. */ html[data-dp-layout] .dpl-logo{ max-width:100%; max-height:28px; width:auto; height:auto; display:block; } /* ═══ 7 · ERSTSTART (v1638) ═════════════════════════════════════════ Obsidian und Gold, weil es der erste Eindruck ist - die Marke zeigt sich einmal ganz, bevor der Nutzer sie hell schaltet. */ .dpes-ov{ position:fixed; inset:0; z-index:2147482500; display:grid; place-items:center; background:rgba(8,7,6,.62); padding:20px; } .dpes-k{ width:min(620px,100%); background:#0A0A09; color:#F2EDE3; border:1px solid #2A2622; border-radius:4px; padding:20px 24px 20px; box-shadow:0 30px 80px -34px rgba(0,0,0,.9); font-family:'Inter', system-ui, sans-serif; } .dpes-kopf{ display:flex; align-items:center; justify-content:space-between; } .dpes-marke{ display:flex; align-items:center; gap:10px; } .dpes-wm{ font-family:'Space Grotesk', system-ui, sans-serif; font-weight:700; font-size:17px; letter-spacing:-.02em; } .dpes-wm i{ font-style:normal; color:var(--wl-c9a84c, #C9A84C); } .dpes-bp{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:#8C8479; border:1px solid #2A2622; padding:2px 7px; border-radius:1px; } .dpes-x{ border:0; background:transparent; color:#8C8479; font-size:22px; line-height:1; cursor:pointer; padding:0 4px; } .dpes-x:hover{ color:#F2EDE3; } .dpes-k h2{ font-family:'Space Grotesk', system-ui, sans-serif; font-size:24px; margin:16px 0 6px; letter-spacing:-.02em; } .dpes-vor{ margin:0 0 16px; font-size:14px; color:#BFB7A9; line-height:1.6; } .dpes-vor b{ color:#F5EFE2; } .dpes-vor i{ font-style:italic; color:#F5EFE2; } .dpes-liste{ border:1px solid #201D1A; border-radius:3px; overflow:hidden; } .dpes-z{ display:flex; align-items:center; gap:12px; padding:9px 13px; border-bottom:1px solid #1A1815; background:#0E0D0B; } .dpes-z:last-child{ border-bottom:0; } .dpes-i{ width:20px; text-align:center; color:var(--wl-c9a84c, #C9A84C); font-size:12px; flex:0 0 auto; } .dpes-t{ flex:1; min-width:0; line-height:1.3; } .dpes-t b{ display:block; font-size:13px; font-weight:600; } .dpes-t small{ display:block; font-size:11px; color:#8C8479; } .dpes-v{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:14px; font-weight:700; color:#F5EFE2; font-variant-numeric:tabular-nums; flex:0 0 auto; } .dpes-fuss{ margin:11px 0 0; font-size:12px; color:#8C8479; } .dpes-knoepfe{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; } .dpes-b{ font-family:inherit; font-size:13px; padding:9px 15px; border-radius:2px; border:1px solid #2A2622; background:transparent; color:#E9E3D6; cursor:pointer; } .dpes-b:hover{ border-color:var(--wl-b8932f, #b8932f); } .dpes-haupt{ background:linear-gradient(110deg, var(--wl-e8cc7a, #E8CC7A), var(--wl-c9a84c, #C9A84C) 55%, var(--wl-b8932f, #b8932f)); color:#141210; border-color:transparent; font-weight:600; } .dpes-leise{ margin-left:auto; color:#8C8479; border-color:transparent; } /* Der Portfolio-Knopf wird IMMER gebaut (siehe layout-varianten.js), aber bei den Spalten-Layouts auf breiten Schirmen nicht gebraucht - dort steht die Objektliste ja dauerhaft daneben. Unter 900 px blendet ihn die Media-Query oben wieder ein. */ html[data-dp-layout] .dpl-schiene[data-objekte="spalte"] .dpl-portfolio{ display:none; } /* ═══ 9 · TYPOGRAFIE (v1646) ════════════════════════════════════════ Marcel am 28.09.2026: „das passt ja garnicht, sieht ja garnicht so aus wie es soll. auch schriften etc nachziehen. das muss nicht gold sein die schriftfarbe." ── WAS GEMESSEN WURDE ────────────────────────────────────────────── Auf EINEM Schirm liefen DREI Sans-Schriften gegeneinander: Inter 1.501 Elemente (mein Layout + der helle Skin) IBM Plex Sans 507 Elemente ueber `--font-main`, style.css:29164 DM Sans 154 Elemente ueber 112 feste Regeln in style.css JetBrains Mono 112 Elemente Space Grotesk 79 Elemente `CLAUDE.md` kennt vier Schriften: Space Grotesk (Display), JetBrains Mono (Mono/Labels), Inter (Body), Cormorant Garamond (Serif). **IBM Plex Sans und DM Sans stehen dort nicht.** Sie sind gewachsen (V248-04 hat IBM Plex einmal zur „Hauptschrift" erklaert) und widersprechen der Marke. ── DER EIGENTLICHE GRUND, WARUM ES NICHT WIE DER ENTWURF AUSSAH ──── **Die Zahlen liefen in Inter.** `.num`, `.kv-v`, `.pos`, `.neg` — alle proportional gesetzt. Im Entwurf standen sie in JetBrains Mono mit `tabular-nums`, rechtsbuendig, gleiche Stellenbreite. > Daran erkennt ein Pruefer eine Tabelle, die stimmt. Eine Spalte > Zahlen, deren Ziffern verschieden breit sind, liest sich wie eine > Liste - nicht wie eine Rechnung. Das war der groesste einzelne Unterschied, und er stand in keiner Farbe, sondern in der Schriftwahl. ── GELTUNGSBEREICH ───────────────────────────────────────────────── NUR `html[data-dp-layout]`. Der Auslieferungszustand bleibt unberuehrt (siehe v1645) - dort gilt weiter, was gewachsen ist. ═══════════════════════════════════════════════════════════════════ */ /* Die Token umbiegen: alles, was `--font-main` liest, folgt automatisch. */ html[data-dp-layout]{ --font-main:'Inter', system-ui, -apple-system, sans-serif; --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --dpl-body:'Inter', system-ui, -apple-system, sans-serif; --dpl-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; --dpl-disp:'Space Grotesk', system-ui, sans-serif; } /* Die festen Fremdschriften ueberstimmen. Einzeln benannt statt per Sammelselektor - ein `*{font-family:…}` wuerde auch die Mono-Stellen und die Wortmarke treffen. */ html[data-dp-layout] body, html[data-dp-layout] .body, html[data-dp-layout] input, html[data-dp-layout] select, html[data-dp-layout] option, html[data-dp-layout] optgroup, html[data-dp-layout] textarea, html[data-dp-layout] button, html[data-dp-layout] .btn, html[data-dp-layout] .tab, html[data-dp-layout] td, html[data-dp-layout] th, html[data-dp-layout] .cf, html[data-dp-layout] .hint, html[data-dp-layout] .sbc-btn, html[data-dp-layout] .dp-tip{ font-family:var(--dpl-body) !important; } /* ── Zahlen sind Mono ────────────────────────────────────────────── Nicht „alles was aussieht wie eine Zahl", sondern die Klassen, die gemessen Zahlen tragen. Dazu `tabular-nums`: ohne das sind auch in einer Mono-Schrift die Ziffern nicht zwingend gleich breit. */ html[data-dp-layout] .num, html[data-dp-layout] .kv-v, html[data-dp-layout] .pos, html[data-dp-layout] .neg, html[data-dp-layout] .sfx, html[data-dp-layout] .pfx, html[data-dp-layout] .kpi-val, html[data-dp-layout] .sc-pill-v, html[data-dp-layout] .trl, html[data-dp-layout] input[type=number], html[data-dp-layout] .body td.num, html[data-dp-layout] .body .betrag, html[data-dp-layout] .body .wert{ font-family:var(--dpl-mono) !important; font-variant-numeric:tabular-nums !important; font-feature-settings:'tnum' 1 !important; } /* Ueberschriften tragen die Displayschrift. */ html[data-dp-layout] .body h1, html[data-dp-layout] .body h2, html[data-dp-layout] .body h3, html[data-dp-layout] .sec-title, html[data-dp-layout] .card-title{ font-family:var(--dpl-disp) !important; letter-spacing:-.01em !important; } /* ── GOLD IST EINE LINIE, KEINE SCHRIFTFARBE ──────────────────────── Marcel ausdruecklich: „das muss nicht gold sein die schriftfarbe." Gemessen trugen Gold: Abschnittsbeschriftungen, Aufklapp-Pfeile, Hinweiszeilen, Kennzahlen-Beschriftungen. Auf hellem Grund liegt #C9A84C bei rund 2,3:1 Kontrast - unter jeder Lesbarkeitsschwelle. > Ein Akzent, der ueberall steht, ist kein Akzent. Gold bleibt an > der Kante des aktiven Reiters und am Runway-Verlauf; Text ist > Tinte. Statusfarben (Gruen, Rot) bleiben unangetastet - die tragen Bedeutung, nicht Marke. */ html[data-dp-layout] .body .sec-lbl, html[data-dp-layout] .body .card-lbl, html[data-dp-layout] .body .obj-extra-chev, html[data-dp-layout] .body .qz-acc-chev, html[data-dp-layout] .body .ds-brand-accent, html[data-dp-layout] .body .dpfk-fl, html[data-dp-layout] .body .dp-infobox-icon, html[data-dp-layout] .hdr-v61-row2 .sc-pill-l{ color:var(--dpl-leise) !important; } /* Die letzten DM-Sans-Reste, einzeln nachgemessen (79 Elemente): die Score-Herleitung (ds-/ds2-*), die KPI-Werte und die Kennzahlen-Zusatzzeile. Werte und Gewichte gehen dabei in Mono - es sind Zahlen. */ html[data-dp-layout] .ds-metric-weight, html[data-dp-layout] .ds-metric-name, html[data-dp-layout] .ds2-metric-weight, html[data-dp-layout] .ds2-metric-name, html[data-dp-layout] .ds2-tag, html[data-dp-layout] .ds2-grenze-name, html[data-dp-layout] .ds2-grenze-ampel, html[data-dp-layout] .sc-pill-sub, html[data-dp-layout] .body li, html[data-dp-layout] .body span{ font-family:var(--dpl-body) !important; } html[data-dp-layout] .ds-metric-score, html[data-dp-layout] .ds-metric-input, html[data-dp-layout] .ds2-metric-score, html[data-dp-layout] .ds2-metric-input, html[data-dp-layout] .ds2-grenze-wert{ font-family:var(--dpl-mono) !important; font-variant-numeric:tabular-nums !important; } /* ── Abschnittsköpfe und Felder (v1647) ───────────────────────────── GEMESSEN: die Abschnittsköpfe sind `.ct` — bereits Versalien mit 1,4 px Sperrung, aber in DM Sans. Sie brauchen nur die richtige Schrift, keine neue Gestaltung. > Die Feldbeschriftungen bleiben, wie sie sind. Im Entwurf standen > sie als Mono-Versalien - das trägt bei „PLZ" und „Baujahr", aber > **75 der 274 Beschriftungen sind ganze Sätze** („Erhöhung gilt auch > für zusätzliche Einnahmen …"). Versalien in Mono wären dort > unlesbar. Ein Entwurf, der mit acht Feldern gezeichnet wurde, > gilt nicht ungeprüft für 274. */ html[data-dp-layout] .body .ct{ font-family:var(--dpl-mono) !important; font-size:10px !important; letter-spacing:.12em !important; color:var(--dpl-leise) !important; } /* Felder flacher: Haarlinie statt 1,1 px, weisser Grund, kleiner Radius. Die Höhe bleibt - 38 px sind auf dem Tablet die Grenze, ab der ein Feld noch sicher zu treffen ist. */ html[data-dp-layout] .body input[type=text], html[data-dp-layout] .body input[type=number], html[data-dp-layout] .body input[type=date], html[data-dp-layout] .body select, html[data-dp-layout] .body textarea{ border:1px solid var(--dpl-linie) !important; border-radius:2px !important; background:var(--dpl-flaeche) !important; } html[data-dp-layout] .body input:focus, html[data-dp-layout] .body select:focus, html[data-dp-layout] .body textarea:focus{ border-color:var(--dpl-gold) !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 16%, transparent) !important; } /* ── Das restliche Gold in der Schrift ────────────────────────────── Einzeln nachgemessen. Gruen und Rot bleiben - die tragen Bedeutung. Der Stern `.ds2-stern-icon` bleibt golden: er IST die Wertung, kein Text. */ html[data-dp-layout] .sb-act-section-title, html[data-dp-layout] .body .vz-arrow, html[data-dp-layout] .body .phase-divider, html[data-dp-layout] .body .junker-action-banner-title, html[data-dp-layout] .body .dab-bp-code, html[data-dp-layout] .body .ds-top-deal-label, html[data-dp-layout] .body .kpi-eval-light, html[data-dp-layout] .body small{ color:var(--dpl-leise) !important; } /* ── Karten und Kennzahlenzeile (v1648) ───────────────────────────── GEMESSEN am Blatt: die Karten tragen 12 px Radius und einen Schatten `0 2px 12px`. Der Entwurf hatte 2 px und keinen Schatten. > Ein Schatten hebt eine Karte von der Fläche ab - das will ein > Dashboard. Ein Gutachten will das Gegenteil: alles liegt auf > EINEM Blatt, getrennt durch Linien, nicht durch Höhe. Und die Kennzahlen-Beschriftung stand noch in DM Sans; meine Regel aus v1646 hatte dort nur die FARBE gesetzt. Eine Regel, die eine Eigenschaft ändert, ändert nicht die andere mit. */ html[data-dp-layout] .body .card{ border-radius:2px !important; box-shadow:none !important; border:1px solid var(--dpl-linie) !important; } html[data-dp-layout] .hdr-v61-row2 .sc-pill-l{ font-family:var(--dpl-mono) !important; } /* Die Sternebewertung stand als goldene Trennlinie quer durch die Karte. Sie bleibt als Beschriftung - aber als Linie, nicht als Leuchtschrift. */ html[data-dp-layout] .body .qz-sep, html[data-dp-layout] .body .sterne-sep, html[data-dp-layout] .body .phase-divider{ color:var(--dpl-sehr-leise) !important; font-family:var(--dpl-mono) !important; font-size:9.5px !important; letter-spacing:.12em !important; } /* ── Der ID-Riegel (v1648b) ───────────────────────────────────────── GEMESSEN mit dem Kaskaden-Walker: die Karten blieben bei 12 px Radius, weil `#s0 .card{border-radius:12px !important}` in style.css steht. Ein ID-Selektor ist (1,1,0); meine Regel `html[data-dp-layout] .body .card` nur (0,3,1). > **ID schlaegt Klasse, und `!important` hilft nicht darueber > hinweg** - es entscheidet erst BEI GLEICHER Spezifitaet. Zum > zweiten Mal in zwei Tagen dieselbe Falle (zuerst `#oab-run`). `:is()` nimmt die Spezifitaet seines staerksten Arguments an. Die Liste der Abschnitts-IDs ist gemessen, nicht geraten: s0 bis s8 plus die beiden benannten. */ html[data-dp-layout] .body :is(#s0,#s1,#s2,#s3,#s3-tax,#s4,#s5,#s6,#s7,#s8,#s-quick,#s-marktbericht) .card{ border-radius:2px !important; box-shadow:none !important; border:1px solid var(--dpl-linie) !important; } html[data-dp-layout] .body :is(#s0,#s1,#s2,#s3,#s3-tax,#s4,#s5,#s6,#s7,#s8,#s-quick,#s-marktbericht) :is(input[type=text],input[type=number],input[type=date],select,textarea){ border:1px solid var(--dpl-linie) !important; border-radius:2px !important; background:var(--dpl-flaeche) !important; font-family:var(--dpl-body) !important; } html[data-dp-layout] .body :is(#s0,#s1,#s2,#s3,#s3-tax,#s4,#s5,#s6,#s7,#s8) .ct{ font-family:var(--dpl-mono) !important; font-size:10px !important; letter-spacing:.12em !important; color:var(--dpl-leise) !important; } /* ═══ 10 · SICHTBAR IST NICHT BEDIENBAR (v1649) ═════════════════════ Marcel am 28.09.2026: „die Verknuepfungen passen nicht alle … einstellungen kann man nicht anklicken." GEMESSEN mit `elementFromPoint` auf die Mitte des Knopfes: dort lag nicht der Knopf, sondern die Schiene. Ursache: #sb-actions-accordion { pointer-events: none } Das Akkordeon setzt das im ZUGEKLAPPTEN Zustand. Ich hatte beim Aufklappen `display`, `height`, `max-height`, `overflow`, `opacity` und `visibility` gesetzt - und `pointer-events` vergessen. **Alle zwoelf Aktionen waren damit tot.** > **Sichtbar ist nicht bedienbar.** Ich hatte gezaehlt, was man > SIEHT, und daraus geschlossen, dass es geht. Eine Zaehlung von > Knoepfen ist keine Pruefung von Knoepfen - das sagt nur > `elementFromPoint` auf den Punkt, den der Finger trifft. Dieselbe Familie wie zwei Fehler davor: eine Regel aendert nicht mit, was sie nicht nennt. */ html[data-dp-layout] .dpl-schiene #sb-actions-accordion, html[data-dp-layout] .dpl-schiene #sb-actions-accordion *, html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer, html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer *, html[data-dp-layout] .dpl-schiene nav.tabs, html[data-dp-layout] .dpl-schiene nav.tabs *{ pointer-events:auto !important; } /* ── v1935 · DERSELBE DEFEKT, DIESMAL IN DER SCHUBLADE ────────────────── Marcel am 07.10.2026: „wenn ich Objektkarten umstelle, dann gehe ich einmal auf Portfolio und dann sehe ich die, stelle das wieder um auf Aktionen und dann kann ich Einstellungen nicht mehr anklicken." **Das ist WORTGLEICH der Befund vom 28.09.2026 oben** - und die Ursache ist dieselbe Zeile: `#sb-actions-accordion { pointer-events: none }` aus dem zugeklappten Zustand. Gemessen bei 387 px, Marcels Weg nachgestellt: .sb-act-item pointer-events=none .sb-actions-accordion-inner pointer-events=none #sb-actions-accordion pointer-events=none <- Quelle #sidebar pointer-events=auto Betroffen war nicht nur „Einstellungen", sondern JEDE der zwoelf Aktionen - die Kinder erben `pointer-events` vom Akkordeon. > **Eine Reparatur erbt den Anker, an dem sie geschrieben wurde.** Die Zeilen > oben hat v1649 an `.dpl-schiene` gehaengt - die gibt es nur am Schreibtisch. > Auf dem Handy liegt dieselbe Liste in `aside#sidebar`, und dort lief der > Defekt neun Tage unbemerkt weiter. Beide Male hat Marcel ihn gefunden, > nicht die Pruefstrecke. > **Was aus einer Fassung mitgenommen wird, sind die REGELN, nicht ihre > Anker.** Wer eine Fassung klont, muss jede Reparatur daran pruefen, die vor > dem Klon geschrieben wurde. Deshalb hier dieselben sechs Zeilen mit dem Schublade-Anker. Nicht als Kopie nebeneinander, sondern bewusst als zweite Kette: die Schiene und die Schublade sind zwei Orte, und keiner von beiden darf den anderen stillegen. ──────────────────────────────────────────────────────────────────────── */ html[data-dp-layout] aside#sidebar #sb-actions-accordion, html[data-dp-layout] aside#sidebar #sb-actions-accordion *, html[data-dp-layout] aside#sidebar .dpl-teil-nutzer, html[data-dp-layout] aside#sidebar .dpl-teil-nutzer *, html[data-dp-layout] aside#sidebar .sb-user-main, html[data-dp-layout] aside#sidebar .sb-user-main *{ pointer-events:auto !important; } /* ── Die Marke oben links groesser (Marcels Wunsch) ────────────────── */ html[data-dp-layout] .dpl-marke{ height:58px !important; padding:0 14px !important; } html[data-dp-layout] .dpl-wm{ font-size:20px !important; } html[data-dp-layout] .dpl-logo{ max-height:36px !important; } /* ── Erdrueckt statt fehlend, zum zweiten Mal (v1649b) ────────────── GEMESSEN in der Schiene: .dpl-teil-aktionen 12 px hoch #sb-actions-accordion 637 px hoch, von 162 bis 798 Das Kind quillt um 625 px aus seinem Behaelter. Ursache: `flex: 0 1 auto` - in einer Flex-SPALTE darf ein Kind damit schrumpfen, und wenn die Geschwister die Hoehe schon verbraucht haben, schrumpft es auf fast null und quillt ueber sie. > **Das steht so schon in meinen Notizen** (der Chat im Sprechlauf, > 33 von 577 px). Ich bin trotzdem wieder hineingelaufen - diesmal > in die andere Richtung: nicht der Inhalt war weg, sondern er lag > UNTER dem naechsten Block. Dazu der zweite Taeter: `nav.tabs` traegt `position:sticky` mit `z-index:250`. In einer Schiene ergibt das keinen Sinn - es erzeugt nur einen Stapelkontext, der die ueberquellenden Aktionen verdeckt. Fuenf der zwoelf Knoepfe lagen darunter. Die Schiene scrollt ohnehin (`overflow:auto`); die Bloecke duerfen ihre volle Hoehe nehmen. */ html[data-dp-layout] .dpl-schiene .dpl-teil{ flex:0 0 auto !important; } html[data-dp-layout] .dpl-schiene .dpl-portfolio{ flex:0 0 auto !important; } html[data-dp-layout] .dpl-teil-tabs nav.tabs{ position:static !important; z-index:auto !important; top:auto !important; } html[data-dp-layout] .dpl-schiene #sb-actions-accordion{ height:auto !important; max-height:none !important; overflow:visible !important; } /* Der Nutzerblock bleibt unten, solange Platz ist - sonst haengt er einfach hinter den Aktionen und scrollt mit. */ html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer{ margin-top:auto !important; } /* ── Der wahre Taeter: das Menue ist ein Ueberlagerungsfeld (v1649c) ─ GEMESSEN: `#sb-actions-accordion` traegt `position:absolute`, `top:161.8px`, `z-index:50`. In der Seitenleiste ist das richtig - dort klappt es ueber die Objektliste auf und verdeckt sie absichtlich. In der SCHIENE ist es falsch: der Behaelter bleibt 12 px hoch (nur sein Polster), das Feld schwebt 637 px darueber und deckt die Reiter zu. > **Ich hatte zuerst `flex:0 0 auto` gesetzt - und damit das OPFER > behandelt.** Ein Behaelter, dessen Kind aus dem Fluss ist, kann > nicht wachsen, egal welchen Flex-Wert er traegt. Das steht so in > meinen Notizen: verdeckt ein Element zum zweiten Mal etwas, ist > die Ursache seine EIGENE Lage, nicht die des Verdeckten. In der Schiene steht es deshalb im Fluss. */ html[data-dp-layout] .dpl-schiene #sb-actions-accordion{ position:static !important; top:auto !important; left:auto !important; right:auto !important; width:auto !important; z-index:auto !important; box-shadow:none !important; border:0 !important; } /* ── Die Schiene passt jetzt ins Fenster (v1649d) ─────────────────── Marcel: „teilweise nicht alles zu sehen." GEMESSEN bei 854 px Fensterhoehe: Marke 58 Portfolio 33 Reiter 9 x 31 = 330 Aktionen 12 x 37 + 5 Gruppentitel x 35 = 646 Nutzer 81 ──────────────────── Summe 1148 → 294 px zu viel Sechs der zwoelf Aktionen lagen damit unter der Kante. Eine Schiene, die scrollt, OHNE dass man es sieht, verliert die Haelfte ihrer Eintraege - der Nutzer weiss nicht, dass dort noch etwas ist. Gerechnet mit engeren Zeilen: 58 + 33 + 9x28 + (12x28 + 5x18) + 64 = 833 → passt. Die Marke bleibt gross (Marcels Wunsch) - gespart wird an den Zeilen, nicht am Logo. Zusaetzlich klebt der Nutzerblock unten fest: **Abmelden muss erreichbar sein, auch wenn doch einmal gescrollt wird.** */ html[data-dp-layout] .dpl-teil-tabs nav.tabs .tab{ padding:5px 10px !important; min-height:0 !important; font-size:12.5px !important; line-height:1.4 !important; } html[data-dp-layout] .dpl-schiene .sb-act-item{ padding:5px 9px !important; min-height:0 !important; font-size:12.5px !important; line-height:1.35 !important; } html[data-dp-layout] .dpl-schiene .sb-act-section-title{ padding:8px 9px 3px !important; min-height:0 !important; font-family:var(--dpl-mono) !important; font-size:8.5px !important; letter-spacing:.12em !important; line-height:1.2 !important; color:var(--dpl-sehr-leise) !important; } html[data-dp-layout] .dpl-schiene #sb-user{ padding:8px 10px !important; min-height:0 !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer{ position:sticky !important; bottom:0 !important; z-index:2; background:var(--dpl-flaeche) !important; border-top:1px solid var(--dpl-linie) !important; } /* ── Der Aktionsblock scrollt in sich (v1649e) ────────────────────── GEMESSEN nach dem Engersetzen: 1023 px Inhalt bei 854 px Fenster - immer noch 169 zu viel. Und der klebende Nutzerblock deckte dabei „Bankexport" und „Export" zu: wieder das Opfer behandelt. > **Auf den letzten Pixel zu optimieren bricht beim naechsten > Eintrag.** Zwoelf Aktionen sind heute richtig; morgen sind es > dreizehn, und dann faellt wieder etwas unter die Kante. Deshalb die Flex-Grammatik statt der Rechnung: Marke, Portfolio, Reiter, Nutzer flex:0 0 auto (stehen fest) Aktionen flex:1 1 auto (nehmen den Rest) min-height:0 (duerfen schrumpfen) overflow-y:auto (scrollen in sich) `min-height:0` ist dabei Pflicht: ein Flex-Kind hat als Vorgabe `min-height:auto` und schrumpft dann NICHT unter seinen Inhalt - genau daran scheitert dieser Aufbau sonst. Der Nutzerblock braucht kein `sticky` mehr: er steht am Ende der Spalte und wird von nichts mehr verdraengt. */ html[data-dp-layout] .dpl-schiene{ overflow:hidden !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-tabs{ flex:0 0 auto !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer{ flex:0 0 auto !important; position:static !important; margin-top:0 !important; } /* ── Spalte und Leiste brauchen verschiedene Regeln (v1649f) ──────── GEMESSEN nach v1649e: in der Aktenmappe (Spalte) 12 von 12 Aktionen erreichbar, in der Werkbank (Leiste) **0 von 12**. Ursache: die Regeln aus v1649e sprechen `.dpl-teil-aktionen` unabhaengig von der Stellung an. `flex:1 1 auto` mit `overflow-y:auto` ordnet eine SPALTE. In einer ZEILE ist beides falsch: der Block wird 522 px hoch, die Leiste zeigt 112, und der Rest liegt ausserhalb des Fensters - `elementFromPoint` gibt dort `null` zurueck. > **Eine Regel ohne Stellungsanker gilt fuer alle vier Stellungen.** > Zwei davon sind senkrecht, zwei waagerecht - sie koennen nicht > dieselbe Grammatik haben. Deshalb: die Scroll-Grammatik bekommt den Anker `links`/`rechts` zurueck, und die waagerechten Stellungen bekommen ihre eigene. */ html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] .dpl-teil-aktionen, html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] .dpl-teil-aktionen{ flex:0 1 auto !important; min-width:0 !important; min-height:0 !important; height:auto !important; overflow-x:auto !important; overflow-y:hidden !important; } html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] #sb-actions-accordion, html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] #sb-actions-accordion{ height:auto !important; max-height:none !important; } html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] .dpl-teil-nutzer, html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] .dpl-teil-nutzer{ flex:0 0 auto !important; margin-left:auto !important; border-top:0 !important; background:transparent !important; } /* In der Leiste sind die Gruppentitel Trennstriche (siehe v1636c) - die engeren Zeilen aus v1649d duerfen sie nicht wieder zu Text machen. */ html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] .sb-act-section-title, html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] .sb-act-section-title{ padding:0 !important; height:20px !important; width:1px !important; } /* Die `order`-Regeln fuer die waagerechten Stellungen sind damit gegenstandslos: `.main-col` ist `display:block`, dort wirkt `order` nicht. Der Ort kommt jetzt aus `layout-varianten.js` (insertBefore hinter die Reiterleiste). Die Regeln bleiben als Merkposten stehen - sie schaden nicht und erklaeren, warum es NICHT so geloest ist. */ /* In der Leiste nimmt der Aktionsbereich den RESTPLATZ (flex:1 1 0), nicht seine Wunschbreite (flex:0 1 auto). Sonst quillt er unter den Nutzerblock, der rechts steht - gemessen verdeckte dessen Avatar die letzten drei Knoepfe. `min-width:0` ist dabei Pflicht, sonst schrumpft ein Flex-Kind nicht unter seinen Inhalt. */ html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] .dpl-teil-aktionen, html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] .dpl-teil-aktionen{ flex:1 1 0 !important; min-width:0 !important; } html[data-dp-layout] .dpl-schiene[data-stellung="leiste"] .dpl-teil-nutzer, html[data-dp-layout] .dpl-schiene[data-stellung="fuss"] .dpl-teil-nutzer{ flex:0 0 auto !important; position:relative !important; z-index:1; } /* ═══ 11 · DIE KENNZAHLEN BLEIBEN STEHEN (v1650) ════════════════════ Marcel am 28.09.2026: „die Ausgabe fehlt … die Bewertung mit Rendite, Finanzierung, Risiko, also das sehe ich dort alles gar nicht." GEMESSEN: die Zeile IST da - `RENDITE 72 %`, `FINANZ. 90 %`, `RISIKO 47 %`, `LAGE 68 %`, `UPSIDE 56 %` stehen im DOM. Sie hat nur **Hoehe 0 und Breite 0**, weil `body.hdr-collapsed` sie per `display:none !important` ausblendet - und diese Klasse bleibt gesetzt, auch wenn die Seite wieder ganz oben steht. > **Ein Einklapp-Mechanismus, der nicht wieder aufklappt, ist kein > Einklappen, sondern ein Loeschen.** In den Layouts ist der Kopf mit > 86 px ohnehin schmal; das Einklappen spart 37 px und kostet die > wichtigste Information des Schirms. Deshalb: in den Layouts klappt der Kopf nicht ein. */ html[data-dp-layout] body.hdr-collapsed .hdr-v61-row2, html[data-dp-layout] body.dp-hdr-compact .hdr-v61-row2{ display:flex !important; } html[data-dp-layout] body.hdr-collapsed header.hdr, html[data-dp-layout] body.dp-hdr-compact header.hdr{ height:auto !important; max-height:none !important; overflow:visible !important; } /* ═══ 12 · DIE SENKRECHTEN SCHIENEN SIND DUNKEL (v1650) ═════════════ Marcel: „ich haette gerne die Aktenmappe, genauso wie die Kanzlei auch mit dem Hintergrund im Schwarz." Im Entwurf trug die Kanzlei eine dunkle Navigationsspalte - in der App war sie hell geblieben. Jetzt beide: Obsidian als ruhiger Anker links, das Blatt daneben hell. > Das ist die Grammatik, die jeder aus DATEV und Banksoftware kennt: > dunkle Navigation, helles Dokument. Die Marke steht in der Spalte, > die Arbeit auf dem Papier. */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"]{ background:#0E0D0B !important; border-right-color:#26231E !important; border-left-color:#26231E !important; color:#E9E3D6 !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-marke{ background:transparent !important; border-bottom-color:#26231E !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-wm{ color:#F2EDE3 !important; } /* Reiter in der dunklen Schiene */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] nav.tabs .tab{ color:#BFB7A9 !important; background:transparent !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] nav.tabs .tab:hover{ color:#F5EFE2 !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] nav.tabs .tab.active{ color:#F5EFE2 !important; background:#171512 !important; border-left-color:var(--dpl-gold) !important; } /* Aktionen, Nutzerblock und Portfolio-Knopf in der dunklen Schiene */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-portfolio{ background:#171512 !important; border-color:#2A2622 !important; color:#E9E3D6 !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .sb-act-item{ color:#BFB7A9 !important; background:transparent !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .sb-act-item:hover{ color:#F5EFE2 !important; background:#171512 !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .sb-act-section-title{ color:#7A7268 !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-teil-nutzer{ background:#0A0A09 !important; border-top-color:#26231E !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] #sb-user, html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] #sb-user *{ color:#BFB7A9 !important; background:transparent !important; } /* Die Objektspalte der Kanzlei wird mit dunkel - sonst stehen zwei verschiedene Grauwerte nebeneinander. */ html[data-dp-layout^="v2"] #sidebar{ background:#0E0D0B !important; border-right:1px solid #26231E !important; } /* GEMESSEN nach v1650: die Schiene ist dunkel (rgb(14,13,11)), aber `#sb-actions-accordion` und sein innerer Behaelter tragen `rgb(255,255,255)` samt Rahmen - ein weisser Kasten mitten in der dunklen Spalte. > Das Menue war als AUFKLAPPFELD ueber einer hellen Seitenleiste > gedacht; dort ist ein weisser Grund mit Rahmen richtig. In der > dunklen Schiene ist er ein Fremdkoerper. Wer ein Bauteil > verpflanzt, erbt seine Annahmen mit. */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] #sb-actions-accordion, html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .sb-actions-accordion-inner{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; } /* Und alles, was darin noch eine helle Flaeche mitbringt. */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .sb-act-item{ border-color:transparent !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-teil-nutzer *{ border-color:#26231E !important; } /* Der Knopf im Nutzerblock (Abmelden) bleibt erkennbar. */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] #sb-user button{ background:#171512 !important; border:1px solid #2A2622 !important; color:#E9E3D6 !important; } /* Und der Reiter-BEHAELTER. Ich hatte in v1650 `nav.tabs .tab` dunkel gemacht und dabei `nav.tabs` selbst vergessen - der Behaelter blieb `rgb(251,250,247)`. Eine Regel aendert nur, was sie benennt. */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] nav.tabs, html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-teil{ background:transparent !important; border-color:#26231E !important; box-shadow:none !important; } /* ═══════════════════════════════════════════════════════════════════════ v1652 · DIE SCHRIFT IN DER DUNKLEN SCHIENE ── ERST EINE ZURUECKNAHME ─────────────────────────────────────────── Ich habe beim Ansehen eines auf 62 % verkleinerten Bildschirmfotos behauptet, die Aktenmappe sei hell geblieben. **Das war falsch.** Gemessen an acht Punkten mit `elementFromPoint`: der sichtbare Grund ist ueberall `rgb(14,13,11)`. > Ein herunterskaliertes Bildschirmfoto ist kein Farbbeweis. Dunkle > Flaechen mit hellen Linien darauf werden beim Verkleinern > gemittelt und sehen hell aus. Farbe wird gemessen, nicht > angeschaut. ── DER ECHTE BEFUND ───────────────────────────────────────────────── Der Grund ist dunkel, die SCHRIFT aber noch die fuer hellen Grund. Mit dem Kaskaden-Walker ueber alle Texttraeger der Schiene, Kontrast gegen `rgb(14,13,11)`: .tab-lbl rgb(26,23,20) 1.09 9 Stellen .sb-act-l rgb(59,53,45) 1.60 12 Stellen .sb-actions-l rgb(59,53,45) 1.60 1 Stelle .sb-act-section-title rgb(122,114,104) 4.10 5 Stellen **1,09 heisst unsichtbar.** Der aktive Reiter „Objekt" stand als reines Symbol da, seine Beschriftung war nicht zu sehen - ich hatte sie deshalb fuer leer gehalten. Ursache ist dieselbe wie beim weissen Aktionsmenue in v1650c: der Behaelter wurde umgefaerbt, seine Kinder nicht. Eine Regel aendert nur, was sie benennt - und `color` erbt nicht durch ein Kind, das selbst eine hat. Statusfarben (Gruen, Rot) und der Goldakzent bleiben unangetastet; sie tragen Bedeutung und keine Lesbarkeitsschuld. ═══════════════════════════════════════════════════════════════════════ */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .tab-lbl, html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .sb-act-l, html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .sb-actions-l{ color:#BFB7A9 !important; /* Kontrast 8.5 gegen #0E0D0B */ } /* Der aktive Reiter hebt sich ab - sonst ist die Liste eine Wand. */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] nav.tabs .tab.active .tab-lbl{ color:#F5EFE2 !important; font-weight:600 !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] nav.tabs .tab:hover .tab-lbl, html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .sb-act-item:hover .sb-act-l{ color:#F5EFE2 !important; } /* Die Abschnittsueberschriften duerfen leiser sein - aber lesbar. 4,10 auf 4,62. */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .sb-act-section-title{ color:#8C8578 !important; } /* ═══════════════════════════════════════════════════════════════════════ v1652b · die zwei Reste und das groessere Logo Nach v1652 blieben genau zwei Stellen unter 4,5 - gemessen, nicht geschaetzt: .tabs-status-text 1.08 „0 / 6 · 0 %" (der Fortschritt) .sb-actions-l 1.60 „Aktionen" (der Aufklapper) Der zweite ist lehrreich: meine Regel AUS v1652 benennt `.sb-actions-l` ausdruecklich und hat trotzdem verloren. `style.css:26792` schreibt `aside.sidebar .sb-actions-trigger .sb-actions-l` - drei Klassen und zwei Elemente gegen meine zwei Klassen und zwei Attribute. Beide ohne `!important`, also entscheidet die Spezifitaet, und meine war niedriger. > **Eine Klasse zu benennen heisst nicht, sie zu treffen.** Wer eine > fremde Farbe ueberschreibt, muss wissen, WELCHE Regel sie setzt - > nicht nur, WIE das Element heisst. ── DAS LOGO ──────────────────────────────────────────────────────── Marcel: „DealPilot Logo oben links duerfte groesser sein." Gemessen: Schriftgrad 20 px in einem 58 px hohen Feld bei 208 px Schienenbreite - der Schriftzug nahm 82 von 207 px ein, also 40 %. Auf 26 px wird daraus rund 107 px, gut die Haelfte. Mehr traegt die Schiene nicht, ohne dass „DealPilot" umbricht. ═══════════════════════════════════════════════════════════════════════ */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .sb-actions-trigger .sb-actions-l, html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] #sb-actions-trigger-btn .sb-actions-l{ color:#BFB7A9 !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .tabs-status-text{ color:#BFB7A9 !important; } /* Das Logo. */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-marke{ min-height:70px !important; padding-top:4px !important; } html[data-dp-layout] .dpl-schiene .dpl-wm{ font-size:26px !important; line-height:34px !important; } /* Ein Partnerlogo waechst mit - aber gedeckelt, sonst sprengt ein breites Bild die 208 px. */ html[data-dp-layout] .dpl-schiene .dpl-logo{ max-height:46px !important; max-width:176px !important; width:auto !important; height:auto !important; } /* ── v1652d · DER EIGENE SCHALTER IST AUCH NUR EIN WERKZEUG ─────────── Gemessen auf 390 px, mit `elementsFromPoint` auf den Abrufknopf: button [118x44] der Knopf im Schalter div.dpl-schalter [374x154] pos=fixed z=2147483000 <- liegt drauf button#oab-run [321x29] pos=relative z=1 Die Umschaltleiste wird auf schmalen Schirmen 154 px hoch, weil ihre sechs Knoepfe umbrechen - und sie liegt fest ueber allem. Damit war der Abrufknopf auf dem Handy nicht zu druecken. > Ich hatte gerade `#dp-kv-panel` aus demselben Grund ausgeblendet > und danach MEINEN eigenen Schalter gemessen, der dasselbe tut. > Ein Fehler, den man bei anderen findet, steht meist auch im > eigenen Bau. Dieselbe Entscheidung: unter 900 px weg. Verloren geht nichts - der Aufbau steht in den Einstellungen unter „Darstellung", und `?layout=` wirkt auf jeder Breite. */ @media (max-width: 900px){ .dpl-schalter{ display:none !important; } } /* ═══════════════════════════════════════════════════════════════════════ v1653 · MARCELS DURCHGANG VOM 28.09.2026 Sechs Punkte, alle gemessen, bevor eine Zeile geschrieben wurde. Das Fenster war 2133 CSS-Pixel breit (der Screenshot 1568 - Faktor 1,36; wer an einem Bildschirmfoto misst, misst falsch). ═══════════════════════════════════════════════════════════════════════ */ /* ── 1 · DER KOPF WIRD SCHWARZ ──────────────────────────────────────── Marcel: „Hast du die Möglichkeit, einmal oben den Header auch in diesem Schwarz anzugeben und die Farben dann passend anzupassen?" Gemessen: `header.hdr` trug `rgb(255,255,255)`, `position:sticky`, z=300, 1921x61 - ein weisses Band über einer schwarzen Spalte. > Dunkle Navigation, helles Dokument ist die Grammatik. Der Kopf > gehört zur Navigation: er trägt Objektwähler, Fortschritt und die > Werkzeugknöpfe, nicht den Inhalt. Also gehört er zur dunklen > Seite - und die Arbeitsfläche bleibt das helle Blatt. Gefärbt werden die FLÄCHEN einzeln. Eine Token-Überschreibung reicht in `style.css` nicht (CLAUDE.md), und der Kopf hat drei Kinder mit eigenen Gründen. */ html[data-dp-layout] header.hdr{ background:#0E0D0B !important; border-bottom:1px solid #26231E !important; color:#E9E3D6 !important; box-shadow:none !important; } html[data-dp-layout] header.hdr .hdr-v61-row1, html[data-dp-layout] header.hdr .hdr-v61-row2{ background:transparent !important; border-color:#26231E !important; } /* Die Schrift im Kopf. Gemessen wurde vorher gegen WEISS - jeder dieser Töne ist für hellen Grund gemacht und auf #0E0D0B unlesbar. Dieselbe Ursache wie in v1652: Behälter umgefärbt, Kinder nicht. */ html[data-dp-layout] header.hdr .hdr-obj-num, html[data-dp-layout] header.hdr .hdr-obj-name, html[data-dp-layout] header.hdr .hdr-crumb, html[data-dp-layout] header.hdr .hdr-sep, html[data-dp-layout] header.hdr .hdr-v61-row1 > span, html[data-dp-layout] header.hdr .hdr-v61-row1 > a{ color:#E9E3D6 !important; } html[data-dp-layout] header.hdr .hdr-icon-btn{ color:#BFB7A9 !important; background:transparent !important; border-color:#26231E !important; } html[data-dp-layout] header.hdr .hdr-icon-btn:hover{ color:#F5EFE2 !important; background:#171512 !important; } /* Der Objektwähler ist eine Pille auf hellem Grund - auf Obsidian braucht er einen eigenen, leicht abgesetzten Ton, sonst verschwindet er in der Fläche. */ html[data-dp-layout] header.hdr .hdr-obj-num{ background:#171512 !important; border:1px solid #2A2622 !important; } /* ── 2 und 3 · ZWEI KNÖPFE, DIE HIER NICHTS MEHR ZU TUN HABEN ──────── Marcel: „es gibt dort dieses Vollbild-Menü ausblenden, das müsste bei der Ansicht raus" und „da ist auch dieses Ein- und Ausblenden oben rechts, das könnte dann auch weg." Gemessen: #dp-sb-toggle 36x36 position:fixed z=9000 title=„Vollbild (Menü ausblenden)" #hdr-toggle-btn 22x22 position:absolute, x=2093 Beide bedienen etwas, das es in diesen Layouts nicht mehr gibt: `#dp-sb-toggle` blendet die Objektspalte aus - die ist hier ohnehin eine Schublade und wird über „Portfolio" bedient. `#hdr-toggle-btn` klappt die Score-Zeile ein - die hält `kopfOffenHalten()` seit v1650b bewusst offen. > **Ein Knopf, der einen Zustand umschaltet, den ein anderes Modul > erzwingt, tut nichts - und wirkt dabei wie ein Fehler.** */ html[data-dp-layout] #dp-sb-toggle, html[data-dp-layout] #hdr-toggle-btn{ display:none !important; } /* ── 4 · DIE SCHUBLADE ─────────────────────────────────────────────── Marcel: „wenn ich auf Portfolio klicke, öffnet sich ein Menü komplett verzerrt. Ich kann aber meine Objekte nicht passend auswählen." Gemessen mit offener Schublade: `aside#sidebar` 360x988, `position:fixed`, z=70 - und `background: rgb(255,255,255)`. Ein weisses Blatt, das sich über eine schwarze Ansicht legt. Das „verzerrt" kommt dazu von der Kopfzeile: `.sb-header` ist 49 px hoch mit `overflow:hidden`, die Knöpfe „Quick-Check" und „Marktbericht" darin brauchen mehr und wurden abgeschnitten. Die Spalte ist für 380 px gebaut, die Schublade gibt ihr 360. */ html[data-dp-layout] #sidebar{ width:380px !important; max-width:92vw !important; background:#0E0D0B !important; border-right:1px solid #26231E !important; color:#E9E3D6 !important; } html[data-dp-layout] #sidebar .sb-header{ height:auto !important; min-height:0 !important; overflow:visible !important; background:transparent !important; border-bottom-color:#26231E !important; padding:10px 14px !important; } html[data-dp-layout] #sidebar .sb-section-title, html[data-dp-layout] #sidebar .sb-neu-row, html[data-dp-layout] #sidebar .sb-list{ background:transparent !important; } /* Die Objektkarten bleiben helle Karten auf dunklem Grund - genau so sind sie gebaut, und eine Karte, die man anfasst, darf sich vom Hintergrund abheben. Nur ihr Rahmen wird dunkler, sonst leuchtet jede Kante. */ html[data-dp-layout] #sidebar .sb-card{ border-color:#26231E !important; } /* Beschriftungen, die für hellen Grund gemacht sind. */ html[data-dp-layout] #sidebar .sb-section-title, html[data-dp-layout] #sidebar .sb-sort-toggle, html[data-dp-layout] #sidebar .sb-search input, html[data-dp-layout] #sidebar .sb-wm{ color:#BFB7A9 !important; } html[data-dp-layout] #sidebar .sb-search input{ background:#171512 !important; border-color:#2A2622 !important; } html[data-dp-layout] #sidebar .sb-search input::placeholder{ color:#8C8578 !important; } /* ── 5 · DER SCROLLBALKEN IN DER SCHIENE ───────────────────────────── Marcel: „und die Ansicht, da ist jetzt eine Scrollbar drinne." Gemessen: der Aktionsblock hatte 462 px sichtbar bei 519 px Inhalt - 57 px zu wenig. Drei Stellschrauben, keine davon willkürlich: · das Fortschritts-Badge verlässt die Schiene ( 29 px, Punkt 6) · die Reiter rücken enger zusammen (~18 px) · die Abschnittsüberschriften werden schmaler (~12 px) Zusammen 59 px - der Balken verschwindet, ohne dass etwas kleiner aussieht als nötig. Der `overflow:auto` BLEIBT: wer zwanzig Aktionen hat, muss weiter scrollen können. */ html[data-dp-layout] .dpl-schiene nav.tabs .tab{ padding-top:5px !important; padding-bottom:5px !important; min-height:0 !important; } html[data-dp-layout] .dpl-schiene .sb-act-section-title{ margin:9px 0 3px !important; padding:0 12px !important; line-height:1.2 !important; } html[data-dp-layout] .dpl-schiene .sb-act-item{ padding-top:5px !important; padding-bottom:5px !important; min-height:0 !important; } /* ── 6 · DAS BADGE IM KOPF ─────────────────────────────────────────── `layout-varianten.js` hängt `#tabs-status-badge` in `.hdr-v61-row1` und gibt ihm dort `.dpl-badge-im-kopf`. Hier bekommt es das Aussehen für den dunklen Kopf - rechtsbündig, damit es dem Objektnamen nicht in die Quere kommt. */ html[data-dp-layout] header.hdr .dpl-badge-im-kopf{ margin-left:auto !important; margin-right:14px !important; background:#171512 !important; border:1px solid #2A2622 !important; color:#BFB7A9 !important; } html[data-dp-layout] header.hdr .dpl-badge-im-kopf .tabs-status-text{ color:#BFB7A9 !important; } /* Der Fortschrittsbalken darin bleibt Gold - er trägt Bedeutung. */ html[data-dp-layout] header.hdr .dpl-badge-im-kopf .tabs-status-bar{ background:#2A2622 !important; } /* ── 7 · DIE HELLE KONTEXTSCHIENE DER KANZLEI ──────────────────────── Der Entwurf („Entwurf 2 — Kanzlei"): dunkle Navigation links, helles Blatt in der Mitte, und rechts eine Kontextschiene „Ausgabe" mit den Aktionen — „was man mit diesem Objekt tun kann, steht neben dem Objekt." Sie ist HELL. Deshalb hängt die Färbung seit v1653 an `data-ton` und nicht mehr an der Stellung: mit der alten Regel wäre jede rechte Schiene zwangsläufig schwarz geworden. */ html[data-dp-layout] .dpl-schiene[data-ton="hell"]{ background:#FBFAF7 !important; border-left:1px solid #E6E0D2 !important; border-right:0 !important; color:#2C2A26 !important; } html[data-dp-layout] .dpl-schiene[data-ton="hell"] .dpl-schiene-titel{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:#8C8578; padding:14px 14px 8px; } html[data-dp-layout] .dpl-schiene[data-ton="hell"] .sb-act-item{ color:#2C2A26 !important; background:transparent !important; border-color:transparent !important; } html[data-dp-layout] .dpl-schiene[data-ton="hell"] .sb-act-item:hover{ background:#F3F0E8 !important; } html[data-dp-layout] .dpl-schiene[data-ton="hell"] .sb-act-l{ color:#2C2A26 !important; } html[data-dp-layout] .dpl-schiene[data-ton="hell"] .sb-act-section-title{ color:#8C8578 !important; } html[data-dp-layout] .dpl-schiene[data-ton="hell"] #sb-actions-accordion, html[data-dp-layout] .dpl-schiene[data-ton="hell"] .sb-actions-accordion-inner{ background:transparent !important; border:0 !important; box-shadow:none !important; } /* Die Aktionen stehen in der Kanzlei OFFEN da - sie sind der Zweck dieser Spalte. Ein Aufklapper vor einer Spalte, die nur Aktionen enthält, verlangt einen Klick für nichts. */ html[data-dp-layout^="v2"] .dpl-schiene[data-ton="hell"] #sb-actions-trigger-btn{ display:none !important; } /* ── 8 · DER PLATZ FÜR ZWEI SCHIENEN ───────────────────────────────── Die Kanzlei braucht links 208 und rechts 240 px. Das Polster steht am `.app-wrap`; ohne das rechte läge die Kontextschiene über dem Inhalt - derselbe Fehler, den ich heute schon zweimal bei Werkzeugfenstern gemessen habe. */ html[data-dp-layout^="v2"] .app-wrap{ padding-left:208px !important; padding-right:240px !important; } html[data-dp-layout^="v2"] .dpl-schiene[data-stellung="rechts"]{ width:240px !important; } html[data-dp-layout^="v2"] header.hdr{ margin-right:0 !important; } /* ── v1892 · DIE SCHWELLE WAR 1100 UND HAT DAS TABLET VERLOREN ─────── Hier stand: „Unter 1100 px hat die Kontextschiene keinen Platz mehr. Sie verschwindet NICHT - die Aktionen wandern zurück in den Fluss unter den Inhalt, sonst wären zwölf Funktionen auf dem Tablet weg." Die Absicht war richtig, die Zahl nicht. **Gemessen am 06.10.2026 im gleich-Origin-iframe bei 1024 px, nach dem Zurueckholen von Kanzlei und Tower:** v2 rechte Schiene x=248 **y=9975** 530x758 position:relative v2b rechte Schiene x=248 **y=10037** 530x758 position:relative „Im Fluss unter den Inhalt" heisst am Ende der `.main-col` - und die ist auf dem Objekt-Tab rund zehntausend Pixel hoch. Die zwoelf Funktionen waren damit nicht weg, aber **zehntausend Pixel weit weg**, und das ist dasselbe. Gemessen wurde die Regel damals (v1681b) bei 817 px an einer kurzen Spalte; dort stimmte sie. > **Offen ist nicht erreichbar.** Ein Element, das im Dokument steht > und bei y=10.000 liegt, findet niemand - genauso wenig wie eines, > das es nicht gibt. Unter 901 px gibt es die rechte Schiene seit v1892 gar nicht mehr (`baueSchienen()` baut sie dort nicht). Damit ist dieser Block nur noch fuer das Band 901-1100 px zustaendig gewesen - und genau dort hat er geschadet. Die Schwelle steht jetzt auf **900**: ab 901 px schwebt die Schiene rechts, wie oberhalb von 1100 px. Platz ist da - nachgerechnet: 1024 - 208 links - 240 rechts = 576 px Arbeitsflaeche; bei 901 px bleiben 453. Eng, aber bedienbar, und jedenfalls naeher als y=10.000. */ @media (max-width: 900px){ html[data-dp-layout^="v2"] .app-wrap{ padding-right:0 !important; } html[data-dp-layout^="v2"] .dpl-schiene[data-stellung="rechts"]{ position:static !important; width:auto !important; border-left:0 !important; border-top:1px solid #E6E0D2 !important; margin-top:18px !important; } } /* ═══════════════════════════════════════════════════════════════════════ v1653e · DIE SCHUBLADE, UND WARUM MEINE REGEL VERLOR `html[data-dp-layout] #sidebar{background:#0E0D0B !important}` aus v1653 hat die BREITE gesetzt (gemessen: 380 px, richtig) und die FARBE nicht (gemessen: rgb(255,255,255)). Der Kaskaden-Walker nennt den Sieger: `html[data-ui-theme] body.dp-chrome-hell aside.sidebar#sidebar` -> (1,3,3), `!important`, aus `ui-varianten.css` Meine Regel war (1,1,1). **Zwischen zwei `!important` entscheidet die Spezifitaet** - dieselbe Lehre wie heute schon bei `.dp-pf-mtrigger` und `.sb-actions-l`, jetzt zum dritten Mal. > Ein `!important` ist kein Trumpf, sondern nur eine zweite Liga > derselben Rangfolge. Die Breite kam durch, weil sie niemand sonst mit `!important` setzt. **Dass eine Regel teilweise wirkt, beweist nichts fuer ihre anderen Eigenschaften.** Hier wird die Spezifitaet bewusst ueber den Sieger gehoben, statt auf die Ladereihenfolge zu bauen (CLAUDE.md). ═══════════════════════════════════════════════════════════════════════ */ html[data-dp-layout][data-dp-layout] body.dp-chrome-hell aside.sidebar#sidebar, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar{ background:#0E0D0B !important; border-right:1px solid #26231E !important; color:#E9E3D6 !important; } /* Die Flaechen darin tragen eigene Gruende - jede einzeln, wie in style.css ueblich. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-header, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-neu-row, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-section-title, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-list{ background:transparent !important; border-color:#26231E !important; } /* Beschriftungen, die fuer hellen Grund gemacht sind. Der Kontrast ist gegen #0E0D0B gerechnet: #BFB7A9 ergibt 8,5. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-section-title, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-sort-toggle, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-wm, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-count{ color:#BFB7A9 !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar input[type="text"], html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar input[type="search"], html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-search input{ background:#171512 !important; border-color:#2A2622 !important; color:#E9E3D6 !important; } /* Die Objektkarten bleiben HELL. Sie sind als Karten gebaut, und eine Karte, die man anfasst, darf sich vom Grund abheben - genau wie das Blatt auf dem Schreibtisch. Nur die Kante wird ruhiger. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-card{ border-color:#2A2622 !important; } /* v1653f · Die vier Beschriftungen, die in der dunklen Schublade uebrig blieben. Gemessen gegen rgb(14,13,11): .sb-neu-lbl „Quick-Check" 1,60 .sb-neu-lbl „Marktbericht" 1,60 (Portfolio-Ueberschrift) 1,60 .sb-add-new „+ Neues Objekt" 1,09 <- unsichtbar Zum dritten Mal heute dieselbe Ursache: der Behaelter wurde umgefaerbt, seine Kinder nicht. Ich pruefe eine dunkle Flaeche ab jetzt immer mit dem Kontrast-Walker ueber ALLE Texttraeger, nicht mit dem Auge. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-neu-lbl, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-add-new, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-neu-row, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-section-title > span, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-section-title{ color:#BFB7A9 !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-add-new{ border-color:#2A2622 !important; background:#171512 !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-add-new:hover{ color:#F5EFE2 !important; } /* Die beiden Kopfknoepfe sind Knoepfe - sie bekommen eine eigene Flaeche, damit sie als solche erkennbar bleiben. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-neu-btn, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-neu-row > *{ background:#171512 !important; border-color:#2A2622 !important; color:#BFB7A9 !important; } /* ═══════════════════════════════════════════════════════════════════════ v1653g · DER KOPF WAR NUR SCHWARZ, SOLANGE KEIN OBJEKT GELADEN WAR Nach v1653 sah der Kopf im Bild schwarz aus. Mit einem ECHTEN Objekt war er wieder `rgb(255,255,255)`. Der Kaskaden-Walker, diesmal mit ausgerechneter Spezifitaet, nennt den Sieger: html[data-ui-theme] body.dp-chrome-hell header.hdr.has-v64-score -> (0,4,3), !important, ui-varianten.css Meine Regel `html[data-dp-layout] header.hdr` ist (0,2,2). Sie hatte nie eine Chance - sie hat nur gewonnen, solange `data-ui-theme` nicht gesetzt war. > **Ein Zustand, der beim Messen zufaellig fehlt, macht eine zu > schwache Regel stark.** Deshalb gehoert jede Farbmessung an eine > Ansicht mit ECHTEN Daten, nicht an ein leeres Objekt. Hier wird bewusst ueber (0,4,3) gehoben: zwei Attribute und die Klasse doppelt ergeben (0,5,3). Das ist unschoen und steht deshalb hier an einer Stelle, kommentiert - nicht verteilt ueber die Datei. ═══════════════════════════════════════════════════════════════════════ */ html[data-dp-layout][data-dp-layout] body header.hdr.hdr, html[data-dp-layout][data-dp-layout] body.dp-chrome-hell header.hdr.hdr{ background:#0E0D0B !important; background-image:none !important; border-bottom:1px solid #26231E !important; color:#E9E3D6 !important; box-shadow:none !important; } html[data-dp-layout][data-dp-layout] body header.hdr.hdr .hdr-v61-row1, html[data-dp-layout][data-dp-layout] body header.hdr.hdr .hdr-v61-row2, html[data-dp-layout][data-dp-layout] body header.hdr.hdr .scores{ background:transparent !important; background-image:none !important; border-color:#26231E !important; } /* Jede Schrift im Kopf einzeln - `color` erbt nicht durch ein Kind, das selbst eine hat. */ html[data-dp-layout][data-dp-layout] body header.hdr.hdr .hdr-obj-name, html[data-dp-layout][data-dp-layout] body header.hdr.hdr .hdr-crumb, html[data-dp-layout][data-dp-layout] body header.hdr.hdr .hdr-sep, html[data-dp-layout][data-dp-layout] body header.hdr.hdr .hdr-v61-row1 > span, html[data-dp-layout][data-dp-layout] body header.hdr.hdr .hdr-v61-row1 > a{ color:#E9E3D6 !important; } /* ── v1653h · ZWEI KORREKTUREN, EINE DAVON AN MIR SELBST ───────────── **(a) Die Pillen: Regel zurueckgenommen.** Ich hatte `.sc-pill *{color:#E9E3D6}` gesetzt - und damit RENDITE, FINANZ., RISIKO, LAGE und UPSIDE auf Kontrast **1,28** gebracht: heller Text auf einer Pille, die WEISS geblieben ist, weil ihr Elternteil `#hdr-badges` heisst und jede ID meine Klassenregel schlaegt. > Schrift aufhellen und die Flaeche nicht mitnehmen ist schlimmer > als beides zu lassen. Vorher waren die Pillen lesbar. Sie bleiben jetzt, wie sie sind: helle Kacheln auf dunklem Kopf, wie die Objektkarten in der Schublade. Das erhaelt auch ihre Stufenfarben (`.tier-gold`, `.tier-green` - die Score-Farbkette bricht bei 85/70/50 und traegt Bedeutung). **(b) Objektnummer und Objektname.** Gemessen 1,60 und 1,05. Beide tragen IDs - `#hdr-obj-num` und `#hdr-obj` - und gegen eine ID hilft kein `!important` auf einer Klasse. Die Liste ist im laufenden Kopf ausgelesen, nicht geraten: #hdr-mobile-menu #hdr-obj-num #hdr-obj #hdr-autosave #hdr-completeness #hdr-score-mini #hdr-credits-pill #tabs-status-badge #tabs-status-text #tabs-status-fill #hdr-badges #hdr-toggle-btn Angefasst werden nur die zwei, die zu dunkel sind. `#hdr-score-mini` und `#hdr-completeness` sind Pillen mit eigener Flaeche und standen in der Messung sauber - wer sie „sicherheitshalber" mitnimmt, zerstoert dieselbe Sache wie unter (a). */ /* ── v1653i · EIN GLEICHSTAND, DER KEINER SEIN DARF ────────────────── Die Objektnummer blieb auf 1,50, obwohl FUENF Regeln aus dieser Datei sie hell setzen und alle fuenf `matches()` bestehen. Der Gegner, vollstaendig ausgelesen: `html[data-ui-theme="kontor"] body header.hdr #hdr-obj-num` -> (1,2,3), `!important`, `ui-varianten.css` Meine staerkste war `html[data-dp-layout] body header.hdr :is(#hdr-obj-num, #hdr-obj)` -> ebenfalls (1,2,3). **Gleichstand.** Bei Gleichstand gewinnt die spaetere Quelle, und `layout-varianten.css` laedt in `index.html` bei Zeile 4030 gegen Zeile 40 - also meine. Gemessen gewinnt trotzdem der Gegner. > **Diesen Widerspruch habe ich nicht aufgeloest.** Ich sage das > lieber, als eine Erklaerung zu erfinden, die beim naechsten Mal in > die Irre fuehrt. Moeglich waere ein zur Laufzeit eingefuegtes > Stylesheet, das ich nicht gefunden habe. Die Lehre aus CLAUDE.md trifft es ohnehin: **lieber Spezifitaet erhoehen als auf Ladereihenfolge bauen.** Eine Klasse mehr, und die Frage stellt sich nicht. */ html[data-dp-layout] body header.hdr #hdr-obj-num.hdr-obj-num, html[data-dp-layout] body header.hdr #hdr-obj.hdr-obj-name, html[data-dp-layout] body header.hdr #hdr-obj.hdr-obj-name *{ color:#E9E3D6 !important; } html[data-dp-layout] body header.hdr #hdr-obj-num.hdr-obj-num{ background:#171512 !important; border-color:#2A2622 !important; } html[data-dp-layout][data-dp-layout] body header.hdr.hdr .hdr-obj-num{ background:#171512 !important; border:1px solid #2A2622 !important; color:#E9E3D6 !important; } html[data-dp-layout][data-dp-layout] body header.hdr.hdr .hdr-icon-btn{ color:#BFB7A9 !important; background:transparent !important; border-color:#26231E !important; } html[data-dp-layout][data-dp-layout] body header.hdr.hdr .hdr-icon-btn:hover{ color:#F5EFE2 !important; background:#171512 !important; } /* Das Fortschritts-Badge im Kopf. Gemessen stand es auf 1,99 gegen Weiss - auf Obsidian mit #BFB7A9 sind es 8,5. */ html[data-dp-layout][data-dp-layout] body header.hdr.hdr .dpl-badge-im-kopf, html[data-dp-layout][data-dp-layout] body header.hdr.hdr .tabs-status-badge{ background:#171512 !important; border:1px solid #2A2622 !important; margin-left:auto !important; margin-right:14px !important; } html[data-dp-layout][data-dp-layout] body header.hdr.hdr .tabs-status-text{ color:#BFB7A9 !important; } /* Die Kennzahlen-Pillen behalten ihre Statusfarben - Gruen und Rot tragen Bedeutung und werden nie umgefaerbt (CLAUDE.md). Nur ihre Flaeche wird dunkel, damit sie auf Obsidian nicht leuchten. */ /* v1653h: die Pillenflaeche wird NICHT angefasst - siehe (a) oben. Die Regel stand hier und hat ohnehin nie gegriffen, weil ihr Elternteil `#hdr-badges` heisst. Sie zu entfernen ist ehrlicher, als eine wirkungslose Zeile stehen zu lassen, die beim naechsten Lesen wie eine Erklaerung aussieht. */ /* ── v1653j · DIE LETZTEN 18 PIXEL, UND WARUM SIE NICHT REICHEN ─────── Mit geladenem Objekt braucht der Aktionsblock 508 px und hat 490. Gemessene Bestandteile der 988 px hohen Schiene: Marke 70 Portfolio 43 Reiter 284 Aktionen 490 Nutzer 97 Zwei Hebel, beide klein und keiner auf Kosten der Bedienbarkeit: die fuenf Abschnittstitel tragen 9 px oben und 3 unten (5 x 4 = 20), die zwoelf Eintraege sind 29 px hoch (12 x 1 = 12). > **Aber eine Schiene, die bei zwoelf Aktionen gerade so passt, > scrollt bei der dreizehnten wieder.** Platz schaffen allein loest > das Problem nicht, es verschiebt es. Deshalb wird der Balken > zusaetzlich duenn und ruhig - sichtbar nur, wenn er gebraucht > wird, und dann nicht als heller Streifen auf Obsidian. Gescrollt werden KANN weiter. Ein Menue, das seinen dreizehnten Eintrag verschluckt, waere schlimmer als ein Balken. */ html[data-dp-layout] .dpl-schiene .sb-act-section-title{ margin:7px 0 2px !important; } html[data-dp-layout] .dpl-schiene .sb-act-item{ padding-top:4px !important; padding-bottom:4px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen{ scrollbar-width:thin; scrollbar-color:#2A2622 transparent; } html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen::-webkit-scrollbar{ width:6px; } html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen::-webkit-scrollbar-track{ background:transparent; } html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen::-webkit-scrollbar-thumb{ background:#2A2622; border-radius:3px; } html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen::-webkit-scrollbar-thumb:hover{ background:#3A352E; } /* Und in der HELLEN Kontextschiene der Kanzlei derselbe Gedanke mit ihren Toenen. */ html[data-dp-layout] .dpl-schiene[data-ton="hell"] .dpl-teil-aktionen{ scrollbar-color:#DCD4C2 transparent; } html[data-dp-layout] .dpl-schiene[data-ton="hell"] .dpl-teil-aktionen::-webkit-scrollbar-thumb{ background:#DCD4C2; } /* v1653k · Die sechs Ueberschriften der hellen Kontextschiene standen auf 3,5 gegen #FBFAF7 - sie sind 10-px-Versalien, und da gilt 4,5. #6E675C ergibt 5,6. Der Ton bleibt leise, nur nicht mehr zu leise. */ html[data-dp-layout] .dpl-schiene[data-ton="hell"] .dpl-schiene-titel, html[data-dp-layout] .dpl-schiene[data-ton="hell"] .sb-act-section-title{ color:#6E675C !important; } /* ═══════════════════════════════════════════════════════════════════════ v1654 · DREI STELLEN, DIE MEIN PRUEFER UEBERSEHEN HATTE Marcel am 28.09.2026: „oben die 20 von 24 Felder befuellt, auch das kann man nicht richtig sehen. Genauso wie das Kontingent und auch die Hilfe." Ich hatte kurz zuvor „0 unter 4,5" gemeldet. **Beide Aussagen waren richtig - mein Pruefer war falsch.** Er las den Hintergrund als Zeichenkette und rechnete die ALPHA nicht heraus: .hdr-comp-text Grund `rgba(63,165,108,.12)` gemeldet: ok .hdr-autosave-text dito #hdr-credits-pill Grund `color(srgb … / .08)` gemeldet: null Gegen den EFFEKTIVEN Grund - die Statusfarbe mit ihrer Deckung ueber Obsidian gelegt - sind es: .hdr-autosave-text 1,10 .hdr-comp-text 1,10 #hdr-credits-pill-label 1,44 > **Eine halbtransparente Flaeche hat keine Farbe, sondern eine > Rechnung.** Ein Pruefer, der sie als Zeichenkette nimmt, misst > einen Wert, den niemand sieht. Und `color(srgb …)` kannte er gar > nicht - da gab er `null` zurueck und ich habe es als „nichts > gefunden" gelesen. Die FLAECHEN behalten ihre Statusfarbe (Gruen heisst vollstaendig, Gold heisst Kontingent - das traegt Bedeutung und wird nie umgefaerbt). Nur die Schrift wird hell, und die Deckung steigt so weit, dass die Flaeche auf Obsidian ueberhaupt als Flaeche lesbar ist. ═══════════════════════════════════════════════════════════════════════ */ html[data-dp-layout] body header.hdr #hdr-completeness .hdr-comp-text, html[data-dp-layout] body header.hdr #hdr-autosave .hdr-autosave-text, html[data-dp-layout] body header.hdr #hdr-completeness, html[data-dp-layout] body header.hdr #hdr-autosave{ color:#E9E3D6 !important; } /* Die gruene Statusflaeche traegt auf Weiss 12 % - auf Obsidian verschwindet sie. 22 % laesst sie erkennbar werden, ohne dass sie leuchtet. */ html[data-dp-layout] body header.hdr #hdr-completeness{ background:rgba(63,165,108,.22) !important; border:1px solid rgba(63,165,108,.38) !important; } html[data-dp-layout] body header.hdr #hdr-autosave{ background:rgba(63,165,108,.14) !important; border:1px solid rgba(63,165,108,.28) !important; } /* Der Zahlenwert darin bleibt gruen - er IST die Aussage. Auf dem dunklen Grund in der helleren Stufe, sonst waere er wieder zu leise. */ html[data-dp-layout] body header.hdr #hdr-completeness .hdr-comp-pct, html[data-dp-layout] body header.hdr #hdr-completeness b{ color:#7BE3A6 !important; } /* Das Kontingent. Gold als Flaeche, helle Schrift darauf. */ html[data-dp-layout] body header.hdr #hdr-credits-pill{ background:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 18%, transparent) !important; border:1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 42%, transparent) !important; } html[data-dp-layout] body header.hdr #hdr-credits-pill, html[data-dp-layout] body header.hdr #hdr-credits-pill-label, html[data-dp-layout] body header.hdr #hdr-credits-pill svg{ color:var(--wl-e8cc7a, #E8CC7A) !important; } /* Das Aufklapp-Panel des Kontingents ist ein eigenes Blatt mit eigener heller Flaeche - dort ist dunkle Schrift RICHTIG und bleibt. Genau diese Unterscheidung hat mein Pruefer vorhin nicht gemacht und deshalb 23 statt 7 Befunde gemeldet. */ html[data-dp-layout] body header.hdr .dp-kg-panel, html[data-dp-layout] body header.hdr .dp-kg-panel *{ color:initial; } /* ═══════════════════════════════════════════════════════════════════════ v1654b · DIE OBJEKTLISTE IM MENUE, UND DER ACCOUNT NACH UNTEN Zwei Wuensche von Marcel am 28.09.2026: „wenn ich auf Portfolio klicke, dann oeffnet sich komischerweise eine neue Ansicht mit Objekten und ich kann die nicht minimieren. Da waere es vielleicht besser, wenn wir dort eine Liste anzeigen, die aber auch einfach genau in diesem linken Menue dargestellt wird." „die Versionierung, der aktuelle Plan und auch das Abmelden links, wenn wir die Kanzlei haben, ist nicht schoen formatiert. Das koennte vielleicht auch einfach in den unteren Bereich dargestellt werden, also direkt unten links fuer diesen Account." ═══════════════════════════════════════════════════════════════════════ */ /* ── 1 · DIE SCHUBLADE IST ABGESCHAFFT ─────────────────────────────── `#sidebar` traegt in den Layouts nichts Nutzbares mehr: Liste, Suche, Schnellstart, Aktionen und Nutzer sind alle in die Schiene gewandert. Uebrig bleibt ein leerer `.sb-header` und ein 1-px-Spacer. Sie wird ausgeblendet UND aus dem Gitter genommen - `display:none` allein reicht bei einem Grid-Kind nicht, die Spur bliebe stehen (derselbe Fehler wie in v1653d). */ html[data-dp-layout] #sidebar{ display:none !important; } html[data-dp-layout] .app-wrap{ grid-template-columns:1fr !important; } /* ── 2 · DIE LISTE ALS MENUETEIL ───────────────────────────────────── Zugeklappt nimmt sie keinen Platz. Aufgeklappt bekommt sie hoechstens die halbe Schienenhoehe und scrollt darin - sonst schiebt sie bei 17 Objekten die Reiter aus dem Bild. */ html[data-dp-layout] .dpl-schiene .dpl-teil-objekte, html[data-dp-layout] .dpl-schiene .dpl-teil-suche{ overflow:hidden; } html[data-dp-layout][data-dpl-portfolio="zu"] .dpl-schiene .dpl-teil-objekte, html[data-dp-layout][data-dpl-portfolio="zu"] .dpl-schiene .dpl-teil-suche{ display:none !important; } html[data-dp-layout][data-dpl-portfolio="auf"] .dpl-schiene .dpl-teil-objekte{ display:block !important; flex:0 1 auto !important; max-height:46vh !important; overflow-y:auto !important; scrollbar-width:thin; scrollbar-color:#2A2622 transparent; } html[data-dp-layout][data-dpl-portfolio="auf"] .dpl-schiene .dpl-teil-suche{ display:block !important; flex:0 0 auto !important; } /* Der Knopf zeigt, dass es weitergeht - und in welche Richtung. */ html[data-dp-layout] .dpl-portfolio::after{ content:'▸'; margin-left:auto; font-size:10px; opacity:.7; transition:transform .15s ease; display:inline-block; } html[data-dp-layout][data-dpl-portfolio="auf"] .dpl-portfolio::after{ transform:rotate(90deg); } html[data-dp-layout][data-dpl-portfolio="auf"] .dpl-portfolio{ background:#221F1A !important; } /* ── 3 · AUS DER KARTE WIRD EINE ZEILE ─────────────────────────────── Gemessen: eine `.sb-card` ist **210 px** hoch und fuer 380 px Breite gebaut - Foto, Score-Ring, drei Kennzahlkacheln mit Verlaufsgrafik. In einer 208-px-Schiene ergibt das bei 17 Objekten 3.570 px. > Eine Liste zum SUCHEN braucht Adresse und Kennung, nicht die > Auswertung. Die steht auf der Seite, sobald man das Objekt > geoeffnet hat. Versteckt werden deshalb Thumbnail, Kennzahlkacheln und Aktionsknoepfe. Der Score bleibt - er ist der Grund, warum man in einer Liste ueberhaupt vergleicht. */ html[data-dp-layout] .dpl-schiene .sb-card{ min-height:0 !important; height:auto !important; margin:0 0 2px !important; padding:5px 8px !important; border-radius:4px !important; background:transparent !important; border:1px solid transparent !important; box-shadow:none !important; display:block !important; } html[data-dp-layout] .dpl-schiene .sb-card:hover{ background:#1A1815 !important; border-color:#2A2622 !important; } html[data-dp-layout] .dpl-schiene .sb-card.active, html[data-dp-layout] .dpl-schiene .sb-card.is-active{ background:#221F1A !important; border-color:#3A352E !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-thumb, html[data-dp-layout] .dpl-schiene .sb-card .sbc-mini-grid, html[data-dp-layout] .dpl-schiene .sb-card .sbc-halter, html[data-dp-layout] .dpl-schiene .sb-card .sbc-arrow, html[data-dp-layout] .dpl-schiene .sb-card .sbc-score-label{ display:none !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-top{ display:flex !important; align-items:center !important; gap:7px !important; padding:0 !important; margin:0 !important; min-height:0 !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-top-body{ min-width:0 !important; flex:1 1 auto !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-address{ font-size:12px !important; line-height:1.25 !important; color:#E9E3D6 !important; font-weight:500 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; margin:0 !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-top-line1{ gap:5px !important; margin:0 0 1px !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-seq{ font-size:9.5px !important; color:#8C8578 !important; background:none !important; padding:0 !important; border:0 !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-kp-row{ margin:0 !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-kp{ font-size:10.5px !important; color:#BFB7A9 !important; font-variant-numeric:tabular-nums; } /* Der Score-Ring wird zur kleinen Zahl rechts. `position:absolute` traegt ihn sonst ueber die Adresse - gemessen, nicht vermutet: `.sbc-score-overlay` ist ein DIREKTES Kind der Karte und absolut gesetzt (Strukturnotiz in CLAUDE.md). */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-score-overlay{ position:static !important; float:right !important; margin:0 0 0 6px !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-mini-score{ width:26px !important; height:26px !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-mini-score svg{ width:26px !important; height:26px !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-mini-score-num{ font-size:10px !important; } /* „+ Neues Objekt hinzufuegen" bleibt, aber als Zeile. */ html[data-dp-layout] .dpl-schiene .sb-add-new{ padding:6px 8px !important; margin:0 0 4px !important; font-size:11.5px !important; border-radius:4px !important; } /* Suche und Sortierung. */ html[data-dp-layout] .dpl-schiene .dpl-teil-suche .sb-section-title{ padding:4px 8px !important; margin:0 !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-suche input{ background:#171512 !important; border:1px solid #2A2622 !important; color:#E9E3D6 !important; font-size:11.5px !important; padding:4px 7px !important; width:100% !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-suche input::placeholder{ color:#8C8578 !important; } /* Der Schnellstart (Quick-Check · Marktbericht) direkt unter der Marke. */ html[data-dp-layout] .dpl-schiene .dpl-teil-schnellstart{ flex:0 0 auto !important; padding:0 8px 6px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-schnellstart .sb-neu-row{ display:flex !important; gap:5px !important; margin:0 !important; padding:0 !important; width:auto !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-schnellstart .sb-neu-row > *{ flex:1 1 0 !important; min-width:0 !important; font-size:10px !important; padding:5px 4px !important; background:#171512 !important; border:1px solid #2A2622 !important; color:#BFB7A9 !important; border-radius:4px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-schnellstart .sb-neu-lbl{ font-size:10px !important; color:#BFB7A9 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* ── 4 · DER ACCOUNT GANZ UNTEN ────────────────────────────────────── Gemessen in der Kanzlei: `#sb-user` sass bei **y=402**, mitten in der Schiene - weil dort kein Aktionsblock steht, der den Platz bis unten fuellt. Und `.sb-user-text` hatte **Breite 0**: Name und E-Mail waren auf null gequetscht, die drei Symbole daneben standen frei. `margin-top:auto` schiebt ihn ans Ende, egal was darueber steht. */ html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer{ margin-top:auto !important; flex:0 0 auto !important; border-top:1px solid #26231E !important; padding:8px 10px !important; background:#0A0A09 !important; } html[data-dp-layout] .dpl-schiene #sb-user{ display:block !important; width:auto !important; height:auto !important; padding:0 !important; margin:0 !important; background:transparent !important; } html[data-dp-layout] .dpl-schiene .sb-user-main{ display:flex !important; align-items:center !important; gap:8px !important; width:auto !important; height:auto !important; margin:0 0 6px !important; } html[data-dp-layout] .dpl-schiene .sb-user-avatar{ flex:0 0 28px !important; width:28px !important; height:28px !important; font-size:12px !important; } /* DAS war der Fehler: ohne `min-width:0` und `flex:1` bleibt ein Flex-Kind mit langem Text auf null stehen, statt zu kuerzen. */ html[data-dp-layout] .dpl-schiene .sb-user-text{ flex:1 1 auto !important; min-width:0 !important; display:block !important; width:auto !important; height:auto !important; } html[data-dp-layout] .dpl-schiene .sb-user-name{ font-size:12px !important; color:#E9E3D6 !important; font-weight:600 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } html[data-dp-layout] .dpl-schiene .sb-user-email{ font-size:10px !important; color:#8C8578 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* Plan und Version wandern in eine gemeinsame Fusszeile mit den Knoepfen - drei Dinge, die zusammengehoeren, stehen auch zusammen. */ html[data-dp-layout] .dpl-schiene .sb-user-icons{ display:flex !important; align-items:center !important; gap:6px !important; width:auto !important; height:auto !important; margin:0 !important; } html[data-dp-layout] .dpl-schiene .sb-user-plan-pill{ font-size:9.5px !important; padding:2px 7px !important; margin:0 !important; height:auto !important; background:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 18%, transparent) !important; border:1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 42%, transparent) !important; color:var(--wl-e8cc7a, #E8CC7A) !important; border-radius:999px !important; } html[data-dp-layout] .dpl-schiene .sb-version-badge{ font-size:9.5px !important; color:#8C8578 !important; background:transparent !important; border:0 !important; padding:0 !important; height:auto !important; margin-left:auto !important; } html[data-dp-layout] .dpl-schiene .sb-user-icon-btn{ flex:0 0 26px !important; width:26px !important; height:26px !important; background:#171512 !important; border:1px solid #2A2622 !important; color:#BFB7A9 !important; border-radius:5px !important; display:flex !important; align-items:center !important; justify-content:center !important; } html[data-dp-layout] .dpl-schiene .sb-user-icon-btn:hover{ color:#F5EFE2 !important; border-color:#3A352E !important; } /* Die Plan-Pille steht im Textblock - das ist ihr einziger Platz im DOM. Sie hier zu verstecken und in der Fusszeile zu erwarten waere ein Denkfehler gewesen: ein Element ist nur einmal da. Sie bekommt stattdessen eine eigene Zeile unter der E-Mail. */ html[data-dp-layout] .dpl-schiene .sb-user-text .sb-user-plan-pill{ display:inline-flex !important; margin-top:3px !important; } /* ── v1654c · DREI NACHBESSERUNGEN, ALLE GEMESSEN ───────────────────── **(1) Der Textblock des Accounts war 38 px breit.** Mein `flex:1 1 auto; min-width:0` aus v1654b war richtig - die ANNAHME darunter nicht: ich hielt `.sb-user-icons` fuer eine eigene Zeile. Gemessen ist es ein GESCHWISTER im selben Flex-Behaelter und 118 px breit. Von 187 px blieben nach Avatar (28) und Icons (118) genau 38. > Eine Breite, die nicht aufgeht, ist selten zu klein gesetzt - > meistens nimmt sie jemand anders weg. Die Icons bekommen ihre eigene Zeile (`flex-basis:100%`), und der Text hat die Breite, die er braucht. */ html[data-dp-layout] .dpl-schiene .sb-user-main{ flex-wrap:wrap !important; } html[data-dp-layout] .dpl-schiene .sb-user-icons{ flex:1 0 100% !important; width:100% !important; margin-top:7px !important; padding-top:7px !important; border-top:1px solid #1E1B17 !important; } /* **(2) Quick-Check und Marktbericht waren abgeschnitten.** Zwei Knoepfe nebeneinander bekommen in einer 208-px-Schiene je 93 px; bei 10 px Schrift passt „Quick-Check" knapp nicht und endet als „QUICK-CH…". Untereinander haben beide die volle Breite. > Ein Knopf, dessen Beschriftung man raten muss, ist kein Knopf. */ html[data-dp-layout] .dpl-schiene .dpl-teil-schnellstart .sb-neu-row{ flex-direction:column !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-schnellstart .sb-neu-row > *{ flex:0 0 auto !important; width:100% !important; justify-content:flex-start !important; font-size:11px !important; padding:6px 9px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-schnellstart .sb-neu-lbl{ font-size:11px !important; overflow:visible !important; } /* **(3) Der Umschalter lag ueber dem Account.** Gemessen: die Leiste steht bei 12,998 (328x40), der Nutzerblock bei 10,958 (187x78) - sie ueberlappen. Zum DRITTEN Mal heute ein Werkzeug ueber der Anwendung (nach `#dp-kv-panel` und derselben Leiste bei 390 px). Sie zieht nach rechts, wo unter ihr nichts liegt. */ .dpl-schalter{ left:auto !important; right:14px !important; } /* ═══════════════════════════════════════════════════════════════════════ v1654d · DIE KENNZAHLEN-PILLEN — UND EINE ZWEITE RUECKNAHME Marcel am 28.09.2026: „die Zusammensetzung des Deal Scores, das sieht in der Demo noch anders aus. Man kann auch den KPIs nicht entnehmen, wie viele angegeben wurden davon." ── DIE ANGABE IST DA, SIE IST NUR AUSGEBLENDET ────────────────────── Jede Pille traegt `.sc-pill-sub` mit genau dieser Auskunft: RENDITE 72 % 4 / 4 KPIs FINANZ. 90 % 5 / 5 KPIs RISIKO 47 % 5 / 6 KPIs LAGE 68 % 4 / 5 KPIs UPSIDE 56 % 2 / 4 KPIs Gemessen: `display:none`. Der Wert steht auch im `title` - aber ein `title` erscheint erst nach einer Sekunde Stillhalten, und danach sucht niemand. > Eine Zahl, die man nur im Tooltip findet, ist fuer den, der sie > braucht, nicht vorhanden. **„2 / 4 KPIs" bei Upside erklaert die > 56 % — ohne die Angabe sieht die Zahl aus wie ein Urteil, dabei > ist sie eine halbe Auskunft.** ── UND DIE RUECKNAHME ─────────────────────────────────────────────── In v1653h habe ich meine Regel `.sc-pill *{color:#E9E3D6}` zurueckgenommen, mit der Begruendung, die Pillen seien „helle Kacheln auf dunklem Kopf" und deshalb lesbar. **Das stimmt nicht mehr.** Gemessen: `.sc-pill-v` traegt `rgb(26,23,20)`, und der Grund ist seit v1653g der Kopf selbst - Obsidian. Kontrast rund 1,1. Meine eigene Aenderung an `.hdr-v61-row2` hatte der Pille die weisse Flaeche genommen, und das habe ich beim Zuruecknehmen nicht mitgedacht. Diesmal wird beides zusammen gesetzt: Flaeche UND Schrift. Die Stufenfarbe (`tier-gold`, `tier-green`, `tier-red`) bleibt, wo sie Bedeutung traegt - auf dem Balken `.sc-bar`. ═══════════════════════════════════════════════════════════════════════ */ html[data-dp-layout] body header.hdr .sc-pill{ background:#171512 !important; border:1px solid #2A2622 !important; border-radius:6px !important; } html[data-dp-layout] body header.hdr .sc-pill .sc-pill-v{ color:#F5EFE2 !important; } html[data-dp-layout] body header.hdr .sc-pill .sc-pill-l{ color:#A69E90 !important; /* 6,2 gegen #171512 */ } /* Die Auskunft, die Marcel vermisst hat. */ html[data-dp-layout] body header.hdr .sc-pill .sc-pill-sub{ display:block !important; color:#8C8578 !important; font-size:9.5px !important; letter-spacing:.02em !important; margin-top:1px !important; font-variant-numeric:tabular-nums; } /* Der grosse Score daneben. */ html[data-dp-layout] body header.hdr .sc-main, html[data-dp-layout] body header.hdr #hdr-score-mini{ background:#171512 !important; border:1px solid #2A2622 !important; } html[data-dp-layout] body header.hdr .sc-main *, html[data-dp-layout] body header.hdr #hdr-score-mini *{ color:#F5EFE2 !important; } /* Ausnahme: was eine Stufenfarbe traegt, behaelt sie. Gruen und Rot bedeuten etwas und werden in keiner Marke umgefaerbt (CLAUDE.md). */ html[data-dp-layout] body header.hdr .sc-bar, html[data-dp-layout] body header.hdr .sc-donut, html[data-dp-layout] body header.hdr .sc-ring{ filter:none !important; } /* ═══════════════════════════════════════════════════════════════════════ v1655 · DIE ZUSAMMENSETZUNG DES DEAL SCORES, NACH DER DEMO Marcel am 28.09.2026: „die Zusammensetzung des Deal Scores, das sieht in der Demo noch anders aus." ── ERST DER BEFUND, UND ER GEHT AUF MEIN KONTO ────────────────────── Gemessen: `.sc-main` - der Block mit Ring, Note und Bezeichnung - steht auf `display:none`, **gesetzt von dieser Datei** (Zeile 52). Sichtbar sind nur die fuenf Anteils-Pillen und ein Textstueck „70 Gut" in `#hdr-score-mini`. Die Absicht von damals steht im Kopf dieser Datei: „der grosse Investor Deal Score verschwindet, `#hdr-score-mini` tritt an seine Stelle" - Marcel wollte ihn nicht gross oben, „waere aber gut, wenn man ihn noch irgendwo stehen haette." > **Ich habe ihn verschwinden lassen und nichts Gleichwertiges > hingestellt.** Aus einem Ring mit Note wurde „70 Gut" in 11 px. > Der Entwurf zeigt an dieser Stelle einen CHIP: Ring mit der Zahl, > daneben die Note und darunter, wofuer sie steht. ── WAS HIER PASSIERT ──────────────────────────────────────────────── `.sc-main` wird wieder eingeblendet - aber als Chip von rund 34 px statt eines Blocks von 141. **Nachgebaut wird nichts:** Ring (`.sc-donut`), Note (`.sc-grade`), Bezeichnung (`.sc-l`) und Einordnung (`.sc-v`) sind alle vorhanden, sie waren nur unsichtbar. Der echte Ring zeigt auch den echten Fortschritt - ein nachgebauter haette eine zweite Wahrheit. `#hdr-score-mini` tritt dafuer ab: derselbe Wert zweimal im selben Kopf ist keine Redundanz, sondern eine offene Frage, welcher gilt. ═══════════════════════════════════════════════════════════════════════ */ html[data-dp-layout] body header.hdr .hdr-v61-row2 .sc-main{ display:inline-flex !important; align-items:center !important; gap:9px !important; flex:0 0 auto !important; padding:4px 11px 4px 5px !important; background:#171512 !important; border:1px solid #2A2622 !important; border-radius:6px !important; height:auto !important; min-height:0 !important; max-width:none !important; width:auto !important; margin:0 12px 0 0 !important; box-shadow:none !important; } /* Was der Entwurf an dieser Stelle NICHT zeigt: das Investor-Abzeichen, die Aufzaehlung der Bestandteile und den Hinweiszeiger. Sie stehen weiterhin im Reiter Bewertung, wo Platz fuer sie ist. */ html[data-dp-layout] body header.hdr .sc-main .sc-investor-badge, html[data-dp-layout] body header.hdr .sc-main .sc-sub, html[data-dp-layout] body header.hdr .sc-main .sc-tip{ display:none !important; } html[data-dp-layout] body header.hdr .sc-main .si{ display:flex !important; align-items:center !important; gap:9px !important; height:auto !important; padding:0 !important; margin:0 !important; } /* Der Ring. 30 px, und die Zahl darin lesbar. */ html[data-dp-layout] body header.hdr .sc-main .sc-donut-wrap{ display:flex !important; align-items:center !important; gap:6px !important; flex:0 0 auto !important; margin:0 !important; padding:0 !important; } html[data-dp-layout] body header.hdr .sc-main .sc-donut{ width:30px !important; height:30px !important; flex:0 0 30px !important; margin:0 !important; font-size:11px !important; font-weight:700 !important; } html[data-dp-layout] body header.hdr .sc-main .sc-donut > *{ font-size:11px !important; color:#F5EFE2 !important; } /* Die Note steht im Entwurf als kleine Pille neben dem Ring. */ html[data-dp-layout] body header.hdr .sc-main .sc-grade{ font-family:'JetBrains Mono',ui-monospace,monospace !important; font-size:9px !important; letter-spacing:.09em !important; text-transform:uppercase !important; padding:2px 6px !important; border-radius:999px !important; background:#221F1A !important; border:1px solid #2A2622 !important; margin:0 !important; } html[data-dp-layout] body header.hdr .sc-main .sc-info{ display:block !important; min-width:0 !important; line-height:1.15 !important; margin:0 !important; padding:0 !important; } /* „Gute Bewertung" - die Einordnung, fett und in Leseschrift. */ html[data-dp-layout] body header.hdr .sc-main .sc-v{ display:block !important; font-size:11.5px !important; font-weight:600 !important; color:#F5EFE2 !important; margin:0 !important; white-space:nowrap !important; } /* „Investor Deal Score" - wofuer die Zahl steht. */ html[data-dp-layout] body header.hdr .sc-main .sc-l{ display:flex !important; align-items:center !important; gap:4px !important; font-family:'JetBrains Mono',ui-monospace,monospace !important; font-size:8.5px !important; letter-spacing:.09em !important; text-transform:uppercase !important; color:#8C8578 !important; margin:0 !important; white-space:nowrap !important; } html[data-dp-layout] body header.hdr .sc-main .sc-l .ic{ width:9px !important; height:9px !important; flex:0 0 9px !important; } /* Derselbe Wert zweimal im Kopf ist eine offene Frage, welcher gilt. */ html[data-dp-layout] body header.hdr #hdr-score-mini{ display:none !important; } /* ── DIE KENNZAHLEN ALS EINE LEISTE ────────────────────────────────── Im Entwurf ist `.kz-zeile` **ein** Band mit Trennlinien zwischen den Zellen, jede gleich breit (`flex:1`) - nicht fuenf einzelne Kacheln mit Abstand. Gemessen war jede Pille **377 px** breit, weil sie sich auf 1.889 px verteilten. Der Entwurf setzt sie in ein Band von fester Breite; so stehen Zahl unter Zahl, und man vergleicht sie mit einem Blick. > Fuenf Kacheln, die ueber einen ganzen Bildschirm gezogen werden, > sind keine Zeile mehr, sondern fuenf Einzelaussagen. */ html[data-dp-layout] body header.hdr .scores{ display:flex !important; align-items:center !important; gap:0 !important; flex-wrap:nowrap !important; } html[data-dp-layout] body header.hdr .scores .sc-pill{ flex:1 1 0 !important; max-width:190px !important; min-width:0 !important; margin:0 !important; border:1px solid #2A2622 !important; border-right-width:0 !important; border-radius:0 !important; padding:5px 11px !important; background:#171512 !important; } html[data-dp-layout] body header.hdr .scores .sc-pill:first-of-type{ border-top-left-radius:6px !important; border-bottom-left-radius:6px !important; } html[data-dp-layout] body header.hdr .scores .sc-pill:last-of-type{ border-right-width:1px !important; border-top-right-radius:6px !important; border-bottom-right-radius:6px !important; } /* Der Wert in Mono mit gleichen Ziffernbreiten - sonst tanzen die Zahlen, sobald sich eine aendert. */ html[data-dp-layout] body header.hdr .scores .sc-pill .sc-pill-v{ font-family:'JetBrains Mono',ui-monospace,monospace !important; font-size:15px !important; font-weight:700 !important; font-variant-numeric:tabular-nums !important; line-height:1.1 !important; } html[data-dp-layout] body header.hdr .scores .sc-pill .sc-pill-l{ font-family:'JetBrains Mono',ui-monospace,monospace !important; font-size:9px !important; letter-spacing:.1em !important; margin-bottom:1px !important; } html[data-dp-layout] body header.hdr .scores .sc-pill .sc-pill-sub{ font-variant-numeric:tabular-nums !important; } /* Der Balken bleibt - er traegt die Stufenfarbe und damit die Bedeutung, die kein Text ersetzt. */ html[data-dp-layout] body header.hdr .scores .sc-pill .sc-bar{ margin-top:3px !important; } /* Unter 1400 px hat die Leiste keinen Platz mehr fuer fuenf Zellen nebeneinander; sie bricht um, statt die Zahlen zu quetschen. */ @media (max-width: 1400px){ html[data-dp-layout] body header.hdr .scores{ flex-wrap:wrap !important; } html[data-dp-layout] body header.hdr .scores .sc-pill{ flex:1 1 150px !important; border-right-width:1px !important; border-radius:6px !important; margin:2px !important; } } /* ── v1655b · DER CHIP WAR GOLDEN, UND „GUT" STAND DARUNTER ─────────── Zwei Messbefunde nach v1655: **(a)** Der Chip trug einen goldenen Verlauf statt meiner dunklen Flaeche. Sieger ist `#hdr-badges .sc-main.sc-tier-green` - (1,2,0) mit `!important` aus `style.css`. **Zum dritten Mal heute derselbe Elternteil**: `.hdr-v61-row2` heisst `#hdr-badges`, und gegen eine ID hilft keine Klassenkette, so lang sie auch ist. > Wer in dieser Kopfzeile etwas umfaerbt, nimmt `#hdr-badges` in den > Selektor. Das ist keine Vorsicht, das ist die Hausordnung. **(b)** `.sc-grade` („Gut") stand bei y=96 UNTER dem Chip, mit `color:rgb(0,59,7)` auf `rgb(34,31,26)` - dunkelgruen auf dunkel. Der Ring und die Note sollen NEBENEINANDER stehen; ohne `flex-wrap:nowrap` bricht die Note um, sobald es eng wird. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-main, html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-green, html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-gold, html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-red, html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-top{ background:#171512 !important; background-image:none !important; border:1px solid #2A2622 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut-wrap{ flex-wrap:nowrap !important; } /* Die Note traegt ihre Stufenfarbe - aber in einer Helligkeit, die auf Obsidian ankommt. Gruen und Rot bleiben Gruen und Rot (CLAUDE.md); sie werden nur aufgehellt, nicht ersetzt. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-grade{ color:#BFB7A9 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-green .sc-grade{ color:#7BE3A6 !important; border-color:rgba(63,165,108,.42) !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-top .sc-grade{ color:#7BE3A6 !important; border-color:rgba(63,165,108,.42) !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-gold .sc-grade{ color:var(--wl-e8cc7a, #E8CC7A) !important; border-color:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 42%, transparent) !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-red .sc-grade{ color:#E89A94 !important; border-color:rgba(184,98,92,.45) !important; } /* Die Zahl im Ring und die beiden Textzeilen, jetzt mit ID im Selektor - sonst gilt fuer sie dasselbe wie fuer die Flaeche. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut, html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut > *{ color:#F5EFE2 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-v{ color:#F5EFE2 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-l{ color:#8C8578 !important; } /* Und die Kennzahlenleiste, aus demselben Grund. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-pill{ background:#171512 !important; background-image:none !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-v{ color:#F5EFE2 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-l{ color:#A69E90 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-sub{ color:#8C8578 !important; display:block !important; } /* ── v1655c · DIE RICHTUNG. ZUM VIERTEN MAL. ───────────────────────── Die Note „Gut" stand bei y=96 unter dem Ring (y=60..90), nicht daneben. Ich hatte `flex-wrap:nowrap` gesetzt - gegen einen Umbruch, den es gar nicht gab. `.sc-donut-wrap` traegt **`flex-direction:column`**, und daran aendert `nowrap` nichts. > Nach `.dp-pf-seg` (v1640), `.dpl-schiene` (v1649) und > `.dp-pf-lead` (v1651e) ist das der vierte Fall an diesem Bauteil- > Typ. **Wer an einem fremden Flex-Behaelter etwas aendert, setzt > `flex-direction` mit - immer, auch wenn `row` die Vorgabe waere.** Dazu: „Investor Deal Score" stand auf Kontrast 1,5. Meine Regel faerbt `.sc-l`, aber der Text liegt in einem KIND mit eigener Farbe - und `color` erbt nicht durch ein Kind, das selbst eine hat. Dieselbe Ursache wie bei `.tab-lbl` in v1652. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut-wrap{ flex-direction:row !important; align-items:center !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-l, html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-l *{ color:#8C8578 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-v, html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-v *{ color:#F5EFE2 !important; } /* ── v1655d · DAS GOLD SASS EINE EBENE TIEFER ──────────────────────── Der Chip sah golden aus, obwohl `.sc-main` gemessen `background-color: rgb(23,21,18)` und `background-image: none` trug. **Beide Messungen stimmten** - das Gold lag in `.si`, dem Behaelter von Ring und Text: `linear-gradient(135deg, #E8CC7A, #C9A84C…)`, 193x30, also ueber dem ganzen Inhalt. > Ich hatte `.si` auf `display:flex` gesetzt und seinen Hintergrund > nicht angefasst - derselbe Halbgriff wie bei den Score-Pillen in > v1653h: **Form geaendert, Flaeche vergessen.** Und noch eine Luecke in meinem Pruefer: `.sc-donut::before` traegt `rgb(255,253,247)` - der helle Innenkreis des Rings, auf dem meine helle Zahl stand. **Pseudoelemente prueft er nicht**, deshalb meldete er auch hier sauber. Der Innenkreis wird dunkel; die Zahl bleibt hell, und der farbige Ring aussen behaelt seine Stufenfarbe. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-main .si{ background:transparent !important; background-image:none !important; border:0 !important; box-shadow:none !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut::before{ background:#171512 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-investor-badge{ background-image:none !important; } /* ═══════════════════════════════════════════════════════════════════════ v1656 · MARCELS VIERTER DURCHGANG „wenn wir auf Portfolio klicken, dann kann ich kein Objekt auswaehlen" „Quick Check und Marktbericht brauche ich jetzt nicht, das koennte raus" „die Investor-Deal-Score-Anzeige muss nicht einen schwarzen Hintergrund haben, aber das soll schon mehr in Richtung Demo gehen" „unter Bewertung die Karten schwarz umrahmen, generell schwarze Umrahmungen" „wenn man auf Portfolio klickt, koennte man darunter die Anzeige wegmachen mit Objekt bis Deal-Aktion" ═══════════════════════════════════════════════════════════════════════ */ /* ── 1 · BEIM PORTFOLIO TRETEN DIE REITER ZURUECK ──────────────────── Die Reiter gehoeren zu EINEM Objekt. Solange die Liste offen ist, ist noch keins gewaehlt - sie stehen dann fuer etwas, das gerade nicht zur Debatte steht, und kosten den Platz, den die Liste braucht. > Zwei Ebenen, die einander abloesen, statt uebereinander zu liegen: > Portfolio ODER dieses Objekt. */ html[data-dp-layout][data-dpl-portfolio="auf"] .dpl-schiene .dpl-teil-tabs{ display:none !important; } /* Dafuer bekommt die Liste den freien Platz. */ html[data-dp-layout][data-dpl-portfolio="auf"] .dpl-schiene .dpl-teil-objekte{ max-height:none !important; flex:1 1 auto !important; min-height:0 !important; } /* ── 2 · DER SCORE-CHIP NACH DEM ENTWURF ───────────────────────────── Der Entwurf setzt ihn auf `var(--flaeche)` - ein helles Blatt, nicht Obsidian. Marcel: „muss nicht einen schwarzen Hintergrund haben." Helle Karte auf dunklem Kopf, wie die Objektkarten auf dunklem Grund: das Blatt hebt sich ab, und die Zahl darauf ist ohne Aufhellung lesbar. Die Stufenfarben bleiben, wo sie Bedeutung tragen. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-main, html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-green, html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-gold, html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-red, html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-top{ background:#FBF6E9 !important; background-image:none !important; border:1px solid #0E0D0B !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut::before{ background:#FBF6E9 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut, html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut > *{ color:#1A1714 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-v, html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-v *{ color:#1A1714 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-l, html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-l *{ color:#6E675C !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-grade{ background:#FFFFFF !important; border:1px solid #0E0D0B !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-green .sc-grade{ color:#2E8455 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-top .sc-grade{ color:#2E8455 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-gold .sc-grade{ color:#8A6B1F !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-red .sc-grade{ color:#A6322A !important; } /* Die Kennzahlenleiste zieht mit - sie gehoert zum selben Band. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-pill{ background:#FBF6E9 !important; background-image:none !important; border-color:#0E0D0B !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-v{ color:#1A1714 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-l{ color:#6E675C !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-sub{ color:#8A8272 !important; display:block !important; } /* ── 3 · SCHWARZE UMRANDUNGEN STATT GRAUER ────────────────────────── Marcel: „unter Bewertung den Investor Deal Score - die Karten schwarz umrahmen. Generell, dass wir dort schwarze Umrahmungen machen, das waere deutlich besser." Obsidian als Kante statt Grau. Der Unterschied ist klein und wirkt sofort: eine graue Linie ist ein Rand, eine schwarze ist eine Fassung. > Statusfarben bleiben unangetastet - eine rote Karte behaelt ihre > rote Kante, sonst verschwindet die Warnung in der Fassung > (CLAUDE.md). */ /* GEMESSEN im Reiter Bewertung, statt geraten - welche Flaechen dort ueberhaupt eine graue Kante tragen: .dpsh-pass x2 rgb(230,224,211) <- die Score-Karten .card x8 rgb(230,225,214) Alles andere im Reiter traegt bereits eine STATUSFARBE (Gold, Gruen, Rot: .dscr-box, .bc-matrix-cell, .proj-sum-row, .pos, .neg). Die bleiben unangetastet - eine rote Zelle behaelt ihre rote Kante, sonst verschwindet die Warnung in der Fassung (CLAUDE.md). */ html[data-dp-layout] body .dpsh-pass, html[data-dp-layout] body .card{ border-color:#0E0D0B !important; } /* ── v1656c · DIE KARTENKANTE, UND WIEDER MEINE EIGENE REGEL ───────── Marcel: „unter Bewertung den Investor Deal Score - die Karten schwarz umrahmen. Generell, dass wir dort schwarze Umrahmungen machen." Meine Regel aus v1656 (`body .card{border-color:#0E0D0B}`) hat nicht gegriffen. Der Kaskaden-Walker nennt den Sieger - **wieder eine Regel aus dieser Datei**, die ID-Kette aus v1648: html[data-dp-layout] .body :is(#s0,#s1,…,#s-marktbericht) .card -> Spezifitaet (12,4,1), `!important` Zwoelf IDs in einem `:is()` ergeben zwoelf ID-Punkte. Dagegen kommt keine Klassenregel an - auch keine eigene. > **Wer eine `:is()`-Kette aus IDs gebaut hat, muss sie beim > naechsten Mal selbst wieder benutzen.** Sie ist nicht nur stark, > sie ist die staerkste Regel im Haus. Die Farbe wird hier gesetzt, nicht `--dpl-linie` umdefiniert: diese Variable traegt auch die Trennlinien in der Schiene, und die sollen grau bleiben. */ html[data-dp-layout] .body :is(#s0,#s1,#s2,#s3,#s3-tax,#s4,#s5,#s6,#s7,#s8,#s-quick,#s-marktbericht) .card, html[data-dp-layout] .body :is(#s0,#s1,#s2,#s3,#s3-tax,#s4,#s5,#s6,#s7,#s8,#s-quick,#s-marktbericht) .dpsh-pass, html[data-dp-layout] body .dpsh-pass{ border-color:#0E0D0B !important; } /* Und die KPI-Angabe auf dem hellen Chip: `#8A8272` ergab gegen `#FBF6E9` nur **3,53**. `#6E675C` sind 5,6 - leise genug, um die Zahl darueber nicht zu stoeren, und laut genug zum Lesen. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-sub{ color:#6E675C !important; } /* ═══════════════════════════════════════════════════════════════════════ v1657 · MARCELS FUENFTER DURCHGANG Alle Goldwerte hier stehen als `var(--wl-, #)` - das ist die Whitelabel-Pflicht aus CLAUDE.md, und `gold-audit.py` prueft sie. Statusfarben (Gruen, Rot) werden NICHT tokenisiert. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1 · DIE SCHIENE WIRD BREITER ──────────────────────────────────── 208 px waren zu eng: die Kennung „2026-1037" und die Adresse teilten sich 126 px, und „Quick-Check" passte nicht auf einen Knopf. 248 px geben der Adresse 40 % mehr Platz. */ html[data-dp-layout]{ --dpl-schiene-b:248px; } /* ── 2 · DIE OBJEKTLISTE AUFGERAEUMT ───────────────────────────────── Marcel: „da wird zum Beispiel DS2 und sowas angegeben, das braucht da alles gar nicht drauf. Die ID kann man dann nicht lesen." Gemessen an den Karten in der Schiene: .sbc-seq „2026-1037" rgb(59,53,45) -> Kontrast 1,6 .sbc-ds2-hint „⚡ DS2" 51 px breit .sbc-investor-ribbon „Investor" position:absolute, 83x19 Das Band und der DS2-Hinweis sind Signale fuer die BREITE Karte in der alten Seitenspalte. In einer Zeile von 59 px nehmen sie den Platz, den Kennung und Adresse brauchen - und verdecken sie dabei. */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-ds2-hint, html[data-dp-layout] .dpl-schiene .sb-card .sbc-investor-ribbon, html[data-dp-layout] .dpl-schiene .sb-card .sbc-ai-badge{ display:none !important; } /* Die Kennung wird lesbar: #8C8578 ergibt 4,6 gegen den Schienengrund. */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-seq{ color:#8C8578 !important; font-size:9.5px !important; letter-spacing:.04em !important; font-variant-numeric:tabular-nums; } /* ── 3 · DER RAHMEN SAGT DIE BEWERTUNG ─────────────────────────────── Marcel: „vielleicht kann man das einfach passend einrahmen - wenn man das oeffnet, dass irgendwie ein gelber oder ein gruener oder ein roter Rahmen da drum gelegt ist." Die Stufe steht schon an der Karte: `.sbc-mini-score` traegt `sbc-score-green`, `-gold`, `-red` (die Kette bricht bei 85/70/50, CLAUDE.md). `:has()` liest sie von aussen - so bleibt die Farbe an EINER Stelle definiert, naemlich dort, wo sie berechnet wird. > Die Kante traegt die Aussage, nicht die Flaeche. Eine farbige > Flaeche in einer Liste von siebzehn waere ein Jahrmarkt; eine > farbige Kante ist eine Auskunft. */ html[data-dp-layout] .dpl-schiene .sb-card{ border-left-width:2px !important; border-left-style:solid !important; } html[data-dp-layout] .dpl-schiene .sb-card:has(.sbc-score-top), html[data-dp-layout] .dpl-schiene .sb-card:has(.sbc-score-green){ border-left-color:#3FA56C !important; } html[data-dp-layout] .dpl-schiene .sb-card:has(.sbc-score-gold){ border-left-color:var(--wl-c9a84c, #C9A84C) !important; } html[data-dp-layout] .dpl-schiene .sb-card:has(.sbc-score-red){ border-left-color:#B8625C !important; } /* Ohne Bewertung bleibt die Kante ruhig - ein grauer Strich sagt „noch nichts gerechnet", und das ist auch eine Auskunft. */ html[data-dp-layout] .dpl-schiene .sb-card:not(:has(.sbc-mini-score)){ border-left-color:#2A2622 !important; } /* ── 4 · EINE EINHEITLICHE SPUR FUER DIE ICONS ─────────────────────── Marcel: „bei dem Kontingent sind zum Beispiel goldene Zahlen, bei dem Fortschritt ist wieder grau. Da muessen wir irgendwie eine einheitliche Spur fahren. Es ist ja ganz cool, wenn wir diese goldenen Icons nehmen." Gemessen im Kopf - drei Toene nebeneinander: Hilfe-Knopf Icon `fill:rgb(0,0,0)` auf Obsidian = UNSICHTBAR Kontingent rgb(232,204,122) gold .sc-l-star rgb(110,103,92) grau .ic rgb(201,168,76) gold > Ein schwarzes Icon auf schwarzem Grund ist kein Kontrastproblem, > sondern ein fehlendes Icon. Alle Symbole tragen jetzt denselben Goldton. Die Schrift daneben bleibt, wie sie ist - Gold auf Obsidian ist als FLAECHE stark genug, als Fliesstext aber zu schwach (2,3:1, CLAUDE.md). */ html[data-dp-layout] body header.hdr .hdr-icon-btn svg, html[data-dp-layout] body header.hdr .hdr-icon-btn svg *, html[data-dp-layout] body header.hdr .hdr-icon-btn .ic, html[data-dp-layout] body header.hdr .hdr-icon-btn{ color:var(--wl-c9a84c, #C9A84C) !important; fill:currentColor !important; stroke:currentColor !important; } html[data-dp-layout] body header.hdr .hdr-icon-btn:hover, html[data-dp-layout] body header.hdr .hdr-icon-btn:hover svg{ color:var(--wl-e8cc7a, #E8CC7A) !important; } /* Und in der Schiene: Reiter-Symbole, Abschnitts-Symbole, Aktionen. */ html[data-dp-layout] .dpl-schiene nav.tabs .tab .ic, html[data-dp-layout] .dpl-schiene .sb-act-item .ic, html[data-dp-layout] .dpl-schiene .dpl-portfolio .dpl-i{ color:var(--wl-c9a84c, #C9A84C) !important; fill:currentColor !important; stroke:currentColor !important; opacity:1 !important; } /* Die Abschnittsueberschriften bekommen denselben Ton wie ihre Zierlinie - „Ansichten", „Analyse", „Anlegen" gehoeren zusammen. */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .sb-act-section-title{ color:var(--wl-c9a84c, #C9A84C) !important; opacity:.85 !important; } /* ── 5 · DER ACCOUNT UNTEN, EINE ZEILE STATT ZWEI ──────────────────── Marcel: „vielleicht kriegen wir auch den aktuellen Plan und das Abmelden mit neben das Pro." Die Plan-Pille steht im Textblock, die Knoepfe in einer eigenen Zeile darunter. Zusammen in EINE Zeile: Pille links, Version und Knoepfe rechts. Das spart 24 px und stellt zusammen, was zusammengehoert - wer bin ich, was habe ich, wie komme ich raus. */ html[data-dp-layout] .dpl-schiene .sb-user-icons{ margin-top:6px !important; padding-top:6px !important; justify-content:flex-end !important; } /* Die Plan-Pille wird von layout-varianten.js in die Knopfzeile VERSCHOBEN - die echte, nicht eine nachgebaute. Ein `content:"PRO"` im Pseudoelement haette bei jedem anderen Plan gelogen, und es gibt mehr als einen. Hier steht nur ihr Platz in der Zeile. */ html[data-dp-layout] .dpl-schiene .sb-user-icons .sb-user-plan-pill{ margin-right:auto !important; } /* ── 6 · SEITEN GETAUSCHT ──────────────────────────────────────────── `layout-varianten.js` dreht die Stellungen und setzt `data-dpl-seiten="getauscht"` am ``. Hier wandert das Polster mit - ohne das laege die Schiene ueber dem Inhalt, derselbe Fehler wie bei den Werkzeugfenstern. */ html[data-dp-layout^="v1"][data-dpl-seiten="getauscht"] .app-wrap, html[data-dp-layout^="v1"] .app-wrap{ padding-left:0; padding-right:0; } html[data-dp-layout^="v1"]:not([data-dpl-seiten]) .app-wrap{ padding-left:var(--dpl-schiene-b) !important; } html[data-dp-layout^="v1"][data-dpl-seiten="getauscht"] .app-wrap{ padding-right:var(--dpl-schiene-b) !important; } html[data-dp-layout^="v2"]:not([data-dpl-seiten]) .app-wrap{ padding-left:var(--dpl-schiene-b) !important; padding-right:240px !important; } html[data-dp-layout^="v2"][data-dpl-seiten="getauscht"] .app-wrap{ padding-left:240px !important; padding-right:var(--dpl-schiene-b) !important; } /* ── v1657b · ZWEIMAL DERSELBE WIDERSPRUCH, JETZT MIT ERKLAERUNG ───── Die Kennung blieb auf Kontrast 1,36 und die Kante auf 1,11 px, obwohl mein Kaskaden-Walker MEINE Regeln als Sieger nannte. Geprueft und ausgeschlossen: doppelt geladene Stylesheets (nein), Inline-Stil (nein), `@media`-Block (nein, Tiefe 0). > **Der Fehler sitzt im Walker:** meine `spez()`-Funktion zaehlt > `:is(.a,.b,.c)` als drei Klassen. CSS zaehlt nur das STAERKSTE > Argument. Bei `:not()` genauso. Ein Walker, der Spezifitaet falsch > rechnet, nennt den falschen Sieger - und ich habe ihm zweimal > geglaubt (auch bei `#hdr-obj-num` in v1653i, der Fall ist damit > nachtraeglich erklaert). Statt weiter zu rechnen: die Klasse dreifach. Das ist (0,6,1) und ueberbietet alles, was in `style.css` auf diese Elemente zeigt. */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-seq.sbc-seq.sbc-seq{ color:#8C8578 !important; } html[data-dp-layout] .dpl-schiene .sb-card.sb-card.sb-card{ border-left-width:2px !important; border-left-style:solid !important; } /* ── DER SCORE-CHIP, ZEILE FUER ZEILE NACH DEM ENTWURF ─────────────── Marcel: „bitte auch den Investor Deal Score im Header pruefen, der sieht nicht so aus wie in der Demo." Der Entwurf (`entwurf-hell-bankfaehig.html`, `SCORE`):
Ring mit der Zahl
Gute Bewertung FETT, 11,5 px Investor Deal Score Mono, 8,5 px, Versalien
Zwei Abweichungen, beide gemessen: 1. Bei uns steht die BEZEICHNUNG oben und die Einordnung darunter - im Entwurf andersherum. Zuerst die Aussage, dann wofuer sie gilt. 2. Der Entwurf hat KEINE Note-Pille neben dem Ring. Die Zahl im Ring und „Gute Bewertung" sagen dasselbe; ein drittes Mal „GUT" ist Wiederholung, kein Gewinn. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-info{ display:flex !important; flex-direction:column !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-v{ order:1 !important; font-size:11.5px !important; font-weight:600 !important; line-height:1.15 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-l{ order:2 !important; font-size:8.5px !important; letter-spacing:.09em !important; line-height:1.15 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-grade{ display:none !important; } /* ── v1657c · DIE AUFLOESUNG: `:is()` ERBT ID-SPEZIFITAET ──────────── Drei Anlaeufe lang blieb die Kennung auf 1,36, obwohl meine Regel im Browser stand, `matches()` bestand und `!important` trug. Geprueft und ausgeschlossen: doppelte Stylesheets, Inline-Stil, `@media`, `@layer`. Ein Inline-`!important` wirkte, eine frische Regel mit demselben Selektor nicht. Der letzte Messschritt hat es gezeigt: die Gewinnerregel aus `style.css` matcht als GANZES, aber **kein einziger ihrer komma-getrennten Teile** - weil die Kommas INNERHALB eines `:is()` stehen. Und: > **`:is()` erbt die Spezifitaet seines staerksten Arguments.** > Steht darin irgendwo eine ID, traegt die ganze Regel > ID-Spezifitaet - auch fuer die Klasse, die daneben steht. Das ist dieselbe Falle, die in CLAUDE.md fuer `:not(#id)` notiert ist. Mein Kaskaden-Walker hat sie zweimal verschleiert, weil er Selektoren am Komma zerlegt: bei `:is(a, b)` entstehen zwei ungueltige Bruchstuecke, und die Regel faellt aus der Wertung. **Damit ist auch `#hdr-obj-num` aus v1653i erklaert** - derselbe Mechanismus, und ich habe ihn damals offen gelassen. Die Antwort ist nicht mehr Klassen, sondern eine eigene ID. `#sb-list` ist der Listenbehaelter und steht ohnehin darueber. */ html[data-dp-layout] :is(#sb-list) .sb-card .sbc-seq{ color:#8C8578 !important; } html[data-dp-layout] :is(#sb-list) .sb-card{ border-left-width:2px !important; border-left-style:solid !important; } html[data-dp-layout] :is(#sb-list) .sb-card:has(.sbc-score-top), html[data-dp-layout] :is(#sb-list) .sb-card:has(.sbc-score-green){ border-left-color:#3FA56C !important; } html[data-dp-layout] :is(#sb-list) .sb-card:has(.sbc-score-gold){ border-left-color:var(--wl-c9a84c, #C9A84C) !important; } html[data-dp-layout] :is(#sb-list) .sb-card:has(.sbc-score-red){ border-left-color:#B8625C !important; } html[data-dp-layout] :is(#sb-list) .sb-card:not(:has(.sbc-mini-score)){ border-left-color:#2A2622 !important; } /* Die Adresse aus demselben Grund - sie stand auf demselben Ton. */ html[data-dp-layout] :is(#sb-list) .sb-card .sbc-address{ color:#E9E3D6 !important; } /* ── v1657d · DAS HILFE-ICON, MIT DERSELBEN MECHANIK ───────────────── Gemessen: der Knopf traegt `color:rgb(191,183,169)`, sein SVG aber `fill:rgb(20,19,16)` - schwarz auf Obsidian. Meine Goldregel aus v1657 hat verloren, aus demselben Grund wie die Kennung: eine `:is()`-Regel mit ID-Spezifitaet. **`:has()` erbt die Spezifitaet seines Arguments genauso wie `:is()`.** `header.hdr:has(#hdr-badges)` ist deshalb (1,1,1) - und trifft denselben Kopf, ohne dass ich eine fremde ID an eine Stelle schreibe, an die sie nicht gehoert. */ html[data-dp-layout] body header.hdr:has(#hdr-badges) .hdr-icon-btn, html[data-dp-layout] body header.hdr:has(#hdr-badges) .hdr-icon-btn svg, html[data-dp-layout] body header.hdr:has(#hdr-badges) .hdr-icon-btn svg *, html[data-dp-layout] body header.hdr:has(#hdr-badges) .hdr-icon-btn .ic{ color:var(--wl-c9a84c, #C9A84C) !important; fill:currentColor !important; stroke:currentColor !important; } html[data-dp-layout] body header.hdr:has(#hdr-badges) .hdr-icon-btn:hover, html[data-dp-layout] body header.hdr:has(#hdr-badges) .hdr-icon-btn:hover svg{ color:var(--wl-e8cc7a, #E8CC7A) !important; } /* Und die Symbole in der Schiene, aus demselben Grund mit :has(). v1708b: das SVG steht hier nicht mehr. Es war die ZWEITE Regel, die `fill:currentColor` auf die Reiter-Symbole legte - v1707 hatte nur die erste aufgeraeumt, und der Walker zeigte danach genau diese hier als Sieger. > Ich hatte in v1707 selbst geschrieben: wer eine Sammelregel > aufraeumt, geht ihre ganze Liste durch. Dann habe ich nach der > ersten aufgehoert. Zwei Regeln fuer dieselbe Flaeche, und die > zweite sah aus wie ein neuer Fehler. `.ic` bleibt drin: das sind Ikonen, die wirklich gefuellt gemeint sind. Das SVG traegt sein `fill="none"` selbst. */ html[data-dp-layout] .dpl-schiene:has(nav.tabs) nav.tabs .tab .ic{ color:var(--wl-c9a84c, #C9A84C) !important; fill:currentColor !important; stroke:currentColor !important; opacity:1 !important; } html[data-dp-layout] .dpl-schiene:has(nav.tabs) nav.tabs .tab svg{ color:var(--wl-c9a84c, #C9A84C) !important; stroke:currentColor !important; opacity:1 !important; } /* ═══════════════════════════════════════════════════════════════════════ v1658 · ZURUECK ZUM OBSIDIAN-TON, UND DIE ICONS WERDEN RUHIG Gemessen im Auslieferungszustand (`?layout=aus`, kein Hellmodus) - das ist die Referenz, gegen die Marcel vergleicht: .body rgb(248,246,241) der leicht graeuliche Ton .card Rahmen golden, 22 % Deckung .sec weiss Kopf dunkler Verlauf Im Layout gemessen: `.body` weiss, `.card` mit schwarzem Rahmen. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1 · DER ARBEITSBEREICH BEKOMMT SEINEN TON ZURUECK ─────────────── Marcel: „mir ist aufgefallen, dass der Arbeitsbereich etwas anders aussieht von den Farben wie in unserem urspruenglichen Obsidian-Style. Da ist so ein leicht graeulicher Ton hinter." Er kommt vom Hellmodus, den das Layout einschaltet: `dp-chrome-hell` setzt `.body` auf Weiss. Der Auslieferungszustand hat dort `rgb(248,246,241)` - ein Blatt, das sich vom Papierweiss der Karten abhebt. Ohne diesen Unterschied schwimmen die Karten. */ html[data-dp-layout] body .body{ background:#F8F6F1 !important; } /* ── 2 · DER SCHWARZE RAHMEN IM ARBEITSBEREICH: ZURUECKGENOMMEN ────── Marcel am 28.09. zuerst: „unter Bewertung den Investor Deal Score - die Karten schwarz umrahmen." Und jetzt: „was mir nicht gefaellt, ist im Arbeitsbereich - wir haben ja dort jetzt einen schwarzen Rahmen drum gesetzt." Beides gilt: die **Score-Karten** (`.dpsh-pass`) behalten die schwarze Fassung, die er dort wollte. Die **Arbeitskarten** (`.card`) bekommen ihren goldenen Rahmen zurueck - genau den, den der Auslieferungszustand fuehrt (22 % Deckung). > Eine Ruecknahme ist kein Rueckschritt. Der schwarze Rahmen war > richtig, wo er eine Fassung ist, und falsch, wo er acht Karten in > Reihe zu acht Traueranzeigen macht. */ html[data-dp-layout] .body :is(#s0,#s1,#s2,#s3,#s3-tax,#s4,#s5,#s6,#s7,#s8,#s-quick,#s-marktbericht) .card{ border-color:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 22%, transparent) !important; } /* ── 3 · HILFE UND KONTINGENT WERDEN RUHIG ────────────────────────── Marcel: „die Hilfe, genauso wie die Indikation fuer wie viele Marktbewertungen noch offen sind - die sind immer noch goldfarben. Das muesste vielleicht auch in dem Grau angezeigt werden oder in einem passenden Ton von dem Header." Gold bleibt den Symbolen, die zur NAVIGATION gehoeren (Reiter, Abschnitte) - dort ist es Wegweisung. Im Kopf sind Hilfe und Kontingent Werkzeuge am Rand; ein Goldton macht sie wichtiger, als sie sind. > Wenn alles hervorgehoben ist, ist nichts hervorgehoben. */ html[data-dp-layout] body header.hdr:has(#hdr-badges) .hdr-icon-btn, html[data-dp-layout] body header.hdr:has(#hdr-badges) .hdr-icon-btn svg, html[data-dp-layout] body header.hdr:has(#hdr-badges) .hdr-icon-btn svg *, html[data-dp-layout] body header.hdr:has(#hdr-badges) .hdr-icon-btn .ic{ color:#BFB7A9 !important; fill:currentColor !important; stroke:currentColor !important; } html[data-dp-layout] body header.hdr:has(#hdr-badges) .hdr-icon-btn:hover, html[data-dp-layout] body header.hdr:has(#hdr-badges) .hdr-icon-btn:hover svg{ color:#F5EFE2 !important; } html[data-dp-layout] body header.hdr:has(#hdr-badges) #hdr-credits-pill{ background:#171512 !important; border-color:#2A2622 !important; } html[data-dp-layout] body header.hdr:has(#hdr-badges) #hdr-credits-pill, html[data-dp-layout] body header.hdr:has(#hdr-badges) #hdr-credits-pill-label, html[data-dp-layout] body header.hdr:has(#hdr-badges) #hdr-credits-pill svg{ color:#BFB7A9 !important; } /* ── 4 · DAS LOGO ──────────────────────────────────────────────────── Marcel: „das DealPilot-Logo koennte an sich ein bisschen groesser sein." 26 auf 31 px; die Schiene hat seit v1657 248 px und traegt das ohne Umbruch. */ html[data-dp-layout] .dpl-schiene .dpl-wm{ font-size:31px !important; line-height:38px !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-marke, html[data-dp-layout] .dpl-schiene .dpl-marke{ min-height:78px !important; } html[data-dp-layout] .dpl-schiene .dpl-logo{ max-height:54px !important; max-width:210px !important; } /* ── 5 · DER RAHMEN SAGT DEN STAND DES DEALS ───────────────────────── Marcel: „bei all denen, die gewonnen sind - vielleicht koennen wir es so machen, dass wir, wenn die gewonnen sind, einen komplett gruenen Rahmen drum machen und wenn die verloren sind, dann halt rot und wenn die in Bearbeitung sind, halt in Gold." Die Klassen stehen schon an der Karte (`storage.js:1247`): `deal-won`, `deal-lost` - und „in Bearbeitung" ist der Fall, in dem keine von beiden steht. Das ersetzt die Score-Kante aus v1657: **ein Rahmen kann nur eine Sache sagen.** Der Stand des Deals schlaegt die Bewertung - wer verkauft hat, interessiert sich nicht mehr fuer den Score. */ html[data-dp-layout] :is(#sb-list) .sb-card{ border-width:1.5px !important; border-style:solid !important; border-left-width:1.5px !important; border-color:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 45%, transparent) !important; border-left-color:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 45%, transparent) !important; } html[data-dp-layout] :is(#sb-list) .sb-card.deal-won{ border-color:#3FA56C !important; border-left-color:#3FA56C !important; } html[data-dp-layout] :is(#sb-list) .sb-card.deal-lost{ border-color:#B8625C !important; border-left-color:#B8625C !important; } /* Das „gewonnen"-Abzeichen verdeckte in der schmalen Zeile die Kennung. Der gruene Rahmen sagt dasselbe, ohne Platz zu nehmen. */ html[data-dp-layout] :is(#sb-list) .sb-card .sbc-won-badge, html[data-dp-layout] :is(#sb-list) .sb-card .sbc-deal-badge{ display:none !important; } /* ── v1658b · EINE STATIC-LEISTE AM BODY LANDET GANZ UNTEN ─────────── Gemessen auf 834 px: die Schiene stand bei **y=1112** - exakt unter dem Sichtfeld, kein Bedienelement erreichbar. `position:static`, 137 px hoch, am Ende des ``. Ursache ist meine eigene Aenderung aus v1656: die Schiene haengt seither am `` (damit kein Vorfahr sie klippt). Die Schmalschirm-Regel setzt sie auf `position:static` - und ein statisches Element am Ende des `` steht hinter allem. > **Das ist derselbe Fehler wie bei der Werkbank in v1649** > („top: 3987"), nur andersherum: damals half `insertBefore`, weil > `order` in `display:block` nicht wirkt. Hier hilft es nicht - der > Ort ist ja gerade das Problem. Sie bleibt deshalb auch schmal > `fixed` und wird zur Leiste OBEN. Das Polster wandert von der Seite nach oben; ohne das laege der Inhalt unter der Leiste. */ @media (max-width: 900px){ html[data-dp-layout] .dpl-schiene{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important; width:auto !important; max-width:none !important; height:auto !important; max-height:44vh !important; overflow-y:auto !important; flex-direction:column !important; border-right:0 !important; border-left:0 !important; border-bottom:1px solid #26231E !important; z-index:80 !important; padding:6px 10px !important; } html[data-dp-layout] .app-wrap{ padding-left:0 !important; padding-right:0 !important; padding-top:52px !important; } /* Zugeklappt zeigt die Leiste nur Marke, Portfolio und die Reiter - das ist die Navigation. Aktionen und Nutzer kommen mit, wenn die Liste offen ist; sonst waere die Leiste auf dem Handy hoeher als der Inhalt. */ html[data-dp-layout][data-dpl-portfolio="zu"] .dpl-schiene .dpl-teil-aktionen, html[data-dp-layout][data-dpl-portfolio="zu"] .dpl-schiene .dpl-teil-nutzer{ display:none !important; } html[data-dp-layout] .dpl-schiene .dpl-marke{ display:flex !important; min-height:0 !important; padding:2px 4px !important; } html[data-dp-layout] .dpl-schiene .dpl-wm{ font-size:19px !important; line-height:24px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-tabs nav.tabs{ display:flex !important; flex-direction:row !important; overflow-x:auto !important; gap:2px !important; scrollbar-width:thin; } html[data-dp-layout] .dpl-schiene .dpl-teil-tabs nav.tabs .tab{ flex:0 0 auto !important; white-space:nowrap !important; } } /* ── v1658c · DIE LEISTE LAG UNTER DEM KOPF ────────────────────────── Gemessen auf 834 px mit `elementsFromPoint` auf den Portfolio-Knopf: .hdr-v61-row1 z=2 (im Kopf) header.hdr z=300 <- liegt DARUEBER .dpl-portfolio z=auto (in der Leiste, z=80) Meine Leiste hatte `z-index:80`, der Kopf traegt 300. Und die Reiter standen bei **x=-96**: die Schiene ist eine Flex-SPALTE mit `align-items:center`, und ein 1026 px breites Kind wird in einem 834-px-Fenster mittig gesetzt - also links heraus. > Zwei Fehler, die sich addieren: der eine macht unbedienbar, der > andere unsichtbar. Beide waren in einer Messung zu sehen. Die Leiste wird jetzt eine ZEILE (Marke und Portfolio nebeneinander, Reiter darunter), liegt ueber dem Kopf, und ihre Kinder strecken sich statt sich zu zentrieren. */ @media (max-width: 900px){ html[data-dp-layout] .dpl-schiene{ z-index:400 !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; gap:8px !important; max-height:none !important; padding:5px 10px !important; } html[data-dp-layout] .dpl-schiene .dpl-marke{ flex:0 0 auto !important; min-height:0 !important; height:auto !important; margin:0 !important; border-bottom:0 !important; padding:0 !important; } html[data-dp-layout] .dpl-schiene .dpl-portfolio{ flex:0 0 auto !important; margin:0 !important; } /* Die Reiter bekommen die ganze zweite Zeile und scrollen darin. */ html[data-dp-layout] .dpl-schiene .dpl-teil-tabs{ flex:1 0 100% !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-objekte{ flex:1 0 100% !important; width:100% !important; max-height:50vh !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-suche{ flex:1 0 100% !important; width:100% !important; } /* Das Polster muss zur Leistenhoehe passen: Marke/Portfolio in einer Zeile (~40) plus Reiterzeile (~34) plus Polster = 88. */ html[data-dp-layout] .app-wrap{ padding-top:88px !important; } } /* v1658d · Das Polster stand auf 88 px, die Leiste ist gemessen 139 px hoch (auf 390 UND auf 834 px derselbe Wert - sie bricht auf beiden gleich um). 51 px des Inhalts lagen darunter. Bedienbar war alles, sichtbar nicht ganz. */ @media (max-width: 900px){ html[data-dp-layout] .app-wrap{ padding-top:146px !important; } } /* ═══════════════════════════════════════════════════════════════════════ v1659 · DER SCORE-CHIP, AN DER DEMO AUSGEMESSEN Marcel: „oben den Investor Deal Score - das passt irgendwie noch gar nicht, das sieht sehr gekuenstelt aus." Statt weiter zu naehern: die Demo im Browser geoeffnet und **jeden Wert ausgelesen** (`entwurf-hell-bankfaehig.html`, `.score-chip`): Chip flex · gap 8px · Rahmen 1,11px rgb(206,198,182) radius 2px · padding 4px 10px 4px 5px · bg WEISS · 163x36 Ring 26x26 · radius 50% conic-gradient(rgb(201,168,76) 0deg … 79%) Zahl ::after · inset 3px · bg weiss · 10px · 700 · rgb(26,26,24) Fett block · 11,5px · 600 · rgb(26,26,24) · Zeile 13,2px Klein inline · 8,5px · Sperrung 0,765px · Versalien rgb(154,146,135) Was ich vorher gebaut hatte, wich in fuenf Werten ab: Creme statt Weiss, schwarzer statt beigegrauer Rahmen, 6 statt 2 px Radius, 30 statt 26 px Ring, andere Polster. > **„Sieht gekuenstelt aus" ist kein Geschmacksurteil, sondern ein > Messbefund.** Fuenf Werte daneben, und das Auge merkt es, bevor > man es benennen kann. ═══════════════════════════════════════════════════════════════════════ */ html[data-dp-layout] body header.hdr #hdr-badges .sc-main, html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-green, html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-gold, html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-red, html[data-dp-layout] body header.hdr #hdr-badges .sc-main.sc-tier-top{ background:#FFFFFF !important; background-image:none !important; border:1px solid #CEC6B6 !important; border-radius:2px !important; padding:4px 10px 4px 5px !important; gap:8px !important; align-items:center !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut{ width:26px !important; height:26px !important; flex:0 0 26px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut::before{ background:#FFFFFF !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut, html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut > *{ font-size:10px !important; font-weight:700 !important; color:#1A1A18 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-v, html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-v *{ font-size:11.5px !important; font-weight:600 !important; color:#1A1A18 !important; line-height:1.15 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-l, html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-l *{ font-size:8.5px !important; letter-spacing:.09em !important; text-transform:uppercase !important; color:#9A9287 !important; line-height:1.15 !important; } /* Die Kennzahlenleiste nimmt dieselben Toene - sie steht daneben und darf nicht aus einer anderen Familie sein. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-pill{ background:#FFFFFF !important; background-image:none !important; border-color:#CEC6B6 !important; border-radius:2px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill:first-of-type{ border-top-left-radius:2px !important; border-bottom-left-radius:2px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill:last-of-type{ border-top-right-radius:2px !important; border-bottom-right-radius:2px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-v{ color:#1A1A18 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-l{ color:#9A9287 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-sub{ color:#9A9287 !important; } /* ── v1659b · DER ARBEITSBEREICH BEKOMMT DEN LEICHTEN GRAUTON ──────── Marcel: „da haette ich ganz gerne, dass der Arbeitsbereich auch leicht wie in der Demo bei der Kanzlei in diesem, ich glaube, da ist ein ganz, ganz leichtes Grau hinter den Objekt- und Fotos." Gemessen in der Demo: `--grau` ist **rgb(244,242,237)**. Der Arbeitsbereich trug bisher `#F8F6F1` (den Obsidian-Wert), und die Abschnitte `.sec` darauf sind WEISS - dadurch sieht man vom Grau nichts. > Es fehlte nicht der Ton, sondern die Flaeche, auf der er zu sehen > ist. Die Abschnitte treten zurueck, die Karten bleiben weiss - so > liegt das Papier auf dem Tisch und nicht auf Papier. */ html[data-dp-layout] body .body{ background:#F4F2ED !important; } html[data-dp-layout] body .body > .sec, html[data-dp-layout] body .sec{ background:transparent !important; } /* ── v1659b · DER SCORE UEBER DIE GANZE BREITE ─────────────────────── Marcel: „oben den Investor Deal Score haette ich gerne ueber die gesamte Breite, so wie es dort auch angegeben ist, mit den KPIs aber, wie viele dann auch ausgefuellt sind, und vielleicht am Anfang noch den Score." Also: EIN Band ueber die volle Breite - links der Score, danach die fuenf Kennzahlen mit ihrer Angabe „4 / 4 KPIs". Der Chip war bisher ein eigenes Kaestchen daneben; jetzt ist er die erste Zelle desselben Bandes. > Ein Band sagt „das gehoert zusammen". Zwei Kaestchen sagen „das > sind zwei Dinge" - und das sind es nicht: die fuenf Kennzahlen > SIND der Score. */ html[data-dp-layout] body header.hdr #hdr-badges{ display:flex !important; align-items:stretch !important; gap:0 !important; width:100% !important; } html[data-dp-layout] body header.hdr #hdr-badges .scores{ display:flex !important; align-items:stretch !important; gap:0 !important; width:100% !important; flex:1 1 auto !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main{ flex:0 0 auto !important; border-radius:2px 0 0 2px !important; border-right-width:0 !important; margin:0 !important; align-self:stretch !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill{ flex:1 1 0 !important; max-width:none !important; border-radius:0 !important; border-right-width:0 !important; align-self:stretch !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill:last-of-type{ border-right-width:1px !important; border-radius:0 2px 2px 0 !important; } /* Auf schmalen Schirmen bricht das Band um, statt die Zahlen zu quetschen - fuenf Zellen brauchen mindestens 150 px je Stueck. */ @media (max-width: 1400px){ html[data-dp-layout] body header.hdr #hdr-badges .scores{ flex-wrap:wrap !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main{ flex:0 0 auto !important; border-right-width:1px !important; border-radius:2px !important; margin:2px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill{ flex:1 1 150px !important; border-right-width:1px !important; border-radius:2px !important; margin:2px !important; } } /* v1659c · `.sec` blieb weiss und deckte den Grauton zu. Dieselbe Ursache wie bei der Kartenkante in v1656c: die ID-Kette aus v1648 (zwoelf IDs in einem `:is()`) ist die staerkste Regel im Haus, und dagegen kommt keine Klassenregel an - auch keine eigene. Wer sie gebaut hat, muss sie selbst wieder benutzen. */ html[data-dp-layout] .body :is(#s0,#s1,#s2,#s3,#s3-tax,#s4,#s5,#s6,#s7,#s8,#s-quick,#s-marktbericht), html[data-dp-layout] .body :is(#s0,#s1,#s2,#s3,#s3-tax,#s4,#s5,#s6,#s7,#s8,#s-quick,#s-marktbericht).sec{ background:transparent !important; } /* ── v1660 · „+ NEUES OBJEKT HINZUFUEGEN" WAR UNSICHTBAR ───────────── Gemessen: `rgb(26,23,20)` auf `rgb(14,13,11)` - **Kontrast 1,09**. Meine Regel aus v1654b benennt `.sb-add-new` und hat verloren; wie ueberall an diesem Tag hilft nur die ID des Behaelters. */ html[data-dp-layout] :is(#sb-list) .sb-add-new, html[data-dp-layout] :is(#sb-list) .sb-add-new *{ color:#BFB7A9 !important; } html[data-dp-layout] :is(#sb-list) .sb-add-new{ background:#171512 !important; border:1px solid #2A2622 !important; } html[data-dp-layout] :is(#sb-list) .sb-add-new:hover, html[data-dp-layout] :is(#sb-list) .sb-add-new:hover *{ color:#F5EFE2 !important; } /* ── v1661 · DAS SCORE-BAND WIRD KRAEFTIGER ────────────────────────── Marcel: „oben mit dem Investor Deal Score, das ist viel zu flach. Das muesste ein bisschen breiter sein." Gemessen war das Band 59 px hoch bei einer Zeile von 1881 px - sehr breit und sehr duenn. Mehr Polster und eine groessere Zahl geben ihm Gewicht, ohne den Kopf aufzublaehen. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-main{ padding:9px 14px 9px 9px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut{ width:34px !important; height:34px !important; flex:0 0 34px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut, html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut > *{ font-size:12px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-v, html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-v *{ font-size:13px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill{ padding:9px 14px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-v{ font-size:17px !important; } /* ── v1662 · DIE ZAHL GEHOERT UNTER IHR WORT ───────────────────────── Marcel, zum zweiten Mal: „oben mit dem Investor Deal Score, das ist viel zu flach. Das muesste ein bisschen breiter sein." v1661 hatte nur Polster und Schriftgrad erhoeht - das war die falsche Antwort, und ich nehme sie hiermit zurueck. Gemessen an der Struktur, nicht am Eindruck: div.sc-pill 334x55 display:GRID div.sc-pill-l 53x13 „RENDITE" x=457 div.sc-pill-v 244x19 „36 %" x=518 <- 244 px breit div.sc-pill-sub 53x14 „4 / 4 KPIs" div.sc-bar 281x2 absolut, unten Die Zahl sitzt in einer 244 px breiten, rechtsbuendigen Zelle. Vom Wort „RENDITE" bis zur „36 %" liegen damit ueber 200 px Leere - in einer 55 px hohen Zeile. Das ist das „flach": nicht zu wenig Hoehe, sondern eine Zeile, die fast nur aus Abstand besteht. > Eine Zahl, die weit von ihrer Beschriftung wegsteht, muss mit dem > Auge wieder eingesammelt werden. Fuenfmal nebeneinander wird das > zur Arbeit. Die Vorlage macht es anders (`entwurf-hell-bankfaehig.html`, Entwurf 1, gemessen): Zelle `.kz` 214x52, Polster 7/12, Trennlinie rechts `#E6E1D6`; Beschriftung `.n` als BLOCK - 9 px JetBrains Mono, Sperrung 0,9 px, `#9A9287`; darunter der Wert `.v` in 15 px Mono fett. Zwei Zeilen, linksbuendig, keine Leere dazwischen. Genau das bauen wir - plus die Zaehlung, die Marcel wollte, als dritte Zeile. Das Band waechst dadurch auf rund 72 px. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-pill{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; gap:1px !important; padding:10px 14px !important; min-height:72px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-l{ order:1 !important; width:auto !important; max-width:100% !important; font-family:"JetBrains Mono",ui-monospace,monospace !important; font-size:9px !important; letter-spacing:.9px !important; color:#9A9287 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-v{ order:2 !important; width:auto !important; max-width:100% !important; text-align:left !important; font-family:"JetBrains Mono",ui-monospace,monospace !important; font-size:20px !important; font-weight:700 !important; line-height:1.15 !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-pill-sub{ order:3 !important; width:auto !important; font-family:"JetBrains Mono",ui-monospace,monospace !important; font-size:9px !important; letter-spacing:.06em !important; color:#9A9287 !important; } /* Der Fortschrittsbalken bleibt, aber als Kante ganz unten - er ist eine Randbemerkung, keine vierte Zeile. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-pill .sc-bar{ left:0 !important; right:0 !important; bottom:0 !important; width:auto !important; } /* Der Score-Chip haelt dieselbe Hoehe, sonst steht er als Stufe neben der Reihe. */ html[data-dp-layout] body header.hdr #hdr-badges .sc-main{ min-height:72px !important; padding:10px 16px 10px 12px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut{ width:42px !important; height:42px !important; flex:0 0 42px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut, html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-donut > *{ font-size:14px !important; } html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-v, html[data-dp-layout] body header.hdr #hdr-badges .sc-main .sc-v *{ font-size:14px !important; } /* ── v1662c · @media ERHOEHT KEINE SPEZIFITAET ─────────────────────── Gemessen in der Messkabine bei 390 px: `.app-wrap` war 390 px breit, der Arbeitsbereich `.main-col` aber nur **142 px** - und begann bei x=248. Die Kartei-Chips standen dadurch bei x=276 in einem 390-px-Fenster. Die Ursache war nicht die Rasterspur, sondern das POLSTER: computed padding-left = 248px Sieger: html[data-dp-layout^="v1"]:not([data-dpl-seiten]) .app-wrap{ padding-left:var(--dpl-schiene-b) !important } (0,3,1) Verlierer: @media (max-width:900px){ html[data-dp-layout] .app-wrap{ padding-left:0 !important } } (0,2,1) > Ein `@media`-Block aendert nichts an der Spezifitaet seiner > Regeln. Eine Schmalschirm-Regel gewinnt nicht, WEIL sie in einem > `@media` steht - sie muss denselben Anker tragen wie die Regel, > die sie aufheben soll. Auf 390 px gehoert die Schiene nach oben und der Inhalt ueber die volle Breite; jedes Polster dafuer ist dort falsch. Deshalb hier dieselben vier Selektoren, nur schmal. */ @media (max-width:900px){ html[data-dp-layout^="v1"]:not([data-dpl-seiten]) .app-wrap, html[data-dp-layout^="v2"]:not([data-dpl-seiten]) .app-wrap, html[data-dp-layout^="v1"][data-dpl-seiten="getauscht"] .app-wrap, html[data-dp-layout^="v2"][data-dpl-seiten="getauscht"] .app-wrap{ padding-left:0 !important; padding-right:0 !important; grid-template-columns:1fr !important; } } /* ── v1663b · DAS LOGO IN DIE FLUCHT ───────────────────────────────── Marcel: „dann koennen wir das DealPilot-Logo ein bisschen groesser machen und ein bisschen runterziehen, dass das alles in einer Flucht ist." Gemessen in der Aktenmappe 2 vor der Aenderung: .dpl-marke 247x78, Polster 4/14/0, min-height 78 .dpl-wm 127x38 bei y=21..59, 31 px .hdr-v61-row1 y=0..48 die Kopfzeile rechts daneben .dpl-portfolio y=88..121 der erste Menuepunkt darunter Das Wortbild endete bei y=59, der erste Menuepunkt begann bei 88 - 29 px Luft, in denen nichts steht. Rechts daneben laeuft die Kopfzeile bis 48. Drei Kanten, keine gemeinsame. Jetzt: 37 px statt 31, das Wortbild in einem 92-px-Block MITTIG statt oben angeklebt. Damit sitzt seine Mitte auf y=46 - zwei Pixel unter der Unterkante der Kopfzeile - und der erste Menuepunkt ruecht auf 92 nach. > Ein Logo, das oben am Rand klebt, hat keine Flucht, sondern einen > Anschlag. Mittig in einem Block, dessen Unterkante eine echte > Linie trifft, hat es beides. **Staging-Abnahmepunkt:** ob „in einer Flucht" genau diese Linie meint, entscheidet das Auge, nicht die Messung. Die Zahlen stehen hier, damit die naechste Runde nicht wieder bei null anfaengt. */ /* v1667d · MIT MEDIA-GRENZE NACHGEZOGEN. Diese beiden Regeln standen seit v1663b OHNE Grenze und damit SPAETER als die Schmalschirm- Fassung weiter oben (Zeile ~3284, 19 px / min-height:0). Bei gleicher Spezifitaet gewinnt die spaetere - gemessen auf 390 px trug das Wortbild deshalb 37 px und der Block 92, statt 19 und 0. Aufgefallen ist es erst, als ich in v1667b dieselbe Regel eine Stufe groesser noch einmal geschrieben habe - diesmal mit Grenze - und die Messung trotzdem 37 px meldete. Der Fehler war also aelter als die Aenderung, die ihn sichtbar machte. */ @media (min-width: 901px){ html[data-dp-layout] .dpl-schiene .dpl-wm{ font-size:37px !important; line-height:44px !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-marke, html[data-dp-layout] .dpl-schiene .dpl-marke{ min-height:92px !important; padding-top:0 !important; padding-bottom:0 !important; align-items:center !important; } } /* ── v1664 · DAS SCORE-BAND IN DER SCHIENE ─────────────────────────── Marcel: „die Werte fuer Rendite, Finanzierung, Risiko, Lage, Upside einfach mal unter diese Aktionen links, ueber dem Usernamen - und auch mit dem Score. Und natuerlich den Deal Score dann oben aus der Tab-Leiste raus. Das ist alles goldfarben, das muesste in der Farbe abgebildet werden wie wir jetzt den Rest auch abgebildet haben." Im Kopf war das Band eine ZEILE: Chip plus fuenf Kacheln nebeneinander, 1881 px breit. In einer 248-px-Schiene ist das keine Zeile mehr, sondern sechs Spalten a 41 px. > Ein Band, das die Seite wechselt, wechselt auch die Richtung. > Nebeneinander heisst „gleichzeitig", untereinander heisst „der > Reihe nach" - hier ist beides richtig, es kommt nur auf den Platz > an. Und der TON: im Kopf standen Chip und Kacheln auf Weiss mit Goldrahmen. In der dunklen Schiene waere das ein Lichtfleck. Die Flaechen treten deshalb zurueck (durchsichtig, Haarlinie als Trenner) und nur die Werte tragen Farbe - dieselbe Sprache wie die Reiter und die Objektliste daneben. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score{ flex:0 0 auto !important; margin-top:auto !important; padding:10px 0 4px !important; border-top:1px solid var(--dpl-linie) !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges{ display:block !important; width:auto !important; max-width:none !important; padding:0 !important; margin:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .scores{ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:0 !important; width:auto !important; background:transparent !important; border:0 !important; box-shadow:none !important; } /* Der Score-Chip als Kopf des Blocks. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:10px !important; width:auto !important; min-height:0 !important; margin:0 8px 8px !important; padding:0 8px !important; background:transparent !important; border:0 !important; box-shadow:none !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .sc-donut{ width:38px !important; height:38px !important; flex:0 0 38px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .sc-donut, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .sc-donut > *{ font-size:13px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .sc-v, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .sc-v *{ font-size:13px !important; color:#F2EDE3 !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .sc-l, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .sc-l *{ color:#8C8578 !important; } /* Die fuenf Kennzahlen als Zeilen: Wort links, Zahl rechts. In einer 248-px-Spalte ist das die einzige Anordnung, bei der beides ohne Umbruch lesbar bleibt - der gestapelte Aufbau aus dem Kopf braucht dort drei Zeilen je Kennzahl. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill{ display:grid !important; grid-template-columns:1fr auto !important; grid-template-rows:auto auto !important; align-items:baseline !important; column-gap:8px !important; row-gap:0 !important; width:auto !important; min-height:0 !important; margin:0 !important; padding:7px 16px 8px !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill + .sc-pill{ border-top:1px solid color-mix(in srgb, var(--dpl-linie) 55%, transparent) !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill .sc-pill-l{ grid-column:1; grid-row:1; font-size:9px !important; letter-spacing:.9px !important; color:#8C8578 !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill .sc-pill-v{ grid-column:2; grid-row:1 / span 2; align-self:center !important; width:auto !important; text-align:right !important; font-size:15px !important; font-weight:700 !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill .sc-pill-sub{ grid-column:1; grid-row:2; font-size:8.5px !important; color:#6E675C !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill .sc-bar{ display:none !important; } /* Der Kopf verliert damit seine zweite Zeile - ohne das behielte er die Hoehe des Bandes als leere Flaeche. */ html[data-dp-layout][data-dp-layout] body header.hdr{ min-height:0 !important; } /* ── v1664b · DIE ID HOLEN, SONST GEWINNT STYLE.CSS ─────────────────── Gemessen nach v1664: das Band stand richtig in der Schiene, sah aber aus wie im Kopf - Chip als goldener Kasten 231x157, die Kennzahlen auf 17 px gequetscht und unten abgeschnitten. Der Kaskaden-Walker nennt den Grund: Sieger body.dp-chrome-hell #hdr-badges .sc-main (1,2,1) Verlierer html[data-dp-layout] .dpl-schiene .dpl-teil-score .sc-main (0,4,0) > Vier Klassen schlagen keine ID. Das steht in CLAUDE.md, es steht in > meinen eigenen Notizen, und ich habe es trotzdem wieder gebaut. Alle Kindregeln tragen jetzt `#hdr-badges` im Selektor. Dazu die beiden Flaechen, die ich uebersehen hatte: das Gold sitzt nicht nur auf `.sc-main`, sondern eine Ebene TIEFER auf `.si` - derselbe Befund wie in v1650. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .si, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .scores{ background:transparent !important; background-image:none !important; border:0 !important; box-shadow:none !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .si{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:10px !important; padding:0 !important; width:100% !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .sc-info{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:1px !important; min-width:0 !important; } /* Der Rat-Satz („KI raet: Verhandlung empfohlen") ist im Kopf eine Zeile und in einer 248-px-Spalte ein Absatz. Er bleibt, aber leise. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .sc-sub, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .sc-hint{ font-size:9px !important; line-height:1.35 !important; color:#6E675C !important; } /* Die Schiene muss rollen koennen - Aktionen, Liste, Score und Nutzer zusammen sind hoeher als ein Notebook-Schirm. Ohne das schneidet sie still ab, und abgeschnitten sieht aus wie kaputt. */ html[data-dp-layout] .dpl-schiene{ overflow-y:auto !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score, html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer{ flex:0 0 auto !important; } /* ── v1664c · ERDRUECKT, NICHT ZU KLEIN GESETZT ────────────────────── Gemessen nach v1664b: Gold weg, Polster (7/16/8) und Raster greifen - und die Kacheln sind trotzdem **15 px** hoch statt 32. Der Kaskaden-Walker sagte diesmal nichts, weil es keine Kaskadenfrage war. Die Rechnung: .dpl-teil-score 215 px insgesamt .sc-main 113 px Rest 102 px fuer FUENF Kacheln -> je 20 Die Kacheln sind Flex-Kinder einer Spalte, deren Platz die Geschwister schon verbraucht haben. `flex-shrink` steht auf dem Standardwert 1, also geben sie nach, bis nichts mehr da ist - und schneiden ihren Inhalt ab, statt die Schiene rollen zu lassen. > **Das steht in CLAUDE.md, wortwoertlich:** „Flex-Kinder in > `overflow:auto`-Containern schrumpfen, statt zu scrollen. Der > Inhalt wird dann still abgeschnitten -> `flex:0 0 auto` setzen." > Ich habe es an der Schiene gesetzt und an ihrem Inhalt vergessen. Ein zu kleines Polster sieht genauso aus wie ein erdruecktes Element. Der Unterschied: beim Polster gewinnt eine Regel, beim Erdruecken gewinnt die Rechnung - und keine Spezifitaet der Welt hilft dagegen. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .scores, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill{ flex:0 0 auto !important; min-height:auto !important; height:auto !important; } /* ── v1664d · DIE ZAHLEN WAREN DA, NUR NICHT ZU SEHEN ──────────────── Gemessen auf dem Schienengrund `rgb(14,13,11)`: .sc-pill-v rgb(26,23,20) „36 %" Kontrast 1,06 .sc-donut span rgb(26,26,26) „56" Kontrast 1,07 Beide Farben stammen aus v1653 und waren dort RICHTIG - das Band stand auf Weiss. Beim Umzug in die dunkle Schiene ist die Flaeche mitgewandert, die Schrift nicht. > Eine Farbe ist nie richtig oder falsch, sondern nur richtig ODER > falsch zu ihrem Grund. Wer eine Flaeche verschiebt, verschiebt > eine Beziehung, kein Element. Die Werte tragen jetzt ihre STUFE, wie ueberall sonst in der App - Gruen, Rot und Gold sind hier keine Dekoration, sondern die Aussage. CLAUDE.md: Statusfarben werden nicht tokenisiert, Gruen und Rot bleiben in jeder Marke gleich; das Gold dagegen ist markenfaehig und steht als `var(--wl-…)`. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill .sc-pill-v{ color:#F2EDE3 !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill.tier-green .sc-pill-v{ color:#5BD98E !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill.tier-red .sc-pill-v{ color:#D9685F !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill.tier-gold .sc-pill-v{ color:var(--wl-e8cc7a, #E8CC7A) !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-donut, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-donut span, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-donut > *{ color:#F2EDE3 !important; } /* Die Zaehlung „4 / 4 KPIs" war im Kopf ausgeblendet. In der Schiene ist Platz dafuer, und sie beantwortet genau die Frage, die Marcel schon einmal gestellt hat: wie viele Kennzahlen stecken dahinter. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill .sc-pill-sub{ display:block !important; } /* ── v1664e · DIE LETZTEN ZWEI GOLDFLECKEN ─────────────────────────── Marcel: „das ist alles goldfarben, das muesste in der Farbe abgebildet werden wie wir jetzt den Rest auch abgebildet haben." Gemessen im Chip, nachdem Flaeche und Werte schon stimmten: span.sc-grade „Okay" bg gold 16 %, col rgb(0,59,7) -> dunkelgruen auf fast schwarz span.sc-investor-badge „INVESTOR" Goldverlauf, col rgb(64,35,0) div.si erbt col rgb(26,20,7) Die Stufen-Pille sah aus wie ein leerer oliver Kasten - ihr Wort war da, nur nicht lesbar. Das Investor-Band war der einzige Goldverlauf, der in der Schiene uebrig blieb; neben fuenf ruhigen Zeilen zieht er alles auf sich und sagt dabei am wenigsten. > Ein Hervorheber, der als einziger uebrig bleibt, hebt nichts mehr > hervor - er stoert nur. Gold traegt in dieser Schiene die > Navigation, nicht die Auskunft. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .si, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .si *{ color:#E9E3D6; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-grade{ background:transparent !important; border:1px solid color-mix(in srgb, var(--dpl-linie) 90%, transparent) !important; color:#BDB5A6 !important; font-size:9px !important; letter-spacing:.06em !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-investor-badge{ background:transparent !important; background-image:none !important; border:1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 38%, transparent) !important; color:var(--wl-e8cc7a, #E8CC7A) !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-investor-badge .ic, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-investor-badge .ic *{ color:var(--wl-e8cc7a, #E8CC7A) !important; fill:var(--wl-e8cc7a, #E8CC7A) !important; stroke:var(--wl-e8cc7a, #E8CC7A) !important; } /* ── v1664f · RUECKNAHME: ICH HABE DENSELBEN FEHLER ZWEIMAL GEMACHT ── In v1664d habe ich die Score-Zahl auf `#F2EDE3` gesetzt, weil der Schienengrund `rgb(14,13,11)` ist - und dabei genau das getan, was ich eine Datei weiter oben als Regel aufgeschrieben hatte: > Eine Farbe ist nie richtig oder falsch, sondern nur richtig > ODER FALSCH ZU IHREM GRUND. Der Grund der Zahl ist NICHT die Schiene. Gemessen: .sc-donut::before inset:5px, 28x28, bg rgb(255,253,247) .sc-donut span col rgb(242,237,227) -> Kontrast 1,03 Der Ring hat einen eigenen Innenkreis als Pseudoelement. Er war im Kopf richtig - dort stand der Chip auf Weiss - und ist mitgewandert, ohne dass ihn jemand gefragt haette. **Das ist derselbe blinde Fleck, den ich schon einmal notiert habe** („Pseudoelement heisst HTML"): ein Pruefer, der nur Elemente liest, sieht diesen Grund nicht, und ein Blick auf den Bildschirm zeigt nur einen weissen Kreis, in dem scheinbar nichts steht. Der Innenkreis nimmt jetzt den Schienengrund auf; damit stimmt die Beziehung wieder, und der Goldbogen bleibt der einzige Farbtraeger. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-donut::before{ background:#14120F !important; } /* ── v1664g · DER REST DES CHIPS ───────────────────────────────────── Gemessen, nachdem Ring und Werte stimmten: .sc-tip „KI raet: Verhandlung empfohlen" rgb(59,53,45) -> 1,9 .sc-sub „Finanzierung · Substanz · Upside" rgb(110,103,92) -> 3,0 .sc-investor-badge absolut bei y=485, Chip beginnt bei 494 Das Band stand NEUN Pixel ueber seinem Chip und wurde von der Trennlinie der Schiene angeschnitten. Im Kopf ist es `display:none` - dort hat es nie jemand gesehen. Erst meine Schienenregeln haben es sichtbar gemacht, und zwar halb. > Ein Element, das man nur dadurch zu Gesicht bekommt, dass eine > fremde Regel es aus seinem Versteck holt, gehoert nicht ans Licht, > sondern zurueck. Der Chip sagt „Investor Deal Score" zwei Zeilen > weiter ohnehin. Die beiden Textfarben stammen vom weissen Kopf und sind hier zu leise - derselbe Befund wie bei der Score-Zahl, nur eine Stufe weniger dramatisch. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-investor-badge{ display:none !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-tip, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-tip *, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-sub{ color:#8C8578 !important; } /* ── v1665 · DIE REITERLEISTE GEHOERT ZUM MENUE ────────────────────── Marcel: „die Tabbar sollte natuerlich auch in Schwarz oder in dem Dunklen dargestellt werden, die Hintergrundfarbe wie das linke Menue, und die Eintraege dann dementsprechend in der Farbe, wie wir auch Neues Objekt, Quickboarding und Import genommen haben." Gemessen in der Aktenmappe 2: .dpl-schiene Grund rgb(14,13,11) Eintraege rgb(191,183,169) nav.tabs Grund rgb(255,255,255) .tab aktiv oklab(0.207 …) ~ #2B2723 .tab ruhig rgb(92,85,75) Eine weisse Leiste zwischen schwarzem Menue und cremefarbenem Arbeitsbereich ist ein drittes Material an einer Stelle, an der es nur zwei geben sollte. > Die Reiter sind Navigation, kein Inhalt. Sie gehoeren zum Menue - > und was zusammengehoert, sieht gleich aus. Gilt nur fuer v1b: in der Aktenmappe 1 stehen die Reiter IN der Schiene und sind dort laengst dunkel. */ html[data-dp-layout][data-dp-layout] body:has(#sb-user) nav.tabs, html[data-dp-layout][data-dp-layout] body:has(#sb-user) header.hdr + nav.tabs, html[data-dp-layout][data-dp-layout] body:has(#sb-user) nav.tabs.tabs{ background:#0E0D0B !important; border-bottom:1px solid var(--dpl-linie) !important; box-shadow:none !important; } html[data-dp-layout][data-dp-layout] body:has(#sb-user) nav.tabs .tab, html[data-dp-layout][data-dp-layout] body:has(#sb-user) nav.tabs .tab *{ color:#BFB7A9 !important; background:transparent !important; } html[data-dp-layout][data-dp-layout] body:has(#sb-user) nav.tabs .tab:hover, html[data-dp-layout][data-dp-layout] body:has(#sb-user) nav.tabs .tab:hover *{ color:#F2EDE3 !important; } html[data-dp-layout][data-dp-layout] body:has(#sb-user) nav.tabs .tab.active, html[data-dp-layout][data-dp-layout] body:has(#sb-user) nav.tabs .tab.active *{ color:#F5EFE2 !important; } html[data-dp-layout][data-dp-layout] body:has(#sb-user) nav.tabs .tab.active{ border-bottom-color:var(--wl-c9a84c, #C9A84C) !important; } /* Die Symbole der Reiter tragen denselben Ton wie die des Menues. */ html[data-dp-layout][data-dp-layout] body:has(#sb-user) nav.tabs .tab svg, html[data-dp-layout][data-dp-layout] body:has(#sb-user) nav.tabs .tab svg *{ color:var(--wl-c9a84c, #C9A84C) !important; stroke:var(--wl-c9a84c, #C9A84C) !important; } /* Das Fortschrittsband am rechten Rand der Leiste steht sonst als heller Block in der neuen dunklen Flaeche. */ html[data-dp-layout][data-dp-layout] body:has(#sb-user) nav.tabs #tabs-status-badge{ background:transparent !important; border:1px solid var(--dpl-linie) !important; color:#BFB7A9 !important; } /* ── v1665b · DER ACCOUNT-BLOCK IN EINER ZEILE ─────────────────────── Marcel: „da hast du einmal aktueller Plan und das Abmelden, genauso wie den Versionsstand ganz nach unten gepackt. Wie waere es denn, wenn du das neben das aktueller Plan packst? … Da nehmen wir dieses Haekchen neben dem V1.1 raus, das brauchen wir nicht. Machen das Abmelden noch mit neben das Pro-Zeichen und die Versionsnummer sollten wir auch irgendwo da noch mit reinpacken. Dass wir das alles ein bisschen weiter runter bekommen, dass die Ansicht komplett angezeigt wird mit den Einstellungen." Gemessen, 227x125 px in drei Etagen: .sb-user-main .sb-user-avatar „M" .sb-user-text Name · E-Mail · Pille „Pro" .sb-user-icons „V1.1" · Knopf „Aktueller Plan" · Knopf „Abmelden" **Der Doppelweg, den Marcel gefunden hat:** die Pille „Pro" traegt `title="Aktueller Plan — Klick fuer …"` und der Knopf daneben heisst genauso. Zwei Bedienelemente, ein Ziel. > Zwei Wege zum selben Ort sind kein Komfort, sondern eine Frage, > die der Nutzer beantworten muss, ohne dass es etwas zu entscheiden > gaebe. Der Knopf faellt, die Pille bleibt - sie sagt zusaetzlich, > WELCHER Plan es ist. Gebaut wird mit `display:contents` am Textblock: seine Kinder werden damit zu direkten Rasterzellen von `.sb-user-main`, ohne dass ein fremder Knoten umgehaengt wird. **Das ist hier keine Feinheit, sondern die Lehre aus v1660** - als ich die Plan-Pille wirklich verschoben habe, baute die Abo-Schicht `#sb-user` neu und es standen zehn „Pro" nebeneinander. */ html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer #sb-user .sb-user-main{ display:grid !important; grid-template-columns:28px auto 1fr !important; align-items:center !important; column-gap:10px !important; row-gap:2px !important; padding:10px 12px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer #sb-user .sb-user-text{ display:contents !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer #sb-user .sb-user-avatar{ grid-column:1; grid-row:1 / span 2; align-self:center !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer #sb-user .sb-user-name{ grid-column:2 / -1; grid-row:1; } html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer #sb-user .sb-user-email{ grid-column:2 / -1; grid-row:2; } /* Die dritte Zeile: Pille, Abmelden, Version - nebeneinander. */ html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer #sb-user .sb-user-plan-pill{ grid-column:1 / 3; grid-row:3; justify-self:start !important; margin:4px 0 0 !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer #sb-user .sb-user-icons{ grid-column:3; grid-row:3; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; gap:6px !important; margin:4px 0 0 !important; padding:0 !important; } /* Das Haekchen faellt - es ist der zweite Weg zum Plan. */ html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer #sb-user .sb-user-icons .sb-user-icon-btn[title="Aktueller Plan"]{ display:none !important; } /* Die Version bleibt, aber leise - sie ist eine Auskunft, kein Knopf. */ html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer #sb-user .sb-version-badge{ order:2 !important; color:#6E675C !important; font-size:9px !important; background:transparent !important; border:0 !important; padding:0 !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer #sb-user .sb-user-icons .sb-user-icon-btn[title="Abmelden"]{ order:1 !important; width:24px !important; height:24px !important; } /* ── v1665c · EINE LEISTE, EIN ROLLBALKEN ──────────────────────────── Marcel: „dass wir das alles ein bisschen weiter runter bekommen, dass die Ansicht komplett angezeigt wird mit den Einstellungen." Gemessen: der Aktionsblock stand auf `flex:1 1 auto` mit `overflow-y:auto` - Hoehe **382 px**, Inhalt **469 px**. „Feedback & Support" war also da, aber nur ueber einen ZWEITEN Rollbalken INNERHALB der Schiene erreichbar, der nicht als solcher zu erkennen war. > Ein Rollbalken, den man nicht sieht, ist kein Rollbalken, sondern > ein Abschneider. Zwei ineinander sind einer zu viel. Der Block zeigt jetzt seine volle Hoehe; gerollt wird die Schiene als Ganzes. Damit steht alles untereinander, was zusammengehoert, und es gibt genau einen Weg nach unten. */ html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen{ flex:0 0 auto !important; overflow:visible !important; max-height:none !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen #sb-actions-accordion{ overflow:visible !important; max-height:none !important; } /* Der Score haengt nicht mehr am unteren Rand: mit `margin-top:auto` wuerde er in einer rollenden Spalte den Rest vor sich herschieben. */ /* v1685: `margin-top:10px` stand hier und hat das `auto` aus Z. 3766 erschlagen — gleicher Selektor, spaetere Regel gewinnt. Der Abstand kommt jetzt aus dem `padding` weiter unten; `auto` muss frei bleiben, sonst sitzt der Score nicht mehr unten. */ /* ── v1666 · EIN UMSCHALTER STATT EINES STAPELS ────────────────────── Marcel: „ich hätte gerne, dass wir bei der Aktenmappe keine Scrollbar haben müssen. Wenn man oben auf Portfolio klickt, verschwindet einfach das Aktionsmenü und es entsteht die Ansicht — und man kann wieder umklicken. Und dass wir nicht diese graue Leiste haben, zwischen dem linken Menü und dem Header." Bisher lagen Aktionen, Objektliste und Score ALLE in der Schiene untereinander; die Liste bekam `max-height:46vh` und rollte in sich, die Schiene als Ganzes rollte auch. Zwei Rollbalken, und der äußere stand als graue Leiste zwischen Menü und Inhalt. > Wer drei Dinge gleichzeitig zeigt, von denen man immer nur eines > braucht, verwaltet Platz statt ihn zu nutzen. Ein Umschalter zeigt > eines davon ganz — und braucht keinen Rollbalken. Portfolio AUF -> Liste bekommt den ganzen Rest, Aktionen und Score treten ab Portfolio ZU -> Aktionen und Score wie bisher, Liste weg */ html[data-dp-layout][data-dpl-portfolio="auf"] .dpl-schiene .dpl-teil-aktionen, html[data-dp-layout][data-dpl-portfolio="auf"] .dpl-schiene .dpl-teil-score{ display:none !important; } html[data-dp-layout][data-dpl-portfolio="auf"] .dpl-schiene .dpl-teil-objekte{ flex:1 1 auto !important; max-height:none !important; min-height:0 !important; overflow-y:auto !important; } /* Zugeklappt trägt der Aktionsblock den Rest — er darf in sich rollen, die Schiene aber nicht mehr. */ html[data-dp-layout][data-dpl-portfolio="zu"] .dpl-schiene .dpl-teil-aktionen{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; } /* ── Die graue Leiste ──────────────────────────────────────────────── Sie war der Rollbalken der Schiene. Die Schiene rollt jetzt gar nicht mehr — es rollt nur noch der Block, der gerade dran ist, und der zeigt seinen Balken schmal und tonig statt als Systemgrau. */ html[data-dp-layout] .dpl-schiene{ overflow-y:hidden !important; overflow-x:hidden !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-objekte, html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen{ scrollbar-width:thin; scrollbar-color:#2A2622 transparent; } html[data-dp-layout] .dpl-schiene .dpl-teil-objekte::-webkit-scrollbar, html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen::-webkit-scrollbar{ width:6px; } html[data-dp-layout] .dpl-schiene .dpl-teil-objekte::-webkit-scrollbar-thumb, html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen::-webkit-scrollbar-thumb{ background:#2A2622; border-radius:99px; } html[data-dp-layout] .dpl-schiene .dpl-teil-objekte::-webkit-scrollbar-track, html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen::-webkit-scrollbar-track{ background:transparent; } /* Damit „ein Block bekommt den Rest" aufgeht, muss die Schiene eine Spalte mit fester Höhe sein — sonst wächst sie einfach mit. */ html[data-dp-layout] .dpl-schiene{ display:flex !important; flex-direction:column !important; height:100vh !important; max-height:100vh !important; } html[data-dp-layout] .dpl-schiene .dpl-marke, html[data-dp-layout] .dpl-schiene .dpl-portfolio, html[data-dp-layout] .dpl-schiene .dpl-teil-suche, html[data-dp-layout] .dpl-schiene .dpl-teil-nutzer{ flex:0 0 auto !important; } /* ── v1666b · DER KOPF TRÄGT DENSELBEN TON ─────────────────────────── Marcel: „den oberen Header, wo wir den Straßennamen und die ID drinne haben — das müsstest du farblich genauso gestalten, die weicht noch ein bisschen ab." Gemessen, Schiene `rgb(14,13,11)`: header.hdr rgb(14,13,11) stimmt schon #hdr-obj-num rgb(23,21,18) heller #tabs-status-badge rgb(23,21,18) heller, Schrift rgb(20,19,16) .tabs-status-bar rgb(42,38,34) Zwei neutrale Pillen in einem dritten Grauton, und beim Fortschrittsband stand die Schrift mit Kontrast **1,05** auf seinem eigenen Grund — da war eine Zahl, die niemand lesen konnte. Die Statusflächen (grün für Auto-Save und Vollständigkeit) bleiben: CLAUDE.md sagt, Statusfarben werden nicht tokenisiert und nicht umgefärbt. Es geht nur um die NEUTRALEN Flächen. */ html[data-dp-layout] body:has(#sb-user) header.hdr #hdr-obj-num, html[data-dp-layout] body:has(#sb-user) header.hdr #tabs-status-badge{ background:transparent !important; border:1px solid var(--dpl-linie) !important; color:#BFB7A9 !important; } html[data-dp-layout] body:has(#sb-user) header.hdr #tabs-status-badge *{ color:#BFB7A9 !important; } html[data-dp-layout] body:has(#sb-user) header.hdr .tabs-status-bar{ background:rgba(255,255,255,.10) !important; } html[data-dp-layout] body:has(#sb-user) header.hdr .tabs-status-fill, html[data-dp-layout] body:has(#sb-user) header.hdr .hdr-comp-fill{ background:var(--wl-c9a84c, #C9A84C) !important; } /* ── v1666c · DER SCORE MACHT PLATZ ────────────────────────────────── Gerechnet, was in eine 988-px-Schiene passt: Marke 92 Portfolio 33 Nutzer 110 ------------------ Rest 753 für Aktionen (469) UND Score Der Score brauchte **356 px** — 72 zu viel, und die Folge war, dass die Gruppe „System" (Einstellungen, Rundgang, Feedback) aus dem Bild rutschte. Gespart wird dort, wo dieselbe Angabe zwei Zeilen weiter noch einmal steht: der Rat-Satz („KI rät: Verhandlung empfohlen") und die drei Stichwörter stehen im Arbeitsbereich ohnehin. In einer 248-px-Spalte brechen sie auf drei Zeilen und kosten mehr Platz als sie sagen. > Was neben einer Zahl steht, muss sie erklären. Was sie nur > wiederholt, kostet Platz und erklärt nichts. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-tip, html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-sub{ display:none !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main{ padding:6px 12px 8px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill{ padding:5px 16px 6px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score{ padding:8px 0 2px !important; /* v1685: margin-top raus, siehe Z. 3766 */ } /* ── v1666d · 100vh GILT NICHT AUF DEM HANDY ───────────────────────── Die Schiene ist auf schmalen Geräten KEINE Spalte mehr, sondern eine waagerechte Leiste oben (`position:static`, `flex-direction:row`). `height:100vh` würde sie dort über den ganzen Schirm ziehen und den Inhalt darunter schieben. > Eine Regel, die eine Form voraussetzt, gehört in denselben > Media-Block wie die Form. Sonst gilt sie auch dort, wo es die Form > nicht gibt — und das sieht man erst auf dem Gerät. Dieselbe Falle wie in v1659, als eine `position:static`-Leiste am `` bei y=1112 landete. */ @media (max-width: 900px){ html[data-dp-layout] .dpl-schiene{ height:auto !important; max-height:none !important; overflow-x:auto !important; overflow-y:visible !important; } /* Auf der Leiste ist der Umschalter gegenstandslos - dort steht ohnehin alles nebeneinander und rollt waagerecht. */ html[data-dp-layout][data-dpl-portfolio="auf"] .dpl-schiene .dpl-teil-aktionen, html[data-dp-layout][data-dpl-portfolio="auf"] .dpl-schiene .dpl-teil-score{ display:flex !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen, html[data-dp-layout] .dpl-schiene .dpl-teil-objekte{ overflow:visible !important; max-height:none !important; } } /* ── v1666e · DIE LETZTEN NEUNUNDZWANZIG PIXEL ─────────────────────── Nach v1666c: Marke 92 + Portfolio 33 + Aktionen 434 + Score 298 + Nutzer 110 = 967 von 988. Einundzwanzig Pixel frei — und der Aktionsblock braucht 469, hat also 35 zu wenig. Die Folge war genau eine fehlende Zeile: „Feedback & Support". > Ein Block, dem fünfunddreißig Pixel fehlen, zeigt nicht neunzig > Prozent von etwas. Er zeigt alles bis auf die letzte Zeile — und > die sieht dann aus, als gäbe es sie nicht. Geholt werden sie am Score-Chip: Ring 38 -> 34, Polster enger. Er verliert nichts an Aussage, nur an Luft. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main{ padding:2px 12px 4px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main .sc-donut{ width:34px !important; height:34px !important; flex:0 0 34px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-grade{ padding:1px 6px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill{ padding:4px 16px 5px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score{ padding:6px 0 0 !important; /* v1685: margin-top raus, siehe Z. 3766 */ } /* ── v1666f · AUF DEM HANDY IST DIE SCHIENE EINE ZEILE ─────────────── In der Messkabine gemessen, 390 und 834 px: .dpl-marke x=119 (Handy) / x=341 (Tablet) -> ZENTRIERT Leiste 174 px hoch statt rund 103 Teile aktionen AUS, nutzer AUS, score AN Zwei Fehler meiner v1666-Regel: **Erstens** hat sie `flex-direction:column !important` an die Schiene geschrieben — ohne Media-Grenze. Die Schmalschirm-Regel setzt `row`, beide gleich spezifisch, meine steht später und gewinnt. Die Leiste war also eine Spalte, und `align-items:center` hat die Marke in die Mitte gerückt. > Eine Regel ohne Media-Grenze gilt auch dort, wo ihre Form nicht > existiert. Bei gleicher Spezifität gewinnt die spätere — und das > ist fast immer die neuere, also meine. **Zweitens** blendet die Schmalschirm-Fassung seit v1659 Aktionen und Nutzer aus, damit die Leiste schmal bleibt. Der Score kam in v1664 dazu und stand in keiner dieser Listen — er blieb als Einziger stehen und machte die Leiste 71 px höher. Er wird nicht mit ausgeblendet: vor v1664 stand er im Kopf und war auf dem Handy sichtbar; ihn jetzt verschwinden zu lassen, wäre ein Verlust, den niemand bestellt hat. Er bekommt stattdessen die Form, die er im Kopf hatte — eine WAAGERECHTE Reihe, die mitrollt. */ @media (max-width: 900px){ html[data-dp-layout] .dpl-schiene{ flex-direction:row !important; align-items:center !important; } /* Der Score als Reihe, nicht als Stapel. */ html[data-dp-layout] .dpl-schiene .dpl-teil-score{ margin-top:0 !important; padding:0 !important; border-top:0 !important; border-left:1px solid var(--dpl-linie) !important; flex:0 0 auto !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .scores{ flex-direction:row !important; align-items:center !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-main{ margin:0 !important; padding:2px 10px !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill{ padding:4px 10px 5px !important; border-top:0 !important; border-left:1px solid color-mix(in srgb, var(--dpl-linie) 55%, transparent) !important; } html[data-dp-layout] .dpl-schiene .dpl-teil-score #hdr-badges .sc-pill + .sc-pill{ border-top:0 !important; } } /* ── v1667 · LUFT ZWISCHEN DEAL-AKTION UND DEM SCORE ───────────────── Marcel: „bei der Kanzlei wäre es cool, wenn wir den Investor-Deal-Score auf der linken Seite von unten nach oben positionieren. Dann wäre zwischen Deal-Aktion und dem Investor-Deal-Score noch ein bisschen Platz." Gemessen in der Kanzlei, linke Schiene: Marke 0 .. 92 Portfolio 102 .. 135 Reiter 139 .. 423 (letzter: „Deal-Aktion") Score 427 .. 695 <- nur 4 px Abstand Nutzer 877 .. 988 <- davor 182 px Leere Der Score steht also bereits oben — was fehlte, war der Abstand. Vier Pixel lesen sich nicht als Trennung, sondern als Versehen, während darunter 182 px ungenutzt liegen. > Ein Block, der einem anderen auf vier Pixel rückt, gehört optisch > dazu. Erst der Abstand sagt, dass hier etwas Neues anfängt — und > Platz dafür war reichlich da, nur an der falschen Stelle. Die 22 px gelten NUR für die Kanzlei: in der Aktenmappe liegen Aktionen und Score zusammen bei 967 von 988 px, dort wäre jeder zusätzliche Abstand eine fehlende Menüzeile. */ /* v1685: margin-top:22px stand hier und hielt den Score in der Kanzlei 164 px ueber dem Boden. Der Abstand zum Nutzer kommt aus dessen border-top, die Lage aus dem auto in Z. 3766. */ /* ── v1667b · DAS LOGO NOCH EINE STUFE GRÖSSER ─────────────────────── Marcel: „oben das DealPilot-Logo könnte dann jetzt ja noch ein bisschen größer erscheinen." 37 -> 42 px, der Block 92 -> 100. **Mit Media-Grenze**, und zwar wegen v1666f: dort hatte ich eine Regel ohne Grenze geschrieben, sie gewann auf dem Handy gegen die Schmalschirm-Fassung, und die Marke stand plötzlich zentriert in einer 174-px-Leiste. Auf schmalen Geräten trägt das Wortbild 19 px und der Block gar keine Mindesthöhe — das bleibt so. > Eine Regel, die nur für eine Form gilt, bekommt die Grenze dieser > Form. Sonst findet sie die andere von allein. */ @media (min-width: 901px){ html[data-dp-layout] .dpl-schiene .dpl-wm{ font-size:42px !important; line-height:50px !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-marke, html[data-dp-layout] .dpl-schiene .dpl-marke{ min-height:100px !important; } html[data-dp-layout] .dpl-schiene .dpl-logo{ max-height:60px !important; max-width:216px !important; } } /* ── v1667c · DIE MENÜZEILEN RÜCKEN ZUSAMMEN ───────────────────────── Gemessen in der Aktenmappe nach dem größeren Logo: Aktionsblock 357 px hoch, Inhalt 466 -> 109 fehlen 12 Menüpunkte je 27 px (Polster 4/9) = 324 5 Gruppentitel = ~130 Die acht Pixel des Logos waren nicht die Ursache — der Block war schon vorher knapp. Geholt wird der Platz bei den Zeilen selbst: Polster 4 -> 2 px macht je Zeile 4 px, bei zwölf Zeilen **48 px**, ohne dass eine Angabe verschwindet. > Zwölfmal vier Pixel sind eine Menüzeile plus Überschrift. Enger > setzen ist kein Verlust — etwas weglassen wäre einer. Gilt nur in der Schiene: die normale Seitenspalte im Auslieferungszustand bleibt, wie sie ist. */ html[data-dp-layout] .dpl-schiene .dpl-teil-aktionen .sb-act-item{ padding:2px 9px !important; } /* ── v1667e · DER ABSTAND GILT NUR IN DER SPALTE ───────────────────── Gemessen auf 834 px, Kanzlei: die Leiste war **244 px** hoch. Die 22 px Abstand aus v1667 standen ohne Media-Grenze und wirkten auch dort, wo die Schiene eine ZEILE ist — dort schiebt ein `margin-top` nichts auseinander, sondern macht die ganze Leiste höher. > Dritte Regel an einem Tag, die ihre Form nicht mitgedacht hat. > Ein `margin-top` beschreibt „darunter"; in einer Zeile gibt es > kein Darunter. */ @media (max-width: 900px){ html[data-dp-layout^="v2"] .dpl-schiene .dpl-teil-score, html[data-dp-layout] .dpl-schiene .dpl-teil-score{ margin-top:0 !important; } } /* ── v1671 · DER GRAUTON BIS AN DEN RAND ───────────────────────────── Marcel: „der Arbeitsbereich — da haben wir im Hintergrund so einen Grauton und links und rechts ist noch weiß. Haben wir die Möglichkeit dort auch den Grauton anzuwenden?" Gemessen auf Höhe des Arbeitsbereichs: .body 528 .. 1848 rgb(244,242,237) der Grauton .main-col 248 .. 2133 rgb(255,255,255) weiß Der Ton sitzt also auf dem INHALTSBAND, nicht auf der Fläche. Links 280 px und rechts 285 px bleiben weiß — und weil das Band mittig liegt, sieht es aus wie ein Fehler in der Breite, nicht wie eine Farbe. > Ein Hintergrund, der an der Inhaltsbreite endet, ist kein > Hintergrund, sondern eine breite Karte. */ html[data-dp-layout] body:has(#sb-user) .main-col{ background:#F4F2ED !important; } /* ── v1904 · DER GRUND DES COCKPITS FOLGT JETZT DEM AUSSEHEN ───────── Marcel am 06.10.2026: „ja fertig machen, wollte ich ja so." ERST DIE DIAGNOSE, DIE ICH ZURUECKNEHME. In `js/dashboard.js:2001` stand seit v1903a: „OFFEN UND ABSICHTLICH NICHT HIER: der Obsidian-GRUND von `#dashboard-main` bleibt, wie er ist", und das Journal (57) hat den Satz uebernommen. **Diesen Grund gibt es nicht.** Gemessen am 06.10.2026 im gleich-Origin-iframe, 390 px, Aktenmappe (`v1b`), Kartenstil Datenzeile, Portfolio-Cockpit offen: #dashboard-main rgba(0,0,0,0) transparent #dp-stage.stage.fc.fc9 rgb(253,252,250) Creme #FDFCFA .main-col rgb(244,242,237) die Arbeitsflaeche Und ueber die ganze Hoehe des Cockpits (23 Proben, `elementFromPoint` bei x=195, `.main-col` in 400-px-Schritten gescrollt) traf **eine einzige** auf Obsidian — das Band `.hpass` im Hero. Alle anderen lagen auf Weiss oder Creme. > Ein Satz in einem Kommentar ist keine Messung. Er stand in einer > Datei, die niemand mehr nachgerechnet hat, und wurde zweimal > weitergereicht, bevor jemand hingesehen hat. DER ECHTE BEFUND IST KLEINER UND TRIFFT TROTZDEM, WAS MARCEL MEINT: das Cockpit bringt seinen EIGENEN hellen Ton mit (#FDFCFA aus `dashboard.css:303`, `.stage.fc`) und folgt damit in keinem Aussehen der Flaeche, auf der es liegt. In „Heute" faellt das nicht auf — dort ist `.main-col` weiss, der Unterschied betraegt zwei Stufen. In der Aktenmappe, Kanzlei und Tower traegt die Arbeitsflaeche #F4F2ED, und dort setzt sich das Cockpit als hellere Platte davon ab. Gebunden wird deshalb der TON, nicht die Flaeche: nur `--page-bg` wird umgesetzt, das `.stage` in `dashboard.css:27` ohnehin liest. Panels, Karten und Baender bleiben unberuehrt. Spezifitaet html[data-dp-layout] #dashboard-main .stage 1-2-1 #dashboard-main .stage.fc 1-2-0 kein !important noetig. NUR UNTER 901 px, und das ist eine Grenze, keine halbe Sache: am Schreibtisch hat Marcel zur Web-Ansicht gesagt „die Optik die wir aktuell haben ist gut so". v1903a ist genau an dieser Stelle zu weit gegangen, weil der Stopp nur am Layout-Attribut hing. Ohne Attribut — also in „Heute" — aendert sich nichts, mit Attribut erst ab 900 px abwaerts. */ @media (max-width: 900px){ html[data-dp-layout] #dashboard-main .stage{ --page-bg:#F4F2ED; } } /* ═══════════════════════════════════════════════════════════════════ v1679 — DER SCORE SOLL AN DIE LINIE ANSCHLIESSEN ------------------------------------------------------------------- Marcel: „wir haben ja ganz unten Upside stehen und halt auch die KPIs — dass das anschliesst an die Linie ganz unten ueber dem Account. Da steht ja Marcel Junker, darueber ist eine Linie, dass dann der Score anfaengt mit Upside und allem." GEMESSEN, und es ist kein Abstandsfehler: .dpl-teil-score margin-top: auto (Z. 3766) .dpl-teil-nutzer margin-top: auto (Z. 169) ZWEI Geschwister mit `margin-top:auto` in derselben Flex-Spalte TEILEN den freien Platz unter sich auf — je die Haelfte. Deshalb haengt der Score in der Mitte und nicht am Nutzer. Ein groesserer Abstandswert haette daran nichts geaendert; `auto` ist kein Abstand, sondern ein Anspruch auf den Rest. Nur EINER darf ihn erheben. Enthaelt die Schiene einen Score, nimmt ihn der Score — und der Nutzer schliesst unmittelbar an. `:has()` erbt die Spezifitaet seines staerksten Arguments; hier ist das eine Klasse, also bleibt die Regel bei (0,3,0) und schlaegt die Ausgangsregel (0,1,0) sauber. ═══════════════════════════════════════════════════════════════════ */ html[data-dp-layout] .dpl-schiene:has(.dpl-teil-score) .dpl-teil-nutzer{ margin-top:0 !important; } /* v1685 — ZURUECKGENOMMEN: hier stand `border-top:0` mit der Begruendung, eine zweite Linie direkt unter der des Scores waere ein „Doppelstrich ohne Inhalt dazwischen". Zwischen beiden stehen aber der Ring, die Stufe und fuenf Kennzahlen — das ist reichlich Inhalt. Marcel: „bei der Aktenmappe aber da auch noch mal ein Trennstrich ueber Marcel Junker und bei der Kanzlei auch." Der Anmeldebereich ist ein eigener Abschnitt und traegt seine Linie wie jeder andere. `margin-top:0` BLEIBT: nur einer darf den freien Platz beanspruchen, und das ist der Score (siehe den Block darueber). */ html[data-dp-layout] .dpl-schiene:has(.dpl-teil-score) .dpl-teil-nutzer{ border-top:1px solid var(--dpl-linie) !important; padding-top:10px !important; } /* ═══════════════════════════════════════════════════════════════════ v1679 — DIE AUSGABEN-BOX Gold ueber var(--wl-...), damit sie sich beim Mandanten mitfaerbt. ═══════════════════════════════════════════════════════════════════ */ html[data-dp-layout] .dpl-schiene .dpl-teil-ausgaben{ flex:0 0 auto !important; /* sonst schrumpft sie im scrollenden Behaelter, statt zu scrollen */ } .dpl-ausgaben{ display:block; } .dpl-ausgaben-kopf{ display:flex; flex-direction:column; gap:2px; padding:0 0 8px; margin:0 0 8px; border-bottom:1px solid var(--dpl-linie); } .dpl-ausgaben-titel{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.09em; text-transform:uppercase; opacity:.62; } .dpl-ausgaben-obj{ font-size:12px; line-height:1.35; color:var(--wl-c9a84c, #C9A84C); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dpl-ausgaben-obj.dpl-ausgaben-leer{ color:inherit; opacity:.45; font-style:italic; } .dpl-ausgaben-liste{ display:flex; flex-direction:column; gap:3px; } .dpl-ausgabe{ display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px; background:none; border:0; border-radius:7px; color:inherit; cursor:pointer; text-align:left; font:inherit; } .dpl-ausgabe:hover{ background:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 12%, transparent); } .dpl-ausgabe-ico{ flex:0 0 auto; width:16px; height:16px; opacity:.8; } .dpl-ausgabe-txt{ display:flex; flex-direction:column; min-width:0; } .dpl-ausgabe-l{ font-size:13px; line-height:1.25; } .dpl-ausgabe-sub{ font-size:10.5px; line-height:1.3; opacity:.58; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Gesperrte Ausgaben bleiben sichtbar, aber erkennbar - wer nicht sieht, was er nicht hat, weiss auch nicht, was ihm fehlt. */ .dpl-ausgabe[data-gesperrt="1"]{ opacity:.45; } /* ── Kanzlei 2: die helle Schiene rechts traegt Ausgaben UND Score ── */ html[data-dp-layout="v2b"] .dpl-schiene[data-stellung="rechts"]{ --dpl-linie: rgba(5,5,5,.14); } html[data-dp-layout="v2b"] .dpl-schiene[data-stellung="rechts"] .dpl-teil-score{ margin-top:auto !important; /* der Score sitzt unten, die Ausgaben oben */ } @media (max-width: 1100px){ .dpl-ausgabe-sub{ display:none; } .dpl-ausgabe-l{ font-size:12px; } } /* v1680b — In Kanzlei 2 heisst die Schiene selbst schon „Ausgabe" (LAYOUTS.v2b.schienen[1].titel). Der Titel im Kopf der Box waere dasselbe Wort zweimal untereinander. Der Objektbezug darunter bleibt — er ist der eigentliche Inhalt der Zeile. In der Kanzlei (v2) heisst die Schiene „Aktionen"; dort traegt der Kopf den Titel weiter, sonst waere nicht erkennbar, wo die Aktionen aufhoeren und die Ausgaben anfangen. */ html[data-dp-layout="v2b"] .dpl-ausgaben-titel{ display:none !important; } html[data-dp-layout="v2b"] .dpl-ausgaben-kopf{ padding-top:0 !important; } /* ═══════════════════════════════════════════════════════════════════ v1680c — WARUM ALLE v2-REGELN JETZT `^="v2"` HEISSEN ------------------------------------------------------------------- Auf 390 px lagen in Kanzlei 2 BEIDE Schienen bei y=0 uebereinander, je 388 px breit — die rechte als Deckel ueber der linken und ueber der App. Gemessen im gleich-Origin-iframe: v2 links y=0 h=222 · rechts y=840 h=294 (rechte liegt unten) v2b links y=0 h=89 · rechts y=0 h=359 (rechte liegt DRUEBER) Der Grund war keine fehlende Regel fuer das Handy, sondern eine Regel, die nur fuer EIN Layout galt: unter 1100 px setzt `[data-dp-layout="v2"] .dpl-schiene[data-stellung="rechts"]` die Schiene auf `position:static`, damit sie in den Fluss wandert statt zu schweben. Kanzlei 2 war davon nicht erfasst. Alle 15 v2-Regeln heissen deshalb jetzt `^="v2"` und gelten fuer beide Kanzlei-Fassungen — dieselbe Loesung, mit der `v1` und `v1b` schon zusammengefasst sind. Ein Attribut-Praefix hat dieselbe Spezifitaet wie die Gleichheit, es verschiebt in der Kaskade nichts. Die Geometrie stimmt fuer beide: links eine Schiene, rechts eine Schiene, nur der INHALT ist getauscht. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ v1681 — z-index:400 AN EINEM position:static WIRKT NICHT ------------------------------------------------------------------- Gemessen im iframe bei 817 px, Kanzlei 2, fuenf Ausgabe-Knoepfe: Knopf 0 (y 590) VERDECKT von .dp-example-placeholder Knopf 1 (y 623) VERDECKT von .dp-example-placeholder Knopf 2 (y 656) VERDECKT von .dp-required Knopf 3 (y 688) bedienbar Knopf 4 (y 721) bedienbar Die Rechtecke ueberlappen NICHT (nachgerechnet: Platzhalter endet bei y 566, Knopf beginnt bei 590) — trotzdem gibt `elementsFromPoint` das fremde Element zurueck. Der Grund ist die Stapelung, nicht die Lage. Unter 1100 px setzt die Schiene `position:static`, damit sie aus dem Schweben in den Fluss wandert. **`z-index` gilt nur fuer POSITIONIERTE Elemente** — mit `static` ist die 400 wirkungslos, und jedes positionierte Element des Hauptinhalts liegt darueber. `relative` verhaelt sich im Fluss genau wie `static` (kein Versatz, ohne top/left), stellt aber den z-index wieder her. Eine Zeile, und sie repariert die Kanzlei gleich mit — dort stand derselbe Fehler. > Sichtbar ist nicht bedienbar. Das Rechteck stimmte, die Stapelung > nicht — und nur `elementsFromPoint` sagt den Unterschied. ═══════════════════════════════════════════════════════════════════ */ /* v1892 · Schwelle von 1100 auf 900 gezogen - dieselbe Messung wie oben (y=9975 bzw. y=10037 bei 1024 px). Oberhalb von 900 px schwebt die Schiene wieder; `relative` galt nur fuer die mitscrollende Fassung. */ @media (max-width: 900px){ html[data-dp-layout^="v2"] .dpl-schiene[data-stellung="rechts"]{ position:relative !important; z-index:400 !important; } } /* ═══════════════════════════════════════════════════════════════════ v1681c — DIE LETZTEN 147 PIXEL LAGEN UNTER DEM BILDSCHIRMRAND ------------------------------------------------------------------- Gemessen im iframe bei 817 x 1177 (iPad-Hochformat), Kanzlei 2, mit `.main-col` bis zum Anschlag gescrollt: .app-wrap y = 0 Hoehe 1178 endet bei 1178 (= Viewport) .main-col y = 146 Hoehe 1178 endet bei 1324 min-height: 1177,78px ueberhang 147 px unter dem Viewport `.main-col` beginnt 146 px unter dem Seitenanfang, bekommt aber die VOLLE Viewporthoehe als `min-height`. Ihre letzten 147 Pixel liegen damit immer unter dem Bildschirmrand — und `body` traegt `overflow:hidden`, es gibt also nichts, womit man sie holen koennte. Das trifft ALLES am Ende von `.main-col`, nicht nur die Schiene. Die Aktionen der bestehenden Kanzlei stehen dort seit jeher. An `min-height` selbst wird nichts geaendert: sie traegt die Grundgeometrie der ganzen App, und `min-height` schlaegt `height` ohnehin. Stattdessen bekommt der scrollende Bereich unten Platz — dann laesst sich der Ueberhang herausscrollen. Der Zuschlag gilt nur dort, wo wirklich eine mitscrollende Schiene haengt: `:has()` mit einem Attribut bleibt bei Klassen-Spezifitaet. ═══════════════════════════════════════════════════════════════════ */ /* v1892 · Auch hier 1100 -> 900. Der Zuschlag gilt nur, wo wirklich eine mitscrollende Schiene haengt (`:has([data-dpl-im-fluss])`), und das ist seit v1892 nur noch unter 901 px moeglich. Oberhalb schwebt sie, und ein Polster von 170 px unter dem Inhalt waere dort ein leerer Streifen. */ @media (max-width: 900px){ .main-col:has(.dpl-schiene[data-dpl-im-fluss]){ padding-bottom:170px !important; } } /* ═══════════════════════════════════════════════════════════════════ v1683 — GESPERRTE AUSGABEN UND DIE JAHRESFRAGE ------------------------------------------------------------------- Marcel: „wenn es kein PDF gibt, sollte vielleicht ein kleines X dahinter sein oder das ausgegraut sein." Beides: ausgegraut UND ein X, dazu der Grund im Titel. Gezeigt statt versteckt — wer nicht sieht, was er nicht hat, weiss auch nicht, was ihm fehlt. Das X ist bewusst KEIN Rot: „noch keiner erstellt" ist kein Fehler, sondern ein Zustand. ═══════════════════════════════════════════════════════════════════ */ .dpl-ausgabe[data-gesperrt="1"]{ opacity:.42 !important; cursor:not-allowed !important; } .dpl-ausgabe[data-gesperrt="1"]:hover{ background:none !important; } .dpl-ausgabe-x{ margin-left:auto; flex:0 0 auto; font-size:11px; opacity:.75; padding-left:6px; } /* ── Die Jahresfrage ─────────────────────────────────────────────── */ .dpl-jahr-frage{ position:fixed; inset:0; z-index:10060; background:rgba(5,5,5,.66); display:flex; align-items:center; justify-content:center; padding:20px; } .dpl-jf-box{ width:min(420px,100%); background:var(--surface,#14120f); border:1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 26%, transparent); border-radius:13px; padding:20px 22px; } .dpl-jf-box h3{ font-family:'Space Grotesk',sans-serif; font-size:17px; margin:0 0 5px; } .dpl-jf-box p{ font-size:13px; opacity:.72; margin:0 0 15px; line-height:1.5; } .dpl-jf-liste{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:15px; } .dpl-jf-j{ padding:8px 13px; border-radius:7px; cursor:pointer; font:inherit; font-size:13px; color:inherit; border:1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 34%, transparent); background:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 8%, transparent); } .dpl-jf-j:hover{ background:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 20%, transparent); } .dpl-jf-alle{ font-weight:600; } .dpl-jf-leer{ font-size:12.5px; opacity:.6; font-style:italic; } .dpl-jf-ab{ background:none; border:0; color:inherit; opacity:.6; cursor:pointer; font:inherit; font-size:13px; padding:4px 0; } .dpl-jf-ab:hover{ opacity:1; } @media (max-width:560px){ .dpl-jf-box{ padding:16px 15px; } .dpl-jf-j{ padding:7px 11px; font-size:12px; } } /* ═══════════════════════════════════════════════════════════════════ v1688 — SCHWARZE SYMBOLE AUF SCHWARZEM GRUND ------------------------------------------------------------------- Marcel: „in der Kanzlei oben, dass die Hilfe und auch dein Kontingent, da wird das Icon und so noch in Schwarz angezeigt." GEMESSEN in der Kanzlei: header.hdr Grund rgb(14, 13, 11) .hdr-icon-btn svg fill rgb(20, 19, 16) <- fast derselbe Ton stroke rgb(20, 19, 16) .hdr-credits-pill svg stroke rgb(213,187,115) (gold, richtig) └ dessen path stroke rgb(20, 19, 16) <- ueberschreibt es Der Knopf SELBST traegt seit v1663 `color:var(--wl-c9a84c)` und `fill:currentcolor` — die Regel zielt aber auf den KNOPF. Ein `svg` mit eigenem `fill` erbt ihn nicht, und ein `path` im Inneren erst recht nicht. Gold am Knopf, Schwarz im Bild. Deshalb wird die Farbe bis auf die Zeichenebene durchgezogen. `path`, `circle`, `rect` und `line` einzeln benannt — `*` waere hier zu grob, es traefe auch ``-Inhalte und Verlaufsmarken. ═══════════════════════════════════════════════════════════════════ */ html[data-dp-layout] body header.hdr .hdr-icon-btn svg, html[data-dp-layout] body header.hdr .hdr-icon-btn svg :is(path,circle,rect,line,polyline,polygon){ fill:none !important; stroke:var(--wl-c9a84c, #C9A84C) !important; } /* Die Kerosin-Pille traegt ihren eigenen, helleren Ton — der bleibt, nur das Symbol darin wird nachgezogen. */ html[data-dp-layout] body header.hdr .hdr-credits-pill svg, html[data-dp-layout] body header.hdr .hdr-credits-pill svg :is(path,circle,rect,line,polyline,polygon){ stroke:currentColor !important; fill:none !important; } /* v1688b — `currentColor` war richtig und half trotzdem nicht. Gemessen an der Kerosin-Pille: .hdr-credits-pill color rgb(213,187,115) gold └ svg color rgb(213,187,115) gold, geerbt └ path color rgb(20, 19, 16) EIGENE, schwarz Eine Regel setzt dem `path` eine eigene `color`; `stroke:currentColor` loeste danach folgerichtig zu Schwarz auf. Nicht der Strich war falsch, sondern die Farbe, auf die er zeigte. Deshalb zuerst die Vererbung wiederherstellen, dann darauf zeigen. */ html[data-dp-layout] body header.hdr .hdr-credits-pill svg :is(path,circle,rect,line,polyline,polygon){ color:inherit !important; stroke:currentColor !important; } /* ═══════════════════════════════════════════════════════════════════ v1688c — DAS TOKEN FUER DEN KOPFTEXT WAR NIE GESETZT ------------------------------------------------------------------- Statt weitere Einzelregeln zu stapeln, die Wurzel. Gemessen in der Kanzlei: body dp-chrome-hell AKTIV (heller Skin) header.hdr Grund rgb(14, 13, 11) DUNKEL --dp-header-text nicht gesetzt style.css color: var(--dp-header-text, #1a1a1a) Der helle Skin setzt allen Kopftexten eine dunkle Farbe — er rechnet mit einem hellen Kopf. Die Layouts faerben den Kopf aber dunkel. Zwei Annahmen, die sich widersprechen, und der Fallback `#1a1a1a` gewinnt, weil das Token niemand fuellt. Kontrast gemessen: **1,05**. > Eine Farbe gilt immer nur zu IHREM Grund. Wer den Grund tauscht, > muss die Farbe mittauschen — sonst bleibt sie richtig fuer eine > Flaeche, die es nicht mehr gibt. Das Token wird deshalb gesetzt, sobald ein Layout den Kopf uebernimmt. Das trifft JEDEN Text im Kopf auf einmal, nicht nur das Symbol, an dem es aufgefallen ist. ═══════════════════════════════════════════════════════════════════ */ /* Spezifitaet nachgerechnet, nicht geschaetzt: ui-varianten.css:1290 html[data-ui-theme] body.dp-chrome-hell header.hdr (0,3,3) meine erste Fassung html[data-dp-layout] body (0,2,1) VERLOR Die Gegenregel geht davon aus, dass der Kopf im Hell-Skin HELL ist (sie setzt selbst den Grund auf `--uv-chrome`) und faerbt den Text deshalb mit `--uv-chrome-ink: #141310` — genau die gemessene Farbe. In den Layouts ist der Kopf aber DUNKEL. Zwei Regelwerke, jedes fuer sich richtig, zusammen falsch. Diese Fassung traegt beide Attribute und die Klasse und liegt damit bei (0,5,3). */ /* v1691 — ZURUECKGENOMMEN: hier stand GOLD. Marcel: „oben die Hilfe und dein Kontingent auf einmal in Gold, was aber vorher in so einem Weisston war — so aehnlich wie die ID und die Strasse." Er hat recht, und der richtige Wert stand die ganze Zeit im Code: `style.css:35774` setzt fuer den dunklen Kopf `--dp-header-text:#f3ead0` — Creme. Genau der Ton, in dem Adresse und Kennung stehen. Mein Fehler war nicht die Stelle, sondern der Wert: ich habe das Token auf die AKZENTfarbe gesetzt statt auf die TEXTfarbe. Gold ist der Akzent — was in Gold steht, soll dadurch hervortreten. Faerbt man alles gold, tritt nichts mehr hervor. Die Aufgabe war nur, `ui-varianten.css:1290` daran zu hindern, den Wert auf `--uv-chrome-ink` (#141310, fuer einen HELLEN Kopf gedacht) zu ueberschreiben. Jetzt steht dort der Ton, der zum dunklen Kopf gehoert. */ html[data-dp-layout][data-ui-theme] body.dp-chrome-hell header.hdr, html[data-dp-layout] body header.hdr{ --dp-header-text: #f3ead0 !important; color: #f3ead0 !important; } /* Der Akzent bleibt dort, wo er etwas heisst: am Kerosin-Stand. */ html[data-dp-layout] body header.hdr .hdr-credits-pill{ color: var(--wl-e2c97e, #E2C97E) !important; } /* ═══════════════════════════════════════════════════════════════════ v1691 — DIE REITERLEISTE SAH IN JEDEM LAYOUT ANDERS AUS ------------------------------------------------------------------- Marcel: „erst wurde die Tabbar in Creme angezeigt, danach in Schwarz, dann ist beim Tower alle Schrift in Gold. Bei der Aktenmappe passt sie aber wieder." GEMESSEN, Kontrast gegen den jeweiligen Grund: Aktenmappe Grund dunkel aktiv 4,80 normal 5,87 Kanzlei Grund dunkel aktiv 16,95 normal 9,77 <- richtig Tower Grund HELL aktiv 3,19 normal 2,61 <- zu schwach Drei Layouts, drei Zustaende. Der Tower ist der schlechteste: seine Leiste traegt eine HELLE Flaeche, die Schriftfarben stammen aber aus dem dunklen Satz — wieder eine Farbe, die zu ihrem alten Grund passt und nicht zum neuen. Die Kanzlei macht es richtig: dunkle Leiste, Cremetoene. Der Kopf ist in allen drei dunkel und die Leiste sitzt direkt darunter — es gibt keinen Grund, sie in einem Layout hell zu machen. Die bestehenden Regeln tragen `body:has(#sb-user)` und damit ID-Spezifitaet; diese hier muss denselben Bau haben, sonst verliert sie. `^="v"` trifft alle Layouts auf einmal, damit der naechste nicht wieder einzeln nachgezogen werden muss. ═══════════════════════════════════════════════════════════════════ */ html[data-dp-layout^="v"] body:has(#sb-user) nav.tabs, html[data-dp-layout^="v"] body:has(#sb-user) header.hdr + nav.tabs, html[data-dp-layout^="v"] body:has(#sb-user) nav.tabs.tabs{ background:#0E0D0B !important; border-bottom:1px solid var(--dpl-linie) !important; box-shadow:none !important; } html[data-dp-layout^="v"] body:has(#sb-user) nav.tabs .tab, html[data-dp-layout^="v"] body:has(#sb-user) nav.tabs .tab *{ color:#BFB7A9 !important; background:transparent !important; } html[data-dp-layout^="v"] body:has(#sb-user) nav.tabs .tab:hover, html[data-dp-layout^="v"] body:has(#sb-user) nav.tabs .tab:hover *{ color:#F2EDE3 !important; } html[data-dp-layout^="v"] body:has(#sb-user) nav.tabs .tab.active, html[data-dp-layout^="v"] body:has(#sb-user) nav.tabs .tab.active *{ color:#F5EFE2 !important; } /* Der Akzent bleibt die UNTERSTREICHUNG, nicht die Schrift — sonst tritt der aktive Reiter durch zwei Mittel gleichzeitig hervor und die Schrift wird dabei schlechter lesbar (4,80 gegen 16,95). */ html[data-dp-layout^="v"] body:has(#sb-user) nav.tabs .tab.active{ border-bottom-color:var(--wl-c9a84c, #C9A84C) !important; } /* v1699c — Die Layout-Kacheln in den Einstellungen. Die Marke steht als Klasse `.on`; die Farbe hier, wo der Gold-Waechter `var()` versteht. In `settings.js` gibt es kein eigenes Blatt fuer diese Knoepfe, deshalb die vollstaendige Regel. */ .dp-layoutw{ border:1px solid rgba(0,0,0,.12) !important; box-shadow:none !important; transition:border-color .12s, box-shadow .12s; } .dp-layoutw:hover{ border-color:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 45%, transparent) !important; } .dp-layoutw.on{ border-color:var(--wl-c9a84c, #C9A84C) !important; box-shadow:0 0 0 1px var(--wl-c9a84c, #C9A84C) inset !important; } /* v1699e — Der Kasten der Layout-Wahl in den Einstellungen. Stand vorher als Inline-Stil im JS, mit dem Gold in Zahlenform. Gold in `rgba(...)` faerbt sich beim Mandanten genauso wenig um wie ein Hex — hier steht es als Token und wird mit umgefaerbt. */ .dp-layoutw-box{ padding:12px 14px; background:#FAF9F4; border-radius:8px; border:1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 25%, transparent); } .dp-layoutw-hinweis{ font-size:11.5px; color:var(--muted,#5F5E5A); margin-bottom:9px; line-height:1.45; } .dp-layoutw-gitter{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; } .dp-layoutw{ min-height:44px; text-align:left; padding:10px 12px; border-radius:9px; background:#fff; cursor:pointer; font:inherit; } .dp-layoutw-n{ display:block; font-weight:600; } .dp-layoutw-s{ display:block; font-size:11.5px; color:var(--muted,#5F5E5A); margin-top:1px; } /* ===================================================================== v1705 - DIE AKTIONEN KOMMEN ZURUECK IN DIE SCHIENE ===================================================================== Marcel: "man kann unter Portfolio wenn man die Objekte auswaehlt kein Objekt mehr loeschen. das muessten wir realisieren dass das wieder geht." Gemessen am 29.09.2026: `.sbc-actions` stand in allen drei Layouts auf `display:none` - die Knoepfe Duplizieren und Loeschen existierten (22x22 px ohne Layout), waren aber nicht da. Ausgeblendet wurden sie beim Umbau der Karte zur kompakten Listenzeile, zusammen mit Thumbnail und Kennzahlkacheln. > Eine Gestaltungsentscheidung hat eine Funktion mitgenommen. Das > faellt nicht auf, solange niemand loeschen will - und dann sieht es > aus, als sei die Funktion weg. Der Zielkonflikt bleibt echt: die Zeile SOLL schmal sein. Geloest ueber Sichtbarkeit statt Platz - die Knoepfe liegen absolut rechts in der Zeile und erscheinen bei Hover oder wenn die Karte die ausgewaehlte ist. Sie nehmen also nie Breite weg. Auf schmalen Schirmen gibt es kein Hover. Dort stehen sie an der aktiven Karte dauerhaft - sonst waere das Loeschen auf dem Handy genau so weg wie vorher. ===================================================================== */ html[data-dp-layout] .dpl-schiene .sb-card{ position:relative !important; /* Anker fuer die absoluten Knoepfe */ } html[data-dp-layout] .dpl-schiene .sb-card .sbc-actions{ position:absolute !important; right:6px !important; top:50% !important; transform:translateY(-50%) !important; display:flex !important; gap:3px !important; opacity:0 !important; pointer-events:none !important; transition:opacity .12s ease !important; z-index:8 !important; background:linear-gradient(90deg, transparent, #1A1815 22%) !important; padding:2px 0 2px 16px !important; } html[data-dp-layout] .dpl-schiene .sb-card:hover .sbc-actions, html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-actions, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-actions, html[data-dp-layout] .dpl-schiene .sb-card:focus-within .sbc-actions{ opacity:1 !important; pointer-events:auto !important; } /* Der Verlauf muss zum Grund der Zeile passen, sonst steht ein dunkler Balken auf der hellen aktiven Zeile. Beide Zustaende einzeln benannt - Token reichen hier nicht, die Flaechen sind hart gesetzt. */ html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-actions, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-actions{ background:linear-gradient(90deg, transparent, #221F1A 22%) !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-actions .sbc-btn{ width:20px !important; height:20px !important; min-width:0 !important; min-height:0 !important; padding:0 !important; border-radius:4px !important; display:flex !important; align-items:center !important; justify-content:center !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-actions .sbc-btn svg{ width:12px !important; height:12px !important; } /* Kein Hover auf Touch: an der ausgewaehlten Zeile bleiben sie stehen. */ @media (hover:none){ html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-actions, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-actions{ opacity:1 !important; pointer-events:auto !important; } } /* ===================================================================== v1705 - ZWEI PUNKTE WENIGER UNTER AKTIONEN ===================================================================== Marcel: "Unter Aktionen in den neuen Layouts kann unter System der 'Rundgang starten' raus und auch Feedback & Support." Nur in den Layouts. Die normale Ansicht behaelt beide - dort ist die Aktionsliste der einzige zweite Weg zur Tour (v1179), und den ohne Not zu kappen waere eine Wegnahme. `.sb-act-tour` ist ein Anker, den es vorher nicht gab (v1705 in index.html). Ohne ihn muesste die Regel auf den `onclick` zielen - und der aendert sich, sobald jemand die Tour umbenennt. ===================================================================== */ html[data-dp-layout] .dpl-teil-aktionen .sb-act-tour, html[data-dp-layout] .dpl-teil-aktionen .sb-act-feedback{ display:none !important; } /* ===================================================================== v1705c - DIE AKTIONS-SYMBOLE SIND LINIEN, KEINE FLAECHEN ===================================================================== Marcel: "in den Layouts waere es toll wenn du die Icons der einzelnen Punkte unter Aktionen aus der 'heute' Ansicht uebernimmst. Auch gerne in Gold." Gemessen am 29.09.2026 im Bildvergleich: in der normalen Ansicht sind es feine Linien-Symbole (Haus, Balken, Dokument), in der Schiene gefuellte Flaechen. Die Zeichnung ist dieselbe - nur die Fuellung nicht. URSACHE: die Goldregel darueber setzte `fill:currentColor !important` mit. Die Symbole tragen aber `fill="none" stroke="currentColor"` als Praesentationsattribut - und CSS schlaegt ein Praesentationsattribut. Aus jedem Umriss wurde damit ein Klecks. > Die Regel wollte die Farbe setzen und hat die Form mitgenommen. > `color` faerbt ueber `currentColor` bereits beides; `fill` musste > dafuer nie angefasst werden. Hier steht deshalb NUR die Farbe. `fill` bleibt, was das Symbol selbst sagt - dann sieht es aus wie in der normalen Ansicht, und ein Symbol, das echt gefuellt gemeint ist, bleibt es auch. ===================================================================== */ html[data-dp-layout] .dpl-schiene .sb-act-item svg{ color:var(--wl-c9a84c, #C9A84C) !important; stroke:currentColor !important; opacity:1 !important; } /* ===================================================================== v1706 - KOPFLEISTE: KONTINGENT, HILFE UND PORTFOLIO ===================================================================== Marcel: "wenn ich den Tower als Layout ausgewaehlt habe und oben im Header auf dein Kontingent klicke, dann ist die Schrift schwarz ... ein goldener Rahmen mit goldener Schrift und das Gleiche daneben auch bei der Hilfe. Da wuerde ich mir wuenschen, dass wir die Farbkombi genauso machen wie die Anzeige daneben mit dem hellen Bereich 0 von 6 Bereichen vollstaendig ... Das Gleiche haben wir beim Portfolio." GEMESSEN am 29.09.2026, beide Zustaende: ohne Layout Panel-Ueberschrift rgb(201,168,76) auf rgb(20,18,16) mit Layout Panel-Ueberschrift rgb(0,0,0) auf rgb(20,18,16) Schwarz auf Schwarz. Der Kontrast liegt bei rund 1,0 - das ist nicht schwer zu lesen, das ist unsichtbar. > Eine Farbe gilt immer nur zu ihrem Grund. Im Layout wurde der > Kopfbereich hell gedacht und der Text dunkel gesetzt; das Panel > darin ist aber dunkel geblieben und hat die Textfarbe geerbt. DIE VORLAGE ist `.tabs-status-badge` - gemessen, nicht geraten: Text rgb(191,183,169) | Grund transparent | Rahmen rgb(230,225,214) Radius 7px Warum hier eine NEUE Regel und nicht die vorhandene: der Block weiter oben zielt auf `header.hdr:has(#hdr-badges)`. Gemessen liegt `#hdr-badges` GAR NICHT im Header - `hdr.contains(badges)` ist false, `:has()` matcht nie. Der Block sieht richtig aus und greift nirgends, genau wie der `#app`-Anker aus v1147. ===================================================================== */ /* -- 1) Die Kontingent-Pille und der Hilfe-Knopf ------------------- */ html[data-dp-layout] #hdr-credits-pill, html[data-dp-layout] .hdr-icon-btn{ color:#BFB7A9 !important; background:transparent !important; border:1px solid #E6E1D6 !important; border-radius:7px !important; } html[data-dp-layout] #hdr-credits-pill *, html[data-dp-layout] .hdr-icon-btn svg, html[data-dp-layout] .hdr-icon-btn svg *, html[data-dp-layout] .hdr-icon-btn .ic{ color:#BFB7A9 !important; stroke:currentColor !important; } html[data-dp-layout] #hdr-credits-pill:hover, html[data-dp-layout] .hdr-icon-btn:hover, html[data-dp-layout] #hdr-credits-pill:hover *, html[data-dp-layout] .hdr-icon-btn:hover svg{ color:#F5EFE2 !important; border-color:#F5EFE2 !important; } /* Das Panel bleibt AUSGENOMMEN - es haengt zwar in der Pille, ist aber eine eigene Flaeche mit eigenem Grund. Ohne diese Ausnahme wuerde der Stern-Selektor darueber seine Texte alle auf denselben Ton ziehen. */ /* -- 2) Das Kontingent-Panel --------------------------------------- */ html[data-dp-layout] .dp-kg-panel{ color:#E3DCCD !important; } html[data-dp-layout] .dp-kg-panel .dp-kg-h{ color:#EDE7DA !important; } html[data-dp-layout] .dp-kg-panel .dp-kg-n{ color:#E3DCCD !important; } /* Die ZAHL darf gold bleiben - sie ist der Wert, um den es geht, und Gold ist hier Wegweisung, nicht Schmuck. */ html[data-dp-layout] .dp-kg-panel .dp-kg-s{ color:var(--wl-e8cc7a, #E8CC7A) !important; } html[data-dp-layout] .dp-kg-panel .dp-kg-f{ color:#8C8578 !important; } /* -- 3) Der Portfolio-Knopf in der Schiene ------------------------- */ html[data-dp-layout] .dpl-portfolio{ color:#BFB7A9 !important; background:transparent !important; border:1px solid #E6E1D6 !important; border-radius:7px !important; } html[data-dp-layout] .dpl-portfolio .dpl-t, html[data-dp-layout] .dpl-portfolio .dpl-n{ color:#BFB7A9 !important; } html[data-dp-layout] .dpl-portfolio .dpl-i, html[data-dp-layout] .dpl-portfolio .dpl-i svg{ color:#BFB7A9 !important; stroke:currentColor !important; } html[data-dp-layout] .dpl-portfolio:hover, html[data-dp-layout] .dpl-portfolio:hover .dpl-t, html[data-dp-layout] .dpl-portfolio:hover .dpl-n, html[data-dp-layout] .dpl-portfolio:hover .dpl-i{ color:#F5EFE2 !important; border-color:#F5EFE2 !important; } /* ===================================================================== v1706 - DIE AKTIONSLISTE ATMET ===================================================================== Marcel: "da finde ich koennte zwischen den einzelnen Sachen ein bisschen Abstand sein und Ansichten, Analyse, Anlegen, Ausgeben, System, das koennte ein bisschen groesser sein, dass man da vielleicht ein bisschen mehr sieht. Das Ausgeben kann tatsaechlich sogar an dieser Stelle weg, weil wir die Ausgabe ja beim Tower auf der anderen Seite haben ... da musst du gucken, dass das auch nicht doppelt ist." GEMESSEN vorher: .sb-act-item padding 5px 9px, Schrift 12.5px; .sb-act-section-title Schrift 8.5px. Die Ueberschriften waren damit kleiner als jede andere Schrift in der App. ===================================================================== */ html[data-dp-layout] .dpl-schiene .sb-act-item{ padding:7px 9px !important; margin-bottom:1px !important; } html[data-dp-layout] .dpl-schiene .sb-act-section-title{ padding:14px 9px 5px !important; font-size:10px !important; letter-spacing:.14em !important; } /* Die erste Ueberschrift braucht oben keinen Abstand - sonst steht die Liste mit einer Luecke da, die niemand bestellt hat. */ html[data-dp-layout] .dpl-schiene .sb-act-section-title:first-child{ padding-top:4px !important; } /* -- "Ausgeben" faellt weg, WO die Ausgaben-Box steht --------------- Die Bedingung ist die Box selbst, nicht das Layout: gibt es sie einmal nicht, bleibt die Gruppe stehen, statt ersatzlos zu fehlen. > Eine Gruppe auszublenden, weil man ANNIMMT, dass es sie woanders > gibt, ist der Weg, auf dem Funktionen verschwinden. Die Regel fragt > deshalb nach, ob es die zweite Stelle wirklich gibt. */ html[data-dp-layout]:has(.dpl-teil-ausgaben) .dpl-schiene .sb-act-ausgeben{ display:none !important; } /* ===================================================================== v1706d - DIE KOPFLEISTE, MIT GENUG SPEZIFITAET ===================================================================== v1706 hat das Panel lesbar gemacht (Kontrast 1,0 -> 9,4), aber Pille und Hilfe-Knopf blieben gold. Der Kaskaden-Walker nennt den Grund, und es sind ZWEI verschiedene: 1) PILLE: meine Regel war `html[data-dp-layout] #hdr-credits-pill` = (1,1,0). Es gibt aber `html[data-dp-layout] body header.hdr #hdr-credits-pill` = (1,2,2) - staerker, und ebenfalls !important. 2) HILFE: der Knopf traegt ein INLINE-Attribut `style="color:var(--gold)"`. Gemessen mit getAttribute('style'), nicht vermutet. > Wirkt eine Regel trotz !important nicht, ist die Frage nicht "warum > greift sie nicht", sondern "wer ist staerker" - und das beantwortet > nur der Walker, nicht matches(). Hier steht beides mit genug Spezifitaet. Die Panel-Regeln bekommen die ID mit: ohne sie verliert `.dp-kg-panel .dp-kg-s` (0,3,0) gegen den Stern-Selektor `#hdr-credits-pill *` (1,1,0), und die Zahl waere nicht mehr gold. ===================================================================== */ /* -- Pille -------------------------------------------------------- */ html[data-dp-layout] body header.hdr #hdr-credits-pill.hdr-credits-pill{ color:#BFB7A9 !important; background:transparent !important; border:1px solid #E6E1D6 !important; border-radius:7px !important; } html[data-dp-layout] body header.hdr #hdr-credits-pill.hdr-credits-pill > .hdr-credits-pill-label, html[data-dp-layout] body header.hdr #hdr-credits-pill.hdr-credits-pill > .hdr-credits-pill-val{ color:#BFB7A9 !important; } html[data-dp-layout] body header.hdr #hdr-credits-pill.hdr-credits-pill:hover{ color:#F5EFE2 !important; border-color:#F5EFE2 !important; } /* -- Hilfe-Knopf (schlaegt das Inline-Attribut) -------------------- */ html[data-dp-layout] body header.hdr .hdr-icon-btn, html[data-dp-layout] body header.hdr .hdr-icon-btn[style], html[data-dp-layout] body header.hdr .hdr-icon-btn[style] svg, html[data-dp-layout] body header.hdr .hdr-icon-btn[style] svg *{ color:#BFB7A9 !important; stroke:currentColor !important; background:transparent !important; border:1px solid #E6E1D6 !important; border-radius:7px !important; } /* Das SVG darf keinen eigenen Rahmen bekommen - die Regel darueber trifft es mit, und ein Kaestchen um ein Fragezeichen sieht nach einem zweiten Knopf aus. */ html[data-dp-layout] body header.hdr .hdr-icon-btn svg, html[data-dp-layout] body header.hdr .hdr-icon-btn[style] svg, html[data-dp-layout] body header.hdr .hdr-icon-btn[style] svg *{ border:none !important; } html[data-dp-layout] body header.hdr .hdr-icon-btn:hover, html[data-dp-layout] body header.hdr .hdr-icon-btn[style]:hover, html[data-dp-layout] body header.hdr .hdr-icon-btn[style]:hover svg{ color:#F5EFE2 !important; border-color:#F5EFE2 !important; } /* -- Das Panel: mit der ID, sonst gewinnt der Stern ---------------- */ html[data-dp-layout] #hdr-credits-pill .dp-kg-panel{ color:#E3DCCD !important; } html[data-dp-layout] #hdr-credits-pill .dp-kg-panel .dp-kg-h{ color:#EDE7DA !important; } html[data-dp-layout] #hdr-credits-pill .dp-kg-panel .dp-kg-n{ color:#E3DCCD !important; } html[data-dp-layout] #hdr-credits-pill .dp-kg-panel .dp-kg-s{ color:var(--wl-e8cc7a, #E8CC7A) !important; } html[data-dp-layout] #hdr-credits-pill .dp-kg-panel .dp-kg-f{ color:#8C8578 !important; } /* ===================================================================== v1706e - DIE BEIDEN RESTE: HILFE-RAHMEN UND PORTFOLIO-KNOPF ===================================================================== Nach v1706d gemessen: Hilfe-SVG stroke rgb(191,183,169) RICHTIG - das sieht man Hilfe-Knopf border oklab(...) alt Portfolio color rgb(233,227,214) alt border rgb(42,38,34) alt background rgb(23,21,18) alt Das Symbol im Hilfe-Knopf war also schon richtig; der Container traegt nur noch seinen alten Rahmen. Und der Portfolio-Knopf wird von `.dpl-schiene[data-ton="dunkel"] .dpl-portfolio` gehalten - ein Attribut mehr als meine Regel hatte. > Eine Regel, die nicht greift, ist selten falsch geschrieben. Meistens > ist sie nur schwaecher als die, die schon da war - und das sagt der > Kaskaden-Walker in einer Zeile. ===================================================================== */ /* -- Hilfe-Knopf: nur noch der Rahmen ------------------------------ */ html[data-dp-layout] body header.hdr .hdr-icon-btn.hdr-icon-btn{ border:1px solid #E6E1D6 !important; border-radius:7px !important; background:transparent !important; color:#BFB7A9 !important; } html[data-dp-layout] body header.hdr .hdr-icon-btn.hdr-icon-btn:hover{ border-color:#F5EFE2 !important; color:#F5EFE2 !important; } /* -- Portfolio-Knopf, mit dem Ton-Attribut ------------------------- */ html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-portfolio, html[data-dp-layout] .dpl-schiene[data-ton="hell"] .dpl-portfolio, html[data-dp-layout] .dpl-schiene .dpl-portfolio.dpl-portfolio{ color:#BFB7A9 !important; background:transparent !important; border:1px solid #E6E1D6 !important; border-radius:7px !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-portfolio .dpl-t, html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-portfolio .dpl-n, html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-portfolio .dpl-i, html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-portfolio .dpl-i svg, html[data-dp-layout] .dpl-schiene .dpl-portfolio.dpl-portfolio .dpl-t, html[data-dp-layout] .dpl-schiene .dpl-portfolio.dpl-portfolio .dpl-n, html[data-dp-layout] .dpl-schiene .dpl-portfolio.dpl-portfolio .dpl-i, html[data-dp-layout] .dpl-schiene .dpl-portfolio.dpl-portfolio .dpl-i svg{ color:#BFB7A9 !important; stroke:currentColor !important; /* v1722: hier stand nur `stroke`. Das Symbol #i-portfolio wird aber ueber FILL gezeichnet - gemessen: stroke=none, fill=rgb(0,0,0). Die Zeile meinte das Richtige und traf die falsche Eigenschaft; das Icon blieb schwarz auf rgb(14,13,11), Kontrast 1,08. */ fill:currentColor !important; } html[data-dp-layout] .dpl-schiene[data-ton="dunkel"] .dpl-portfolio:hover, html[data-dp-layout] .dpl-schiene .dpl-portfolio.dpl-portfolio:hover, html[data-dp-layout] .dpl-schiene .dpl-portfolio.dpl-portfolio:hover .dpl-t, html[data-dp-layout] .dpl-schiene .dpl-portfolio.dpl-portfolio:hover .dpl-n, html[data-dp-layout] .dpl-schiene .dpl-portfolio.dpl-portfolio:hover .dpl-i{ color:#F5EFE2 !important; border-color:#F5EFE2 !important; } /* ===================================================================== v1706f - KURZSCHRIFT REICHT NICHT ===================================================================== Gemessen nach v1706e: Portfolio rgb(191,183,169) / Rahmen rgb(230,225,214) RICHTIG Pille Text richtig, Rahmen oklab(...) alt Hilfe Symbol richtig, Rahmen oklab(...) alt Zeile padding 2px 9px statt der gesetzten 7px alt Der Rahmen ist der blinde Fleck aus CLAUDE.md: `border:` ist eine KURZSCHRIFT und wird im Kaskadenvergleich nicht zu `border-color` expandiert. Eine spaetere Regel, die `border-color` EINZELN setzt, gewinnt deshalb gegen eine `border`-Kurzschrift - auch wenn die Kurzschrift staerker aussieht. > Wer eine Farbe setzen will, setzt die Farbe. Die Kurzschrift setzt > drei Dinge und verliert an jedem einzeln. Beim Polster dasselbe Muster, nur mit Spezifitaet: die Klasse doppelt zu nennen hebt sie ueber die vorhandene Regel, ohne eine ID oder ein neues Attribut zu erfinden. ===================================================================== */ html[data-dp-layout] body header.hdr #hdr-credits-pill.hdr-credits-pill, html[data-dp-layout] body header.hdr .hdr-icon-btn.hdr-icon-btn{ border-color:#E6E1D6 !important; border-top-color:#E6E1D6 !important; border-right-color:#E6E1D6 !important; border-bottom-color:#E6E1D6 !important; border-left-color:#E6E1D6 !important; border-style:solid !important; border-width:1px !important; } html[data-dp-layout] body header.hdr #hdr-credits-pill.hdr-credits-pill:hover, html[data-dp-layout] body header.hdr .hdr-icon-btn.hdr-icon-btn:hover{ border-color:#F5EFE2 !important; } /* Die Zeilen der Aktionsliste: Marcel wollte "ein bisschen Abstand". */ html[data-dp-layout] .dpl-schiene .sb-act-item.sb-act-item{ padding-top:7px !important; padding-bottom:7px !important; margin-bottom:1px !important; } /* ===================================================================== v1707 - AUCH DIE REITER-SYMBOLE SIND LINIEN ===================================================================== Marcel: "bei der Ansicht Kanzlei koennen natuerlich die Icons bei Objekt, Investition, Miete und allem auch uebernommen werden, wie von unserem urspruenglichen heute. Also die vernuenftigen Icons." Gemessen in der Kanzlei: fill = stroke = dieselbe Farbe bei allen neun Reitern - also gefuellte Flaechen statt Umrisse. Dieselbe Ursache wie bei den Aktionen in v1705c: die Goldregel setzte `fill:currentColor` mit, und CSS schlaegt das `fill="none"` des SVG. > Derselbe Fehler, eine Zeile weiter oben im selben Selektor. Wer > eine Sammelregel aufraeumt, geht ihre ganze Liste durch - nicht nur > den Teil, ueber den gerade jemand gestolpert ist. Hier steht wieder NUR die Farbe. Der aktive Reiter behaelt seinen helleren Ton, damit die Auswahl sichtbar bleibt. ===================================================================== */ html[data-dp-layout] .dpl-schiene nav.tabs .tab svg{ stroke:currentColor !important; opacity:1 !important; } html[data-dp-layout] .dpl-schiene nav.tabs .tab svg *{ stroke:currentColor !important; } /* ===================================================================== v1709 - DIE OBJEKTKARTE WIRD EIN AKTENREITER ===================================================================== Marcel hat aus den zehn Entwuerfen (v1707) Nummer 02 gewaehlt: "setz die aktenreiter um". GEMESSEN an der echten Karte, nicht aus der Demo uebernommen: .sb-card 216 x 81 .sbc-seq "2026-999" 45 x 14 -> wird die Lasche .sbc-address Adresse 166 x 15 .sbc-kp "189.000 EUR" 48 x 12 .sbc-score-overlay Ring + Stufe 26 x 31 .sbc-mini-grid ausgeblendet 0 x 0 .sbc-thumb ausgeblendet 0 x 0 Es wird KEIN Element neu gebaut. Die Lasche ist die Objektnummer, die ohnehin dasteht - sie wird nur nach oben gesetzt und bekommt ihren eigenen Grund. > Ein Entwurf, der neue Knoten braucht, muss von JS gebaut werden und > geht bei jedem Neurendern der Liste verloren. Einer, der die > vorhandenen umstellt, ueberlebt es. ===================================================================== */ /* -- 1) Die Karte traegt die Lasche, hat aber selbst keinen Grund --- */ html[data-dp-layout] .dpl-schiene .sb-card{ position:relative !important; background:transparent !important; border:0 !important; border-radius:0 !important; padding:13px 0 0 0 !important; /* Platz fuer die Lasche */ margin:0 0 5px 0 !important; min-height:0 !important; height:auto !important; overflow:visible !important; } html[data-dp-layout] .dpl-schiene .sb-card:hover, html[data-dp-layout] .dpl-schiene .sb-card.active, html[data-dp-layout] .dpl-schiene .sb-card.is-active{ background:transparent !important; border-color:transparent !important; } /* -- 2) Die Objektnummer wird zur Lasche ---------------------------- */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-seq{ position:absolute !important; top:0 !important; left:0 !important; z-index:3 !important; display:inline-block !important; width:auto !important; min-width:0 !important; padding:2px 8px 2px 7px !important; margin:0 !important; background:var(--wl-c9a84c, #C9A84C) !important; color:#0E0D0B !important; font:700 8px/1.35 var(--dpl-mono, 'JetBrains Mono', monospace) !important; letter-spacing:.1em !important; border-radius:3px 3px 0 0 !important; white-space:nowrap !important; } /* Die aktive Karte hebt ihre Lasche heller hervor - die Auswahl muss sichtbar bleiben, auch wenn das Blatt darunter schon einen Rahmen traegt. */ html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-seq, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-seq{ background:var(--wl-e8cc7a, #E8CC7A) !important; } /* -- 3) `.sbc-top` wird zum Blatt ----------------------------------- */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-top{ display:flex !important; align-items:center !important; gap:8px !important; padding:7px 9px !important; margin:0 !important; min-height:0 !important; background:var(--dpl-flaeche2, #15140F) !important; border:1px solid var(--dpl-linie, #2A2622) !important; border-radius:0 5px 5px 5px !important; transition:border-color .12s ease, background .12s ease !important; } html[data-dp-layout] .dpl-schiene .sb-card:hover .sbc-top{ border-color:var(--wl-b8932f, #b8932f) !important; background:#1A1815 !important; } html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-top, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-top{ border-color:var(--wl-c9a84c, #C9A84C) !important; background:#221F1A !important; } /* -- 4) Adresse und Preis untereinander ----------------------------- */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-top-body{ flex:1 1 auto !important; min-width:0 !important; display:block !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-address{ font:600 12px/1.3 'Inter', sans-serif !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; margin:0 !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-kp-row{ display:block !important; margin:2px 0 0 !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-kp{ font:600 10.5px/1 var(--dpl-mono, 'JetBrains Mono', monospace) !important; color:var(--dpl-tinte-leise, #B5AE9F) !important; } /* Datum und Pfeil in der ersten Zeile braucht der Reiter nicht - die Nummer steht ja in der Lasche. */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-top-line1{ display:block !important; min-height:0 !important; margin:0 !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-top-line1 > *:not(.sbc-seq){ display:none !important; } /* -- 5) Der Score-Ring rechts im Blatt ------------------------------ */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-score-overlay{ position:absolute !important; right:9px !important; top:auto !important; bottom:0 !important; height:100% !important; display:flex !important; align-items:center !important; z-index:2 !important; pointer-events:none !important; /* der Klick gehoert der Karte */ } html[data-dp-layout] .dpl-schiene .sb-card .sbc-score-label{ display:none !important; /* die Stufe steht im Titel */ } /* Rechts Platz fuer den Ring, damit die Adresse nicht darunter laeuft. */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-top-body{ padding-right:30px !important; } /* -- 6) Die Aktionen sitzen jetzt im Blatt, nicht an der Karte ------ v1705 hatte sie auf `top:50%` der KARTE gelegt. Mit der Lasche ist die Mitte der Karte nicht mehr die Mitte des Blattes - sie saessen 6-7 px zu hoch und ragten in die Lasche. > Wer die Hoehe einer Flaeche aendert, verschiebt alles, was sich auf > ihre Mitte bezieht. */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-actions{ top:auto !important; bottom:0 !important; height:100% !important; transform:none !important; align-items:center !important; right:8px !important; padding:0 0 0 18px !important; background:linear-gradient(90deg, transparent, #15140F 24%) !important; } html[data-dp-layout] .dpl-schiene .sb-card:hover .sbc-actions{ background:linear-gradient(90deg, transparent, #1A1815 24%) !important; } html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-actions, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-actions{ background:linear-gradient(90deg, transparent, #221F1A 24%) !important; } /* Solange die Aktionen sichtbar sind, tritt der Ring zurueck - sonst stehen zwei Dinge uebereinander. */ html[data-dp-layout] .dpl-schiene .sb-card:hover .sbc-score-overlay, html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-score-overlay, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-score-overlay{ opacity:0 !important; transition:opacity .12s ease !important; } /* -- 7) Ohne Objektnummer keine leere Lasche ------------------------ Ein Objekt ohne Nummer gibt es (frisch angelegt). Eine Lasche mit null Inhalt waere ein goldener Krumen ueber der Karte. */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-seq:empty{ display:none !important; } html[data-dp-layout] .dpl-schiene .sb-card:has(.sbc-seq:empty) .sbc-top, html[data-dp-layout] .dpl-schiene .sb-card:not(:has(.sbc-seq)) .sbc-top{ border-radius:5px !important; } /* ===================================================================== v1709b - DIE BAENDER WERDEN LASCHEN ===================================================================== Gemessen nach v1709: die Karte blieb 81 px statt 57, und der Score-Ring wurde 65 px hoch. Grund war ein Kind, das die Demo nicht kannte: .sbc-won-ribbon 214 x 21 display:block position:static Das "Zuschlag erhalten"-Band steht IM FLUSS und schiebt das Blatt um 21 px nach unten. Alles, was sich auf die Kartenhoehe bezog (Ring, Aktionen), rechnete danach falsch. > Eine Demo zeigt den Fall, den sie zeigt. Die echte Karte hat > Zustaende, die in keinem Entwurf vorkamen - Zuschlag erhalten, > Investor-Score berechnet. Wer nur den Entwurf umsetzt, baut fuer > eine Karte, die es so nicht gibt. Beide Baender werden zu Laschen RECHTS - gegenueber der Objektnummer. Das passt zur Aktenmetapher (zwei Reiter an einer Mappe) und nimmt sie aus dem Fluss, womit die Hoehenrechnung wieder stimmt. Gruen bleibt hart: CLAUDE.md sagt, Statusfarben werden nie tokenisiert - ein Zuschlag ist in jeder Marke gruen. ===================================================================== */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-won-ribbon, html[data-dp-layout] .dpl-schiene .sb-card .sbc-investor-ribbon{ position:absolute !important; top:0 !important; bottom:auto !important; left:auto !important; z-index:3 !important; width:auto !important; min-width:0 !important; max-width:none !important; padding:2px 7px !important; margin:0 !important; font:700 7.5px/1.35 var(--dpl-mono, 'JetBrains Mono', monospace) !important; letter-spacing:.1em !important; border-radius:3px 3px 0 0 !important; white-space:nowrap !important; display:inline-flex !important; align-items:center !important; gap:3px !important; border:0 !important; box-shadow:none !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-won-ribbon{ right:0 !important; background:#3FA56C !important; color:#06170D !important; } /* Der Investor-Reiter rueckt nach links, wenn beide da sind. `:has()` fragt die Karte, nicht den Zufall der Reihenfolge. */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-investor-ribbon{ right:0 !important; background:var(--wl-e8cc7a, #E8CC7A) !important; color:#0E0D0B !important; } html[data-dp-layout] .dpl-schiene .sb-card:has(.sbc-won-ribbon) .sbc-investor-ribbon{ right:64px !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-won-ribbon svg, html[data-dp-layout] .dpl-schiene .sb-card .sbc-investor-ribbon svg{ width:8px !important; height:8px !important; flex:none !important; } /* Die Lasche links darf nicht unter einen rechten Reiter laufen. */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-seq{ max-width:calc(100% - 132px) !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* ===================================================================== v1709c - DIE LASCHE SASS IM BLATT, NICHT DARUEBER ===================================================================== Marcel: "ne die karten sehen nicht so aus wie in der demo." Er hat recht. GEMESSEN an der ersten Karte, Abstaende relativ zur Kartenoberkante: Lasche y15 - 30 <- sollte y0 - 15 sein Blatt y14 - 58 Adresse y22 - 38 <- liegt damit UNTER der Lasche URSACHE: `position:absolute` richtet sich am naechsten POSITIONIERTEN Vorfahren aus. Ich hatte `.sbc-top` in v1709 auf `position:relative` stehen lassen - damit wurde das Blatt selbst zum Anker, und `top:0` meinte die Blattoberkante statt der Karte. Die Lasche landete auf dem Adresstext. > `top:0` ist keine Angabe, sondern eine Frage: null wovon? Wer ein > Element absolut setzt, muss den Anker mitprüfen - nicht nur den Wert. ZWEITER BEFUND: der Blattrahmen war `rgb(230,225,214)` - das helle Beige aus v1706f. Jene Regel setzt `border-color` EINZELN und schlaegt damit meine `border`-Kurzschrift hier. Derselbe Mechanismus, den v1706f selbst beschreibt, diesmal gegen mich. DRITTER BEFUND: Blatt `rgb(21,20,15)` auf Schiene `rgb(14,13,11)` - sieben Stufen Unterschied. In der Demo lag das Blatt auf `#050505` und hob sich deutlich ab. Hier war die Mappe praktisch unsichtbar. ===================================================================== */ /* -- 1) Der Anker ist die KARTE, nicht das Blatt -------------------- */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-top{ position:static !important; } /* -- 2) Rahmen und Grund einzeln, nicht als Kurzschrift ------------- */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-top{ background-color:#17160F !important; border-style:solid !important; border-width:1px !important; border-color:#332E26 !important; border-top-color:#332E26 !important; border-right-color:#332E26 !important; border-bottom-color:#332E26 !important; border-left-color:#332E26 !important; } html[data-dp-layout] .dpl-schiene .sb-card:hover .sbc-top{ background-color:#1E1B15 !important; border-color:var(--wl-b8932f, #b8932f) !important; } html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-top, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-top{ background-color:#26221A !important; border-color:var(--wl-c9a84c, #C9A84C) !important; } /* -- 3) Der Score-Ring bleibt stehen -------------------------------- In v1709 verschwand er bei Hover und an der aktiven Karte, damit die Aktionsknoepfe Platz haben. Das war falsch: in der Demo steht der Ring IMMER, und er ist der Grund, warum man eine Liste ueberfliegt. Die Knoepfe ruecken stattdessen nach links an ihm vorbei. */ html[data-dp-layout] .dpl-schiene .sb-card:hover .sbc-score-overlay, html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-score-overlay, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-score-overlay{ opacity:1 !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-actions{ right:42px !important; } /* ===================================================================== v1710 - DER STATUS STECKT IM RAHMEN, NICHT IN EINEM BAND ===================================================================== Marcel: "man kann die ID oben nicht richtig lesen ... dann haben wir Objekte, da steht One dran. Also da haben wir alles Moegliche und wir haben ja gesagt, dass wir es rot umrahmen, wenn es verloren ist, es gelb umrahmen oder golden umrahmen, wenn es in Bearbeitung ist und gruen, wenn es gewonnen ist. Daher muss das One nicht drinne stehen und die Schriftfarbe von der ID koennte die gleiche sein wie bei Investor und auch der Hintergrund koennte gleich sein und es muss halt drauf geachtet werden, dass das immer zusammen steht oder halt dass das Investor dann ganz auf der rechten Seite ist." VIER SACHEN, und sie haengen zusammen: 1. Die WON-Lasche faellt weg. Der Zustand steht im RAHMEN - und dann ist eine zweite Anzeige daneben nur Wiederholung. 2. Der Rahmen des Blattes traegt die Deal-Stufe: .deal-lost rot verloren .deal-won gruen gewonnen sonst gold in Bearbeitung Gruen und Rot bleiben HART - CLAUDE.md: Statusfarben werden nie tokenisiert. Gold laeuft ueber `--wl-`, es ist die Marke. 3. ID und INVESTOR bekommen dieselbe Optik - eine Lasche sieht aus wie die andere, nur der Inhalt ist verschieden. 4. Feste Plaetze: ID immer LINKS, INVESTOR immer GANZ RECHTS. > „Mal zusammen, mal nicht" ist kein Layout, sondern ein Zufall. > Zwei feste Ecken sind ruhiger als ein Nebeneinander, dessen > Abstand von der Laenge der Objektnummer abhaengt. Zur Lesbarkeit: die Laschen standen auf 8 px und 7,5 px. Das ist kleiner als jede andere Schrift in der App und auf einem goldenen Grund schwer zu treffen. Beide jetzt 9,5 px. ===================================================================== */ /* -- 1) Die WON-Lasche faellt weg ----------------------------------- */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-won-ribbon{ display:none !important; } /* -- 2) Beide Laschen, eine Gestaltung ------------------------------ */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-seq, html[data-dp-layout] .dpl-schiene .sb-card .sbc-investor-ribbon{ position:absolute !important; top:0 !important; bottom:auto !important; z-index:3 !important; display:inline-flex !important; align-items:center !important; gap:3px !important; width:auto !important; min-width:0 !important; max-width:none !important; padding:2px 8px !important; margin:0 !important; background:var(--wl-c9a84c, #C9A84C) !important; color:#0E0D0B !important; font:700 9.5px/1.4 var(--dpl-mono, 'JetBrains Mono', monospace) !important; letter-spacing:.08em !important; border:0 !important; box-shadow:none !important; border-radius:3px 3px 0 0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-seq{ left:0 !important; right:auto !important; max-width:calc(100% - 92px) !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-investor-ribbon{ right:0 !important; left:auto !important; max-width:88px !important; } html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-seq, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-seq, html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-investor-ribbon, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-investor-ribbon{ background:var(--wl-e8cc7a, #E8CC7A) !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-investor-ribbon svg{ width:9px !important; height:9px !important; flex:none !important; } /* -- 3) Der Rahmen traegt die Deal-Stufe --------------------------- In Bearbeitung ist der Regelfall - deshalb gedaempftes Gold. Ein voll gesaettigter Rahmen an jeder Zeile laesst die Liste flimmern, und dann faellt der eine gruene oder rote nicht mehr auf. > Wenn alles hervorgehoben ist, ist nichts hervorgehoben. */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-top{ border-color:var(--wl-8a7332, #8a7332) !important; border-top-color:var(--wl-8a7332, #8a7332) !important; border-right-color:var(--wl-8a7332, #8a7332) !important; border-bottom-color:var(--wl-8a7332, #8a7332) !important; border-left-color:var(--wl-8a7332, #8a7332) !important; } html[data-dp-layout] .dpl-schiene .sb-card.deal-won .sbc-top{ border-color:#3FA56C !important; border-top-color:#3FA56C !important; border-right-color:#3FA56C !important; border-bottom-color:#3FA56C !important; border-left-color:#3FA56C !important; } html[data-dp-layout] .dpl-schiene .sb-card.deal-lost .sbc-top{ border-color:#B8625C !important; border-top-color:#B8625C !important; border-right-color:#B8625C !important; border-bottom-color:#B8625C !important; border-left-color:#B8625C !important; } /* Die Lasche nimmt den Ton auf, sonst steht eine goldene Klappe an einer gruenen Mappe. */ html[data-dp-layout] .dpl-schiene .sb-card.deal-won .sbc-seq, html[data-dp-layout] .dpl-schiene .sb-card.deal-won .sbc-investor-ribbon{ background:#3FA56C !important; color:#04140A !important; } html[data-dp-layout] .dpl-schiene .sb-card.deal-lost .sbc-seq, html[data-dp-layout] .dpl-schiene .sb-card.deal-lost .sbc-investor-ribbon{ background:#B8625C !important; color:#190706 !important; } /* Hover und Auswahl heben den jeweiligen Ton an, statt ihn zu ueberschreiben - sonst verliert die gewonnene Karte beim Anklicken ihre Farbe. */ html[data-dp-layout] .dpl-schiene .sb-card:hover .sbc-top, html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-top, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-top{ border-color:var(--wl-c9a84c, #C9A84C) !important; } html[data-dp-layout] .dpl-schiene .sb-card.deal-won:hover .sbc-top, html[data-dp-layout] .dpl-schiene .sb-card.deal-won.active .sbc-top{ border-color:#5FC98A !important; } html[data-dp-layout] .dpl-schiene .sb-card.deal-lost:hover .sbc-top, html[data-dp-layout] .dpl-schiene .sb-card.deal-lost.active .sbc-top{ border-color:#D8564C !important; } /* ===================================================================== v1710b - DIE ZAHLEN IN DER KONTINGENT-PILLE ===================================================================== Marcel: "zudem in dem header oben unter kontigend sind die zahlen noch gold." Gemessen: `.dp-kg-label` mit "31 - 4 - 7" steht auf rgb(213,187,115), und das Symbol davor ebenso. MEIN FEHLER: in v1706d habe ich die Kinder ueber `> .hdr-credits-pill-label` und `> .hdr-credits-pill-val` angesprochen. Diese Klassen gibt es nicht - sie heissen `dp-kg-label`. Ich hatte die Namen aus dem Namen der Pille ABGELEITET statt sie auszulesen. Die Regel sah plausibel aus und traf nichts. > Zum dritten Mal in dieser Sitzung ein geratener Name: erst > `comingSoon` statt `provComingSoon`, dann die Tour-Klassen, jetzt > hier. Ein `grep` dauert zehn Sekunden. `:not(.dp-kg-panel)` nimmt das aufklappbare Panel aus - dessen Toene stehen in v1706d und sollen bleiben (die ZAHL darin darf gold sein, sie ist der Wert). ===================================================================== */ html[data-dp-layout] body header.hdr #hdr-credits-pill > *:not(.dp-kg-panel), html[data-dp-layout] body header.hdr #hdr-credits-pill > .dp-kg-label, html[data-dp-layout] body header.hdr #hdr-credits-pill > svg, html[data-dp-layout] body header.hdr #hdr-credits-pill > svg *{ color:#BFB7A9 !important; stroke:currentColor !important; } html[data-dp-layout] body header.hdr #hdr-credits-pill:hover > *:not(.dp-kg-panel){ color:#F5EFE2 !important; } /* ===================================================================== v1711 - LASCHEN: FARBIGE SCHRIFT AUF GETOENTEM GRUND ===================================================================== Marcel, dritte Rueckmeldung: "passt immer noch nicht auch schriftfarbe nicht." Er hat drei Mal recht gehabt, und ich habe drei Mal zu kurz gemessen. Erst die Karte DREIFACH vergroessert fotografiert zeigte es: Lasche "2026-999" Text rgb(140,133,120) auf rgb(63,165,108) KONTRAST 1,19 Zwei Fehler auf einmal: 1. Ich hatte die Lasche VOLL gefuellt (Gruen/Gold/Rot als Flaeche). Im Auslieferungszustand ist sie das NICHT - dort gemessen: .sbc-seq Text rgb(205,175,90) auf gold mit 12 % Deckung Also farbige Schrift auf getoentem Grund, nicht dunkle Schrift auf Vollflaeche. Ich hatte das Prinzip umgedreht. 2. Meine `color`-Regel griff gar nicht - der Text stand auf rgb(140,133,120), einem Grau, das ich nirgends gesetzt habe. Eine andere Regel war staerker. Sichtbar wurde das erst, als Grund UND Text zusammen gemessen wurden. > Ich habe die Farben einzeln geprueft und jede fuer sich richtig > gefunden. Lesbarkeit ist aber keine Eigenschaft einer Farbe, > sondern eines PAARES. Wer nur `background` misst, sieht den > Kontrast nie. Jetzt wie im Original: die Statusfarbe traegt die SCHRIFT, der Grund ist derselbe Ton mit wenig Deckung. Das ist lesbar, zeigt den Status und bleibt ruhig - drei volle Farbflaechen je Zeile waren zu laut. ===================================================================== */ /* -- Grundform beider Laschen (Klasse doppelt = genug Spezifitaet) --- */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-seq.sbc-seq, html[data-dp-layout] .dpl-schiene .sb-card .sbc-investor-ribbon.sbc-investor-ribbon{ background:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 15%, transparent) !important; color:var(--wl-e2c97e, #E2C97E) !important; border:1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 42%, transparent) !important; border-bottom:0 !important; font-weight:700 !important; padding:2px 8px 3px !important; } html[data-dp-layout] .dpl-schiene .sb-card .sbc-seq.sbc-seq *, html[data-dp-layout] .dpl-schiene .sb-card .sbc-investor-ribbon.sbc-investor-ribbon *{ color:inherit !important; stroke:currentColor !important; } /* -- Gewonnen: gruen. Text hell genug fuer den dunklen Grund. ------- */ html[data-dp-layout] .dpl-schiene .sb-card.deal-won .sbc-seq.sbc-seq, html[data-dp-layout] .dpl-schiene .sb-card.deal-won .sbc-investor-ribbon.sbc-investor-ribbon{ background:rgba(63,165,108,.17) !important; color:#6FD79A !important; border-color:rgba(63,165,108,.5) !important; } /* -- Verloren: rot ------------------------------------------------- */ html[data-dp-layout] .dpl-schiene .sb-card.deal-lost .sbc-seq.sbc-seq, html[data-dp-layout] .dpl-schiene .sb-card.deal-lost .sbc-investor-ribbon.sbc-investor-ribbon{ background:rgba(184,98,92,.17) !important; color:#E08C86 !important; border-color:rgba(184,98,92,.5) !important; } /* -- Ausgewaehlte Karte: etwas heller, nicht anders ---------------- */ html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-seq.sbc-seq, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-seq.sbc-seq, html[data-dp-layout] .dpl-schiene .sb-card.active .sbc-investor-ribbon.sbc-investor-ribbon, html[data-dp-layout] .dpl-schiene .sb-card.is-active .sbc-investor-ribbon.sbc-investor-ribbon{ background:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 26%, transparent) !important; color:var(--wl-e8cc7a, #E8CC7A) !important; } html[data-dp-layout] .dpl-schiene .sb-card.deal-won.active .sbc-seq.sbc-seq, html[data-dp-layout] .dpl-schiene .sb-card.deal-won.active .sbc-investor-ribbon.sbc-investor-ribbon{ background:rgba(63,165,108,.28) !important; color:#8FE7B4 !important; } html[data-dp-layout] .dpl-schiene .sb-card.deal-lost.active .sbc-seq.sbc-seq, html[data-dp-layout] .dpl-schiene .sb-card.deal-lost.active .sbc-investor-ribbon.sbc-investor-ribbon{ background:rgba(184,98,92,.28) !important; color:#F0A9A4 !important; } /* ===================================================================== v1711b - :is(#sb-list) HAT MEINE SCHRIFTFARBE GESCHLAGEN ===================================================================== Kontrast war nach v1711 von 1,19 auf 3,9 gestiegen - aber die Schriftfarbe stand UNVERAENDERT auf rgb(140,133,120), einem Grau, das ich nirgends gesetzt habe. Der Kaskaden-Walker nennt den Grund: html[data-dp-layout] :is(#sb-list) .sb-card .sbc-seq >> color: rgb(140,133,120) !important `:is(#sb-list)` ERBT die ID-Spezifitaet. Die Regel zaehlt damit als (1,3,1) und schlaegt meine `.sbc-seq.sbc-seq` mit (0,5,1) - eine ID schlaegt jede Klassenkette, egal wie lang. > Das steht so in CLAUDE.md, und ich bin trotzdem hineingelaufen - > weil ich die Spezifitaet an der SICHTBAREN Selektorlaenge geschaetzt > habe statt am staerksten Argument. Fuenf Klassen sehen nach mehr aus > als eine ID in Klammern. Gegenmittel aus derselben Zeile: denselben ID-Anker mitnehmen. Dann stehen beide bei (1,x,x), und die spaetere Regel gewinnt. ===================================================================== */ html[data-dp-layout] .dpl-schiene :is(#sb-list) .sb-card .sbc-seq, html[data-dp-layout] :is(#sb-list) .sb-card .sbc-seq, html[data-dp-layout] :is(#sb-list) .sb-card .sbc-investor-ribbon{ color:var(--wl-e2c97e, #E2C97E) !important; } html[data-dp-layout] :is(#sb-list) .sb-card.deal-won .sbc-seq, html[data-dp-layout] :is(#sb-list) .sb-card.deal-won .sbc-investor-ribbon{ color:#6FD79A !important; } html[data-dp-layout] :is(#sb-list) .sb-card.deal-lost .sbc-seq, html[data-dp-layout] :is(#sb-list) .sb-card.deal-lost .sbc-investor-ribbon{ color:#E08C86 !important; } html[data-dp-layout] :is(#sb-list) .sb-card.active .sbc-seq, html[data-dp-layout] :is(#sb-list) .sb-card.active .sbc-investor-ribbon{ color:var(--wl-e8cc7a, #E8CC7A) !important; } html[data-dp-layout] :is(#sb-list) .sb-card.deal-won.active .sbc-seq, html[data-dp-layout] :is(#sb-list) .sb-card.deal-won.active .sbc-investor-ribbon{ color:#8FE7B4 !important; } html[data-dp-layout] :is(#sb-list) .sb-card.deal-lost.active .sbc-seq, html[data-dp-layout] :is(#sb-list) .sb-card.deal-lost.active .sbc-investor-ribbon{ color:#F0A9A4 !important; } /* Der Adresstext und der Preis im Blatt gehoeren mit geprueft - sie haengen an derselben ID-Regel. */ html[data-dp-layout] .dpl-schiene :is(#sb-list) .sb-card .sbc-address{ color:#F2ECDF !important; } html[data-dp-layout] .dpl-schiene :is(#sb-list) .sb-card .sbc-kp{ color:var(--wl-cdaf5a, #CDAF5A) !important; } /* ===================================================================== v1711c - "MAL ZUSAMMEN, MAL NICHT" - DIE URSACHE ===================================================================== Marcel: "dann ist das mal zusammen, dann ist es nicht zusammen." GEMESSEN ueber alle Karten, Abstaende in der Karte (214 px breit): #0 gewonnen ID 0-66 INVESTOR 71-149 <- Mitte #2 offen ID 0-72 INVESTOR 135-213 <- rechts #3 offen ID 0-72 INVESTOR 135-213 <- rechts URSACHE: v1709b hatte eine Ausweichregel .sb-card:has(.sbc-won-ribbon) .sbc-investor-ribbon { right:64px } damit INVESTOR nicht unter der damaligen WON-Lasche landet. Seit v1710 ist die WON-Lasche AUSGEBLENDET - aber sie steht weiter im DOM, und `:has()` fragt nach dem DOM, nicht nach der Sichtbarkeit. Die Ausweichregel wich also vor etwas aus, das niemand mehr sieht. > `display:none` entfernt nichts. Wer eine Regel an `:has()` haengt, > muss sie mitloeschen, wenn das Gesuchte unsichtbar wird - sonst > bleibt eine Rueckicht auf einen Gast, der laengst gegangen ist. Und weil die WON-Karten genau die sind, die auch ein Investor-Band tragen, sah es aus wie Zufall: mal rechts, mal in der Mitte. ===================================================================== */ html[data-dp-layout] .dpl-schiene .sb-card:has(.sbc-won-ribbon) .sbc-investor-ribbon, html[data-dp-layout] :is(#sb-list) .sb-card:has(.sbc-won-ribbon) .sbc-investor-ribbon{ right:0 !important; } /* ===================================================================== v1712 - ZWEI RAHMEN UM DIESELBE KARTE ===================================================================== Marcel hat einen Screenshot geschickt (Dateien/Screenshot1.png). Darauf sieht man es sofort: die Karten sind KAESTEN mit Kopfzeile, kein Aktenreiter. Die Lasche sitzt IM Rahmen statt darauf. GEMESSEN: KARTE Rahmen 1,11px solid rgb(63,165,108) <- der stoert BLATT Rahmen 1,11px rgb(63,165,108) Zwei Rahmen um dieselbe Sache. Meine `border:0` an `.sb-card` aus v1709 greift nicht: `aside.sidebar .sb-card.deal-won` aus style.css ist staerker, und dieselbe Datei faerbt auch den offenen Fall (`color(srgb … / .45)`). > Ein Reiter entsteht dadurch, dass die Lasche AUSSERHALB des Blattes > sitzt. Zieht man einen zweiten Rahmen um beide, ist es wieder eine > Schachtel - und die Form, die man bauen wollte, ist weg. Der Anker `:is(#sb-list)` ist derselbe, der in v1711b meine Schriftfarbe geschlagen hat. Diesmal steht er auf meiner Seite. ===================================================================== */ html[data-dp-layout] :is(#sb-list) .sb-card, html[data-dp-layout] :is(#sb-list) .sb-card.deal-won, html[data-dp-layout] :is(#sb-list) .sb-card.deal-lost, html[data-dp-layout] :is(#sb-list) .sb-card.active, html[data-dp-layout] :is(#sb-list) .sb-card.deal-won.active, html[data-dp-layout] :is(#sb-list) .sb-card.deal-lost.active, html[data-dp-layout] :is(#sb-list) .sb-card:hover{ border:0 !important; border-color:transparent !important; background:transparent !important; background-color:transparent !important; box-shadow:none !important; outline:0 !important; } /* ===================================================================== v1714 - DIE OBJEKTKARTEN-ENTWUERFE ZUM UMSCHALTEN ===================================================================== Marcel: "bei den Objektkarten moechte ich dass du mir die anderen auch baust zum wechseln. erst mal auf dem bildschirm zum umswitchen." Acht Entwuerfe aus design/mockups/objektkarten-schiene-v1707.html, gewaehlt ueber `data-dp-objkarte` (objektkarten-stil.js). Ohne Attribut bleibt der Aktenreiter - der ist der Standard seit v1709. ALLE ERBEN VOM AKTENREITER und schalten nur um, was sie anders machen. Das haelt die Bloecke kurz und sorgt dafuer, dass Gemeinsames (kein Kartenrahmen, Score-Ring rechts, Aktionen bei Hover) an EINER Stelle steht. > Acht vollstaendige Entwuerfe nebeneinander waeren acht Orte, an denen > dieselbe Korrektur nachgezogen werden muss. Der Anker `:is(#sb-list)` ist noetig: die Grundregeln der Sidebar tragen ihn, und ohne ihn verliert jede Klassenkette gegen sie (v1711b). ===================================================================== */ /* ── 01 BORDKARTE · Abriss links, Jahr hochkant ────────────────────── */ html[data-dp-objkarte="bordkarte"] .dpl-schiene :is(#sb-list) .sb-card{ padding:0 !important; } html[data-dp-objkarte="bordkarte"] .dpl-schiene :is(#sb-list) .sb-card .sbc-seq{ position:absolute !important; top:0 !important; bottom:0 !important; left:0 !important; right:auto !important; width:16px !important; max-width:16px !important; display:flex !important; align-items:center !important; justify-content:center !important; writing-mode:vertical-rl !important; border-radius:5px 0 0 5px !important; border:0 !important; border-right:1px dashed color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 50%, transparent) !important; background:transparent !important; font-size:7.5px !important; letter-spacing:.14em !important; padding:0 !important; } html[data-dp-objkarte="bordkarte"] .dpl-schiene :is(#sb-list) .sb-card .sbc-top{ border-radius:0 5px 5px 0 !important; margin-left:16px !important; } html[data-dp-objkarte="bordkarte"] .dpl-schiene :is(#sb-list) .sb-card .sbc-investor-ribbon{ top:auto !important; bottom:4px !important; right:4px !important; border-radius:3px !important; font-size:7.5px !important; border-bottom:1px solid !important; } /* ── 03 SCORE-KANTE · farbiger Strich statt Ring ───────────────────── */ html[data-dp-objkarte="kante"] .dpl-schiene :is(#sb-list) .sb-card .sbc-top{ border:0 !important; border-left:3px solid var(--wl-c9a84c, #C9A84C) !important; border-radius:0 4px 4px 0 !important; background-color:#17160F !important; } html[data-dp-objkarte="kante"] .dpl-schiene :is(#sb-list) .sb-card.deal-won .sbc-top{ border-left-color:#3FA56C !important; } html[data-dp-objkarte="kante"] .dpl-schiene :is(#sb-list) .sb-card.deal-lost .sbc-top{ border-left-color:#B8625C !important; } html[data-dp-objkarte="kante"] .dpl-schiene :is(#sb-list) .sb-card .sbc-score-overlay{ display:none !important; } html[data-dp-objkarte="kante"] .dpl-schiene :is(#sb-list) .sb-card .sbc-top-body{ padding-right:6px !important; } html[data-dp-objkarte="kante"] .dpl-schiene :is(#sb-list) .sb-card .sbc-seq{ border:0 !important; background:transparent !important; padding:1px 0 1px 8px !important; } /* ── 04 DATENZEILE · Mono, eine Zeile, buendig ─────────────────────── */ html[data-dp-objkarte="datenzeile"] .dpl-schiene :is(#sb-list) .sb-card{ padding:0 !important; margin-bottom:1px !important; } html[data-dp-objkarte="datenzeile"] .dpl-schiene :is(#sb-list) .sb-card .sbc-seq{ position:static !important; display:inline-block !important; border:0 !important; background:transparent !important; padding:0 !important; margin:0 !important; font-size:9px !important; /* v1714d: Marcel: "Bei der Datenzeile fehlt die angabe der kompleten id". Die 38 px waren fuer "999" gerechnet - die Nummer heisst aber "2026-999" und wurde abgeschnitten. > Eine feste Breite fuer eine Zeichenkette, deren Laenge man nicht > kennt, schneidet sie irgendwann ab. Hier traegt der Inhalt die > Breite, und nur die Adresse daneben gibt nach. */ width:auto !important; max-width:none !important; flex:0 0 auto !important; padding-right:8px !important; vertical-align:middle !important; } html[data-dp-objkarte="datenzeile"] .dpl-schiene :is(#sb-list) .sb-card .sbc-top{ border:0 !important; border-radius:3px !important; background-color:transparent !important; padding:4px 7px !important; align-items:center !important; } html[data-dp-objkarte="datenzeile"] .dpl-schiene :is(#sb-list) .sb-card:hover .sbc-top{ background-color:#1A1815 !important; } html[data-dp-objkarte="datenzeile"] .dpl-schiene :is(#sb-list) .sb-card.active .sbc-top{ background-color:#221F1A !important; } html[data-dp-objkarte="datenzeile"] .dpl-schiene :is(#sb-list) .sb-card .sbc-address{ font-family:var(--dpl-mono, 'JetBrains Mono', monospace) !important; font-size:11px !important; font-weight:400 !important; } html[data-dp-objkarte="datenzeile"] .dpl-schiene :is(#sb-list) .sb-card .sbc-kp-row{ display:none !important; } html[data-dp-objkarte="datenzeile"] .dpl-schiene :is(#sb-list) .sb-card .sbc-investor-ribbon{ display:none !important; } html[data-dp-objkarte="datenzeile"] .dpl-schiene :is(#sb-list) .sb-card .sbc-top-line1{ display:inline-block !important; width:auto !important; vertical-align:middle !important; } /* ── 06 AMPEL · ein Punkt sagt die Stufe ───────────────────────────── */ html[data-dp-objkarte="ampel"] .dpl-schiene :is(#sb-list) .sb-card{ padding:0 !important; } html[data-dp-objkarte="ampel"] .dpl-schiene :is(#sb-list) .sb-card .sbc-top{ border:0 !important; border-radius:4px !important; background-color:transparent !important; padding:6px 8px 6px 20px !important; position:relative !important; } html[data-dp-objkarte="ampel"] .dpl-schiene :is(#sb-list) .sb-card:hover .sbc-top{ background-color:#1A1815 !important; } html[data-dp-objkarte="ampel"] .dpl-schiene :is(#sb-list) .sb-card.active .sbc-top{ background-color:#221F1A !important; } html[data-dp-objkarte="ampel"] .dpl-schiene :is(#sb-list) .sb-card .sbc-top::before{ content:'' !important; position:absolute !important; left:7px !important; top:50% !important; transform:translateY(-50%) !important; width:8px !important; height:8px !important; border-radius:50% !important; background:var(--wl-c9a84c, #C9A84C) !important; } html[data-dp-objkarte="ampel"] .dpl-schiene :is(#sb-list) .sb-card.deal-won .sbc-top::before{ background:#3FA56C !important; } html[data-dp-objkarte="ampel"] .dpl-schiene :is(#sb-list) .sb-card.deal-lost .sbc-top::before{ background:#B8625C !important; } html[data-dp-objkarte="ampel"] .dpl-schiene :is(#sb-list) .sb-card .sbc-seq, html[data-dp-objkarte="ampel"] .dpl-schiene :is(#sb-list) .sb-card .sbc-investor-ribbon, html[data-dp-objkarte="ampel"] .dpl-schiene :is(#sb-list) .sb-card .sbc-kp-row{ display:none !important; } /* ── 07 KENNZAHLEN · Preis, Rendite, Cashflow ──────────────────────── */ html[data-dp-objkarte="kennzahlen"] .dpl-schiene :is(#sb-list) .sb-card .sbc-mini-grid{ display:flex !important; gap:7px !important; padding:0 9px 7px !important; margin:-1px 0 0 !important; border:1px solid var(--wl-8a7332, #8a7332) !important; border-top:0 !important; border-radius:0 0 5px 5px !important; background-color:#17160F !important; } html[data-dp-objkarte="kennzahlen"] .dpl-schiene :is(#sb-list) .sb-card.deal-won .sbc-mini-grid{ border-color:#3FA56C !important; } html[data-dp-objkarte="kennzahlen"] .dpl-schiene :is(#sb-list) .sb-card.deal-lost .sbc-mini-grid{ border-color:#B8625C !important; } html[data-dp-objkarte="kennzahlen"] .dpl-schiene :is(#sb-list) .sb-card .sbcm{ flex:1 1 0 !important; min-width:0 !important; font-size:9px !important; display:block !important; } html[data-dp-objkarte="kennzahlen"] .dpl-schiene :is(#sb-list) .sb-card .sbc-top{ border-radius:0 5px 0 0 !important; border-bottom:0 !important; } /* ── 08 MINIMAL · nur Adresse und Ring ─────────────────────────────── */ html[data-dp-objkarte="minimal"] .dpl-schiene :is(#sb-list) .sb-card{ padding:0 !important; } html[data-dp-objkarte="minimal"] .dpl-schiene :is(#sb-list) .sb-card .sbc-top{ border:0 !important; border-radius:4px !important; background-color:transparent !important; padding:8px 9px !important; } html[data-dp-objkarte="minimal"] .dpl-schiene :is(#sb-list) .sb-card:hover .sbc-top{ background-color:#1A1815 !important; } html[data-dp-objkarte="minimal"] .dpl-schiene :is(#sb-list) .sb-card.active .sbc-top{ background-color:#221F1A !important; } html[data-dp-objkarte="minimal"] .dpl-schiene :is(#sb-list) .sb-card .sbc-seq, html[data-dp-objkarte="minimal"] .dpl-schiene :is(#sb-list) .sb-card .sbc-investor-ribbon, html[data-dp-objkarte="minimal"] .dpl-schiene :is(#sb-list) .sb-card .sbc-kp-row{ display:none !important; } html[data-dp-objkarte="minimal"] .dpl-schiene :is(#sb-list) .sb-card .sbc-address{ font-weight:500 !important; } /* ── 09 STATUS · Deal-Stufe zuerst ─────────────────────────────────── */ html[data-dp-objkarte="status"] .dpl-schiene :is(#sb-list) .sb-card .sbc-seq{ font-size:7.5px !important; letter-spacing:.12em !important; } /* Die Lasche zeigt die Stufe statt der Nummer - der Text kommt aus dem Pseudoelement, damit der Knoten unangetastet bleibt. */ html[data-dp-objkarte="status"] .dpl-schiene :is(#sb-list) .sb-card .sbc-seq{ font-size:0 !important; } html[data-dp-objkarte="status"] .dpl-schiene :is(#sb-list) .sb-card .sbc-seq::after{ content:'IN ARBEIT' !important; font-size:9px !important; letter-spacing:.1em !important; } html[data-dp-objkarte="status"] .dpl-schiene :is(#sb-list) .sb-card.deal-won .sbc-seq::after{ content:'GEWONNEN' !important; } html[data-dp-objkarte="status"] .dpl-schiene :is(#sb-list) .sb-card.deal-lost .sbc-seq::after{ content:'VERLOREN' !important; } /* ── 10 COCKPIT · Score als Rundinstrument ─────────────────────────── */ html[data-dp-objkarte="cockpit"] .dpl-schiene :is(#sb-list) .sb-card .sbc-score-overlay{ left:9px !important; right:auto !important; } html[data-dp-objkarte="cockpit"] .dpl-schiene :is(#sb-list) .sb-card .sbc-mini-score{ border:1px solid var(--wl-3a352e, #3A352E) !important; border-top-color:currentColor !important; border-radius:50% !important; background:#0B0A08 !important; } html[data-dp-objkarte="cockpit"] .dpl-schiene :is(#sb-list) .sb-card .sbc-top-body{ padding-left:32px !important; padding-right:6px !important; } html[data-dp-objkarte="cockpit"] .dpl-schiene :is(#sb-list) .sb-card .sbc-seq{ left:auto !important; right:0 !important; border-radius:3px 3px 0 0 !important; } html[data-dp-objkarte="cockpit"] .dpl-schiene :is(#sb-list) .sb-card .sbc-investor-ribbon{ right:auto !important; left:0 !important; } /* ===================================================================== v1715 - DIE KARTENWAHL IN DEN EINSTELLUNGEN ===================================================================== Marcel: "bitte arbeite unter Darstellung auch den wechsel der Karten ein ... Das Fenster kannst du dann wieder entfernen." Das schwebende Fenster aus v1714 ist weg - es war zum Ausprobieren gebaut und hat seinen Zweck erfuellt. > Ein Werkzeug, das zum Ausprobieren gebaut wurde, wird nach dem > Ausprobieren abgebaut. Sonst steht es irgendwann in der Auslieferung > und niemand weiss mehr, warum. Die Wahl sitzt jetzt im Abschnitt "Aussehen", direkt unter der Layout-Wahl. Der Abschnitt liegt auf HELLEM Grund (#FAF9F4), deshalb sind die Toene hier hell gedacht - nicht aus der dunklen Schiene uebernommen. ===================================================================== */ .dp-okw-box{ padding:12px 14px; background:#FAF9F4; border-radius:8px; border:1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 25%, transparent); } .dp-okw-kopf{ font:700 11px/1 'JetBrains Mono',monospace; letter-spacing:.1em; color:#8A7F62; margin-bottom:9px; text-transform:uppercase; } .dp-okw-gitter{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:7px; } .dp-okw{ text-align:left; border:1px solid rgba(0,0,0,.12); background:#fff; border-radius:8px; padding:8px 10px; cursor:pointer; font:inherit; min-height:44px; } .dp-okw:hover{ border-color:var(--wl-c9a84c, #C9A84C); } .dp-okw.an{ border-color:var(--wl-c9a84c, #C9A84C); box-shadow:inset 0 0 0 1px var(--wl-c9a84c, #C9A84C); background:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 8%, #fff); } .dp-okw-n{ display:block; font-weight:600; font-size:12.5px; color:#2A2826; } .dp-okw-s{ display:block; font-size:11px; line-height:1.35; color:var(--muted,#5F5E5A); margin-top:2px; } .dp-okw-fuss{ margin-top:9px; font-size:11.5px; line-height:1.45; color:var(--muted,#5F5E5A); } /* ===================================================================== v1715 - INVESTOR NUR IM STANDARD ===================================================================== Marcel: "Nehme die information Investor aus der Design Optik bei allen raus ausser bei unserem standard Obsidian look." Die INVESTOR-Lasche gehoert zur AKTENMETAPHER - zwei Reiter an einer Mappe. In einer Datenzeile, an einer Ampel oder auf einer Score-Kante ist sie ein Fremdkoerper: dort gibt es keine Mappe, an der sie haengen koennte. > Ein Bauteil, das aus einer Metapher stammt, laesst sich nicht in > eine andere mitnehmen. Es sieht dort nicht schlicht aus, sondern > uebrig. Der Aktenreiter (kein Attribut) behaelt sie. ===================================================================== */ html[data-dp-objkarte] .dpl-schiene :is(#sb-list) .sb-card .sbc-investor-ribbon{ display:none !important; } /* ===================================================================== v1718 - DER 70-PROZENT-HINWEIS STAND ZU ZWEI DRITTELN AUSSERHALB ===================================================================== Marcel: "wenn der investor deal score nicht erreicht ist steht unten links im menue 'Bitte mindestens 70% der ....' das kann man nicht komplett lesen." Gemessen in v1b und v2, mit dem echten Markup aus calc.js:217 und vollstaendig nachgestelltem Zustand (hdr-banner-only gesetzt, hdr-no-score entfernt, _updateHdrHeight gerufen): Text 711 px breit Platz 247 px unsichtbar 464 px Ort .dpl-schiene, overflow:hidden, bei y=780 - unten links Im Standard sitzt der Banner im Header und hat 1491 px - dort ist `white-space:nowrap` (style.css:13429) richtig, eine Kopfzeile soll nicht umbrechen. In den neuen Layouts wandert derselbe Banner in die 248 px schmale Schiene, und dort schneidet deren `overflow:hidden` zwei Drittel des Satzes ab - ohne Ellipse, ohne Scrollbalken. Es sieht aus wie ein Text, der zu Ende ist. > `nowrap` ist eine Aussage ueber den PLATZ, nicht ueber den Text. > Wandert das Element in einen schmaleren Ort, wandert die Aussage > nicht mit - sie wird dort zur Luege. Gegengemessen: mit Umbruch 217 x 73 px, alles lesbar, und die Schiene ist an der Stelle 945 px hoch - es passt. Der Standard bleibt unberuehrt, weil jede Regel an `[data-dp-layout]` haengt. ===================================================================== */ html[data-dp-layout] body .hdr-incomplete-banner{ flex-wrap:wrap; align-items:flex-start; } /* min-width:0 loest die Mindestbreite des Flex-Kindes - ohne sie schrumpft ein nicht umbrechendes Kind nicht unter seine Inhaltsbreite. */ html[data-dp-layout] body .hdr-incomplete-text{ white-space:normal; min-width:0; } /* ===================================================================== v1730 - DIE INVESTOR-PILLE WAR NICHT ZU DUNKEL, SIE WAR ZU KLEIN ===================================================================== Marcel: "den investor deal score im menue rechts die schrift schlecht lesen" - dazu der Screenshot Dateien/investor.png. Gemessen an den neun Pillen der Objektliste: Farbe rgb(226,201,126) auf rgb(42,36,21) Kontrast 9,45 gruene Lage rgb(111,215,154) auf rgb(22,39,27) Kontrast 8,86 Lasche daneben Kontrast 8,07 Schrift 8,5 px Grundwert, Versalien, gesperrt > Der Kontrast war nie das Problem. Neun Komma vier ist mehr als > doppelt so viel wie noetig - was fehlt, ist Groesse. Eine Schrift, > die man nicht lesen kann, ist nicht zwingend zu blass. Die Pille steht neben der Nummern-Lasche, die 9,5 px fuehrt. Zwei Groessen nebeneinander lesen sich schlechter als eine; die Pille zieht auf denselben Wert nach. Bei 78 px Breite auf einer 216 px breiten Karte ist der Platz da. Nur in den Ansichten - dort hat Marcel es gesehen, und der Auslieferungszustand bleibt unberuehrt. */ /* NACHTRAG v1730b - DIE ERSTE FASSUNG WAR WIRKUNGSLOS. Sie setzte 9,5 px, und gemessen stand die Pille bereits auf 9,5: der Grundwert 8,5 aus style.css wird von der Textgroessen-Einstellung hochskaliert. Ich hatte den GRUNDWERT gelesen und den ISTWERT gemeint. > Ein Wert im Stylesheet ist nicht der Wert auf dem Schirm. Wer eine > Groesse anhebt, muss vorher die gemessene lesen, nicht die > geschriebene. Gegengemessen, was passt (Karte 216 px, Lasche 66 px): 10,5px -> Pille 83 11px -> 86 11,5px -> 88 12px -> 88 Bei 11 px stehen Pille und Lasche zusammen auf 152 von 216 - Platz genug, und der Sprung ist gross genug, um ihn zu sehen. Die Lasche zieht mit: zwei Groessen nebeneinander lesen sich schlechter als eine. */ html[data-dp-layout] .dpl-schiene .sb-card .sbc-investor-ribbon, html[data-dp-layout] .dpl-schiene .sb-card .sbc-seq{ font-size:11px !important; } /* ═══════════════════════════════════════════════════════ v1879 · DIE SCHIENE AUF DEM HANDY IM FLUSS Marcel (Aktenmappe auf dem iPhone, 05.10.2026): "nichts erreichbar, alles falsch skaliert, Menue ging nicht." Gemessen auf 390 px: feste Schiene 187 px, Polster 146 px, Kopfzeile samt Menue-Knopf 41 px darunter, Score-Leiste 808 px breit. layout-varianten.js setzt die Schiene unter 900 px jetzt an den Anfang der .main-col (data-dpl-oben-im-fluss); hier ihre Geometrie. ═══════════════════════════════════════════════════════ */ @media (max-width: 900px){ html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss]{ position:static !important; top:auto !important; left:auto !important; right:auto !important; z-index:auto !important; max-height:none !important; overflow:visible !important; } html[data-dp-layout] .app-wrap:has(.dpl-schiene[data-dpl-oben-im-fluss]){ padding-top:env(safe-area-inset-top, 0) !important; } html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss] .dpl-teil-score{ flex:1 0 100% !important; width:100% !important; min-width:0 !important; overflow:hidden !important; } html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss] .dpl-teil-score .scores{ flex-wrap:wrap !important; width:auto !important; max-width:100% !important; } } @media (max-width: 700px){ /* Auf dem Handy nur Ring, Pille und Satz - die Kennzahl-Pillen stehen im Reiter Bewertung. */ /* v1879a: die Regel `… .dpl-teil-score #hdr-badges .sc-pill{display:grid}` traegt eine ID — ohne #hdr-badges im eigenen Selektor verliert jede Klassenkette (gemessen mit dem Kaskaden-Walker). */ html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss] .dpl-teil-score #hdr-badges .sc-pill{ display:none !important; } html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss] .dpl-teil-score #hdr-badges .sc-main{ display:flex !important; } html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss] .dpl-teil-score #hdr-badges .scores{ justify-content:flex-start !important; } html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss] .dpl-teil-score{ padding:2px 0 4px !important; } } /* v1879c · Marcel: "wir koennen den investor deal score in der handy ansicht aus dem header auch rausnehmen oder sperren bzw. dauerhaft zugeklappt lassen" — auf dem Handy ist der Score-Block der Schiene weg; der Score steht auf der Objektkarte und im Reiter Bewertung. */ @media (max-width: 700px){ html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss] .dpl-teil-score{ display:none !important; } } /* v1880 · Handy: die Schiene nimmt nichts mehr (layout-varianten.js), ist nur Marke + Portfolio-Knopf und traegt den Obsidian des Kopfes - Marcel: "oben ist schwarz, dann irgendwie so ein Braun, farblich passt es gar nicht". Der Knopf oeffnet die normale Seitenleiste. */ @media (max-width: 900px){ html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss]{ background:#050505 !important; border-bottom:1px solid #1f1c17 !important; padding:4px 10px !important; gap:8px !important; min-height:0 !important; } html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss] .dpl-marke{ background:transparent !important; } html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss] .dpl-wm{ color:#F2EDE3 !important; } /* v1889: die Lage gilt in jedem Ton - sie ist Anordnung, keine Farbe. */ html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss] .dpl-portfolio{ margin-left:auto !important; } /* ── v1889 · DIE FARBE HING AM LAYOUT STATT AM TON ─────────────────────── Hier stand `html[data-dp-layout] … .dpl-portfolio{background:#141210}` - der Anker ist das blosse Vorhandensein eines Layouts, also JEDES. Der Knopf trug damit in der Aktenmappe, in der Kanzlei und im Tower dasselbe Obsidian, egal welchen Ton die Schiene fuehrt. > Eine Farbe, die zu jeder Ansicht gehoert, gehoert zu keiner. Die Schiene traegt ihren Ton schon als Attribut (`data-ton`, gesetzt aus der Layout-Beschreibung in layout-varianten.js). Der Knopf haengt jetzt daran - dunkle Schiene, dunkler Knopf; helle Schiene, heller Knopf. Fuer die Aktenmappe (ton: dunkel) aendert sich heute nichts am Bild; geaendert hat sich, WORAN die Farbe haengt. */ html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss][data-ton="dunkel"] .dpl-portfolio{ background:#141210 !important; color:#F2EDE3 !important; border-color:#2a2622 !important; } html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss][data-ton="hell"] .dpl-portfolio{ background:#FDFCFA !important; color:#2A2727 !important; border-color:#E6E0D2 !important; } } /* v1880a · Die Score-Kacheln standen auf dem Handy doch wieder im Kopf (255 px): seit die Schiene nichts mehr nimmt, liegt #hdr-badges im Kopf, und `html[data-dp-layout] body header.hdr #hdr-badges{display:flex}` (1,1,3) schlug die Handy-Regel in style.css (1,0,1). Gleiche Kette, spaeter, aus. */ @media (max-width: 700px){ html[data-dp-layout] body header.hdr #hdr-badges{ display:none !important; } html[data-dp-layout] body #hdr-toggle-btn{ display:none !important; } } /* v1881c · Tablet 820 px (Aktenmappe) nachgemessen: die sechs Score-Kacheln im Kopf liegen als flex-wrap - vier in der ersten Zeile (194 px), die letzten zwei gestreckt auf 387 px, Kopf 270 px hoch. Zwischen Handy (ab 701 px sichtbar) und 1024 px ein Raster 3 + 3. */ @media (min-width: 701px) and (max-width: 1024px) { html[data-dp-layout] body header.hdr #hdr-badges .scores { display: grid !important; grid-template-columns: minmax(150px, auto) repeat(5, minmax(0, 1fr)) !important; gap: 4px !important; } /* v1881d: nachgemessen - 3+3 gab 178 px (sc-main sprang per grid-column auf die volle Zeile, 258 px). EINE Zeile: Score 184 + fuenf Kacheln je 111 px, nichts laeuft ueber, Kopf 190 statt 354 px. */ html[data-dp-layout] body header.hdr #hdr-badges .scores > .sc-main { grid-column: auto !important; grid-row: auto !important; } html[data-dp-layout] body header.hdr #hdr-badges .scores > .sc-main, html[data-dp-layout] body header.hdr #hdr-badges .scores > .sc-pill { width: auto !important; max-width: none !important; min-width: 0 !important; } } /* v1883 · Endabnahme Handy (Marcel: "header gleiche farben, passende formatierung, nichts verzerrt"). Gemessen 390 px: Schiene rgb(5,5,5), Kopf und Reiterleiste rgb(14,13,11) - zwei Schwarz uebereinander. Die Schiene traegt jetzt den Ton des Kopfes. Dazu lag der Vollbild-Knopf #dp-sb-toggle (42 x 44, fest unten links) auf dem Handy ueber dem Inhalt: style.css zeigt ihn unter 900 mit (1,2,1), die Regel hier hatte nur (1,1,1). */ @media (max-width: 900px){ html[data-dp-layout] .dpl-schiene[data-dpl-oben-im-fluss]{ background:#0E0D0B !important; border-bottom-color:#26231E !important; } html[data-dp-layout][data-dp-layout] body:not(.qc-standalone-active) #dp-sb-toggle{ display:none !important; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ v1903 · DAS PORTFOLIO-MENÜ DER AKTENMAPPE AUF DEM HANDY (06.10.2026) Marcel: „Auch das kombinierte Menü finde ich nicht gut gelöst. Standard sollte dann das Portfolio angezeigt werden und unten Aktionen, und dann wird das auf Knopfdruck hochgezogen — quasi Aufbau wie beim Stand ‚Heute', nur halt im Layout und Design und Schriftart und Schriftgröße wie Aktenmappe." ── WAS HIER BIS HEUTE STAND, UND WARUM ES ABGELÖST WIRD ───────────────────────────────────── An dieser Stelle lag der Block v1889: Objektliste und Register STANDEN BEIDE OFFEN, untereinander im Fluss, der Aufklapper war abgeschaltet (`display:none`). Begründet war das mit dem Satz „Dieselbe Ansicht darf auf zwei Geräten nicht zwei verschiedene Dinge zeigen" — auf dem Schreibtisch zeigt die Schiene ihr Register, also sollte die Schublade es auch zeigen. GEMESSEN am 06.10.2026, 390 px, Aktenmappe, Kartenstil Datenzeile, Menü offen: aside#sidebar 359 x 758 #sb-list 347 x 318 (Deckel 42vh aus v1889d) 20 Objekte darin #sb-actions-accordion 347 x 759 ab y = 445 → Unterkante y = 1204 #sb-actions-trigger-btn 0 x 0 (display:none) Das Register ragte damit **446 px unter die Kante der Schublade**, und die Objektliste, die es eigentlich zu bedienen gilt, hatte für zwanzig Objekte 318 px — gut zweieinhalb Karten. Beides zusammen in einen 758-px-Schirm zu legen heißt, dass keines von beidem ganz da ist. > Der Satz von v1889 stimmt — aber er war die falsche Schlussfolgerung. Dieselbe ANSICHT > zeigt hier dieselben Dinge; nur der WEG dorthin ist auf einem 390-px-Schirm ein anderer. > Die Doktrin von v1889 war meine, die Entscheidung ist Marcels. Sie gilt. ── WAS JETZT GILT ─────────────────────────────────────────────────────────────────────────── Der Aufbau von „Heute", mit der Gestaltung der Aktenmappe: Standardinhalt das Portfolio (#sb-list) — es bekommt den ganzen Raum und scrollt in sich unten der Aufklapper #sb-actions-trigger-btn, fest am Fuß, scrollt nicht mit auf Knopfdruck das Register wird hochgezogen (sbActionsToggle() in js/ui.js:1643, Klasse .sb-actions-open, _sbActionsDock() deckelt gegen die Trigger- Oberkante) — dieselbe Mechanik wie in „Heute", nicht nachgebaut Dafür wird hier NICHTS an der Mechanik gesetzt. Es genügt, die drei Griffe aus v1889 loszulassen (Zwangsöffnung, `position:static`, `display:none` am Aufklapper) und der Schublade die Spaltenordnung zu geben, in der nur die Liste wächst. Die GESTALTUNG dagegen wird gesetzt, und zwar nach dem, was die Schiene auf dem Schreibtisch tut — gemessen am 06.10.2026 bei 1180 px, Aktenmappe: .sb-act-section-title JetBrains Mono 10px/12px w700 ls 1.4px rgb(201,168,76) VERSAL .sb-act-item/.sb-act-l Inter 12.5px/16.875px w500 rgb(191,183,169) Zeilenhöhe 29 px Auf dem Handy stand dort vorher Inter 9.5px w700 für den Gruppentitel (also eine andere SCHRIFTART) und 44 px Zeilenhöhe. Genau das meint „Schriftart und Schriftgröße wie Aktenmappe". KEINE FARBE der Marke wird hier neu erfunden: Gold und Creme stehen als `var(--wl-…)` bzw. als die Werte, die die Schiene führt. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px){ /* ── (1) Die Schublade ist eine Spalte, in der NUR die Liste wächst ────────────────────── Vorher stand `overflow-y:auto` auf der Schublade selbst (v1889), weil das Register unter der Liste im Fluss lag und sonst nicht erreichbar gewesen wäre. Jetzt scrollt die Liste in sich, und der Aufklapper bleibt dadurch am Fuß stehen, statt wegzuwandern. `min-height:0` muss dabei sein: ohne das weigert sich ein Flex-Kind zu schrumpfen und die Liste schiebt den Aufklapper aus der Schublade heraus. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar{ display:flex !important; flex-direction:column !important; overflow:hidden !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-section-title, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-neu-row, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-trigger-btn, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-user-box, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-user, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-footer-spacer{ flex:0 0 auto !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list{ flex:1 1 auto !important; min-height:0 !important; max-height:none !important; height:auto !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; } /* Der Fußabstand aus dem Markup (#sb-footer-spacer) frisst auf 758 px sonst Liste. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-footer-spacer{ height:0 !important; min-height:0 !important; } /* ── (2) Der Aufklapper steht unten und ist da ─────────────────────────────────────────── v1889 hatte ihn mit `display:none` abgeschaltet („Der Aufklapper hat nichts mehr aufzuklappen"). Er hat wieder etwas aufzuklappen. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-trigger-btn{ display:flex !important; margin:8px 12px !important; width:calc(100% - 24px) !important; } /* ── (3) Das Register ist ZU, bis der Knopf es hochzieht ───────────────────────────────── Hier wird die Mechanik nicht nachgebaut, sondern losgelassen: `sbActionsToggle()` setzt `.sb-actions-open`, style.css:25488 schaltet den inneren Behälter darüber ein, und `_sbActionsDock()` deckelt das Panel gegen die gemessene Trigger-Oberkante. Was hier steht, sind nur die beiden Dinge, die v1889 festgehalten hatte und die wieder dem Zustand folgen müssen. `pointer-events` gehört ausdrücklich dazu: v1889e hatte es auf `auto !important` gestellt, weil das Register dort dauerhaft offen war. Bliebe das so, finge ein unsichtbares, zugeklapptes Panel die Klicks der Objektliste darunter ab — genau der Fehler, den v1889e behoben hatte, nur andersherum. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-accordion:not(.sb-actions-open), html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-accordion:not(.sb-actions-open) *{ pointer-events:none !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-accordion.sb-actions-open, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-accordion.sb-actions-open *{ pointer-events:auto !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-accordion.sb-actions-open{ opacity:1 !important; visibility:visible !important; } /* ── (4) Schriftart und Schriftgröße wie Aktenmappe ────────────────────────────────────── Die Werte sind die der Schiene bei 1180 px, oben im Kopf tabelliert. Der Gruppentitel trägt JetBrains Mono — auf dem Handy stand dort Inter, und das ist der sichtbarste Unterschied zwischen den beiden Geräten gewesen. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-act-section-title{ font-family:'JetBrains Mono', ui-monospace, monospace !important; font-size:10px !important; line-height:12px !important; font-weight:700 !important; letter-spacing:1.4px !important; text-transform:uppercase !important; color:var(--wl-c9a84c, #C9A84C) !important; background:transparent !important; padding:10px 12px 4px !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-act-item, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-act-l{ font-family:Inter, system-ui, -apple-system, sans-serif !important; font-size:12.5px !important; line-height:16.875px !important; font-weight:500 !important; letter-spacing:normal !important; color:#BFB7A9 !important; background:transparent !important; } /* Die Zeilenhöhe der Schiene ist 29 px. Auf dem Finger wäre das zu knapp — 44 px ist die Trefferfläche, auf die style.css unter 768 px alles bringt (v1883a). Die SCHRIFT ist die der Aktenmappe, die FLÄCHE bleibt greifbar: Marcel hat Schriftart und Schriftgröße genannt, nicht die Trefferfläche, und eine 29-px-Zeile auf dem Handy wäre der Fehler aus v1892 noch einmal. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-act-item{ min-height:40px !important; padding:6px 12px !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-act-ico{ color:#BFB7A9 !important; background:transparent !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-act-item:hover{ background:#1A1815 !important; } } /* ═══ v1885 · DIE AKTENMAPPE AUF DEM HANDY (05.10.2026) ════════════════════════════════════════ Erzeugt von tools/schublade-regeln.mjs - NICHT von Hand aendern, sondern das Skript laufen lassen. Die Aktenmappe gestaltet ihre Objektliste ueber `.dpl-schiene`. Auf dem Handy nimmt die Schiene seit v1880 nichts mehr, die Liste liegt in `aside#sidebar` - also griff dort KEINE dieser Regeln, und die Liste sah aus wie in der Ansicht "Heute" (Foto, grosse Kacheln, Heute-Kopf). Marcel am 05.10.2026: "das ist irgendeine Mischung aus einer Objektkartei von unserer heutigen Ansicht und dieser Aktenansicht. Also das ist ja mal gar nichts." Hier stehen dieselben Regeln mit dem Anker `aside#sidebar`: 93 fuer die Grundgestaltung, 48 fuer die sieben Objektkarten-Stile (spaeter, damit sie bei Gleichstand gewinnen), dazu die gemessenen Handy-Korrekturen. ════════════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { html[data-dp-layout] aside#sidebar .sb-card { min-height:0 !important; height:auto !important; margin:0 0 2px !important; padding:5px 8px !important; border-radius:4px !important; background:transparent !important; border:1px solid transparent !important; box-shadow:none !important; display:block !important; } html[data-dp-layout] aside#sidebar .sb-card:hover { background:#1A1815 !important; border-color:#2A2622 !important; } html[data-dp-layout] aside#sidebar .sb-card.active, html[data-dp-layout] aside#sidebar .sb-card.is-active { background:#221F1A !important; border-color:#3A352E !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-thumb, html[data-dp-layout] aside#sidebar .sb-card .sbc-mini-grid, html[data-dp-layout] aside#sidebar .sb-card .sbc-halter, html[data-dp-layout] aside#sidebar .sb-card .sbc-arrow, html[data-dp-layout] aside#sidebar .sb-card .sbc-score-label { display:none !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-top { display:flex !important; align-items:center !important; gap:7px !important; padding:0 !important; margin:0 !important; min-height:0 !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-top-body { min-width:0 !important; flex:1 1 auto !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-address { font-size:12px !important; line-height:1.25 !important; color:#E9E3D6 !important; font-weight:500 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; margin:0 !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-top-line1 { gap:5px !important; margin:0 0 1px !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-seq { font-size:9.5px !important; color:#8C8578 !important; background:none !important; padding:0 !important; border:0 !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-kp-row { margin:0 !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-kp { font-size:10.5px !important; color:#BFB7A9 !important; font-variant-numeric:tabular-nums; } html[data-dp-layout] aside#sidebar .sb-card .sbc-score-overlay { position:static !important; float:right !important; margin:0 0 0 6px !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-mini-score { width:26px !important; height:26px !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-mini-score svg { width:26px !important; height:26px !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-mini-score-num { font-size:10px !important; } html[data-dp-layout] aside#sidebar .dpl-teil-suche .sb-section-title { padding:4px 8px !important; margin:0 !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-ds2-hint, html[data-dp-layout] aside#sidebar .sb-card .sbc-investor-ribbon, html[data-dp-layout] aside#sidebar .sb-card .sbc-ai-badge { display:none !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-seq { color:#8C8578 !important; font-size:9.5px !important; letter-spacing:.04em !important; font-variant-numeric:tabular-nums; } html[data-dp-layout] aside#sidebar .sb-card { border-left-width:2px !important; border-left-style:solid !important; } html[data-dp-layout] aside#sidebar .sb-card:has(.sbc-score-top), html[data-dp-layout] aside#sidebar .sb-card:has(.sbc-score-green) { border-left-color:#3FA56C !important; } html[data-dp-layout] aside#sidebar .sb-card:has(.sbc-score-gold) { border-left-color:var(--wl-c9a84c, #C9A84C) !important; } html[data-dp-layout] aside#sidebar .sb-card:has(.sbc-score-red) { border-left-color:#B8625C !important; } html[data-dp-layout] aside#sidebar .sb-card:not(:has(.sbc-mini-score)) { border-left-color:#2A2622 !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-seq.sbc-seq.sbc-seq { color:#8C8578 !important; } html[data-dp-layout] aside#sidebar .sb-card.sb-card.sb-card { border-left-width:2px !important; border-left-style:solid !important; } html[data-dp-layout] aside#sidebar .sb-card { position:relative !important; /* Anker fuer die absoluten Knoepfe */ } html[data-dp-layout] aside#sidebar .sb-card .sbc-actions { position:absolute !important; right:6px !important; top:50% !important; transform:translateY(-50%) !important; display:flex !important; gap:3px !important; opacity:0 !important; pointer-events:none !important; transition:opacity .12s ease !important; z-index:8 !important; background:linear-gradient(90deg, transparent, #1A1815 22%) !important; padding:2px 0 2px 16px !important; } html[data-dp-layout] aside#sidebar .sb-card:hover .sbc-actions, html[data-dp-layout] aside#sidebar .sb-card.active .sbc-actions, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-actions, html[data-dp-layout] aside#sidebar .sb-card:focus-within .sbc-actions { opacity:1 !important; pointer-events:auto !important; } html[data-dp-layout] aside#sidebar .sb-card.active .sbc-actions, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-actions { background:linear-gradient(90deg, transparent, #221F1A 22%) !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-actions .sbc-btn { width:20px !important; height:20px !important; min-width:0 !important; min-height:0 !important; padding:0 !important; border-radius:4px !important; display:flex !important; align-items:center !important; justify-content:center !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-actions .sbc-btn svg { width:12px !important; height:12px !important; } html[data-dp-layout] aside#sidebar .sb-card.active .sbc-actions, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-actions { opacity:1 !important; pointer-events:auto !important; } html[data-dp-layout] aside#sidebar .sb-card { position:relative !important; background:transparent !important; border:0 !important; border-radius:0 !important; padding:13px 0 0 0 !important; /* Platz fuer die Lasche */ margin:0 0 5px 0 !important; min-height:0 !important; height:auto !important; overflow:visible !important; } html[data-dp-layout] aside#sidebar .sb-card:hover, html[data-dp-layout] aside#sidebar .sb-card.active, html[data-dp-layout] aside#sidebar .sb-card.is-active { background:transparent !important; border-color:transparent !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-seq { position:absolute !important; top:0 !important; left:0 !important; z-index:3 !important; display:inline-block !important; width:auto !important; min-width:0 !important; padding:2px 8px 2px 7px !important; margin:0 !important; background:var(--wl-c9a84c, #C9A84C) !important; color:#0E0D0B !important; font:700 8px/1.35 var(--dpl-mono, 'JetBrains Mono', monospace) !important; letter-spacing:.1em !important; border-radius:3px 3px 0 0 !important; white-space:nowrap !important; } html[data-dp-layout] aside#sidebar .sb-card.active .sbc-seq, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-seq { background:var(--wl-e8cc7a, #E8CC7A) !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-top { display:flex !important; align-items:center !important; gap:8px !important; padding:7px 9px !important; margin:0 !important; min-height:0 !important; background:var(--dpl-flaeche2, #15140F) !important; border:1px solid var(--dpl-linie, #2A2622) !important; border-radius:0 5px 5px 5px !important; transition:border-color .12s ease, background .12s ease !important; } html[data-dp-layout] aside#sidebar .sb-card:hover .sbc-top { border-color:var(--wl-b8932f, #b8932f) !important; background:#1A1815 !important; } html[data-dp-layout] aside#sidebar .sb-card.active .sbc-top, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-top { border-color:var(--wl-c9a84c, #C9A84C) !important; background:#221F1A !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-top-body { flex:1 1 auto !important; min-width:0 !important; display:block !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-address { font:600 12px/1.3 'Inter', sans-serif !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; margin:0 !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-kp-row { display:block !important; margin:2px 0 0 !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-kp { font:600 10.5px/1 var(--dpl-mono, 'JetBrains Mono', monospace) !important; color:var(--dpl-tinte-leise, #B5AE9F) !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-top-line1 { display:block !important; min-height:0 !important; margin:0 !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-top-line1 > *:not(.sbc-seq) { display:none !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-score-overlay { position:absolute !important; right:9px !important; top:auto !important; bottom:0 !important; height:100% !important; display:flex !important; align-items:center !important; z-index:2 !important; pointer-events:none !important; /* der Klick gehoert der Karte */ } html[data-dp-layout] aside#sidebar .sb-card .sbc-score-label { display:none !important; /* die Stufe steht im Titel */ } html[data-dp-layout] aside#sidebar .sb-card .sbc-top-body { padding-right:30px !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-actions { top:auto !important; bottom:0 !important; height:100% !important; transform:none !important; align-items:center !important; right:8px !important; padding:0 0 0 18px !important; background:linear-gradient(90deg, transparent, #15140F 24%) !important; } html[data-dp-layout] aside#sidebar .sb-card:hover .sbc-actions { background:linear-gradient(90deg, transparent, #1A1815 24%) !important; } html[data-dp-layout] aside#sidebar .sb-card.active .sbc-actions, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-actions { background:linear-gradient(90deg, transparent, #221F1A 24%) !important; } html[data-dp-layout] aside#sidebar .sb-card:hover .sbc-score-overlay, html[data-dp-layout] aside#sidebar .sb-card.active .sbc-score-overlay, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-score-overlay { opacity:0 !important; transition:opacity .12s ease !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-seq:empty { display:none !important; } html[data-dp-layout] aside#sidebar .sb-card:has(.sbc-seq:empty) .sbc-top, html[data-dp-layout] aside#sidebar .sb-card:not(:has(.sbc-seq)) .sbc-top { border-radius:5px !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-won-ribbon, html[data-dp-layout] aside#sidebar .sb-card .sbc-investor-ribbon { position:absolute !important; top:0 !important; bottom:auto !important; left:auto !important; z-index:3 !important; width:auto !important; min-width:0 !important; max-width:none !important; padding:2px 7px !important; margin:0 !important; font:700 7.5px/1.35 var(--dpl-mono, 'JetBrains Mono', monospace) !important; letter-spacing:.1em !important; border-radius:3px 3px 0 0 !important; white-space:nowrap !important; display:inline-flex !important; align-items:center !important; gap:3px !important; border:0 !important; box-shadow:none !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-won-ribbon { right:0 !important; background:#3FA56C !important; color:#06170D !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-investor-ribbon { right:0 !important; background:var(--wl-e8cc7a, #E8CC7A) !important; color:#0E0D0B !important; } html[data-dp-layout] aside#sidebar .sb-card:has(.sbc-won-ribbon) .sbc-investor-ribbon { right:64px !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-won-ribbon svg, html[data-dp-layout] aside#sidebar .sb-card .sbc-investor-ribbon svg { width:8px !important; height:8px !important; flex:none !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-seq { max-width:calc(100% - 132px) !important; overflow:hidden !important; text-overflow:ellipsis !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-top { position:static !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-top { background-color:#17160F !important; border-style:solid !important; border-width:1px !important; border-color:#332E26 !important; border-top-color:#332E26 !important; border-right-color:#332E26 !important; border-bottom-color:#332E26 !important; border-left-color:#332E26 !important; } html[data-dp-layout] aside#sidebar .sb-card:hover .sbc-top { background-color:#1E1B15 !important; border-color:var(--wl-b8932f, #b8932f) !important; } html[data-dp-layout] aside#sidebar .sb-card.active .sbc-top, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-top { background-color:#26221A !important; border-color:var(--wl-c9a84c, #C9A84C) !important; } html[data-dp-layout] aside#sidebar .sb-card:hover .sbc-score-overlay, html[data-dp-layout] aside#sidebar .sb-card.active .sbc-score-overlay, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-score-overlay { opacity:1 !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-actions { right:42px !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-won-ribbon { display:none !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-seq, html[data-dp-layout] aside#sidebar .sb-card .sbc-investor-ribbon { position:absolute !important; top:0 !important; bottom:auto !important; z-index:3 !important; display:inline-flex !important; align-items:center !important; gap:3px !important; width:auto !important; min-width:0 !important; max-width:none !important; padding:2px 8px !important; margin:0 !important; background:var(--wl-c9a84c, #C9A84C) !important; color:#0E0D0B !important; font:700 9.5px/1.4 var(--dpl-mono, 'JetBrains Mono', monospace) !important; letter-spacing:.08em !important; border:0 !important; box-shadow:none !important; border-radius:3px 3px 0 0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-seq { left:0 !important; right:auto !important; max-width:calc(100% - 92px) !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-investor-ribbon { right:0 !important; left:auto !important; max-width:88px !important; } html[data-dp-layout] aside#sidebar .sb-card.active .sbc-seq, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-seq, html[data-dp-layout] aside#sidebar .sb-card.active .sbc-investor-ribbon, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-investor-ribbon { background:var(--wl-e8cc7a, #E8CC7A) !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-investor-ribbon svg { width:9px !important; height:9px !important; flex:none !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-top { border-color:var(--wl-8a7332, #8a7332) !important; border-top-color:var(--wl-8a7332, #8a7332) !important; border-right-color:var(--wl-8a7332, #8a7332) !important; border-bottom-color:var(--wl-8a7332, #8a7332) !important; border-left-color:var(--wl-8a7332, #8a7332) !important; } html[data-dp-layout] aside#sidebar .sb-card.deal-won .sbc-top { border-color:#3FA56C !important; border-top-color:#3FA56C !important; border-right-color:#3FA56C !important; border-bottom-color:#3FA56C !important; border-left-color:#3FA56C !important; } html[data-dp-layout] aside#sidebar .sb-card.deal-lost .sbc-top { border-color:#B8625C !important; border-top-color:#B8625C !important; border-right-color:#B8625C !important; border-bottom-color:#B8625C !important; border-left-color:#B8625C !important; } html[data-dp-layout] aside#sidebar .sb-card.deal-won .sbc-seq, html[data-dp-layout] aside#sidebar .sb-card.deal-won .sbc-investor-ribbon { background:#3FA56C !important; color:#04140A !important; } html[data-dp-layout] aside#sidebar .sb-card.deal-lost .sbc-seq, html[data-dp-layout] aside#sidebar .sb-card.deal-lost .sbc-investor-ribbon { background:#B8625C !important; color:#190706 !important; } html[data-dp-layout] aside#sidebar .sb-card:hover .sbc-top, html[data-dp-layout] aside#sidebar .sb-card.active .sbc-top, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-top { border-color:var(--wl-c9a84c, #C9A84C) !important; } html[data-dp-layout] aside#sidebar .sb-card.deal-won:hover .sbc-top, html[data-dp-layout] aside#sidebar .sb-card.deal-won.active .sbc-top { border-color:#5FC98A !important; } html[data-dp-layout] aside#sidebar .sb-card.deal-lost:hover .sbc-top, html[data-dp-layout] aside#sidebar .sb-card.deal-lost.active .sbc-top { border-color:#D8564C !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-seq.sbc-seq, html[data-dp-layout] aside#sidebar .sb-card .sbc-investor-ribbon.sbc-investor-ribbon { background:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 15%, transparent) !important; color:var(--wl-e2c97e, #E2C97E) !important; border:1px solid color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 42%, transparent) !important; border-bottom:0 !important; font-weight:700 !important; padding:2px 8px 3px !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-seq.sbc-seq *, html[data-dp-layout] aside#sidebar .sb-card .sbc-investor-ribbon.sbc-investor-ribbon * { color:inherit !important; stroke:currentColor !important; } html[data-dp-layout] aside#sidebar .sb-card.deal-won .sbc-seq.sbc-seq, html[data-dp-layout] aside#sidebar .sb-card.deal-won .sbc-investor-ribbon.sbc-investor-ribbon { background:rgba(63,165,108,.17) !important; color:#6FD79A !important; border-color:rgba(63,165,108,.5) !important; } html[data-dp-layout] aside#sidebar .sb-card.deal-lost .sbc-seq.sbc-seq, html[data-dp-layout] aside#sidebar .sb-card.deal-lost .sbc-investor-ribbon.sbc-investor-ribbon { background:rgba(184,98,92,.17) !important; color:#E08C86 !important; border-color:rgba(184,98,92,.5) !important; } html[data-dp-layout] aside#sidebar .sb-card.active .sbc-seq.sbc-seq, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-seq.sbc-seq, html[data-dp-layout] aside#sidebar .sb-card.active .sbc-investor-ribbon.sbc-investor-ribbon, html[data-dp-layout] aside#sidebar .sb-card.is-active .sbc-investor-ribbon.sbc-investor-ribbon { background:color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 26%, transparent) !important; color:var(--wl-e8cc7a, #E8CC7A) !important; } html[data-dp-layout] aside#sidebar .sb-card.deal-won.active .sbc-seq.sbc-seq, html[data-dp-layout] aside#sidebar .sb-card.deal-won.active .sbc-investor-ribbon.sbc-investor-ribbon { background:rgba(63,165,108,.28) !important; color:#8FE7B4 !important; } html[data-dp-layout] aside#sidebar .sb-card.deal-lost.active .sbc-seq.sbc-seq, html[data-dp-layout] aside#sidebar .sb-card.deal-lost.active .sbc-investor-ribbon.sbc-investor-ribbon { background:rgba(184,98,92,.28) !important; color:#F0A9A4 !important; } html[data-dp-layout] aside#sidebar :is(#sb-list) .sb-card .sbc-seq { color:var(--wl-e2c97e, #E2C97E) !important; } html[data-dp-layout] aside#sidebar :is(#sb-list) .sb-card .sbc-address { color:#F2ECDF !important; } html[data-dp-layout] aside#sidebar :is(#sb-list) .sb-card .sbc-kp { color:var(--wl-cdaf5a, #CDAF5A) !important; } html[data-dp-layout] aside#sidebar .sb-card:has(.sbc-won-ribbon) .sbc-investor-ribbon { right:0 !important; } html[data-dp-objkarte] aside#sidebar :is(#sb-list) .sb-card .sbc-investor-ribbon { display:none !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-investor-ribbon, html[data-dp-layout] aside#sidebar .sb-card .sbc-seq { font-size:11px !important; } /* ── die sieben Objektkarten-Stile (Aktenreiter, Bordkarte, Score-Kante, Datenzeile, Ampel, Kennzahlen, Minimal) ─────────────────────────────────────────────────────────────────── */ html[data-dp-objkarte="bordkarte"] aside#sidebar :is(#sb-list) .sb-card { padding:0 !important; } html[data-dp-objkarte="bordkarte"] aside#sidebar :is(#sb-list) .sb-card .sbc-seq { position:absolute !important; top:0 !important; bottom:0 !important; left:0 !important; right:auto !important; width:16px !important; max-width:16px !important; display:flex !important; align-items:center !important; justify-content:center !important; writing-mode:vertical-rl !important; border-radius:5px 0 0 5px !important; border:0 !important; border-right:1px dashed color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 50%, transparent) !important; background:transparent !important; font-size:7.5px !important; letter-spacing:.14em !important; padding:0 !important; } html[data-dp-objkarte="bordkarte"] aside#sidebar :is(#sb-list) .sb-card .sbc-top { border-radius:0 5px 5px 0 !important; margin-left:16px !important; } html[data-dp-objkarte="bordkarte"] aside#sidebar :is(#sb-list) .sb-card .sbc-investor-ribbon { top:auto !important; bottom:4px !important; right:4px !important; border-radius:3px !important; font-size:7.5px !important; border-bottom:1px solid !important; } html[data-dp-objkarte="kante"] aside#sidebar :is(#sb-list) .sb-card .sbc-top { border:0 !important; border-left:3px solid var(--wl-c9a84c, #C9A84C) !important; border-radius:0 4px 4px 0 !important; background-color:#17160F !important; } html[data-dp-objkarte="kante"] aside#sidebar :is(#sb-list) .sb-card.deal-won .sbc-top { border-left-color:#3FA56C !important; } html[data-dp-objkarte="kante"] aside#sidebar :is(#sb-list) .sb-card.deal-lost .sbc-top { border-left-color:#B8625C !important; } html[data-dp-objkarte="kante"] aside#sidebar :is(#sb-list) .sb-card .sbc-score-overlay { display:none !important; } html[data-dp-objkarte="kante"] aside#sidebar :is(#sb-list) .sb-card .sbc-top-body { padding-right:6px !important; } html[data-dp-objkarte="kante"] aside#sidebar :is(#sb-list) .sb-card .sbc-seq { border:0 !important; background:transparent !important; padding:1px 0 1px 8px !important; } html[data-dp-objkarte="datenzeile"] aside#sidebar :is(#sb-list) .sb-card { padding:0 !important; margin-bottom:1px !important; } html[data-dp-objkarte="datenzeile"] aside#sidebar :is(#sb-list) .sb-card .sbc-seq { position:static !important; display:inline-block !important; border:0 !important; background:transparent !important; padding:0 !important; margin:0 !important; font-size:9px !important; /* v1714d: Marcel: "Bei der Datenzeile fehlt die angabe der kompleten id". Die 38 px waren fuer "999" gerechnet - die Nummer heisst aber "2026-999" und wurde abgeschnitten. > Eine feste Breite fuer eine Zeichenkette, deren Laenge man nicht > kennt, schneidet sie irgendwann ab. Hier traegt der Inhalt die > Breite, und nur die Adresse daneben gibt nach. */ width:auto !important; max-width:none !important; flex:0 0 auto !important; padding-right:8px !important; vertical-align:middle !important; } html[data-dp-objkarte="datenzeile"] aside#sidebar :is(#sb-list) .sb-card .sbc-top { border:0 !important; border-radius:3px !important; background-color:transparent !important; padding:4px 7px !important; align-items:center !important; } html[data-dp-objkarte="datenzeile"] aside#sidebar :is(#sb-list) .sb-card:hover .sbc-top { background-color:#1A1815 !important; } html[data-dp-objkarte="datenzeile"] aside#sidebar :is(#sb-list) .sb-card.active .sbc-top { background-color:#221F1A !important; } html[data-dp-objkarte="datenzeile"] aside#sidebar :is(#sb-list) .sb-card .sbc-address { font-family:var(--dpl-mono, 'JetBrains Mono', monospace) !important; font-size:11px !important; font-weight:400 !important; } html[data-dp-objkarte="datenzeile"] aside#sidebar :is(#sb-list) .sb-card .sbc-kp-row { display:none !important; } html[data-dp-objkarte="datenzeile"] aside#sidebar :is(#sb-list) .sb-card .sbc-investor-ribbon { display:none !important; } html[data-dp-objkarte="datenzeile"] aside#sidebar :is(#sb-list) .sb-card .sbc-top-line1 { display:inline-block !important; width:auto !important; vertical-align:middle !important; } html[data-dp-objkarte="ampel"] aside#sidebar :is(#sb-list) .sb-card { padding:0 !important; } html[data-dp-objkarte="ampel"] aside#sidebar :is(#sb-list) .sb-card .sbc-top { border:0 !important; border-radius:4px !important; background-color:transparent !important; padding:6px 8px 6px 20px !important; position:relative !important; } /* v1905 · Marcel am 06.10.2026 auf die Frage, ob die 28 px so bleiben: „dann etwas hoeher". Gemessen (Messkabine 390 px, Aktenmappe): die Zeile stand auf 27,6 px, 8 von 20 Karten waren ganz zu sehen. 40 px ist die Schwelle unseres eigenen Massstabs — unter 40 px ist eine Flaeche auf dem Finger schwer zu treffen —, also der KLEINSTE Wert, der sich verteidigen laesst; mehr naehme dem dichtesten Stil seinen Zweck. > Ehrlich dazu: der INHALT traegt die 40 px nicht. Die Zeile fuehrt nur die Adresse, > gemessen 15,6 px; `.sbc-seq`, `.sbc-kp-row` und das Band sind in diesem Stil > `display:none`. Die zusaetzlichen 24 px sind Trefferflaeche, nicht Inhalt — das ist > hier der Zweck, soll aber nicht als Inhalt ausgegeben werden. NUR am Handy-Anker (`aside#sidebar`, dieser @media-Block). Die Schienen-Fassung fuer den Schreibtisch bleibt unberuehrt: dort zeigt eine Maus, kein Finger. */ html[data-dp-objkarte="ampel"] aside#sidebar :is(#sb-list) .sb-card .sbc-top { padding-top:12.5px !important; padding-bottom:12.5px !important; } html[data-dp-objkarte="ampel"] aside#sidebar :is(#sb-list) .sb-card:hover .sbc-top { background-color:#1A1815 !important; } html[data-dp-objkarte="ampel"] aside#sidebar :is(#sb-list) .sb-card.active .sbc-top { background-color:#221F1A !important; } html[data-dp-objkarte="ampel"] aside#sidebar :is(#sb-list) .sb-card .sbc-top::before { content:'' !important; position:absolute !important; left:7px !important; top:50% !important; transform:translateY(-50%) !important; width:8px !important; height:8px !important; border-radius:50% !important; background:var(--wl-c9a84c, #C9A84C) !important; } html[data-dp-objkarte="ampel"] aside#sidebar :is(#sb-list) .sb-card.deal-won .sbc-top::before { background:#3FA56C !important; } html[data-dp-objkarte="ampel"] aside#sidebar :is(#sb-list) .sb-card.deal-lost .sbc-top::before { background:#B8625C !important; } html[data-dp-objkarte="ampel"] aside#sidebar :is(#sb-list) .sb-card .sbc-seq, html[data-dp-objkarte="ampel"] aside#sidebar :is(#sb-list) .sb-card .sbc-investor-ribbon, html[data-dp-objkarte="ampel"] aside#sidebar :is(#sb-list) .sb-card .sbc-kp-row { display:none !important; } html[data-dp-objkarte="kennzahlen"] aside#sidebar :is(#sb-list) .sb-card .sbc-mini-grid { display:flex !important; gap:7px !important; padding:0 9px 7px !important; margin:-1px 0 0 !important; border:1px solid var(--wl-8a7332, #8a7332) !important; border-top:0 !important; border-radius:0 0 5px 5px !important; background-color:#17160F !important; } html[data-dp-objkarte="kennzahlen"] aside#sidebar :is(#sb-list) .sb-card.deal-won .sbc-mini-grid { border-color:#3FA56C !important; } html[data-dp-objkarte="kennzahlen"] aside#sidebar :is(#sb-list) .sb-card.deal-lost .sbc-mini-grid { border-color:#B8625C !important; } html[data-dp-objkarte="kennzahlen"] aside#sidebar :is(#sb-list) .sb-card .sbcm { flex:1 1 0 !important; min-width:0 !important; font-size:9px !important; display:block !important; } html[data-dp-objkarte="kennzahlen"] aside#sidebar :is(#sb-list) .sb-card .sbc-top { border-radius:0 5px 0 0 !important; border-bottom:0 !important; } html[data-dp-objkarte="minimal"] aside#sidebar :is(#sb-list) .sb-card { padding:0 !important; } html[data-dp-objkarte="minimal"] aside#sidebar :is(#sb-list) .sb-card .sbc-top { border:0 !important; border-radius:4px !important; background-color:transparent !important; padding:8px 9px !important; } /* v1905 · dieselbe Entscheidung fuer „Minimal" (Marcel: „ja klar"). Gemessen 31,6 px, 7 von 20 Karten ganz sichtbar — ebenfalls unter der 40-px-Schwelle. Inhalt wie bei „Ampel" nur die Adresse (15,6 px); auch hier ist der Zuwachs Trefferflaeche. Kurzschrift verliert einzeln: `padding:` oben wuerde von einer spaeteren Einzeleigenschaft geschlagen — deshalb steht die Korrektur selbst einzeln und NACH ihr. */ html[data-dp-objkarte="minimal"] aside#sidebar :is(#sb-list) .sb-card .sbc-top { padding-top:12.5px !important; padding-bottom:12.5px !important; } html[data-dp-objkarte="minimal"] aside#sidebar :is(#sb-list) .sb-card:hover .sbc-top { background-color:#1A1815 !important; } html[data-dp-objkarte="minimal"] aside#sidebar :is(#sb-list) .sb-card.active .sbc-top { background-color:#221F1A !important; } html[data-dp-objkarte="minimal"] aside#sidebar :is(#sb-list) .sb-card .sbc-seq, html[data-dp-objkarte="minimal"] aside#sidebar :is(#sb-list) .sb-card .sbc-investor-ribbon, html[data-dp-objkarte="minimal"] aside#sidebar :is(#sb-list) .sb-card .sbc-kp-row { display:none !important; } html[data-dp-objkarte="minimal"] aside#sidebar :is(#sb-list) .sb-card .sbc-address { font-weight:500 !important; } html[data-dp-objkarte="status"] aside#sidebar :is(#sb-list) .sb-card .sbc-seq { font-size:7.5px !important; letter-spacing:.12em !important; } html[data-dp-objkarte="status"] aside#sidebar :is(#sb-list) .sb-card .sbc-seq { font-size:0 !important; } html[data-dp-objkarte="status"] aside#sidebar :is(#sb-list) .sb-card .sbc-seq::after { content:'IN ARBEIT' !important; font-size:9px !important; letter-spacing:.1em !important; } html[data-dp-objkarte="status"] aside#sidebar :is(#sb-list) .sb-card.deal-won .sbc-seq::after { content:'GEWONNEN' !important; } html[data-dp-objkarte="status"] aside#sidebar :is(#sb-list) .sb-card.deal-lost .sbc-seq::after { content:'VERLOREN' !important; } html[data-dp-objkarte="cockpit"] aside#sidebar :is(#sb-list) .sb-card .sbc-score-overlay { left:9px !important; right:auto !important; } html[data-dp-objkarte="cockpit"] aside#sidebar :is(#sb-list) .sb-card .sbc-mini-score { border:1px solid var(--wl-3a352e, #3A352E) !important; border-top-color:currentColor !important; border-radius:50% !important; background:#0B0A08 !important; } html[data-dp-objkarte="cockpit"] aside#sidebar :is(#sb-list) .sb-card .sbc-top-body { padding-left:32px !important; padding-right:6px !important; } html[data-dp-objkarte="cockpit"] aside#sidebar :is(#sb-list) .sb-card .sbc-seq { left:auto !important; right:0 !important; border-radius:3px 3px 0 0 !important; } html[data-dp-objkarte="cockpit"] aside#sidebar :is(#sb-list) .sb-card .sbc-investor-ribbon { right:auto !important; left:0 !important; } /* (1) Der Kopf der Ansicht "Heute" gehoert nicht in die Aktenmappe: das gerahmte Logo (303 x 78) steht doppelt, die Marke traegt schon die Schiene daruber (78 x 78), und die Knopfzeile Quick-Check / Marktbericht ist in der Aktenmappe der Aktionsblock. Beides weg - die Liste beginnt oben. Die Kette braucht zwei Attribute und body: die Regel in style.css traegt eine ID und drei Klassen (1,3,2) und schlug die kuerzere Fassung. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-header, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-neu-row { display: none !important; } /* (2) Die Suchzeile: das Eingabefeld ist 44 px hoch (iOS-Zoomschutz erzwingt 16 px Schrift und 40 px Hoehe), seine Umrahmung .sb-search-box aber 30 - das Feld stand sichtbar ausserhalb seines Rahmens (Marcel: "das Suchfeld ist viel groesser, dann ist da gar keine Umrahmung drum"). Die Zeile wird zweizeilig: Titel und Werkzeuge oben, die Suche darunter ueber die volle Breite. */ html[data-dp-layout] aside#sidebar .sb-section-title { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; row-gap: 8px !important; padding: 12px 14px !important; } html[data-dp-layout] aside#sidebar .sb-section-title > span { grid-row: 1 !important; grid-column: 1 !important; } html[data-dp-layout] aside#sidebar .sb-section-title .sb-tools-group { grid-row: 1 !important; grid-column: 2 !important; } html[data-dp-layout] aside#sidebar .sb-section-title .sb-search-box { grid-row: 2 !important; grid-column: 1 / -1 !important; height: auto !important; min-height: 44px !important; width: auto !important; max-width: none !important; box-sizing: border-box !important; padding: 0 12px !important; display: flex !important; align-items: center !important; gap: 8px !important; } html[data-dp-layout] aside#sidebar .sb-section-title .sb-search-box input { height: 42px !important; min-height: 42px !important; width: 100% !important; max-width: none !important; background: transparent !important; border: 0 !important; padding: 0 !important; } /* (3) Der Aktionsblock traegt in der Schublade den Platz, den in der Schiene die Teile haben. */ html[data-dp-layout] aside#sidebar #sb-actions-trigger-btn { margin: 8px 12px !important; } /* (4) `#sb-list` ist ein Flex-Behaelter in Spaltenrichtung mit `overflow-y:auto`. Die Schienen-Regeln nehmen den Karten die feste Hoehe (`height:auto`), und ohne eigene Flex-Angabe SCHRUMPFEN sie darin auf null: gemessen 323 x 0 px, der Inhalt quoll sichtbar heraus - die Liste sah richtig aus und war nicht anklickbar. Genau die Falle aus CLAUDE.md ("Flex-Kinder in overflow:auto-Containern schrumpfen, statt zu scrollen"). Mit `flex:0 0 auto` steht jede Karte auf ihren 44 px. */ html[data-dp-layout] aside#sidebar #sb-list .sb-card { flex: 0 0 auto !important; } /* (5) v1892 · KOPIEREN UND LOESCHEN WAREN AUF DEM HANDY TOT. Gemessen am 06.10.2026, 390 px, Aktenmappe, Schublade offen, elementFromPoint auf die Mitte jedes Knopfes: 18 von 20 unbedienbaren Eintraegen waren `button.sbc-btn` und `button.sbc-btn.sbc-del` - je 20x20 px, und darunter antwortete `div.sbc-address`. .sbc-actions opacity: 0 pointer-events: none position: absolute z-index: 8 Die Knopfzeile wird oben in diesem Block nur von `:hover`, `.active`, `.is-active` und `:focus-within` eingeschaltet. **Auf einem Finger gibt es kein :hover.** Erreichbar war damit nur die Zeile, die man ohnehin schon ausgewaehlt hatte - alle anderen nicht. > Das ist der Befund aus v1705b ein zweites Mal: "man kann unter Portfolio wenn man die > Objekte auswaehlt kein Objekt mehr loeschen." Damals klappte die Liste weg, jetzt > fehlt die Zeigegeste. Wer loeschen will, hat nicht gefunden, was er sucht. Auf dem Handy stehen die Knoepfe deshalb dauerhaft da. Platz ist: 61x42 px bei x=218 in einer 345 px breiten Schublade. Der Selektor ist Zeichen fuer Zeichen derselbe wie der der Grundregel (1,3,2) und steht spaeter - bei Gleichstand gewinnt die spaetere. Die Schwelle ist die BREITE, nicht `hover:none`: im Messrahmen meldet der Browser `(hover:hover)` auch bei 390 px, eine Regel an `hover:none` liesse sich hier also nicht nachweisen. Ein schmales Fenster am Schreibtisch zeigt die Knoepfe damit ebenfalls dauerhaft - das ist der ehrlichere Fehler. */ html[data-dp-layout] aside#sidebar .sb-card .sbc-actions { opacity: 1 !important; pointer-events: auto !important; } /* (6) v1903 · DER KARTENKNOPF WAR IN DER SCHUBLADE KLEINER ALS IN "HEUTE". Gemessen am 06.10.2026, 390 px, Aktenmappe, Datenzeile, Menue offen: Schublade (Aktenmappe) button.sbc-btn 20 x 20 (geklont von .dpl-schiene, oben in diesem Block) Ansicht "Heute" button.sbc-btn 26 x 26 Marcel: "ja alles angleichen." Angeglichen wird auf 26 x 26 - den Wert, den V101 fuer Touch ausdruecklich gesetzt hatte. > **NICHT auf 44 px.** style.css:37479 nimmt die 44-px-Trefferflaeche seit v1191 > bewusst zurueck, mit Messung begruendet: auf der 64-82 px hohen Karte legte sie > den LOESCHKNOPF ueber drei andere Ziele. Eine groessere Flaeche fuer die > gefaehrlichste Aktion ist der falsche Handel. Geaendert wird nur die HANDY-Fassung. Die Originalregel an `.dpl-schiene` bleibt bei 20 px - der Schreibtisch soll sich nicht aendern. */ html[data-dp-layout] aside#sidebar .sb-card .sbc-actions .sbc-btn { width: 26px !important; height: 26px !important; } html[data-dp-layout] aside#sidebar .sb-card .sbc-actions .sbc-btn svg { width: 14px !important; height: 14px !important; } /* (7) v1903 · ZWEI SORTIERKNOEPFE, DEREN TREFFERFLAECHEN EINANDER AUSSCHLOSSEN. Gemessen am 06.10.2026, 390 px, Menue offen: .sb-sort-toggle 63 x 50 bei x = 269 gap: 5px button.sb-sort-btn je 26 x 44, Mitten bei x = 285 und x = 316 -> Abstand 31 px style.css:36349 legt unter 768 px ein unsichtbares `::after` von `max(100%, 44px)` unter jeden der beiden Knoepfe. Bei 26 px Breite ragt es je 9 px nach links und rechts: Knopf A deckt 263..307, Knopf B deckt 294..338 - **13 px gehoeren beiden**, und dort entscheidet nicht der Finger, sondern die Stapelreihenfolge. Geloest ueber den ABSTAND, nicht ueber kleinere Flaechen: `gap: 18px` bringt die Mitten auf 44 px auseinander, die beiden 44-px-Flaechen stossen aneinander und ueberlappen nicht mehr. Die Gruppe wird dadurch 70 statt 63 px breit; sie sitzt in der `auto`-Spalte des Rasters aus (2) und nimmt den Platz der Ueberschrift nicht. > Marcel: "ja auch anpassen dass es auf dem Handy passt." */ html[data-dp-layout] aside#sidebar .sb-section-title .sb-sort-toggle { gap: 18px !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1906 · DAS MENUE DER AKTENMAPPE ZEIGT OBJEKTE, NICHT KENNZAHLEN Marcel am 06.10.2026: „die Objektkarte Kennzahlen und aktenreiter kann erstmal raus" — „oder du passt sie richtig an das es richtig dargestellt wird." GEMESSEN am 06.10.2026 auf Staging, Aktenmappe bei 387 px, Menue offen: Schublade 357 x 758 Liste #sb-list 356 x 476 (wischbar, scrollHeight 3003) eine Karte 321 x 122 .sbc-score-overlay 26 px (absolut, oben rechts) .sbc-top 43 px Adresse, Preis, Halter .sbc-mini-grid 67 px die drei Kennzahlen-Kacheln .sbc-actions 26 px (absolut) **67 der 122 px traegt das Kachelband.** Bei 476 px Listenhoehe sind das DREI sichtbare Objekte von zwanzig — die dritte endet mitten im Kachelband, und darunter beginnt schon die Aktionen-Zeile. Ein Menue, das von zwanzig Eintraegen drei zeigt, ist kein Menue mehr, sondern ein Ausschnitt. > Was im Cockpit die Hauptsache ist, ist im Menue Beiwerk. Dieselbe Karte an > zwei Orten heisst nicht, dass sie an beiden dasselbe leisten muss. Die drei Kacheln und die Nummernlasche fallen deshalb NUR HIER weg — in der Schublade, nur unter 900 px, nur wenn ein Layout aktiv ist. Uebrig bleibt, was ein Menue braucht: Score-Ring, Adresse, Preis, Halter und die beiden Aktionsknoepfe. Die Karte faellt damit von 122 auf rund 55 px. NICHT BETROFFEN und absichtlich so: · die Ansicht „Heute" — sie traegt kein `data-dp-layout` · der Schreibtisch — dort greift die Medienabfrage nicht, und die Schiene haelt das Portfolio ohnehin zugeklappt (gemessen: `dpl-teil-objekte` AUS) · das Cockpit und jede andere Flaeche, auf der dieselbe Karte steht Die Objektnummer steht damit im Menue nicht mehr auf der Karte. Sie ist dort Anzeige, kein Bedienelement; der Eintrag bleibt ueber Adresse und Preis eindeutig. Wenn sie gebraucht wird, gehoert sie in die Adresszeile, nicht zurueck auf den Rahmen. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Die doppelte Attributangabe hebt die Spezifitaet ueber die Stil-Regeln der sieben Kartenstile, ohne einen ID-Selektor auf Container-Kinder zu legen. */ html[data-dp-layout][data-dp-layout] body aside#sidebar #sb-list .sb-card .sbc-mini-grid, html[data-dp-layout][data-dp-layout] body aside#sidebar #sb-list .sb-card .sbc-seq { display: none !important; } /* Ohne das Kachelband braucht die Karte ihre Mindesthoehe nicht mehr; mehrere Stile setzen sie, deshalb hier ausdruecklich zurueck. */ html[data-dp-layout][data-dp-layout] body aside#sidebar #sb-list .sb-card { min-height: 0 !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1910 · DAS MENUE DER AKTENMAPPE TRAEGT AUF DEM HANDY IHR REGISTER Marcel am 06.10.2026: „ziel ist dass du genau das menü der aktenmappe passend renderst damit es in der handy ansicht passend dargestellt wird." Vorher: „schalt mal um in den desktop modus und schau dir das menü an wie es da aussieht. dann schalt in den handy modus und sieh welchen unterschied du siehst." DEN UNTERSCHIED GEMESSEN, beide Male in der Aktenmappe: Schreibtisch 1277 px Handy 387 px, Menue offen ───────────────────── ──────────────────────────── dpl-marke 100 px (keine Marke) dpl-portfolio 33 px sb-section-title (Suche) 126 px dpl-teil-suche AUS sb-list OFFEN 476 px dpl-teil-objekte AUS sb-actions-accordion AUS dpl-teil-aktionen 491 px sb-actions-trigger (Knopf) 44 px dpl-teil-nutzer 112 px sb-user-box 81 px **Es ist nicht die Farbe — beide stehen auf rgb(14,13,11) mit Text rgb(233,227,214). Es ist die Struktur, und zwar genau umgekehrt:** am Schreibtisch ist das Register offen und das Portfolio zugeklappt, auf dem Handy das Portfolio offen und das Register zugeklappt. Deshalb wirkt das Handy-Menue wie „Heute": eine Liste von Objekten statt einer Navigation. > Zwei Flaechen koennen Farbe fuer Farbe gleich sein und trotzdem nichts > miteinander zu tun haben. Was eine Ansicht ausmacht, ist was zuerst > dasteht. DREI ANLAEUFE, bis die Ursache dastand — hier, damit es der naechste nicht noch einmal durchlaeuft: 1. `display:block` auf dem Akkordeon -> 356 x 0, nichts zu sehen. 2. zusaetzlich `max-height:none` am Inner -> 356 x 154, immer noch leer. 3. gemessen: **das Akkordeon traegt `opacity: 0`.** Der Inhalt war die ganze Zeit da (5 Rubriken, 13 Eintraege, Inner 345 x 702) — nur der Behaelter war durchsichtig. `opacity` schluckt alles, was darin steht, und meldet dabei weder Hoehe null noch `display:none`. Das Register steht jetzt im Fluss und ganz oben (`order:-1`), der Aufklapper darunter faellt weg, und der weisse Grund des Akkordeons weicht dem Ton der Schiene. Die Objektliste bleibt darunter erreichbar — am Schreibtisch ist sie zugeklappt, auf dem Handy waere das ein Weg weniger zum eigenen Bestand. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Das Register: aus dem aufklappbaren Panel wird ein Teil der Schiene. `position:static` nimmt ihm die Dock-Rechnung, `opacity` und `max-height` die beiden Fesseln des geschlossenen Zustands. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-accordion { display: block !important; position: static !important; opacity: 1 !important; max-height: none !important; overflow: visible !important; pointer-events: auto !important; order: -1 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; margin: 0 !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-accordion .sb-actions-accordion-inner { display: block !important; max-height: none !important; overflow: visible !important; } /* Der Aufklapper hat keine Aufgabe mehr, wenn das Register offen dasteht. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-trigger-btn { display: none !important; } /* Die Suchzeile und die Objektliste ruecken hinter das Register — dieselbe Reihenfolge wie in der Schiene, wo das Portfolio unter der Marke sitzt und die Navigation den Platz bekommt. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-section-title { order: 1 !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list { order: 2 !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-user { order: 3 !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1910a · ZWEI FEHLER AUS v1910, BEIDE GEMESSEN Direkt nach dem Ausrollen von v1910 in der Messkabine nachgemessen: 1. **Der Grund war weiss.** Ich hatte `background: transparent` auf das Akkordeon gesetzt und dabei uebersehen, dass der weisse Grund eine Ebene tiefer sitzt: `.sb-actions-accordion-inner` steht auf rgb(255,255,255). Ergebnis war graue Schrift auf Weiss — der Pruefer meldete fuenf Paare mit Kontrast 1,99 (`rgb(191,183,169)` auf `rgb(255,255,255)`). > Eine Flaeche transparent zu machen zeigt, was darunter liegt — und das > war hier nicht die Schiene, sondern das naechste Kind. 2. **Die Suchzeile war nicht mehr erreichbar.** Mit dem Register im Fluss waechst die Schublade auf scrollHeight 944 bei clientHeight 758, und sie stand auf `overflow-y: hidden`. Gemessen als „geklippt von aside#sidebar [-364..-7 / 0..758]": `input#sb-search-input` und die beiden Nutzer-Knoepfe lagen ausserhalb und waren weder sichtbar noch wischbar. 186 px fielen weg. > Solange nur das Register dastand, war `hidden` richtig. Wer den Inhalt > einer Flaeche verdoppelt, muss ihr Ueberlaufverhalten mitprüfen. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-accordion .sb-actions-accordion-inner { background: transparent !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } } /* ══════════════════════════════════════════════════════════════════════════════ v1911 · ANMELDEINFORMATIONEN UND PORTFOLIO-KOPF NACH DER SCHIENE Marcel am 06.10.2026: „die Aktenmappe das menü passt immer noch nicht auf der handy ansicht. Anmeldeinformationen, portfolio ansicht schriftfarben und form passt nicht." BEIDE BEREICHE GEGENEINANDER GEMESSEN — links die Schiene bei 1277 px, die das Vorbild ist, rechts die Schublade bei 387 px: ANMELDEINFORMATIONEN Schreibtisch Handy (vorher) ───────────────────── ─────────────────────── ───────────────────── Kasten transparent, Rahmen **bg rgb(0,0,0)**, rgb(230,225,214), r=14 Goldrahmen 30 %, r=9 Name rgb(191,183,169) 12px **rgb(255,255,255)** E-Mail rgb(191,183,169) 10px rgba(168,162,153,.75) Plan-Pille rgb(191,183,169), **rgb(42,39,39)**, Rahmen rgb(38,35,30) ohne Rahmen **Die Plan-Pille war der schwerste Fall: dunkelgraues `rgb(42,39,39)` auf schwarzem `rgb(0,0,0)` ergibt Kontrast 1,42** — der Pruefer meldete sie als schlechtestes Paar der ganzen Ansicht. Das Wort „Partner" stand da und war nicht zu lesen. PORTFOLIO Schreibtisch Handy (vorher) ───────────────────── ─────────────────────── ───────────────────── Form EIN Knopf 231 x 33, ein Block 345 x 126 Rahmen hell, r=10 mit Suchfeld und Neu-Knopf darunter Schrift rgb(191,183,169) 12,5px rgb(191,183,169) 11px, fett (700) Suchfeld (gibt es dort nicht) **bg rgb(23,21,18)**, fuellende Flaeche > Die Schiene arbeitet mit RAHMEN auf durchsichtigem Grund, die Schublade mit > gefuellten dunklen Kaesten. Dasselbe Schwarz, zwei verschiedene Sprachen — > und darum sieht dasselbe Menue an zwei Orten verschieden aus. Beides folgt jetzt der Schiene: durchsichtiger Grund, heller Rahmen, dieselben zwei Schriftfarben. Das Suchfeld und der Neu-Knopf behalten ihre Aufgabe — auf dem Handy ist die Schublade der einzige Weg zum Bestand —, tragen aber die Form der Schiene statt der gefuellten Kaesten. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* ── 1 · Anmeldeinformationen ─────────────────────────────────────────── */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-user { background: transparent !important; border: 1px solid rgb(230,225,214) !important; border-radius: 14px !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-user .sb-user-name, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-user .sb-user-email { color: rgb(191,183,169) !important; } /* Die Pille bekommt die Schrift- und Rahmenfarbe der Schiene zurueck. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-user .sb-user-plan-pill { color: rgb(191,183,169) !important; border: 1px solid rgb(38,35,30) !important; border-radius: 999px !important; background: transparent !important; } /* ── 2 · Portfolio-Kopf: Rahmen statt Fuellung ────────────────────────── */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-section-title { color: rgb(191,183,169) !important; font-size: 12.5px !important; font-weight: 400 !important; padding: 8px 14px !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-search-input, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-add-new { background: transparent !important; border: 1px solid rgb(230,225,214) !important; border-radius: 10px !important; color: rgb(191,183,169) !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-search-input::placeholder { color: rgba(191,183,169,.55) !important; } /* ── 3 · und die Anmeldung klebt unten ────────────────────────────────── */ /* In der Schiene sitzt der Nutzerteil am Fuss (y=645 von 758). In der Schublade hing er bisher direkt unter der Liste und wanderte mit ihr. `margin-top:auto` holt ihn an den Fuss — und zwar NUR hier: zwei Flex-Geschwister mit `auto` teilen sich den freien Platz, dann steht nichts mehr dort, wo es soll. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-user { margin-top: auto !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1912 · DIE LETZTEN DREI ABWEICHUNGEN ZUR SCHIENE Marcel am 06.10.2026: „kannst du dir da mal mühe geben dass das vernünftig gemacht wird? schau dir die app im browser an und dann im handy modus. die darstellung sollte schon so aussehen wie das layout, design was man gewählt hat." Diesmal NICHT stueckweise, sondern Element fuer Element gegeneinander gelegt. Nach v1910 und v1911 blieben genau drei Unterschiede uebrig: Element Schreibtisch (Vorbild) Handy (vorher) ─────────── ─────────────────────────── ────────────────────────── Einfassung .dpl-teil-aktionen r=14, Inner r=10 und pad 4/8/8, OHNE Rahmen **Goldrahmen 40 %** Rubrik 220x18, pad 4/9/5, 330x27, pad 10/12/4, margin 7/0/2, OHNE Linie **goldene Linie unten 10 %** Eintrag 220x29, pad 7/9 330x40, pad 6/12 **Die beiden Goldrahmen sind der Grund, warum es weiter nach „Heute" aussah.** Die Schiene fasst ihr Register in einen stillen Teil mit Radius 14 und ganz ohne Kante; die Schublade zog um dasselbe Element einen goldenen Rahmen und unter jede Rubrik eine goldene Linie. Gold ist in dieser App der Akzent der AKTIVEN Sache — als Dauerrahmen um eine Navigation behauptet es eine Wichtig- keit, die die Schiene bewusst nicht vergibt. > Zwei Flaechen tragen dieselben Farben und wirken doch verschieden, wenn die > eine Linien zieht, wo die andere keine hat. DIE HOEHE DER EINTRAEGE BLEIBT bei 40 px und wird NICHT auf die 29 px der Schiene gezogen: am Schreibtisch zielt eine Maus, auf dem Handy ein Finger. 40 px ist knapp unter der Trefferflaeche von 44 px, 29 waeren deutlich zu wenig. Das ist der einzige Punkt, an dem das Handy bewusst abweicht. WAS FEHLT UND FEHLEN SOLL: die Marke `.dpl-marke` (247x100 mit „DealPilot") steht nur in der Schiene. Auf dem Handy traegt die Kopfzeile sie bereits — ein zweites Mal im Menue waere sie doppelt und kostete 100 px. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Die Einfassung des Registers: Radius und Polster der Schiene, keine Kante. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-accordion .sb-actions-accordion-inner { border: 0 !important; border-radius: 14px !important; padding: 4px 8px 8px !important; } /* Die Rubriken: ohne Linie, mit den Abstaenden der Schiene. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-accordion .sb-act-section-title { border: 0 !important; padding: 4px 9px 5px !important; margin: 7px 0 2px !important; } /* Die Eintraege: Polster der Schiene, Hoehe aber fingergerecht. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-actions-accordion .sb-act-item { padding: 7px 9px !important; min-height: 40px !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1913 · DAS MENUE IST EIN UMSCHALTER — PORTFOLIO ODER AKTIONEN Marcel am 06.10.2026: „man kann garnicht das portfolio oeffnen und das layout passt immer noch nicht. bitte render das dass die aktenmappe passend dargestellt wird im handy modus und auch passend benutzt werden kann." **Der eigentliche Befund war eine FUNKTION, keine Farbe.** Am Schreibtisch tauscht `button.dpl-portfolio` die untere Haelfte der Schiene: entweder die Objektliste oder das Register, nie beides (so seit v1666 — „man kann oben wechseln, von Portfolio auf Aktionen und wieder zurueck"). Gesteuert wird das ueber `data-dpl-portfolio` am ``. Auf dem Handy gab es diesen Tausch nicht. Seit v1910 stand das Register fest oben, die Objektliste darunter — bei 682 px Register auf 758 px Schirm war das Portfolio praktisch unerreichbar, und der Knopf, der am Schreibtisch tauscht, rief hier nur `toggleMobileSidebar()`: bei offener Schublade schloss er sie, statt umzuschalten. > Ein Knopf, der im einen Zustand oeffnet und im anderen schliesst, hat keinen > zweiten Zustand — er hat nur einen und macht ihn rueckgaengig. Jetzt gilt in der Schublade dieselbe Regel wie in der Schiene: data-dpl-portfolio = „zu" (Standard) -> REGISTER sichtbar data-dpl-portfolio = „auf" -> SUCHE und OBJEKTLISTE sichtbar Der Umschalter sitzt als `button.dpl-portfolio-handy` ganz oben in der Schublade (eingefuegt in `layout-varianten.js`, v1913) und ruft DIESELBE Funktion `portfolio()` wie der Knopf der Schiene — kein zweiter Weg zum gleichen Zustand. Seine Beschriftung nennt das Ziel, nicht die Herkunft. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Der Umschalter: die Form des Schienen-Knopfs, die Trefferflaeche des Handys. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .dpl-portfolio-handy { display: flex !important; align-items: center !important; gap: 8px !important; order: -2 !important; width: calc(100% - 16px) !important; margin: 8px 8px 4px !important; min-height: 44px !important; padding: 8px 12px !important; background: transparent !important; border: 1px solid rgb(230,225,214) !important; border-radius: 10px !important; color: rgb(191,183,169) !important; font-size: 12.5px !important; font-weight: 400 !important; text-align: left !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .dpl-portfolio-handy .dpl-n { margin-left: auto !important; font-size: 10.5px !important; } /* Zustand „zu": das Register steht, Suche und Objektliste ruhen. */ html[data-dp-layout][data-dp-layout]:not([data-dpl-portfolio="auf"]) body aside.sidebar#sidebar .sb-section-title, html[data-dp-layout][data-dp-layout]:not([data-dpl-portfolio="auf"]) body aside.sidebar#sidebar #sb-list { display: none !important; } /* Zustand „auf": die Objektliste steht, das Register ruht. */ html[data-dp-layout][data-dp-layout][data-dpl-portfolio="auf"] body aside.sidebar#sidebar #sb-actions-accordion { display: none !important; } html[data-dp-layout][data-dp-layout][data-dpl-portfolio="auf"] body aside.sidebar#sidebar .sb-section-title { order: 0 !important; } html[data-dp-layout][data-dp-layout][data-dpl-portfolio="auf"] body aside.sidebar#sidebar #sb-list { order: 1 !important; flex: 1 1 auto !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1914 · ZWEI PUNKTE AUS DEM REGISTER, DAUERHAFT UND UEBERALL Marcel am 06.10.2026: „bei unter System könnte der Rundgang starten raus und Feedback und Support kann raus. Also auch dauerhaft, auch in der Desktop-Ansicht und allem. Das müssen wir da nicht drin haben." Beide tragen seit v1705 eine eigene Anker-Klasse, genau fuer diesen Fall: `.sb-act-tour` und `.sb-act-feedback`. Deshalb reicht eine Regel, und sie zielt nicht auf den `onclick` — der aendert sich, die Klasse nicht. AUSGEBLENDET, NICHT GELOESCHT: der Rundgang wird an drei weiteren Stellen angeboten (Erststart, Tour-Angebot nach dem ersten Objekt, `startTour()`), und das Feedback-Modal haengt an `sbActionsAction('feedback')`, das auch die Kachelansicht ruft. Ein Loeschen im Markup haette diese Wege mitgenommen. > Ein Menuepunkt ist ein Weg zu einer Funktion, nicht die Funktion. Wer den > Weg zumacht, soll nicht das Ziel abreissen. Gilt OHNE Medienabfrage und ohne Layout-Bedingung — Schreibtisch wie Handy, in jeder Ansicht. Das ist ausdruecklich so gewuenscht. ══════════════════════════════════════════════════════════════════════════════ */ .sb-act-item.sb-act-tour, .sb-act-item.sb-act-feedback { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════════ v1914a · DIESELBEN ZWEI PUNKTE, DIESMAL MIT GENUG SPEZIFITAET Die Regel aus v1914 war geladen und wirkte nicht. Gemessen mit dem Kaskaden-Walker am Tour-Eintrag: ! [20] aside.sidebar .sb-act-item -> flex ! [40] .sb-act-item.sb-act-tour, .sb-act-item.sb-act-feedback -> none (meine) ! [80] aside.sidebar .sb-act-item, … .sb-act-accent, … :first-… -> flex **Die Sammelregel mit 80 gewinnt, und zwar ueber einen Teilselektor, der mit meinem gar nichts zu tun hat.** Bei einer Regel mit mehreren Selektoren zaehlt der STAERKSTE, der passt — nicht der, der dem Auge am naechsten liegt. > Eine Regel, die nicht wirkt, ist nicht unbedingt ueberschrieben worden. Sie > kann auch nie stark genug gewesen sein. Jetzt mit ID-Kontext (120) und fuer alle drei Orte, an denen die Eintraege auftauchen: Schublade, Schiene und die allgemeine Fassung. ══════════════════════════════════════════════════════════════════════════════ */ #sidebar .sb-act-item.sb-act-tour, #sidebar .sb-act-item.sb-act-feedback, #sb-actions-accordion .sb-act-item.sb-act-tour, #sb-actions-accordion .sb-act-item.sb-act-feedback, .dpl-schiene .sb-act-item.sb-act-tour, .dpl-schiene .sb-act-item.sb-act-feedback, html body .sb-act-item.sb-act-tour, html body .sb-act-item.sb-act-feedback { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════════ v1915 · DIE KARTEN IM MENUE — UND EIN FEHLER AUS v1906, DEN ICH ZURUECKNEHME Marcel am 06.10.2026: „Die Karten, also die Objektkarten, sind irgendwie nicht schön dargestellt. Auch das Löschen und Duplizieren und auch der Discord sind da gar nicht auf der Karte, sondern hängen da irgendwie drüber." Und: „die Aktenmappe würde ich erst mal standardmäßig mit der Bordkarte anzeigen … und die werden aber auch ganz anders dargestellt, wenn ich auf die Handy-App umstelle." ── A · DIE NUMMERNLASCHE KOMMT ZURUECK ─────────────────────────────────── **v1906 hat `.sbc-seq` im Menue ausgeblendet — und damit das Merkmal der BORDKARTE abgeschaltet.** Gemessen am Schreibtisch: `.sbc-seq` ist dort 16 x 44 mit `writing-mode: vertical-rl` — die hochkant stehende Nummer am linken Abriss, also genau das, was die Bordkarte ausmacht („Abriss links, Nummer hochkant"). Auf dem Handy stand sie auf `display:none`, und die Karte sah deshalb aus wie eine nackte Zeile. > Eine Regel, die fuer EINEN Kartenstil gedacht war, traf alle sieben. Der > Anker war die Flaeche, nicht der Stil — und damit zu grob. Die Lasche kommt zurueck. Das Kachelband (`.sbc-mini-grid`) bleibt ausgeblendet: es gehoert zum Stil „Kennzahlen" und trug im Menue 67 von 122 px, ohne dort etwas zu beantworten. ── B · SCORE UND AKTIONEN LAGEN AUF DEM TEXT ───────────────────────────── GEMESSEN bei 387 px, Portfolio offen: Adresse endet bei x = 292 Aktionen beginnen x = 218 -> 75 px UEBERLAPPUNG Score beginnt x = 298 Beide sind `position:absolute` mit `z-index: 8` und liegen damit UEBER der Adresse. Bei 321 px Kartenbreite und 44 px Hoehe laeuft der Text schlicht darunter durch. Am Schreibtisch faellt es nicht auf, weil die Karte dort nur 216 px breit ist und der Text frueher umbricht. > Zwei Dinge auf derselben Flaeche sind kein Entwurf, sondern ein Zufall, der > bisher gut ging. Der Kartenkopf bekommt rechts so viel Polster, wie Score und Aktionen zusammen brauchen (115 px): 73 fuer die beiden Knoepfe, 26 fuer den Ring, dazu die Abstaende. Nichts wird verschoben, nichts verdeckt. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* A · die Lasche der Bordkarte zurueck (nimmt v1906 an dieser Stelle zurueck) */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-seq { display: block !important; } /* B · rechts Platz fuer Ring und Knoepfe */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-top { padding-right: 115px !important; } /* Die Adresse darf dann umbrechen statt zu ueberlaufen. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-address { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1916 · DIE ANMELDUNG UND DIE PORTFOLIO-ZEILE NACH DEM SCHREIBTISCH Marcel am 06.10.2026: „auch unten die Anmeldung ist anders mit der Pille und der Version. Das ist dann in so einem leichten Grau. Also wenn du da in die Desktop-Variante wechselst und dir mal anguckst, wie es dort angegeben ist, dann … würdest du direkt sehen, dass es halt in der Handy-Version anders aussieht." Und: „Dann ist das Suchfeld sehr groß. Das ist auch irgendwie doppelt mit der Suche." ── A · DIE ANMELDUNG, TEIL FUER TEIL GEGENEINANDER GELEGT ──────────────── Element Schreibtisch Handy (vorher) ─────────── ─────────────────────────── ────────────────────────── Box-Text rgb(191,183,169) rgb(233,227,214) Avatar „M“ rgb(191,183,169), 28 px **rgb(42,39,39)**, 32 px Version rgb(110,103,92), 9 px, **Goldgrund 8 %,** OHNE Grund, 16 x 13 **Goldtext 70 %**, 38 x 27 Wolke rgb(191,183,169), **gruener Grund 20 %,** Rahmen rgb(38,35,30) **Goldtext** Plan-Pille rgb(191,183,169) gleich (seit v1911) **Das „leichte Grau“, das Marcel meint, ist `rgb(110,103,92)` bei der Version und `rgb(191,183,169)` bei allem anderen.** Auf dem Handy trugen Version und Wolke stattdessen Gold und Gruen — Akzentfarben, die hier nichts auszusagen haben: eine Versionsnummer ist kein Zustand, und die Wolke meldet nur, dass gespeichert wurde. > Eine Akzentfarbe an einer Stelle, die nichts meldet, macht die Stelle nicht > wichtiger — sie macht den Akzent wertlos. ── B · „PORTFOLIO“ STAND ZWEIMAL DA ────────────────────────────────────── Seit v1913 traegt der Umschalter ganz oben das Wort („Portfolio“, im anderen Zustand „Aktionen“). Die Kopfzeile darunter wiederholte es als Beschriftung — 243 x 19 px fuer eine Angabe, die zwei Zeilen hoeher schon steht. Sie faellt weg; Suche und Sortierknoepfe bleiben, wo sie sind. Das Suchfeld war 44 px hoch in einer 118 px hohen Kopfzeile. Mit dem Wegfall der Zeile und etwas weniger Polster bleibt es fingergerecht (40 px) und die Kopfzeile schrumpft auf rund 80 px — das sind zwei Objektkarten mehr im Blick. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* ── A · Anmeldung ─────────────────────────────────────────────────────── */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-user { color: rgb(191,183,169) !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-user .sb-user-avatar { color: rgb(191,183,169) !important; border: 1px solid rgb(38,35,30) !important; background: transparent !important; } /* Die Version ist eine Angabe, kein Zustand: leichtes Grau, kein Grund. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-user .sb-version-badge { color: rgb(110,103,92) !important; background: transparent !important; border: 0 !important; font-size: 9px !important; } /* Die Wolke meldet nur, dass gespeichert wurde — kein Gruen, kein Gold. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-user .sb-mode-badge { color: rgb(191,183,169) !important; background: transparent !important; border: 1px solid rgb(38,35,30) !important; } /* ── B · die doppelte Beschriftung faellt weg ──────────────────────────── */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-section-title > span:first-child { display: none !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-section-title { padding: 6px 14px 8px !important; row-gap: 6px !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-search-input { min-height: 40px !important; height: 40px !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1916a · DIE LEERE ZEILE, DIE DAS LABEL HINTERLASSEN HAT v1916 hat die doppelte Beschriftung „Portfolio" ausgeblendet. Die Kopfzeile ist aber ein GRID mit drei Zeilen — und eine ausgeblendete Zelle gibt ihre Zeile nicht zurueck. Gemessen danach: 356 x 114 statt der erhofften 80, mit einer leeren Zeile ueber dem Suchfeld, in der rechts die beiden Sortierknoepfe allein standen. > `display:none` nimmt ein Element aus dem Fluss, aber eine Grid-Zeile ist > kein Fluss. Sie steht in der Vorlage, nicht im Inhalt. Aus dem Grid wird deshalb eine Zeile: Suchfeld und Sortierknoepfe nebeneinander, das Feld nimmt den Rest. Damit faellt die Kopfzeile auf rund 56 px. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-section-title { display: flex !important; align-items: center !important; gap: 10px !important; padding: 6px 14px 8px !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-section-title .sb-search-box { flex: 1 1 auto !important; min-width: 0 !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-section-title .sb-tools-group { flex: 0 0 auto !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1917 · DIE LISTE WAR EINE REIHE VON KAESTEN, KEINE LISTE Marcel am 06.10.2026: „wenn du auf Portfolio klickst, ist der Hintergrund Obsidian. Wir haben so Partikel, die durchs Feld gehen. Da muss der Hintergrund rein, wie wenn du das Aktionsmenü dann öffnest." **Ich habe zuerst nach Partikeln gesucht und keine gefunden** — vier Canvas im Dokument, alle 0 x 0, kein `#dp-particles`, kein Verlauf auf Schublade, Backdrop, `app-wrap`, `body` oder `html`. Der Grund ist in beiden Zustaenden derselbe: `rgb(14,13,11)`. ┌─ ZURUECKGENOMMEN AM 07.10.2026 (v1931) ────────────────────────────────┐ │ **Der Satz „kein `#dp-particles`" ist FALSCH.** Er galt fuer die │ │ Schublade bei 390 px — dort stimmt er bis heute. Am SCHREIBTISCH liegt │ │ das Canvas sehr wohl: 925 x 5843 px, opacity 1, in `#dashboard-main`. │ │ `initParticles()` raeumte es nur unter 901 px ab. │ │ │ │ **Marcel hat es dreimal gesagt und ich habe dreimal am falschen Ort │ │ gemessen.** Eine Verneinung ohne ihren Suchraum ist wertlos: richtig │ │ waere „in `#sidebar` bei 390 px gibt es keine" gewesen. │ │ │ │ Der Befund ueber die KARTEN unten bleibt richtig und gilt weiter — │ │ es waren ZWEI Ursachen, nicht eine falsche. │ └────────────────────────────────────────────────────────────────────────┘ **Der Eindruck kam von den Karten, nicht vom Grund.** Gegeneinander gemessen: Schreibtisch (Schiene) Handy (Schublade) ─────────────────────────── ────────────────────────── Karte 216 x 44 321 x 44 Rahmen TRANSPARENT **rgb(42,38,34), sichtbar** Abstand zwischen Karten 5 px **23 px** Zwanzig Karten mit 23 px Luft und je einem Rahmen sehen aus wie einzelne Kaesten, die auf einer dunklen Flaeche schwimmen — und zwischen ihnen schimmert der Grund durch. Am Schreibtisch stehen dieselben Karten dicht und ohne Kante: eine ruhige Liste. Dieselben Farben, zwei verschiedene Bilder. > **Was wie ein Hintergrund aussieht, kann der Abstand sein.** Nicht die > Flaeche war falsch, sondern das, was auf ihr liegt. Die Karten bekommen den Rahmen der Schiene (keinen) und ihren Abstand. 6 px statt 5, weil auf dem Handy ein Finger zielt — bei 23 px gingen auf zwanzig Karten rund 460 px allein fuer Luft drauf. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card { border-color: transparent !important; margin-bottom: 6px !important; margin-top: 0 !important; box-shadow: none !important; } /* Der Abstand kam teils aus der Liste selbst (row-gap), nicht nur von der Karte — sonst bliebe die Haelfte stehen. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list { row-gap: 0 !important; gap: 0 !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1918 · DIE MARKE IN DER SCHUBLADE Gegenstueck zu `markeHandy()` in `js/layout-varianten.js` (v1918). Die Werte sind die der Schiene, am Schreibtisch abgelesen: .dpl-marke 247 x 100, padding 0 14px, Inhalt mittig .dpl-wm Space Grotesk 42px/700, rgb(242,237,227), letter-spacing -0.84px i („Pilot") rgb(169,141,64), 42px, nicht kursiv Auf dem Handy wird die Hoehe auf 72 px genommen statt 100: die Schublade hat 758 px fuer Marke, Umschalter, Register und Anmeldung, und die Schiene steht am Schreibtisch neben dem Inhalt statt darueber. Die SCHRIFT bleibt bei 42px — „zu klein" war der Einwand, also wird sie nicht verkleinert. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .dpl-marke-handy { display: flex !important; align-items: center !important; order: -3 !important; height: 72px !important; min-height: 72px !important; padding: 0 14px !important; margin: 0 !important; background: transparent !important; border: 0 !important; flex: 0 0 auto !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .dpl-marke-handy .dpl-wm { font-family: "Space Grotesk", system-ui, sans-serif !important; font-size: 42px !important; font-weight: 700 !important; letter-spacing: -0.84px !important; line-height: 1 !important; color: rgb(242,237,227) !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .dpl-marke-handy .dpl-wm i { font-style: normal !important; color: var(--wl-a98d40, #A98D40) !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1918a · MARKE UND UMSCHALTER NUR IN DER AKTENMAPPE Gegenstueck zum Aufraeumer in `js/layout-varianten.js` (v1918a). Das JS entfernt die beiden beim Wechsel; diese Regel faengt den Fall ab, dass sie aus irgendeinem Grund noch dastehen — etwa weil ein anderer Weg die Seitenleiste neu rendert, bevor der Beobachter anschlaegt. > Zwei Sicherungen fuer dieselbe Sache sind eine zu viel — ausser die eine > haengt am Zeitpunkt und die andere nicht. ══════════════════════════════════════════════════════════════════════════════ */ html:not([data-dp-layout]) .dpl-marke-handy, html:not([data-dp-layout]) .dpl-portfolio-handy { display: none !important; } /* ══════════════════════════════════════════════════════════════════════════════ v1919 · N41.1 — EIN TON STATT ZWEIER Marcel: „wenn du auf Portfolio klickst, ist der Hintergrund Obsidian … Da muss der Hintergrund rein, wie wenn du das Aktionsmenü dann öffnest. So, das ist ja nur so ein Schwarz- oder Schwarzgrauton, den wir dort ausgesucht haben." **Diesmal je Rasterpunkt gemessen, nicht am Container** — eine Fläche kann an verschiedenen Stellen verschieden aussehen, und genau das war hier der Fall. Effektiver Grund bei x = 180, Aktenmappe, 387 px: y Zustand AKTIONEN Zustand PORTFOLIO ──── ─────────────────── ─────────────────── 100 rgb(14,13,11) rgb(14,13,11) 200 rgb(14,13,11) rgb(14,13,11) 300 rgb(14,13,11) **rgb(23,22,15)** .sbc-top 400 rgb(14,13,11) **rgb(23,22,15)** 500 rgb(14,13,11) **rgb(23,22,15)** 600 rgb(14,13,11) **rgb(23,22,15)** 700 rgb(14,13,11) rgb(14,13,11) **Im Aktionen-Zustand ist die ganze Schublade EIN Ton. Im Portfolio-Zustand sind es zwei:** der Grund `rgb(14,13,11)` oben und unten, dazwischen die Kartenköpfe auf `rgb(23,22,15)`. Zwei Schwarztöne, die sich um neun Punkte unterscheiden — zu wenig, um als Absicht zu lesen, zu viel, um unsichtbar zu sein. Genau das sieht aus wie „da liegt etwas darunter". > **Zwei Schwarz sind schlimmer als eines.** Ein klarer Kontrast ist eine > Aussage, ein knapper ist ein Fehler, den man nicht benennen kann. AM SCHREIBTISCH IST DER TON DERSELBE (`rgb(23,22,15)`, gegengemessen) — dort füllt die Liste aber nur 216 von 248 px in einer schmalen Spalte neben dem Inhalt. Auf dem Handy liegt sie als 357 px breite Fläche vor dem ganzen Schirm, und der Wechsel wird zur Bank. **Deshalb weicht das Handy hier bewusst ab:** die Kartenköpfe nehmen den Grund der Schublade. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-top, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-mini-grid { background: transparent !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1922 · DIE REITER SIND CREME, NUR DER AKTIVE IST GOLD Marcel am 06.10.2026: „Du hast auch oben die Reiter immer, sind immer noch auf Gold, nicht auf Weiß." GEMESSEN in der Aktenmappe, Schreibtisch 1277 px, alle zehn Reiter: button.tab.active „Objekt" rgb(201,168,76) Unterkante 2,2 px Gold button.tab „Investition" rgb(201,168,76) button.tab „Miete" rgb(201,168,76) button.tab „Finanzierung" rgb(201,168,76) **Alle zehn tragen dieselbe Goldfarbe — der aktive ist nur an seiner Unterkante zu erkennen.** Auf dem Handy ist es derselbe Wert, es ist also kein Unterschied zwischen den Breiten, sondern überall dasselbe. Das widerspricht der Doktrin in `CLAUDE.md`: **Gold ist der AKZENT, die Textfarbe auf dunklem Kopf ist Creme.** Wenn alle zehn Reiter Gold tragen, sagt das Gold nichts mehr — und der aktive muss sich über eine 2-px-Kante erklären, die auf dem Handy im Wischen untergeht. > **Ein Akzent, den alle tragen, ist kein Akzent.** Er wird zur Grundfarbe, > und das Element, das wirklich hervorsticht, hat nichts mehr übrig. Jetzt: die Reiter stehen in Creme `rgb(233,227,214)`, der aktive behält Gold UND seine Kante. Damit ist auf einen Blick zu sehen, wo man steht. Gilt in den Layouts (Aktenmappe, Kanzlei, Tower) auf beiden Breiten — die Ansicht „Heute" trägt kein `data-dp-layout` und bleibt, wie sie ist. ══════════════════════════════════════════════════════════════════════════════ */ html[data-dp-layout][data-dp-layout] body nav.tabs button.tab { color: rgb(233, 227, 214) !important; } html[data-dp-layout][data-dp-layout] body nav.tabs button.tab.active { color: var(--wl-c9a84c, #C9A84C) !important; } /* ══════════════════════════════════════════════════════════════════════════════ v1923 · VIER PUNKTE AUS MARCELS LISTE, ALLE GEMESSEN ── A · DER DOPPELRAHMEN AN DER SUCHE ──────────────────────────────────── Marcel: „dann haben wir die Suche. Da haben wir einen Doppelrahmen, den habe ich dir auch gesagt, dass ich das nicht haben will und eine goldene Suchlupe, die möchte ich da auch so nicht haben." GEMESSEN: `.sb-search-box` trägt einen Goldrahmen (0,788/0,659/0,298 bei 25 %) — und das Feld darin trägt seit **meinem** v1911 einen zweiten in `rgb(230,225,214)`. Zwei Rahmen ineinander, der innere von mir. > **Wer einem Element einen Rahmen gibt, muss nachsehen, ob sein Behälter > schon einen hat.** Ich habe den Knopf-Stil der Schiene auf das Feld gelegt, > ohne den Kasten zu prüfen, in dem es steckt. Der Rahmen bleibt am KASTEN (er ist das sichtbare Element), das Feld gibt seinen ab. Der Kasten bekommt den hellen Ton statt Gold, die Lupe ebenso. ── B · „ZULETZT BEARBEITET" IN GOLD ───────────────────────────────────── Marcel: „dass bitte das zuletzt bearbeitet nicht mehr in Gold sein soll, sondern bitte in dem Design wie oben die Aktionen." GEMESSEN: `.sb-sort-btn` steht auf `rgb(201,168,76)` mit Goldgrund (8 %) und Goldrahmen — beide Knöpfe, nicht nur der aktive. Die Einträge des Registers darüber stehen auf `rgb(191,183,169)` ohne Grund und ohne Kante. ── C · DER GOLDENE SCROLLBALKEN ───────────────────────────────────────── Marcel: „dann haben wir einen goldenen Scrollbalken, den könnten wir auch umstellen in diesem Ton … Das könnten wir auch machen, wenn wir die Aktenmappe in der Gesamtansicht haben, also auf der Desktop-Breite." GEMESSEN: `#sb-list` trägt `scrollbar-color: Gold/0,25 transparent`, dazu gibt es 64 Regeln mit `::-webkit-scrollbar` im Stylesheet. **Gilt deshalb OHNE Medienabfrage** — Marcel hat den Schreibtisch ausdrücklich eingeschlossen. ── D · DIE DATENZEILE SIEHT AUF DEM HANDY ANDERS AUS ──────────────────── Marcel: „Datenzeile ist gerade ausgewählt. Sieht nicht so aus in der Handy-Darstellung … wie wenn ich die Desktop-Version mit 1180 nehme." GEMESSEN, derselbe Stil, dieselbe Karte, beide Breiten: Element Schreibtisch 1180 Handy 387 ────────────────── ───────────────────── ───────────────────── .sbc-mini-score-num 10px/800 **Gold** 10px/700 **Weiss** .sbc-score-label 10,5px/700 **Gold** 9,5px/700 **Gruen** .sbc-arrow rgba(255,255,255,.4) rgba(168,162,153,.45) .sbc-seq gleich gleich .sbc-address gleich gleich **Die Score-Anzeige ist der ganze Unterschied.** Am Schreibtisch trägt sie Gold — Zahl und Stufenwort —, auf dem Handy Weiss und das Stufen-Gruen. Das ist dieselbe Karte in zwei Sprachen. ══════════════════════════════════════════════════════════════════════════════ */ /* ── A · Suche: ein Rahmen, keine goldene Lupe ───────────────────────────── */ @media (max-width: 900px) { html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-search-box { border-color: rgb(230,225,214) !important; background: transparent !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-search-input { border: 0 !important; border-radius: 0 !important; background: transparent !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-search-box svg { color: rgb(191,183,169) !important; stroke: rgb(191,183,169) !important; } /* ── B · die Sortierknoepfe tragen den Ton der Register-Eintraege ─────────── */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-sort-btn { color: rgb(191,183,169) !important; background: transparent !important; border-color: rgba(191,183,169,.22) !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-sort-toggle { background: transparent !important; border-color: rgba(191,183,169,.18) !important; } /* ── D · die Score-Anzeige wie am Schreibtisch ───────────────────────────── */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-mini-score-num { color: var(--wl-c9a84c, #C9A84C) !important; fill: var(--wl-c9a84c, #C9A84C) !important; font-weight: 800 !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-score-label { color: var(--wl-c9a84c, #C9A84C) !important; font-size: 10.5px !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-arrow { color: rgba(255,255,255,.4) !important; } } /* ── C · der Scrollbalken, auf BEIDEN Breiten ────────────────────────────── */ html[data-dp-layout][data-dp-layout] aside.sidebar#sidebar #sb-list, html[data-dp-layout][data-dp-layout] .dpl-schiene #sb-list, html[data-dp-layout][data-dp-layout] aside.sidebar#sidebar, html[data-dp-layout][data-dp-layout] .dpl-schiene { scrollbar-color: rgba(191,183,169,.38) transparent !important; } html[data-dp-layout][data-dp-layout] aside.sidebar#sidebar #sb-list::-webkit-scrollbar-thumb, html[data-dp-layout][data-dp-layout] .dpl-schiene #sb-list::-webkit-scrollbar-thumb, html[data-dp-layout][data-dp-layout] aside.sidebar#sidebar::-webkit-scrollbar-thumb, html[data-dp-layout][data-dp-layout] .dpl-schiene::-webkit-scrollbar-thumb { background: rgba(191,183,169,.38) !important; } /* ══════════════════════════════════════════════════════════════════════════════ v1924 · DIE SUCHE AUCH AM SCHREIBTISCH, UND DIE KARTEN AUF EINE HOEHE Marcel am 06.10.2026: „wenn wir jetzt auf die Desktop-Version wechseln, dann haben wir das Gleiche mit diesem Doppelrahmen und der Suche. Und da könnten wir es auch umstellen in dieser Optik. … wenn du einmal umstellst auf Desktop, 1180, dann siehst du, wie die Objektkarteien angegeben werden. So sollten sie halt auch angezeigt werden, wenn ich dann auf iPhone 14 umstelle." ── A · DER DOPPELRAHMEN GIBT ES AM SCHREIBTISCH GENAUSO ───────────────── GEMESSEN bei 1177 px in der Schiene: .sb-search-box Rahmen **Gold/0,25**, Text Gold/0,55 #sb-search-input Rahmen **rgb(42,38,34)** <- der zweite svg (Lupe) **Gold/0,55** **Ich hatte das in v1923 nur unter 900 px behoben.** Marcel hat den Schreibtisch ausdrücklich eingeschlossen — der Block kommt deshalb aus der Medienabfrage heraus. > Eine Abweichung, die auf beiden Breiten gleich ist, ist kein > Handy-Problem. Sie gehört an beiden Stellen behoben oder an keiner. ── B · SCORE UND AKTIONEN AUF DIE HOEHE DES SCHREIBTISCHS ─────────────── Die Datenzeile, Element für Element gegeneinander gelegt: Element Schreibtisch 1180 Handy 387 ───────── ────────────────────── ────────────────────── Karte 216 x 45 321 x 43 Nummer 59 x 13, links 7, ob 11 59 x 13, links 8, ob 10 gleich Adresse 172 x 14, links 7, ob 27 167 x 14, links 8, ob 25 gleich Score 26 x **32**, oben 13 26 x **26**, oben 9 Aktionen **61** x **32**, oben 13 **73** x **26**, oben 9 **Text und Nummer sitzen bereits auf dem Pixel gleich.** Was abweicht, sind Score und Aktionen: sechs Pixel flacher, die Knopfgruppe zwölf Pixel breiter. Die Karte ist dadurch 43 statt 45 px hoch. Dass die Knöpfe auf dem Handy breiter sind, hat einen Grund — ein Finger braucht mehr als ein Mauszeiger. **Die HOEHE angleichen kostet nichts**, die Breite behalte ich. Damit stehen beide Karten auf 45 px. ══════════════════════════════════════════════════════════════════════════════ */ /* ── A · Suche: ein Rahmen, keine goldene Lupe — auf BEIDEN Breiten ──────── */ html[data-dp-layout][data-dp-layout] .sb-search-box { border-color: rgb(230,225,214) !important; background: transparent !important; color: rgb(191,183,169) !important; } html[data-dp-layout][data-dp-layout] #sb-search-input { border: 0 !important; border-radius: 0 !important; background: transparent !important; } html[data-dp-layout][data-dp-layout] .sb-search-box svg { color: rgb(191,183,169) !important; stroke: rgb(191,183,169) !important; } /* ── B · Score und Aktionen auf die Hoehe des Schreibtischs ──────────────── */ @media (max-width: 900px) { html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-score-overlay, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-actions { height: 32px !important; min-height: 32px !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-top { min-height: 45px !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1925 · DIE SORTIERUNG AUCH AM SCHREIBTISCH, UND DAS KOFFER-SYMBOL Marcel am 06.10.2026: „auf der Desktop-Version steht da immer noch in Gold Portfolio und auch so ein Koffer vor. Und auch zuletzt bearbeitet zuerst und auch nach ID sortieren ist auch noch golden." GEMESSEN bei 1177 px in der Schiene, beide Zustände durchgeschaltet: .dpl-portfolio „▣ Portfolio 22" rgb(191,183,169) bereits grau .dpl-i (Symbol) „▣" rgb(191,183,169) bereits grau .sb-sort-btn 1 „Zuletzt bearbeitet zuerst" **bg rgb(201,168,76)** .sb-sort-btn 2 „Nach ID sortieren" rgba(255,255,255,.5) **Der Portfolio-Knopf und sein Symbol sind schon grau** — das war v1911 und gilt auch am Schreibtisch, weil die Regel nie in einer Medienabfrage stand. Golden ist genau EIN Element: der AKTIVE Sortierknopf, und zwar flächig, nicht nur in der Schrift. **Meine Regel dafür lag in `@media (max-width: 900px)`** (v1923) — auf dem Handy wirkte sie, am Schreibtisch nicht. Derselbe Fehler wie bei der Suche in v1924, zwei Stunden später noch einmal. > **Wenn eine Abweichung auf beiden Breiten dieselbe ist, gehört die Regel > nicht in eine Medienabfrage.** Ich habe zweimal hintereinander aus einer > Handy-Meldung ein Handy-Problem gemacht, ohne am Schreibtisch nachzusehen. Der aktive Knopf behält seine Hervorhebung — er muss sich vom inaktiven unterscheiden —, aber im Ton des Registers statt in voller Goldfläche. ══════════════════════════════════════════════════════════════════════════════ */ html[data-dp-layout][data-dp-layout] .sb-sort-btn { color: rgb(191,183,169) !important; background: transparent !important; border-color: rgba(191,183,169,.22) !important; } /* Der aktive bleibt unterscheidbar: etwas heller und mit fester Kante. */ html[data-dp-layout][data-dp-layout] .sb-sort-btn.an, html[data-dp-layout][data-dp-layout] .sb-sort-btn.active, html[data-dp-layout][data-dp-layout] .sb-sort-btn[aria-pressed="true"] { color: rgb(233,227,214) !important; background: rgba(191,183,169,.12) !important; border-color: rgba(191,183,169,.45) !important; } html[data-dp-layout][data-dp-layout] .sb-sort-toggle { background: transparent !important; border-color: rgba(191,183,169,.18) !important; } /* ══════════════════════════════════════════════════════════════════════════════ v1927 · DIE ADRESSE WURDE GEKUERZT, WEIL ICH ZWEIMAL PLATZ FREIGEHALTEN HABE Marcel hat zwei Bilder nebeneinandergelegt — `Objektkarte_Desktop_1180.png` und `Objektkarte_IPhone14.png`. Der Unterschied ist auf einen Blick da: Schreibtisch „Sachsenstraße 18, Herford" vollständig, keine Knöpfe iPhone 14 „Sachsenstraße …" gekürzt, zwei Knöpfe daneben GEMESSEN, und die Ursache ist meine eigene: .sbc-address clientWidth 167 · scrollWidth 223 -> gekürzt .sbc-address padding-right **72 px** (gab es vorher schon) .sbc-top padding-right **115 px** (von mir, v1915) reiner Text 151 px in 11px JetBrains Mono (nachgemessen) **Der Text braucht 151 px. Die Karte ist 321 breit. Es war nie zu wenig Platz — ich habe ihn zweimal weggenommen.** Die Adresse hielt bereits 72 px für die Aktionsknöpfe frei; in v1915 habe ich dieselbe Lücke ein zweites Mal am Elternteil reserviert, weil ich die Überlappung gesehen, aber nicht nachgesehen hatte, ob sie schon versorgt ist. > **Bevor man Platz freihält, nachsehen, ob ihn jemand schon freihält.** > Zwei Polster für dasselbe Element addieren sich — und das Ergebnis sieht > aus wie zu wenig Raum, obwohl das Gegenteil der Fall ist. Mein Polster fällt weg. Die Adresse bekommt damit 321 − 8 − 72 = **241 px** für 151 px Text und steht vollständig da, wie am Schreibtisch. DIE KNOEPFE BLEIBEN SICHTBAR. Am Schreibtisch erscheinen sie erst beim Zeigen mit der Maus — auf dem Handy gibt es kein Zeigen, und sie waren deshalb schon einmal unerreichbar (behoben am 06.10., „Kopieren/Löschen auf dem Handy tot"). Eine Optik zurückzuholen, die eine Funktion kostet, wäre der schlechtere Tausch. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-top { padding-right: 7px !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1928 · SCORE UND KNOEPFE SENKRECHT MITTIG — IN ALLEN STILEN Marcel am 06.10.2026: „koennen wir die objektkarten noch das duplizieren und loeschen mittig auf die karte setzen und auch den score?" GEMESSEN, alle sieben Stile bei 427 px, Abstand der Elementmitte zur Kartenmitte: Stil Hoehe Score Aktionen ───────────── ───── ────────────── ────────────── Aktenreiter 58 **13 px tief** **13 px tief** Bordkarte 45 **7 px tief** **7 px tief** Score-Kante 58 (kein Ring) **13 px tief** Datenzeile 45 mittig mittig Ampel 45 mittig mittig Kennzahlen 58 **7 px hoch** **7 px hoch** Minimal 45 mittig mittig **Drei von sieben sassen schon mittig, vier nicht** — und zwar in beide Richtungen: der Aktenreiter 13 px zu tief, die Kennzahlen 7 px zu hoch. Die Werte stammen aus festen `top`-Angaben je Stil, die zur jeweiligen Kartenhoehe passten, als der Stil gebaut wurde. > **Eine feste Position ist nur so lange richtig, wie die Hoehe sich nicht > aendert.** Sieben Stile mit zwei Hoehen (45 und 58 px) und je eigenen > `top`-Werten ergeben sieben Gelegenheiten, dass einer nicht mitgezogen wird. Statt sieben Zahlen zu pflegen, rechnet die Mitte sich jetzt selbst aus: `top: 50%` und `translateY(-50%)`. Das gilt fuer jede Hoehe, auch fuer die, die noch kommt. SCORE-KANTE bleibt ohne Ring — dort ersetzt ein farbiger Strich den Score, das ist der Zweck des Stils („Farbiger Strich statt Ring"). Die Regel trifft ihn trotzdem; wo kein Ring ist, bewegt sie nichts. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-score-overlay, html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar #sb-list .sb-card .sbc-actions { top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1929 · DIE GOLDRAHMEN DER KARTEN — AUF BEIDEN BREITEN ZURUECKGENOMMEN Marcel am 07.10.2026: „wir haben den Aktenreiter eingestellt. Leider ist wenn man das Menü öffnet und Portfolio auswählt der Hintergrund in schwarz obsidean meine ich mit den partikeln. dort bitte den hintergrund setzen wie wenn man auf Aktionen klickt und hinter dem aktionsmenü." **Der Grund ist es nicht.** An sechs Rasterpunkten gemessen, Portfolio-Zustand, Stil Aktenreiter: durchgehend `rgb(14,13,11)` — derselbe Ton wie im Aktionen-Zustand, kein Verlauf, kein Partikel-Canvas im Dokument. Das hatte schon v1919 hergestellt. **Was Marcel sieht, sind die RAHMEN.** Je Karte: .sbc-top 1,1 px rgb(138,115,50) dunkles Gold, ganze Breite .sbc-seq 1,1 px Gold 0,788/0,659/0,298 die Lasche .sbc-btn 1,1 px Gold zweimal je Karte Bei zwanzig Karten sind das **achtzig goldene Linien auf schwarzem Grund**. Im Aktionen-Zustand steht dort eine ruhige Textliste ganz ohne Kanten. Derselbe Grund, zwei völlig verschiedene Flächen. > **Ein Muster entsteht nicht aus der Fläche, sondern aus dem, was sie teilt.** > „Der Hintergrund ist unruhig" heisst fast nie, dass der Hintergrund falsch > ist. GEMESSEN AM SCHREIBTISCH: dieselben Rahmen an `.sbc-top` und `.sbc-seq`, **nur die Knöpfe weichen ab** — dort `rgba(255,255,255,.35)`, auf dem Handy Gold. Das ist der einzige echte Unterschied zwischen den Breiten. Marcel will beides: ruhiger UND überall gleich. Deshalb gilt der Block **ohne Medienabfrage** — die Rahmen werden auf jeder Breite still, und die Knöpfe bekommen überall denselben Ton. Die Lasche behält ihre Kante, nur leiser: sie ist das Merkmal des Aktenreiters und darf nicht verschwinden. ══════════════════════════════════════════════════════════════════════════════ */ /* Der Kartenkopf: die durchgehende Goldkante wird ein stiller Strich. */ html[data-dp-layout][data-dp-layout] .sb-card .sbc-top { border-color: rgba(191,183,169,.16) !important; } /* Die Lasche bleibt erkennbar, verliert aber das volle Gold. */ html[data-dp-layout][data-dp-layout] .sb-card .sbc-seq { border-color: rgba(191,183,169,.24) !important; } /* Die beiden Knoepfe: ueberall derselbe Ton wie bisher am Schreibtisch. */ html[data-dp-layout][data-dp-layout] .sb-card .sbc-btn { border-color: rgba(255,255,255,.35) !important; } /* ══════════════════════════════════════════════════════════════════════════════ v1929a · DIESELBEN DREI RAHMEN, DIESMAL MIT GENUG SPEZIFITAET Von den drei Regeln aus v1929 hat **eine** gewirkt (die Knöpfe), zwei nicht. Mit dem Kaskaden-Walker an `.sbc-top` gemessen: ! [ 40] html[data-dp-layout][data-dp-layout] .sb-card .sbc-top (meine) ! [130] html[data-dp-layout] aside#sidebar .sb-card .sbc-top -> var(--wl-8a7332) **Der ID-Anker `aside#sidebar` bringt allein 100 Punkte.** Meine doppelte Attributangabe bringt 20 — das reicht gegen eine Klassenkette, nicht gegen eine ID. > **Eine ID in der Kette schlägt jede Zahl von Attributen und Klassen.** Wer > sie überstimmen will, muss sie selbst mitführen; sonst zählt man Zehner > gegen einen Hunderter. Das ist heute das dritte Mal, dass eine Regel von mir „geladen und wirkungslos" war (v1914a Tour/Feedback, v1922 Reiter, jetzt hier). **Konsequenz für den Rest dieser Datei: vor jeder neuen Farbregel auf Kartenteile erst den Walker, dann schreiben.** Zwei Ketten, weil die Karten an zwei Orten stehen: in der Schublade unter `aside#sidebar` (dort braucht es die ID) und in der Schiene unter `.dpl-schiene` (dort greift die ID-Regel gar nicht erst). ══════════════════════════════════════════════════════════════════════════════ */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-card .sbc-top, html[data-dp-layout][data-dp-layout] body .dpl-schiene .sb-card .sbc-top { border-color: rgba(191,183,169,.16) !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-card .sbc-seq, html[data-dp-layout][data-dp-layout] body .dpl-schiene .sb-card .sbc-seq { border-color: rgba(191,183,169,.24) !important; } html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-card .sbc-btn, html[data-dp-layout][data-dp-layout] body .dpl-schiene .sb-card .sbc-btn { border-color: rgba(255,255,255,.35) !important; } /* ══════════════════════════════════════════════════════════════════════════════ v1930 · DIE DREI FLAECHEN, DIE DEN GRUND ZERTEILEN Marcel am 07.10.2026: „im Hintergrund ist halt ein schwarzer Obsidian- Hintergrund mit Partikeln. Der muss geaendert werden in der Farbe der Aktenmappe … wenn du oben auf die Desktop-Version gehst und hinter dem DealPilot-Logo die Farbe, die du dort hast. Ich will da auf jeden Fall keine Animation oder sowas hinter haben." **SEIN EIGENES BILD widerlegt die Annahme.** `Dateien/menü.png` Pixel fuer Pixel ausgezaehlt (371 x 697, PNG selbst dekodiert): rgb(14,13,11) 72,1 % der Schublade, in JEDEM der 18 Zeilenbaender der haeufigste Ton — kein Verlauf, keine Animation, kein Partikel-Canvas. Kartenzone zu 95,0 % derselbe Ton. Und am Schreibtisch, den er als Vorbild nennt: **ebenfalls rgb(14,13,11)**, zu 96,9 %. **Die Farbe, die er haben will, hat er bereits.** Es gibt hier nichts umzufaerben und nichts abzuschalten. **Was die Flaeche wirklich zerteilt, sind drei FUELLUNGEN.** Jede ist aus dem Bild heraus nachgerechnet und im Browser bestaetigt: Bildton Element Fuellung Rechnung auf 14,13,11 ───────────── ─────────── ─────────────────────── ───────────────────── rgb(42,36,20) .sbc-seq Gold #C9A84C / 15 % -> 42,36,21 22 Stueck rgb( 5, 5, 4) .sbc-btn Schwarz / 60–75 % -> 5, 5, 4 44 Stueck rgb(43,40,36) .sbc-top Rahmen 191,183,169 / 16 -> 42,40,36 22 Stueck > **v1929a hat `border-color` angefasst und die FUELLUNGEN stehen lassen.** > Ein Rahmen ist eine Linie, eine Fuellung ist eine Flaeche — die Lasche > leuchtete danach unveraendert goldbraun weiter. Wer „den Rahmen leiser" > macht, hat die Flaeche nicht angefasst. > **Und die Knoepfe sind DUNKLER als ihr Grund.** `rgba(0,0,0,.6)` auf > Obsidian ergibt rgb(5,5,4) — 44 schwarze Flecken auf fast-schwarz. Ein > abdunkelnder Schleier braucht etwas zum Abdunkeln; auf Obsidian hat er > nichts mehr und hinterlaesst nur Loecher. Deshalb hier: die Fuellungen an den Grund heranziehen, die Formen behalten. Die Lasche bleibt als Flaeche erkennbar (sie ist das Merkmal des Aktenreiters), die Knoepfe tragen ihr Rahmen aus v1929a allein. ══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Die Lasche: statt Gold/15 % ein neutrales Creme/8 % -> rgb(28,27,24). Doppelte Klasse, weil die gewinnende Regel sie auch fuehrt (Spezifitaet 142). */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-card .sbc-seq.sbc-seq { background: color-mix(in srgb, #BFB7A9 8%, transparent) !important; } /* Die Knoepfe: der abdunkelnde Schleier faellt weg. Sichtbar bleiben sie ueber den Rahmen rgba(255,255,255,.35) aus v1929a. */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-card .sbc-btn { background: transparent !important; background-color: transparent !important; } /* Der Kartenkopf: der Strich aus v1929a war mit .16 noch der hellste der drei Stoertoene. Auf .10 -> rgb(32,30,27). */ html[data-dp-layout][data-dp-layout] body aside.sidebar#sidebar .sb-card .sbc-top { border-color: rgba(191,183,169,.10) !important; } } /* ══════════════════════════════════════════════════════════════════════════════ v1931 · DIE 13 PIXEL SIND RAUS — AN ALLEN VIER STELLEN Marcel am 07.10.2026: „auf den Objektkarten muss der Score das duplizieren und loeschen Button bzw. Schaltflaeche immer mittig sitzen." GEMESSEN, Portfolio offen, Stil Aktenreiter: 390 px (aside#sidebar) Score 0 px Knopf 0 px mittig 1177 px (.dpl-schiene) Score 7 px Knopf 7 px ZU TIEF **Die Ursache ist an beiden Orten dieselbe** und stand viermal in dieser Datei: `height:calc(100% - 13px)` zusammen mit `align-items:center`. Der Inhalt zentriert dann in einer um 13 px VERKUERZTEN Flaeche und sitzt damit 6,5 px unter der Kartenmitte. > **v1928 hat das nicht behoben, sondern ueberdeckt.** `top:50%` plus > `translateY(-50%)` lag obendrauf und stellte die Mitte auf dem Handy her — > die falsche Hoehe blieb darunter stehen und wirkte ueberall sonst weiter. > Eine Korrektur, die das Ergebnis richtigstellt statt der Ursache, gilt nur > dort, wo man sie hingeschrieben hat. Und die Falle beim Suchen: der Selektor kommt in dieser Datei MEHRFACH mit gleicher Spezifitaet (41) vor — bei Gleichstand gewinnt die spaetere. Der Kaskaden-Walker zeigte an `.sbc-actions` vier Treffer derselben Regelkette. Deshalb hier kein fuenfter Block mit mehr Spezifitaet, sondern der Eingriff an der Zahl selbst. Siehe die Notiz „eigene Regeln erschlagen sich". ══════════════════════════════════════════════════════════════════════════════ */ /* ============================================================================== v1934 - DIE KARTEN SEHEN AUF ALLEN GERAETEN GLEICH AUS Marcel am 07.10.2026: "sehen die Objektkarten immer gleich aus? wenn nein muss das angepasst werden." GEMESSEN, 7 Stile x 6 Breiten, Portfolio offen. Score und Aktionsknoepfe sitzen ueberall mittig (0 px, 42 von 42). Aber DREI Stile zeigen auf dem Handy etwas anderes als am Schreibtisch: Stil Handy Schreibtisch Ampel 45 px, MIT Lasche 28 px, ohne Lasche Minimal 45 px, MIT Lasche 32 px, ohne Lasche Kennzahlen 58 px, OHNE Kacheln 145 px, mit Kacheln Die Ursache sind zwei PAUSCHALREGELN, die staerker sind als die Stile: [253] …aside.sidebar#sidebar … .sbc-seq -> block (Lasche IMMER an) [243] …aside#sidebar #sb-list … .sbc-mini-grid -> none (Kacheln IMMER aus) [232] html[data-dp-objkarte="ampel"] … .sbc-seq -> none (verliert) > Eine Pauschalregel fuer die Flaeche ueberstimmt die Entscheidung des > Stils - und zwar in BEIDE Richtungen gleichzeitig: sie zwingt die Lasche > an, wo der Stil sie abwaehlt, und die Kacheln aus, wo der Stil sie > braucht. Wer eine Flaeche pauschal regelt, muss die Faelle ausnehmen, > deren Zweck genau daran haengt. Am schwersten wiegt Kennzahlen: der Stil heisst nach den Kacheln und zeigte auf dem Handy keine einzige. Das ist kein Geschmack, sondern ein Stil, der sein Versprechen nicht halten konnte. Die Pauschalen bleiben stehen - sie sind fuer den Standardfall richtig und im Block v1915 begruendet. Hier werden nur die drei gemessenen Faelle darueber gehoben. Der SCHREIBTISCH ist dabei der Massstab: dort ist jeder Stil gebaut worden, das Handy zieht nach. ============================================================================== */ @media (max-width: 900px) { /* Ampel und Minimal waehlen die Nummernlasche ab - auch auf dem Handy. */ html[data-dp-objkarte="ampel"][data-dp-objkarte] body aside.sidebar#sidebar #sb-list .sb-card .sbc-seq.sbc-seq, html[data-dp-objkarte="minimal"][data-dp-objkarte] body aside.sidebar#sidebar #sb-list .sb-card .sbc-seq.sbc-seq { display: none !important; } /* Kennzahlen zeigt seine Kacheln - das ist der Zweck des Stils. */ html[data-dp-objkarte="kennzahlen"][data-dp-objkarte] body aside.sidebar#sidebar #sb-list .sb-card .sbc-mini-grid { display: flex !important; } /* Mit dem Kachelband braucht die Karte ihre Hoehe zurueck; der v1915-Block setzt min-height:0 fuer die Schublade. */ html[data-dp-objkarte="kennzahlen"][data-dp-objkarte] body aside.sidebar#sidebar #sb-list .sb-card { height: auto !important; } } /* ============================================================================== v1935 B - 44 PIXEL MINDESTMASS AUCH AM SCHREIBTISCH Marcel am 07.10.2026 auf die Frage, ob die Hoehen angeglichen werden sollen: "ja 44 ist gut. so machen". Gemessen waren am Schreibtisch zwei Stile unter dem Touch-Mindestmass: Stil Handy Schreibtisch Ampel 45 px 28 px Minimal 45 px 32 px Angeglichen wird NACH OBEN: 44 px ist das Mass, das ein Finger sicher trifft, und es schadet der Maus nicht. Der umgekehrte Weg haette die Handy-Karten unter die Trefferschwelle gedrueckt. > Eine Mindesthoehe ist kein Gestaltungswert, sondern eine Trefferflaeche. > Wer zwei Fassungen angleicht, nimmt die groessere - sonst tauscht er > Einheitlichkeit gegen Bedienbarkeit. `min-height` statt `height`: die Stile, die mehr brauchen (Kennzahlen mit 145 px), behalten ihre Hoehe. ============================================================================== */ html[data-dp-layout][data-dp-layout] body .dpl-schiene #sb-list .sb-card { min-height: 44px !important; } /* ============================================================================== v1940 - DIE OBJEKTKARTEN-STILE GELTEN JETZT AUCH IN DER ANSICHT DEALPILOT Marcel am 07.10.2026: "wenn ich die Objektkarten umstelle, das geht in der Ansicht Heute, die ja jetzt bald DealPilot heissen soll, das greift gar nicht. Also man kann das umstellen, aber es bleibt weiterhin bei diesen Objektkarteien, die wir standardmaessig haben." GEMESSEN, Schreibtisch, Ansicht ohne Layout-Attribut: von 112 Regeln der sieben Stile greift dort **null**. 53 Regeln mit `.dpl-schiene` - die gibt es nur in den drei Mappen 59 Regeln mit `aside#sidebar` - alle in @media (max-width: 900px) > Ein erster Messlauf zeigte je Stil andere Kartenhoehen und sah damit nach > "greift teilweise" aus. Der Gegencheck, welche Regeln wirklich auf das > Element passen, ergab null. **Ein Unterschied beweist keine Ursache.** Hier stehen dieselben Regeln noch einmal mit einem Anker, der in der Ansicht ohne Layout traegt. Erzeugt wurde der Block von einem Generator aus dem Schienen-Block darueber, nicht von Hand - acht Entwuerfe von Hand zu kopieren waere acht Gelegenheiten, eine Zeile zu verlieren. > `:not([data-dp-layout])` schliesst die drei Mappen aus, damit sich die > beiden Saetze nicht ins Gehege kommen. `:is(#sb-list)` bringt die 100 > Punkte, die es gegen die Grundregeln der Sidebar braucht - derselbe Grund > wie im Block darueber (v1711b). ============================================================================== */ html:not([data-dp-layout])[data-dp-objkarte="bordkarte"] :is(#sb-list) .sb-card { padding:0 !important; } html:not([data-dp-layout])[data-dp-objkarte="bordkarte"] :is(#sb-list) .sb-card .sbc-seq { position:absolute !important; top:0 !important; bottom:0 !important; left:0 !important; right:auto !important; width:16px !important; max-width:16px !important; display:flex !important; align-items:center !important; justify-content:center !important; writing-mode:vertical-rl !important; border-radius:5px 0 0 5px !important; border:0 !important; border-right:1px dashed color-mix(in srgb, var(--wl-c9a84c, #C9A84C) 50%, transparent) !important; background:transparent !important; font-size:7.5px !important; letter-spacing:.14em !important; padding:0 !important; } html:not([data-dp-layout])[data-dp-objkarte="bordkarte"] :is(#sb-list) .sb-card .sbc-top { border-radius:0 5px 5px 0 !important; margin-left:16px !important; /* ── v2115 · DIE ABRISSKANTE LIEF DURCHS BILD ────────────────────── Marcel am 11.10.2026: „es sei denn wir wuerden diesen Abriss vor das Bild optisch hinbekommen, weil das passt jetzt nicht, da laeuft die Abrisskante durch das Bild." GEMESSEN an allen 21 Karten, mit Foto wie mit Platzhalter: .sbc-seq (der Streifen) 17-33 auf der Karte .sbc-thumb (das Bild) 27-91 -> 6 px Abrisskante IM Bild, jedes Mal URSACHE, und sie ist strukturell: `.sbc-seq` ist zwar `position:absolute; left:0`, liegt aber INNERHALB von `.sbc-top` (im Aufbau der Karte steckt sie in `.sbc-top-line1`). Sie bezieht ihr `left:0` deshalb auf `.sbc-top`, nicht auf die Karte - und `margin-left:16px` schiebt BEIDE gemeinsam nach rechts. Der Platz entsteht links vom Streifen, nicht zwischen Streifen und Inhalt. > Ein Abstand, der das auszuweichende Element mitnimmt, ist kein > Abstand. Gemessen: `.sbc-top` beginnt bei 17, der Streifen endet > bei 33, und das Bild startet bei 27 - also bei 10 px Innenabstand, > waehrend der Streifen 16 px braucht. Korrigiert wird deshalb der INNENABSTAND, nicht die Lage: 16 px Streifen + 1 px Kante + 10 px Luft. Der aeussere Rand und die Rundung bleiben, wie sie sind - an der Gestaltung aendert sich nichts ausser dem, was sich ueberlappt hat. */ padding-left:27px !important; } html:not([data-dp-layout])[data-dp-objkarte="bordkarte"] :is(#sb-list) .sb-card .sbc-investor-ribbon { top:auto !important; bottom:4px !important; right:4px !important; border-radius:3px !important; font-size:7.5px !important; border-bottom:1px solid !important; } html:not([data-dp-layout])[data-dp-objkarte="kante"] :is(#sb-list) .sb-card .sbc-top { border:0 !important; border-left:3px solid var(--wl-c9a84c, #C9A84C) !important; border-radius:0 4px 4px 0 !important; background-color:#17160F !important; } html:not([data-dp-layout])[data-dp-objkarte="kante"] :is(#sb-list) .sb-card.deal-won .sbc-top { border-left-color:#3FA56C !important; } html:not([data-dp-layout])[data-dp-objkarte="kante"] :is(#sb-list) .sb-card.deal-lost .sbc-top { border-left-color:#B8625C !important; } /* ============================================================================== v2116 - DIE SCORE-KANTE ZEIGT JETZT DEN SCORE Der Stil heisst im Panel "Score-Kante · Farbiger Strich statt Ring" (objektkarten-stil.js:62). GEMESSEN am Schreibtisch tat er etwas anderes: .sbc-score-overlay display:none <- der Ring ist weg .sbc-top border-left 13x Gold, 8x #3FA56C <- und die 8 sind genau die GEWONNENEN, nicht die besten Score 69 trug Gruen, Score 64 und 60 trugen Gold - dieselbe Stufe SOLIDE, verschiedene Farben. Der Strich zeigte den DEAL-STATUS, und der Score war auf dieser Karte ueberhaupt nicht mehr sichtbar. > Ein Name, der etwas verspricht, das der Code nicht tut, ist derselbe > Fehler wie ein beworbenes Feature ohne Code. WARUM DAS JETZT NICHTS KOSTET: ich hatte zuerst als Entscheidung notiert, dass die Kante entweder den Score ODER den Status zeigen kann. Das war eine ungepruefte Annahme. Gemessen traegt die Karte beide Status als eigenes Band - `.sbc-won-ribbon` ("Won", 53x19 px, im Stil `kante` sichtbar) und `.sbc-lost-ribbon` (storage.js:1398/1404). Der Status geht also nicht verloren, er stand nie nur an der Kante. DIE FARBEN SIND DIE VORHANDENEN (style.css:10311-10314), nicht neue: derselbe Ton, den der Ring in dieser Stufe getragen haette. Erreicht wird die Stufe ueber `:has()`, weil die Klasse an `.sbc-mini-score` haengt und nicht an der Karte - `.sbc-top` ist deren Geschwister, nicht ihr Vorfahr. `display:none` stoert dabei nicht: `:has()` sieht den DOM, nicht die Darstellung. Die beiden Regeln darueber (deal-won/deal-lost) bleiben als Rueckfall fuer Karten ohne Score stehen - sie verlieren hier nur auf Spezifitaet, weil `:has()` zwei Klassen beisteuert. ============================================================================== */ html:not([data-dp-layout])[data-dp-objkarte="kante"] :is(#sb-list) .sb-card:has(.sbc-mini-score.sbc-score-green-strong) .sbc-top, html:not([data-dp-layout])[data-dp-objkarte="kante"] :is(#sb-list) .sb-card:has(.sbc-mini-score.sbc-score-green) .sbc-top { border-left-color:#6FCB91 !important; } html:not([data-dp-layout])[data-dp-objkarte="kante"] :is(#sb-list) .sb-card:has(.sbc-mini-score.sbc-score-gold) .sbc-top { border-left-color:var(--wl-c9a84c, #C9A84C) !important; } html:not([data-dp-layout])[data-dp-objkarte="kante"] :is(#sb-list) .sb-card:has(.sbc-mini-score.sbc-score-red) .sbc-top { border-left-color:#DDA29E !important; } html:not([data-dp-layout])[data-dp-objkarte="kante"] :is(#sb-list) .sb-card .sbc-score-overlay { display:none !important; } html:not([data-dp-layout])[data-dp-objkarte="kante"] :is(#sb-list) .sb-card .sbc-top-body { padding-right:6px !important; } html:not([data-dp-layout])[data-dp-objkarte="kante"] :is(#sb-list) .sb-card .sbc-seq { border:0 !important; background:transparent !important; padding:1px 0 1px 8px !important; } html:not([data-dp-layout])[data-dp-objkarte="datenzeile"] :is(#sb-list) .sb-card { padding:0 !important; margin-bottom:1px !important; } html:not([data-dp-layout])[data-dp-objkarte="datenzeile"] :is(#sb-list) .sb-card .sbc-seq { position:static !important; display:inline-block !important; border:0 !important; background:transparent !important; padding:0 !important; margin:0 !important; font-size:9px !important; width:auto !important; max-width:none !important; flex:0 0 auto !important; padding-right:8px !important; vertical-align:middle !important; } html:not([data-dp-layout])[data-dp-objkarte="datenzeile"] :is(#sb-list) .sb-card .sbc-top { border:0 !important; border-radius:3px !important; background-color:transparent !important; padding:4px 7px !important; align-items:center !important; } html:not([data-dp-layout])[data-dp-objkarte="datenzeile"] :is(#sb-list) .sb-card:hover .sbc-top { background-color:#1A1815 !important; } html:not([data-dp-layout])[data-dp-objkarte="datenzeile"] :is(#sb-list) .sb-card.active .sbc-top { background-color:#221F1A !important; } html:not([data-dp-layout])[data-dp-objkarte="datenzeile"] :is(#sb-list) .sb-card .sbc-address { font-family:var(--dpl-mono, 'JetBrains Mono', monospace) !important; font-size:11px !important; font-weight:400 !important; } html:not([data-dp-layout])[data-dp-objkarte="datenzeile"] :is(#sb-list) .sb-card .sbc-kp-row { display:none !important; } html:not([data-dp-layout])[data-dp-objkarte="datenzeile"] :is(#sb-list) .sb-card .sbc-investor-ribbon { display:none !important; } html:not([data-dp-layout])[data-dp-objkarte="datenzeile"] :is(#sb-list) .sb-card .sbc-top-line1 { display:inline-block !important; width:auto !important; vertical-align:middle !important; } html:not([data-dp-layout])[data-dp-objkarte="ampel"] :is(#sb-list) .sb-card { padding:0 !important; } html:not([data-dp-layout])[data-dp-objkarte="ampel"] :is(#sb-list) .sb-card .sbc-top { border:0 !important; border-radius:4px !important; background-color:transparent !important; padding:6px 8px 6px 20px !important; position:relative !important; } html:not([data-dp-layout])[data-dp-objkarte="ampel"] :is(#sb-list) .sb-card:hover .sbc-top { background-color:#1A1815 !important; } html:not([data-dp-layout])[data-dp-objkarte="ampel"] :is(#sb-list) .sb-card.active .sbc-top { background-color:#221F1A !important; } html:not([data-dp-layout])[data-dp-objkarte="ampel"] :is(#sb-list) .sb-card .sbc-top::before { content:'' !important; position:absolute !important; left:7px !important; top:50% !important; transform:translateY(-50%) !important; width:8px !important; height:8px !important; border-radius:50% !important; background:var(--wl-c9a84c, #C9A84C) !important; } html:not([data-dp-layout])[data-dp-objkarte="ampel"] :is(#sb-list) .sb-card.deal-won .sbc-top::before { background:#3FA56C !important; } html:not([data-dp-layout])[data-dp-objkarte="ampel"] :is(#sb-list) .sb-card.deal-lost .sbc-top::before { background:#B8625C !important; } html:not([data-dp-layout])[data-dp-objkarte="ampel"] :is(#sb-list) .sb-card .sbc-seq, html:not([data-dp-layout])[data-dp-objkarte="ampel"] :is(#sb-list) .sb-card .sbc-investor-ribbon, html:not([data-dp-layout])[data-dp-objkarte="ampel"] :is(#sb-list) .sb-card .sbc-kp-row { display:none !important; } html:not([data-dp-layout])[data-dp-objkarte="kennzahlen"] :is(#sb-list) .sb-card .sbc-mini-grid { display:flex !important; gap:7px !important; padding:0 9px 7px !important; margin:-1px 0 0 !important; border:1px solid var(--wl-8a7332, #8a7332) !important; border-top:0 !important; border-radius:0 0 5px 5px !important; background-color:#17160F !important; } html:not([data-dp-layout])[data-dp-objkarte="kennzahlen"] :is(#sb-list) .sb-card.deal-won .sbc-mini-grid { border-color:#3FA56C !important; } html:not([data-dp-layout])[data-dp-objkarte="kennzahlen"] :is(#sb-list) .sb-card.deal-lost .sbc-mini-grid { border-color:#B8625C !important; } html:not([data-dp-layout])[data-dp-objkarte="kennzahlen"] :is(#sb-list) .sb-card .sbcm { flex:1 1 0 !important; min-width:0 !important; font-size:9px !important; display:block !important; } html:not([data-dp-layout])[data-dp-objkarte="kennzahlen"] :is(#sb-list) .sb-card .sbc-top { border-radius:0 5px 0 0 !important; border-bottom:0 !important; } html:not([data-dp-layout])[data-dp-objkarte="minimal"] :is(#sb-list) .sb-card { padding:0 !important; } html:not([data-dp-layout])[data-dp-objkarte="minimal"] :is(#sb-list) .sb-card .sbc-top { border:0 !important; border-radius:4px !important; background-color:transparent !important; padding:8px 9px !important; } html:not([data-dp-layout])[data-dp-objkarte="minimal"] :is(#sb-list) .sb-card:hover .sbc-top { background-color:#1A1815 !important; } html:not([data-dp-layout])[data-dp-objkarte="minimal"] :is(#sb-list) .sb-card.active .sbc-top { background-color:#221F1A !important; } html:not([data-dp-layout])[data-dp-objkarte="minimal"] :is(#sb-list) .sb-card .sbc-seq, html:not([data-dp-layout])[data-dp-objkarte="minimal"] :is(#sb-list) .sb-card .sbc-investor-ribbon, html:not([data-dp-layout])[data-dp-objkarte="minimal"] :is(#sb-list) .sb-card .sbc-kp-row { display:none !important; } html:not([data-dp-layout])[data-dp-objkarte="minimal"] :is(#sb-list) .sb-card .sbc-address { font-weight:500 !important; } html:not([data-dp-layout])[data-dp-objkarte="status"] :is(#sb-list) .sb-card .sbc-seq { font-size:7.5px !important; letter-spacing:.12em !important; } html:not([data-dp-layout])[data-dp-objkarte="status"] :is(#sb-list) .sb-card .sbc-seq { font-size:0 !important; } html:not([data-dp-layout])[data-dp-objkarte="status"] :is(#sb-list) .sb-card .sbc-seq::after { content:'IN ARBEIT' !important; font-size:9px !important; letter-spacing:.1em !important; } html:not([data-dp-layout])[data-dp-objkarte="status"] :is(#sb-list) .sb-card.deal-won .sbc-seq::after { content:'GEWONNEN' !important; } html:not([data-dp-layout])[data-dp-objkarte="status"] :is(#sb-list) .sb-card.deal-lost .sbc-seq::after { content:'VERLOREN' !important; } html:not([data-dp-layout])[data-dp-objkarte="cockpit"] :is(#sb-list) .sb-card .sbc-score-overlay { left:9px !important; right:auto !important; } html:not([data-dp-layout])[data-dp-objkarte="cockpit"] :is(#sb-list) .sb-card .sbc-mini-score { border:1px solid var(--wl-3a352e, #3A352E) !important; border-top-color:currentColor !important; border-radius:50% !important; background:#0B0A08 !important; } html:not([data-dp-layout])[data-dp-objkarte="cockpit"] :is(#sb-list) .sb-card .sbc-top-body { padding-left:32px !important; padding-right:6px !important; } html:not([data-dp-layout])[data-dp-objkarte="cockpit"] :is(#sb-list) .sb-card .sbc-seq { left:auto !important; right:0 !important; border-radius:3px 3px 0 0 !important; } html:not([data-dp-layout])[data-dp-objkarte="cockpit"] :is(#sb-list) .sb-card .sbc-investor-ribbon { right:auto !important; left:0 !important; } html:not([data-dp-layout])[data-dp-objkarte] :is(#sb-list) .sb-card .sbc-investor-ribbon { display:none !important; } /* ============================================================================== v1942 - DIE GRUNDFORM GEHOERT ZUM STIL, NICHT NUR SEINE EINZELHEITEN Nach v1940 griffen die Stile in der DealPilot-Ansicht messbar (Hoehen 181 bis 215 px statt durchgehend 247), aber das Kachelband blieb in ALLEN - und damit die halbe Kartenhoehe: .sbc-top 88 px .sbc-mini-grid 83 px <- der Standard dieser Ansicht Der Generator aus v1940 hat diese Regel nicht mitgenommen, weil sie keinen Stilnamen traegt: in den Mappen blendet `html[data-dp-layout] .dpl-schiene … .sbc-mini-grid` pauschal aus, fuer jeden Stil zugleich. > **Ein Klon nach Selektor-Muster holt, was das Muster nennt - nicht, was > dazugehoert.** Die Grundform einer Karte steckt in Regeln OHNE Stilnamen; > wer nur die benannten klont, bekommt die Verzierung ohne den Zuschnitt. Deshalb hier dieselbe Pauschale fuer die Ansicht ohne Layout - und wie in den Mappen die Ausnahme fuer Kennzahlen, dessen Zweck gerade die Kacheln sind (v1934). NICHT betroffen ist der Aktenreiter: er ist der Standard und traegt KEIN Attribut, ist also von "nichts gewaehlt" nicht unterscheidbar. Wer nichts waehlt, bekommt die Ansicht unveraendert - das ist ihr Versprechen. ============================================================================== */ html:not([data-dp-layout])[data-dp-objkarte] :is(#sb-list) .sb-card .sbc-mini-grid { display: none !important; } html:not([data-dp-layout])[data-dp-objkarte="kennzahlen"] :is(#sb-list) .sb-card .sbc-mini-grid { display: flex !important; } /* ============================================================================== v1943 - SCORE UND KNOEPFE MITTIG, AUCH IN DER DEALPILOT-ANSICHT Marcel am 07.10.2026: "Den score und die schaltflaechen fuer duplizieren und loeschen muessen immer mittig angeordnet sein." - IMMER. v1928 und v1935 haben das hergestellt, aber an den Ankern der drei Mappen (`.dpl-schiene` und `aside#sidebar` unter `[data-dp-layout]`). In der Ansicht ohne Layout galt weiter, was in `style.css` steht: ![31] top: 38px <- .sbc-score-overlay ![31] top: 6px <- .sbc-actions GEMESSEN, Handy 390 px, Abstand zur Kartenmitte: Aktenreiter 87 px zu tief Datenzeile 0 px Bordkarte 30 px Ampel 0 px Score-Kante 42 px Minimal 0 px Kennzahlen 77 px > **Zum dritten Mal heute dieselbe Form: eine Reparatur erbt den Anker, an > dem sie geschrieben wurde.** v1935 hat den pointer-events-Defekt von der > Schiene in die Schublade nachgezogen, v1940 die Kartenstile - und die > Mitte blieb beide Male liegen, weil sie in einem anderen Paket stand. > Wer eine Ansicht neu erschliesst, muss die Liste der Reparaturen durchgehen, > nicht nur die Regeln, an die er gerade denkt. Dieselbe Rechnung wie in v1928: die Mitte rechnet sich selbst aus und gilt damit fuer jede Hoehe - auch fuer die 212 px der Karten mit Kachelband. ============================================================================== */ html:not([data-dp-layout]) body aside.sidebar#sidebar #sb-list .sb-card .sbc-score-overlay, html:not([data-dp-layout]) body aside.sidebar#sidebar #sb-list .sb-card .sbc-actions { top: 50% !important; bottom: auto !important; height: auto !important; transform: translateY(-50%) !important; } /* ============================================================================== v2114 - DIE ALTE STAFFELUNG ZURUECK, UND ZWAR BEIDE TEILE Marcel am 11.10.2026: "Koennen wir irgendwie aus den frueheren Versionsstaenden mal rausholen, wie wir das auf der normalen Objektkartei frueher angezeigt haben? Das sollten wir dann bei der grossen Ansicht mit den Kennzahlen drauf anpassen, dass es dann oben erscheint. Weil bei allen anderen Karten ist das mittige Gut." AUS DER VERSIONSGESCHICHTE GEHOLT (f843cc8d~1, der Stand VOR v1924): aside.sidebar .sb-card .sbc-actions top: 6px <- Knoepfe oben aside.sidebar .sb-card .sbc-score-overlay top: 38px <- Score darunter Das ist die V103-Staffelung, deren Kommentar bis heute im Blatt steht ("war 12 - jetzt unter den Action-Buttons"). > WARUM MEIN v2107 NICHT REICHTE und Marcel es zurueckgenommen hat: ich > hatte nur den SCORE auf 38px gesetzt und die KNOEPFE mittig gelassen. > Dann liegt der Duplizieren-Knopf (50 % = 94-116) weiter auf dem Ring > (38-88 waere frei, 94-116 nicht) - genau der graue Bereich, ueber den > er sich danach beschwert hat. Eine Staffelung hat zwei Teile; einen > davon wiederherzustellen stellt sie nicht wieder her. NUR DORT, WO DAS KACHELBAND STEHT - also ohne gewaehlten Kartenstil und bei "kennzahlen". Alle anderen Kartenstile blenden das Band aus, sind kurz, und dort bleibt die Mitte richtig (v1943 hat das an sechs Stilen mit 0 px Abweichung gemessen). ============================================================================== */ html:not([data-dp-layout]):not([data-dp-objkarte]) body aside.sidebar#sidebar #sb-list .sb-card .sbc-actions, html:not([data-dp-layout])[data-dp-objkarte="kennzahlen"] body aside.sidebar#sidebar #sb-list .sb-card .sbc-actions { top: 6px !important; bottom: auto !important; transform: none !important; } html:not([data-dp-layout]):not([data-dp-objkarte]) body aside.sidebar#sidebar #sb-list .sb-card .sbc-score-overlay { top: 38px !important; bottom: auto !important; transform: none !important; } /* "kennzahlen" ist flacher (195 px statt 210) und sein Kachelband beginnt schon bei 114 px statt 123 - gemessen am 11.10.2026. Mit 38px lagen 5 px der Pille "GUT" auf der ersten Kachel. */ html:not([data-dp-layout])[data-dp-objkarte="kennzahlen"] body aside.sidebar#sidebar #sb-list .sb-card .sbc-score-overlay { top: 30px !important; bottom: auto !important; transform: none !important; } /* ================================================================= v1989 - DIE SAMMELREGEL AUF REICHT INS DUNKLE BODENBLATT Weiter oben steht in dieser Datei html[data-dp-layout] .body small{ color:var(--dpl-leise) !important } also eine Sammelregel auf JEDES in `.body`. `--dpl-leise` ist ein gedaempftes Grau fuer die HELLE Flaeche. Auf dem Handy ist die Pre-Flight-Karte aber ein DUNKLES Bodenblatt (.dp-pf-scroll{background:#0c0c0e}). Dort landet dasselbe Grau auf fast schwarz. Gemessen am 08.10.2026 auf 390 px, „Datenquellen fuer diesen Abruf", 11 px: heute, aus der Sammelregel #6b645a 3,35 : 1 unter AA wie der Block es vorsah #8A8A93 5,71 : 1 in Ordnung > Eine Sammelregel auf ein Element wie `small` kennt den Grund > nicht, auf dem es landet. Sie wirkt dort, wo niemand sie > hingeschrieben hat - und ein !important macht daraus eine Ansage. Hier wird NICHTS neu gestaltet: wiederhergestellt ist die Farbe, die `style.css` fuer diesen Kopf selbst vorgesehen hat. Gleiche Spezifitaet wie die Sammelregel (0,2,2), aber spaeter in derselben Datei - bei gleicher Spezifitaet gewinnt die spaetere Regel. ================================================================= */ html[data-dp-layout] .dp-pf-scroll small{ color:#8A8A93 !important; } /* ═══════════════════════════════════════════════════════════════════ v2154 · DER STAND-SCHALTER IM HELLEN DESIGN DER SCHIENE ═══════════════════════════════════════════════════════════════════ Marcel am 12.10.2026: „dass die Ausrichtung der Elemente dort gleich ist und auch das Layout und die Farbe, also Bestand, Stand und Ankauf, auch der Rahmen da drum, das müsste jetzt ein helles Weiß bekommen, also quasi im gleichen Design. … gleiche Formatierung wie die Suche und auch die Schrift bei den Aktionen." GEMESSEN am 12.10.2026 in der Kanzlei-Ansicht, woran er sich anpassen soll: Suchfeld 11,5px Inter · Radius 10px · Rahmen rgb(233,227,214) · Polster 4px 7px · Hintergrund transparent Aktionsknopf 13px/700 Inter · Radius 10px · Polster 12px 14px · Rahmen 1,11px Gold/50% · Farbe Gold Schalter ALT 10,5px JetBrains Mono · Radius 9px · Hintergrund rgba(42,39,39,.22) <- dunkel · Rahmen rgba(168,162,153,.18) Der Schalter war also in JEDER der fünf Größen anders als seine Nachbarn — dunkel in einer hellen Schiene, Monospace zwischen Inter, und mit einem Rahmen, den es dort sonst nicht gibt. ── WARUM HIER UND NICHT IN style.css ──────────────────────────────── Die Grundfassung in `style.css:40209` bleibt unberührt: sie gilt für die Standardansicht, und die ist dunkel. Hier wird nur die Fassung INNERHALB der Varianten-Schiene überschrieben. Eine Änderung an der Grundregel hätte die Standardansicht mitgenommen, wo sie richtig ist. Spezifität: `html[data-dp-layout] .dpl-schiene .dk-schalter` ist (0,3,2) gegen (0,1,0) der Grundregel — sie gewinnt ohne `!important` überall dort, wo die Grundregel keine trägt. Wo sie eine trägt (sie tut es nicht), stünde hier eines. ═══════════════════════════════════════════════════════════════════ */ html[data-dp-layout] .dpl-schiene .dk-schalter{ width:calc(100% - 4px); margin:0 2px 8px; padding:3px; /* Radius 10px wie Suchfeld und Aktionsknopf, nicht 9px */ border-radius:10px; /* Das helle Weiss, das Marcel nennt — und der Rahmen der Suche */ background:rgba(255,255,255,.72); border:1px solid rgb(233,227,214); } html[data-dp-layout] .dpl-schiene .dk-schalter:hover{ border-color:var(--wl-c9a84c,#C9A84C); } /* Die Beschriftung „STAND" — Inter wie die Nachbarn, nicht Monospace */ html[data-dp-layout] .dpl-schiene .dk-seg-titel{ padding:0 7px 0 5px; font:700 9.5px/1 Inter,system-ui,sans-serif; letter-spacing:.1em; color:#8A8272; } /* Die beiden Segmente: Schrift der Aktionen (Inter 700), auf 12px statt 13px — bei 13px laufen „Bestand" und „Ankauf" auf 232px Breite ineinander. Gemessen, nicht geschaetzt: der Knopf ist 87px breit, „Bestand" braucht bei 13px/700 Inter rund 62px plus Polster und Zaehler. */ html[data-dp-layout] .dpl-schiene .dk-seg{ padding:5px 7px; border-radius:7px; font:700 12px/1.3 Inter,system-ui,sans-serif; letter-spacing:.01em; color:#6f6960; } html[data-dp-layout] .dpl-schiene .dk-seg:hover{ color:#2A2727; } /* Der aktive Zustand: auf hellem Grund ist eine dunkle Fuellung falsch — sie saehe aus wie der ABGEWAEHLTE Zustand im dunklen Original. Weiss mit Schatten hebt heraus, wie es ein Reiter auf hellem Grund tut. */ html[data-dp-layout] .dpl-schiene .dk-seg.aktiv{ background:#fff; color:#2A2727; box-shadow:0 1px 2px rgba(42,39,39,.14); } html[data-dp-layout] .dpl-schiene .dk-seg[data-dk-modus="ankauf"].aktiv{ background:#fff; color:var(--wl-b8932f,#b8932f); box-shadow:0 1px 2px rgba(184,147,47,.22); } html[data-dp-layout] .dpl-schiene .dk-seg b{ font-weight:700; opacity:.6; } /* ══ v2163 · DIE STAND-LEISTE AUF DUNKLER SCHIENE ═══════════════════════ Marcel am 13.10.2026 (Bild „menü"): „die darstellung von dem wechsel button ankauf/bestand sieht nicht aus wie erwartet … soll sich ins design der aktenmappe oder kanzlei oder tower einfuegen. das ist ja weiss und rahmen weiss aber hintergrund dunkel." Die Regeln darueber stammen aus der Zeit der HELLEN Schiene (helles Weiss 72 %). Gemessen am 13.10.2026 in allen drei Gestaltungen: die Schiene ist rgb(14,13,11), der Portfolio-Knopf darueber durchsichtig, Rahmen rgb(230,225,214), Schrift rgb(191,183,169), Radius 10px. Die Leiste nimmt GENAU diese Werte - sie ist sein Nachbar, nicht ein eigenes Bauteil. Gleiche Spezifitaet, spaeter in der Datei: gewinnt. */ html[data-dp-layout] .dpl-schiene .dk-schalter{ background:transparent; border:1px solid rgb(230,225,214); border-radius:10px; /* v2163a · Marcel: „so breit wie bei Portfolio dadrueber und noch etwas Platz zwischen beidem". Gleiche Rechnung wie .dpl-portfolio (calc(100% - 16px), 8px seitlich); 10px Luft nach oben. */ width:calc(100% - 16px); margin:10px 8px 8px; box-sizing:border-box; } html[data-dp-layout] .dpl-schiene .dk-schalter:hover{ border-color:var(--wl-c9a84c,#C9A84C); } html[data-dp-layout] .dpl-schiene .dk-seg-titel{ color:rgb(191,183,169); opacity:.75; } html[data-dp-layout] .dpl-schiene .dk-seg{ color:rgb(191,183,169); } html[data-dp-layout] .dpl-schiene .dk-seg:hover{ color:rgb(233,227,214); } html[data-dp-layout] .dpl-schiene .dk-seg.aktiv{ background:rgba(233,227,214,.14); color:#fff; box-shadow:inset 0 0 0 1px rgba(233,227,214,.35); } html[data-dp-layout] .dpl-schiene .dk-seg[data-dk-modus="ankauf"].aktiv{ background:color-mix(in srgb, var(--wl-c9a84c,#C9A84C) 20%, transparent); color:var(--wl-e8cc7a,#E8CC7A); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wl-c9a84c,#C9A84C) 45%, transparent); } /* ══ v2178 · DIE AKTIONEN VERDECKEN DIE HOHEN KARTEN NICHT MEHR ═════════════ Marcel am 13.10.2026: „Wenn ich Aktenmappe oder Kanzlei oder Tower als Aussehen ausgewaehlt habe und Objektkarte Kennzahlen oder Aktenreiter ausgewaehlt ist, wird viel verdeckt von den Flaechen duplizieren und loeschen. Da ist ein grosses schwarzes Kaestchen drueber." GEMESSEN: v1707 (oben) gibt .sbc-actions in der Schiene height:100% und einen Verlauf bis #15140F - auf den hohen Karten (Kachelband) eine kartenhohe, fast schwarze Flaeche ueber Kacheln, Preis und Ring, bei der AKTIVEN Karte dauerhaft. Ohne Layout ist das seit v2114 geloest (Kopfzone, s. o.) - hier dieselbe Loesung fuer Aktenreiter (kein Attribut) und Kennzahlen. Spezifitaet gleich den Hover/ Aktiv-Regeln oben, daher am Ende der Datei. */ html[data-dp-layout]:not([data-dp-objkarte]) .dpl-schiene .sb-card .sbc-actions, html[data-dp-layout]:not([data-dp-objkarte]) .dpl-schiene .sb-card:hover .sbc-actions, html[data-dp-layout]:not([data-dp-objkarte]) .dpl-schiene .sb-card.active .sbc-actions, html[data-dp-layout]:not([data-dp-objkarte]) .dpl-schiene .sb-card.is-active .sbc-actions, html[data-dp-layout][data-dp-objkarte="kennzahlen"] .dpl-schiene .sb-card .sbc-actions, html[data-dp-layout][data-dp-objkarte="kennzahlen"] .dpl-schiene .sb-card:hover .sbc-actions, html[data-dp-layout][data-dp-objkarte="kennzahlen"] .dpl-schiene .sb-card.active .sbc-actions, html[data-dp-layout][data-dp-objkarte="kennzahlen"] .dpl-schiene .sb-card.is-active .sbc-actions{ top:6px !important; bottom:auto !important; height:auto !important; transform:none !important; align-items:flex-start !important; padding:0 !important; background:transparent !important; } /* ============================================================================== v2198 · Kartenknoepfe NEBEN den Score-Ring, nicht darauf. Gemessen im Responsive-Check (Messkabine, 1024-2560 px, alle Reiter): v1943 zentriert Score-Ring UND .sbc-actions auf halbe Hoehe (Regel darueber) - beide rechts, also uebereinander. Beim Ueberfahren erschienen Duplizieren/Loeschen mitten auf dem Ring (Ring 276-341 px, Knoepfe 300-348 px). Oben rechts ist kein Platz: der Ring ist 80 px hoch bei 104 px Karte. Deshalb links daneben: Ring 65 px + 12 px Rand + Abstand. ============================================================================== */ html:not([data-dp-layout]) body aside.sidebar#sidebar #sb-list .sb-card .sbc-actions { right: 84px !important; } /* ══ v2203 · N63.6 · DIE STAND-LEISTE AM HANDY ═══════════════════════════ Am Handy steht #dk-schalter in der Schublade (#sidebar) hinter dem Portfolio-Knopf (layout-varianten.js standHandy). Dort griff nur die Grundfassung aus style.css (aside.sidebar .dk-schalter, alles !important): Goldrahmen 50 %, Goldschrift - Marcel: „goldener Rahmen und goldene Schrift. Das passt nicht." Hier dieselben Werte wie v2163 in der Schiene (Nachbar des Portfolio-Knopfs). ID + Attribut schlagen die Grundregel; !important, weil sie selbst eines traegt. */ @media (max-width: 900px){ html[data-dp-layout] aside#sidebar.sidebar .dk-schalter{ background:transparent !important; border:1px solid rgb(230,225,214) !important; border-radius:10px !important; width:calc(100% - 16px) !important; margin:8px 8px 10px !important; box-sizing:border-box !important; /* v2203a · die Schublade ordnet per order (Marke -3, Portfolio -2, Aktionen -1, Nutzer 3); ohne eigenes order stand der Schalter mit 0 HINTER dem ganzen Menue, egal wo im DOM. -2 = gleiche Stufe wie der Portfolio-Knopf, im DOM direkt dahinter (standHandy). */ order:-2 !important; } html[data-dp-layout] aside#sidebar.sidebar .dk-schalter:hover{ border-color:var(--wl-c9a84c,#C9A84C) !important; } html[data-dp-layout] aside#sidebar.sidebar .dk-seg-titel{ color:rgb(191,183,169) !important; opacity:.75; } html[data-dp-layout] aside#sidebar.sidebar .dk-seg{ color:rgb(191,183,169) !important; min-height:40px; } html[data-dp-layout] aside#sidebar.sidebar .dk-seg:hover{ color:rgb(233,227,214) !important; } html[data-dp-layout] aside#sidebar.sidebar .dk-seg.aktiv{ background:rgba(233,227,214,.14) !important; color:#fff !important; box-shadow:inset 0 0 0 1px rgba(233,227,214,.35) !important; } } /* ═══ v2216b · KNOPFKASTEN AUF DER OBJEKTKARTE NUR SO GROSS WIE DIE KNÖPFE ═══ Marcel 14.10.2026: „den Löschen- und Duplizieren-Button anschauen auf den Karten. Der Rahmen da drum ist zu groß … dadurch wird der Score abgeschnitten und auch der Rahmen wird nicht mehr richtig angezeigt von der Objektkartei." Gemessen (Aktenmappe + Bordkarte, 1280 px, beim Überfahren): .sbc-actions 61 × 44 px ab der Kartenoberkante - genau die Kartenhöhe (height:100%, Z. 5874) mit dunklem Verlauf: er übermalte den oberen und unteren Kartenrand und reichte bis an den Ring. Jetzt ein kleiner Kasten, mittig, nur um die beiden Knöpfe; die waagerechte Lage bleibt. */ html[data-dp-layout] body aside#sidebar .dpl-schiene .sb-card .sbc-actions, html[data-dp-layout] body .dpl-schiene .sb-card .sbc-actions{ top:50% !important; bottom:auto !important; height:auto !important; transform:translateY(-50%) !important; padding:3px !important; gap:4px !important; border-radius:8px !important; background:#15140F !important; box-shadow:0 0 0 1px rgba(255,255,255,.06), -10px 0 12px 2px #15140F !important; } html[data-dp-layout] body aside#sidebar .dpl-schiene .sb-card:hover .sbc-actions, html[data-dp-layout] body .dpl-schiene .sb-card:hover .sbc-actions{ background:#1A1815 !important; box-shadow:0 0 0 1px rgba(255,255,255,.06), -10px 0 12px 2px #1A1815 !important; } html[data-dp-layout] body aside#sidebar .dpl-schiene .sb-card.active .sbc-actions, html[data-dp-layout] body aside#sidebar .dpl-schiene .sb-card.is-active .sbc-actions, html[data-dp-layout] body .dpl-schiene .sb-card.active .sbc-actions, html[data-dp-layout] body .dpl-schiene .sb-card.is-active .sbc-actions{ background:#221F1A !important; box-shadow:0 0 0 1px rgba(255,255,255,.06), -10px 0 12px 2px #221F1A !important; }