:root { /* Dunkles Navy, McKinsey-Blau als einziger Akzent */ --bg: #0b1220; --panel: #101a2c; --border: #1e2c46; --text: #d5deeb; --dim: #7e8ca3; --accent: #5b9bff; --good: #46c28e; --bad: #e0604f; --sbw: 220px; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 "Segoe UI", system-ui, sans-serif; } /* Sidebar */ /* Sidebar als Flex-Spalte: Kopf, Feature-Nav (nimmt den Platz), Utilities, User. sb-user haengt dadurch ohne absolute-Positionierung unten. */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sbw); background: var(--panel); border-right: 1px solid var(--border); padding: 12px 0; transition: width .15s; overflow: hidden; z-index: 50; display: flex; flex-direction: column; } .sidebar.collapsed { width: 52px; } .sb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; } /* Nav-Scrollbar (.311): thin + Designfarben, Thumb nur bei Hover (Discord-Muster, Farb-Vorbild .msgtl). Der native 17px-Balken frass eingeklappt ein Drittel der 52px-Rail. Chrome ab 121 nutzt die Standard-Props und ignoriert dann die ::-webkit-Regeln, aeltere Chromes nehmen die webkit-Regeln. Touch scrollt ohne Hover, dort bleibt der Balken transparent (Overlay-Scrollbars mobil ok). */ .sb-nav:hover { scrollbar-color: var(--border) transparent; } .sb-nav::-webkit-scrollbar { width: 6px; } .sb-nav::-webkit-scrollbar-track { background: transparent; } .sb-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; } .sb-nav:hover::-webkit-scrollbar-thumb { background: var(--border); } .sb-nav::-webkit-scrollbar-thumb:hover { background: var(--dim); } /* Kopf: Logo links (Markenanker + Home-Klick), Toggle rechts. Eingeklappt: Spalte, Logo bleibt sichtbar, Burger darunter. */ .sb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 14px 14px; } .sidebar.collapsed .sb-head { flex-direction: column; gap: 8px; padding: 4px 6px 10px; } .sb-head button { background: none; border: 1px solid var(--border); color: var(--dim); border-radius: 6px; cursor: pointer; font-size: 15px; padding: 4px 9px; } /* Collapse-Toggle: Chevron statt Burger (Burger signalisiert Menue-oeffnen, Chevron Richtung). Zeigt im offenen Zustand nach links, eingeklappt nach rechts. .301: GEOMETRISCH aus Borders gezeichnet statt Font-Glyph — «/» sitzen in Segoe UI nicht mittig in ihrer Em-Box, Flex zentriert nur die Line-Box, der Glyph hing trotzdem tief. Ein rotiertes Border-Quadrat ist exakt zentrierbar (currentColor erbt die Hover-Farbe). left ±1px = optischer Ausgleich zur offenen Seite der Spitze. */ .sb-toggle { width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; } .sb-toggle::before { content: ''; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); position: relative; left: 1px; } .sidebar.collapsed .sb-toggle::before { transform: rotate(-135deg); left: -1px; } .sb-toggle:hover { color: var(--text); border-color: var(--dim); } .sb-title { color: var(--accent); font-weight: 600; white-space: nowrap; } /* Logo (.293): Sidebar-Kopf + Auth-Overlay (wb_logo.png, Alpha-Version) */ .sb-logo { display: block; width: 28px; height: 28px; cursor: pointer; } .authlogo { display: block; width: 72px; height: 72px; margin: 0 auto 10px; } /* .311: vertikal 8px statt 10px (12 sichtbare Zeilen = ~48px weniger, der sb-nav-Overflow verschwindet auf gaengigen Laptop-Hoehen). Touch behaelt 10px als Zielflaeche (pointer coarse). .324: 6px statt 8px, das Playbooks-Item (.323) brachte den Scrollbalken zurueck, ~40px gewonnen > ~33px Itemhoehe. Naechster Stellknopf, wenn noch ein Item dazukommt: .nav-sep-Margin oder Icons auf 18px. */ .nav-item { display: flex; align-items: center; gap: 12px; padding: 6px 16px; cursor: pointer; color: var(--dim); white-space: nowrap; border-left: 3px solid transparent; } @media (pointer: coarse) { .nav-item { padding: 10px 16px; } } .nav-item:hover { color: var(--text); background: var(--bg); } .nav-item.active { color: var(--accent); border-left-color: var(--accent); background: var(--bg); } .nav-item .ico { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; } /* Nav-Feature-Icons: je View drei Grafiken (passive/hover/active), Quelle assets/_.png, freigestellt + auf 64px verkleinert in static/. Zustandswechsel rein per CSS (background-image), Reihenfolge passive < hover < active, damit .active auch beim Hovern gewinnt */ .nav-ico { height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center; } .nav-item[data-view="discovery"] .nav-ico { background-image: url(/static/discovery_passive.png); } .nav-item[data-view="discovery"]:hover .nav-ico { background-image: url(/static/discovery_hover.png); } .nav-item[data-view="discovery"].active .nav-ico { background-image: url(/static/discovery_active.png); } .nav-item[data-view="craft"] .nav-ico { background-image: url(/static/craft_passive.png); } .nav-item[data-view="craft"]:hover .nav-ico { background-image: url(/static/craft_hover.png); } .nav-item[data-view="craft"].active .nav-ico { background-image: url(/static/craft_active.png); } .nav-item[data-view="farm"] .nav-ico { background-image: url(/static/farm_passive.png); } .nav-item[data-view="farm"]:hover .nav-ico { background-image: url(/static/farm_hover.png); } .nav-item[data-view="farm"].active .nav-ico { background-image: url(/static/farm_active.png); } .nav-item[data-view="market"] .nav-ico { background-image: url(/static/market_passive.png); } .nav-item[data-view="market"]:hover .nav-ico { background-image: url(/static/market_hover.png); } .nav-item[data-view="market"].active .nav-ico { background-image: url(/static/market_active.png); } .nav-item[data-view="earn"] .nav-ico { background-image: url(/static/earn_passive.png); } .nav-item[data-view="earn"]:hover .nav-ico { background-image: url(/static/earn_hover.png); } .nav-item[data-view="earn"].active .nav-ico { background-image: url(/static/earn_active.png); } .nav-item[data-view="archive"] .nav-ico { background-image: url(/static/archive_passive.png); } .nav-item[data-view="archive"]:hover .nav-ico { background-image: url(/static/archive_hover.png); } .nav-item[data-view="archive"].active .nav-ico { background-image: url(/static/archive_active.png); } /* .428 (Gustav): Stash lebt als Kind unter Discovery (ohne Icon), die stash-Icons gehoeren jetzt dem Sales-Item */ .nav-item[data-view="sales"] .nav-ico { background-image: url(/static/stash_passive.png); } .nav-item[data-view="sales"]:hover .nav-ico { background-image: url(/static/stash_hover.png); } .nav-item[data-view="sales"].active .nav-ico { background-image: url(/static/stash_active.png); } .nav-item[data-view="lb"] .nav-ico { background-image: url(/static/lb_passive.png); } .nav-item[data-view="lb"]:hover .nav-ico { background-image: url(/static/lb_hover.png); } .nav-item[data-view="lb"].active .nav-ico { background-image: url(/static/lb_active.png); } .nav-item[data-view="playbooks"] .nav-ico { background-image: url(/static/playbooks_passive.png); } .nav-item[data-view="playbooks"]:hover .nav-ico { background-image: url(/static/playbooks_hover.png); } .nav-item[data-view="playbooks"].active .nav-ico { background-image: url(/static/playbooks_active.png); } /* .432 (Gustav): FAQ/Leaderboards/Patch notes leben unter "More". .434: eigene more_*.png-Assets fuer alle drei Zustaende (aus der faq-Plakette abgeleitet, drei Rauten statt Fragezeichen) — gleiche Dreier-Systematik wie jedes andere Nav-Item */ #navmore .nav-ico { background-image: url(/static/more_passive.png); } #navmore:hover .nav-ico { background-image: url(/static/more_hover.png); } #navmore.active .nav-ico { background-image: url(/static/more_active.png); } /* Feedback/Notifications sind keine data-view-Items: Zustaende ueber die IDs. .active setzt der Client PERSISTENT solange Overlay/Panel offen ist (.303, setFeedbackOpen/toggleNotifPanel) — :active waere nur der Maus-Druck. Nebeneffekt gewollt: eingeklappte Sidebar zeigt jetzt auch diese zwei Icons. */ /* Feedback-Sprechblase (.327, Gustav): fix oben rechts, unter #alphamark (top 10px + Zeilenhoehe). Accent-Flaeche mit DUNKLER Schrift (Kontrast- Regel .300), Tail unten rechts als Border-Dreieck. z-index ueber Content, UNTER #ntfpanel (90)/Overlays (100)/#alphamark (200). Icon-Zustaende wie gehabt ueber die drei feedback_*.png. */ #fbbtn { position: fixed; top: 42px; right: 16px; z-index: 80; display: flex; align-items: center; gap: 7px; background: var(--accent); color: var(--bg); font-weight: 600; font-size: 13px; padding: 7px 14px 7px 11px; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.45); } #fbbtn::after { content: ''; position: absolute; bottom: -7px; right: 18px; border: 8px solid transparent; border-top: 8px solid var(--accent); border-bottom: 0; } #fbbtn:hover { filter: brightness(1.12); } #fbbtn.active { filter: brightness(.9); } #fbbtn .ico { width: 18px; } #fbbtn .nav-ico { height: 18px; background-image: url(/static/feedback_passive.png); } #fbbtn:hover .nav-ico { background-image: url(/static/feedback_hover.png); } #fbbtn.active .nav-ico { background-image: url(/static/feedback_active.png); } #ntfbtn .nav-ico { background-image: url(/static/notif_passive.png); } #ntfbtn:hover .nav-ico { background-image: url(/static/notif_hover.png); } #ntfbtn.active .nav-ico { background-image: url(/static/notif_active.png); } #calcbtn .nav-ico { background-image: url(/static/calc_passive.png); } #calcbtn:hover .nav-ico { background-image: url(/static/calc_hover.png); } #calcbtn.active .nav-ico, #calcbtn.open .nav-ico { background-image: url(/static/calc_active.png); } /* Offen-Marker OHNE active (View hat den Fokus zurueck, Exklusiv-Abweichung .312): Accent-Rand + aktives Icon zeigen "Panel offen", die Textfarbe bleibt gedimmt, damit weiterhin nur EIN Item als voll aktiv liest */ #calcbtn.open { border-left-color: var(--accent); } .sidebar.collapsed .nav-item .lbl { display: none; } .nav-sep { border-top: 1px solid var(--border); margin: 10px 12px; } /* Calculator-Panel (.312, CALCULATOR-KONZEPT.md): nimmt bei .calcopen den Slot der .sb-nav ein. HARTE display-Umschaltung, bewusst OHNE Transition (eine max-height-Animation erzwingt Sidebar-Layout je Frame, Konzept Performance 3; der Nav-Toggle ist ebenfalls hart). */ .sidebar.calcopen .sb-nav { display: none; } #calcpanel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 12px; overflow: hidden; } /* Einklapp-Zeile UNTEN: vertikaler Chevron (zeigt nach oben = Panel klappt zu, Nav kommt zurueck). Geometrisch aus Borders (.301-Muster), volle Breite als Klickziel. Kein Label (Gustav-Entscheid, kein "Features"-Text). */ .calcfold { display: flex; justify-content: center; align-items: center; padding: 5px 0 2px; margin-top: 4px; border-top: 1px solid var(--border); cursor: pointer; color: var(--dim); } .calcfold:hover { color: var(--text); } .calcfoldchev { width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(135deg); position: relative; top: 2px; } /* margin-top 3px (.318): das Fokus-Outline (1px accent) wurde sonst an der Oberkante vom overflow:hidden des Panels abgeschnitten */ #calcexpr { width: 100%; box-sizing: border-box; font-size: 12.5px; padding: 5px 8px; margin-top: 3px; } /* Ergebnisbox: FIXE Hoehe (.315, Gustav), das Panel springt bei neuen Ergebniszeilen nicht mehr. 3 Zeilen ist das Maximum (dreiwaehriges =, Conversion braucht nur 2: Quellwert + Zielwaehrung). flex-shrink 0 bleibt (.314-Befund, sonst presst der Flex-Container die Box zusammen). */ .calcres { flex-shrink: 0; height: 40px; overflow: hidden; padding: 4px 2px; font-size: 11.5px; line-height: 1.3; overflow-wrap: anywhere; } /* Icon HINTER der Zahl (.318): links etwas Luft, rechts keine */ .calcres img { width: 12px; height: 12px; vertical-align: -2px; margin-left: 2px; } /* Einzeilig (.316): gerundete Zweitwaehrungen mit ≈, je Segment nowrap (Umbruch nur ZWISCHEN den Waehrungen, Box fasst 2 Zeilen) */ .calcres .calcalt { color: var(--dim); white-space: nowrap; } /* Nur die History federt Hoehe ab, alle festen Bloecke schrumpfen nie */ #calcexpr, .calcgrid, .calccur, .calcconv, .calcfold { flex-shrink: 0; } /* Tasten insgesamt ~1/3 kompakter (.315, Gustav) */ .calcgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .calcgrid button, .calccur button { padding: 4px 0; font-size: 12px; line-height: 1.2; cursor: pointer; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text); } .calcgrid button:hover, .calccur button:hover:enabled { border-color: var(--dim); } .calcgrid button.calceq { background: var(--accent); color: var(--bg); font-weight: 700; border-color: var(--accent); } /* .318: VIER Tasten in einer Reihe (div, c, ex, convert). Der Convert-Knopf traegt nur die drei Icons leicht ueberlappend gestapelt, kein Label */ .calccur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; } .calccur button { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 11px; padding: 3px 0; } .calccur button img { width: 13px; height: 13px; } .calccur .convstack { display: inline-flex; align-items: center; } .calccur .convstack img + img { margin-left: -5px; } /* Touch-Zielflaeche wie die Nav-Items (Konzept Interaktion 6) */ @media (pointer: coarse) { .calcgrid button, .calccur button { padding: 9px 0; } } .calchist { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--border); padding-top: 4px; font-size: 10.5px; color: var(--dim); scrollbar-width: thin; scrollbar-color: transparent transparent; } .calchist:hover { scrollbar-color: var(--border) transparent; } .calchist::-webkit-scrollbar { width: 6px; } .calchist::-webkit-scrollbar-track { background: transparent; } .calchist::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; } .calchist:hover::-webkit-scrollbar-thumb { background: var(--border); } .calchistrow { display: flex; justify-content: space-between; gap: 8px; padding: 3px 2px; cursor: pointer; border-radius: 4px; } .calchistrow:hover { background: var(--bg); color: var(--text); } .calchistrow .e { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calchistrow .r { font-variant-numeric: tabular-nums; white-space: nowrap; } /* User-Footer-Politur (.306): abgesetzt per Trennlinie (Footer-Charakter), Hover zeigt die Klickbarkeit des Avatar-Blocks (Accent wie die Nav), eingeklappt bleibt der Avatar als 32px-Chip erreichbar (vorher war der Settings-Zugang bei kollabierter Sidebar komplett weg). */ .sb-user { border-top: 1px solid var(--border); margin: 0 12px; padding: 12px 4px 0; font-size: 12px; color: var(--dim); white-space: nowrap; text-align: center; } .sb-user a { cursor: pointer; color: var(--dim); } .sb-user a:hover { color: var(--text); } .sidebar.collapsed .sb-user { margin: 0 6px; padding: 10px 0 0; } .sidebar.collapsed .sb-user .sb-name, .sidebar.collapsed .sb-user .sb-stars, .sidebar.collapsed .sb-user .sb-turnover, .sidebar.collapsed .sb-user .sb-links { display: none; } .sidebar.collapsed .sb-avawrap { width: 32px; margin: 0 auto 8px; } .sidebar.collapsed .sb-avawrap img { width: 32px; height: 32px; } /* Avatar-Block (.230): Name als Badge UNTEN, ueber die untere Avatar-Kante gelegt (leichte Ueberlagerung), darunter Sterne + Turnover. Name+Avatar sind EIN Klickziel (User settings). Gleicher Zeilenabstand (~4px) zwischen Name, Sternen und Div-Zeile: avawrap-mb 11 minus 7px Badge-Ueberstand = 4, Sterne-mb = 4 */ .sb-idblock { cursor: pointer; } .sb-avawrap img, .sb-name { transition: border-color .12s, color .12s; } .sb-idblock:hover .sb-avawrap img { border-color: var(--accent); } .sb-idblock:hover .sb-name { border-color: var(--accent); color: var(--accent); } .sb-avawrap { position: relative; width: 48px; margin: 0 auto 11px; } .sb-name { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); z-index: 1; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 0 8px; font-size: 11px; font-weight: 600; color: var(--text); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-avawrap img { width: 48px; height: 48px; object-fit: contain; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); display: block; } /* Sterne bewusst klein (.230): Zeilenbreite matcht die Div-Zeile (Icon + ~4 Stellen). Halbe/ganze Sterne */ .sb-stars { margin: 0 0 4px; font-size: 9px; letter-spacing: 1px; line-height: 1; } .sb-stars .st { color: #e7c15a; } .sb-stars .st-e { color: var(--border); } .sb-stars .st-h { position: relative; color: var(--border); display: inline-block; } .sb-stars .st-h::before { content: '★'; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #e7c15a; } /* Turnover-Zeile (.227): Lifetime-Div-Umsatz unter den Sternen. Icon links, Schriftgroesse wie die Admin-UI (11px, App-Standard fuer kleine Labels), randlos (kein Radius noetig), gedimmt damit die Sterne der Akzent bleiben */ .sb-turnover { margin: 0 0 6px; font-size: 11px; color: var(--dim); line-height: 1; display: flex; align-items: center; justify-content: center; gap: 3px; } .sb-turnover .cimg { width: 13px; height: 13px; margin: 0; } .main { margin-left: var(--sbw); padding: 24px; max-width: 1100px; transition: margin .15s; } body.sb-collapsed .main { margin-left: 52px; } h1 { font-size: 20px; color: var(--accent); margin: 0 0 4px; } h2 { font-size: 16px; color: var(--accent); margin: 0 0 12px; } .sub { color: var(--dim); margin-bottom: 20px; font-size: 13px; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; overflow-x: auto; } label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 4px; } /* color-scheme: dark laesst native Widgets (Zahlen-Spinner, Select-Pfeil, Autofill) im Dark-Theme rendern. Ohne das zeigt FIREFOX den nativen number-Spinner WEISS (Chrome raet Dark und tarnt es, FF nicht). */ select, input, textarea, button { background: var(--bg); color: var(--text); color-scheme: dark; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font: inherit; } /* Range-Slider (.360): die generische input-Regel gab Slidern 8px Padding + Rahmen, dadurch endete der native Fuellbalken sichtbar VOR dem Thumb (bei 100% "nicht voll"). Nackte Spur + Akzentfarbe fuer ALLE Slider. */ input[type="range"] { padding: 0; border: none; background: transparent; accent-color: var(--accent); height: 22px; } /* Playbook-Hinweis oben in Discovery/Craft (Verweis auf die neue Sektion). KEIN flex/gap: der Flex-Gap setzt sonst Abstand zwischen Link und dem folgenden Satzzeichen (sichtbare Luecke vor dem Punkt). Normaler Textfluss. */ .pbpromo { margin: 0 0 12px; padding: 8px 12px; font-size: 12.5px; color: var(--dim); background: rgba(91,155,255,.08); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px; } .pbpromo img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; } .pbpromo a { color: var(--accent); cursor: pointer; font-weight: 600; text-decoration: none; } .pbpromo a:hover { text-decoration: underline; } select:focus, input:focus, textarea:focus { outline: 1px solid var(--accent); } input[type="range"]:focus { outline: none; } option:disabled { color: #4a5670; } .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; } .modbox { position: relative; } .acdrop { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; max-height: 280px; overflow-y: auto; background: var(--panel); border: 1px solid var(--accent); border-radius: 0 0 6px 6px; } .acitem { padding: 6px 10px; cursor: pointer; font-size: 13px; } .acitem .cnt { color: var(--dim); font-size: 11px; margin-left: 6px; } .acitem.active, .acitem:hover { background: var(--bg); color: var(--accent); } .acitem b { color: var(--accent); font-weight: 600; } button.primary { background: var(--accent); color: #0b1220; font-weight: 600; border: none; cursor: pointer; padding: 10px 22px; } /* Gleiche Box-Geometrie wie die Inputs daneben: 8px Padding + 1px (transparenter) Rahmen, sonst ist der Button 2px kuerzer und die Zeile wirkt unruhig */ #bulkgo { padding: 8px 22px; border: 1px solid transparent; position: relative; overflow: hidden; } /* Fake-Ladebalken auf der Button-Oberkante (Craft Simulate). position:absolute = komplett aus dem Fluss, der Button waechst nicht, nichts darunter rutscht. Das JS treibt transform/opacity per Inline-Style, hier nur die ruhende Basis. */ .simbar { position: absolute; top: 0; left: 0; height: 3px; width: 100%; background: #0b1220; /* = Button-Textfarbe, sicherer Kontrast auf accent */ transform: scaleX(0); transform-origin: left center; opacity: 0; pointer-events: none; } /* Disabled heisst "nicht verfuegbar" (not-allowed), NICHT "laedt": die Sanduhr auf dem ausgegrauten Craft-Button (Discovery ohne Mod-Auswahl) suggerierte einen Haenger (.346). Nur der LAUFENDE Simulate-Lauf (data-running, gesetzt in runBulk) behaelt cursor: wait als echtes Beschaeftigt-Signal. */ button.primary:disabled { opacity: .5; cursor: not-allowed; } button.primary:disabled[data-running="1"] { cursor: wait; } /* Sim-Budget-Zaehler im Simulate-Button (SIM-BUDGET-KONZEPT.md): verfuegbar/Budget */ .simbudget { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .8; margin-left: 2px; } .simbudget:empty { display: none; } button.ghost { background: transparent; color: var(--dim); cursor: pointer; } /* Clear-selection so hoch wie der Craft-Button (.primary, padding 10px): 9px + 1px Rahmen = gleiche Boxhoehe, gleiches horizontales Padding */ #craftclear { padding: 9px 22px; } button.ghost:hover { color: var(--text); } button.stale { border-color: var(--bad); color: var(--bad); } button.small, a.cellink { display: inline-block; box-sizing: border-box; width: 86px; text-align: center; font: 11px/1.4 "Segoe UI", system-ui, sans-serif; padding: 2px 0; background: transparent; color: var(--dim); border: 1px solid var(--border); border-radius: 6px; text-decoration: none; cursor: pointer; } a.cellink { margin-top: 3px; } td button.small { margin-top: 3px; } /* Einheitliche Funktionsbloecke: seichte Rahmenlinie mit Legende (Designsprache) */ fieldset.fgroup { border: 1px solid var(--border); border-radius: 8px; margin: 0 0 12px; padding: 4px 12px 10px; min-width: 0; } /* Earnings-View: mehr Luft zwischen den grossen Bloecken und deren Elementen */ #view-earn .fgroup { margin-bottom: 26px; padding: 10px 18px 18px; } #view-earn .salesbody > * { margin-bottom: 18px; } #view-earn .salesbody > *:last-child { margin-bottom: 0; } fieldset.fgroup legend { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; padding: 0 4px; } #basegroup { display: inline-flex; align-items: center; gap: 10px; } #basetiles { display: flex; gap: 8px; flex-wrap: wrap; } .basetile { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 0; } .basetile .rimg { width: 30px; height: 30px; } /* Kauf liegt auf dem Tablet-Icon, Warenkorb-Badge oben rechts im Rahmen */ .tilebuy { position: relative; display: inline-block; line-height: 0; } .tilebuy .cart { position: absolute; top: 2px; right: 3px; color: var(--accent); line-height: 0; } /* Aktien-Stil, 2/3 Trend links + 1/3 Werte rechts (Preis oben, Delta darunter), Hoehe = Icon-Aussenhoehe (34px) */ .trendbox { display: inline-flex; align-items: center; gap: 8px; height: 34px; box-sizing: border-box; padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 10px; } .trendbox .tvals { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; margin-left: auto; } button.small:hover, a.cellink:hover { color: var(--text); } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } th.grpsep, td.grpsep { border-left: 1px solid var(--border); padding-left: 14px; } /* Spaltengruppen (Expected/Sold) optisch trennen */ th { color: var(--dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; } th sub { text-transform: none; } /* .443: Verified-Sales-Tabelle mit fester Zeilenhoehe, damit sie beim Blaettern nicht springt. Icon-Zeile (rimg 28px-Box) und Text-/Fuellzeile gleich hoch. */ .saleslist td { height: 40px; vertical-align: middle; } .saleslist .rimg { max-height: 28px; } .num { text-align: right; font-variant-numeric: tabular-nums; } .dist { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; } .dist .kpi { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 16px; } .kpi .v { font-size: 18px; color: var(--accent); } .kpi .k { font-size: 11px; color: var(--dim); } a { color: var(--accent); } .mods { color: var(--dim); font-size: 12px; } .err { color: var(--bad); } .hint { color: var(--dim); font-size: 12px; } .pos { color: var(--good); } .neg { color: var(--bad); } /* Marker fuer Basen ohne kalibrierte Gewichte (uniforme Gleichverteilung) */ .uncaltag { font-size: 11px; font-weight: 400; color: #d8a24a; border: 1px solid #d8a24a; border-radius: 4px; padding: 0 6px; margin-left: 8px; vertical-align: middle; cursor: help; } .basebar button.uncal { position: relative; } .uncalbadge { position: absolute; top: 1px; right: 3px; font-size: 11px; line-height: 1; color: #d8a24a; font-weight: 700; cursor: help; } .tabbar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .tabbar button { padding: 6px 16px; border-radius: 6px 6px 0 0; border-bottom: 2px solid transparent; } .tabbar button.active { color: var(--accent); border-bottom-color: var(--accent); } /* Platzhalter-Tabs (noch nicht gebaute Features) dezent abheben */ .tabbar button.soon { color: var(--dim); } .tabbar button.soon.active { color: var(--accent); } /* "not live yet"-Kachel im Discovery-Body: zentrierte Karte mit Praise-Button */ .soonbox { max-width: 520px; margin: 24px auto; padding: 28px 24px; text-align: center; background: var(--panel); border: 1px dashed var(--border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .soonbox h2 { margin: 4px 0; } .soonbox p { margin: 0; } .soonbox .primary { margin-top: 8px; } .soonbadge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--bg); background: var(--accent); font-weight: 700; } /* FAQ-Seite (durchsuchbar, kategorisiert; FAQ-KONZEPT.md) */ .faqbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .faqbar input { flex: 1; max-width: 420px; padding: 7px 10px; } .faqbar #faqcount { margin-left: auto; white-space: nowrap; } .faqcats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .faqcat-h { color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; margin: 16px 0 4px; } .faqitem { border-bottom: 1px solid var(--border); } .faqq { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; background: none; border: none; color: var(--text); padding: 10px 2px; cursor: pointer; font-size: 14px; font-family: inherit; } .faqq:hover { color: var(--accent); } .faqchev { color: var(--dim); transition: transform .15s; margin-top: 1px; } .faqitem.open .faqchev { transform: rotate(90deg); } .faqa { display: none; padding: 0 2px 12px 22px; } .faqitem.open .faqa { display: block; } .faqa p { margin: 6px 0; } .faqa ul { margin: 6px 0 6px 18px; padding: 0; } .faqa li { margin: 3px 0; } mark { background: rgba(91, 155, 255, .35); color: inherit; border-radius: 2px; padding: 0 1px; } .faqempty { text-align: center; padding: 26px 0; color: var(--dim); } .faqempty .primary { margin-top: 8px; } /* Total-sales-Chart: Legende ueber dem Chart (Linie = Div/Tag, Balken = Channel-%) */ .chlegend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--dim); margin-bottom: 6px; } .chlegend span { display: inline-flex; align-items: center; gap: 5px; } .chlegend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; opacity: .7; } .chlegend i.ln { width: 14px; height: 0; border-top: 2px solid var(--text); border-radius: 0; opacity: 1; } .basebar { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } .basebar button { padding: 5px 14px; border-radius: 8px; } /* Radius wie .fgroup, einheitliche Designsprache */ .basebar button img { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; margin: -4px 0; } .basebar button.active { color: var(--accent); border-color: var(--accent); } .basebar button.closed { opacity: .55; } /* geschlossene Projekte gedimmt */ /* Earnings: computed Box in Input-Geometrie (Wert oben, Kostenmarge darunter) */ .earnbox { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; width: 110px; min-height: 39px; box-sizing: border-box; padding: 3px 10px; display: flex; flex-direction: column; justify-content: center; line-height: 1.3; } .earnbox #earnval, .earnbox #hourval { font-size: 13px; } .earnbox #earnpct, .earnbox #hourpct { font-size: 10px; } .chip { display: inline-block; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 8px; margin: 1px 3px 1px 0; font-size: 12px; color: var(--text); } /* (P)/(S)-Affix-Marker am Mod-Chip: dezent, gedimmt */ .afx { color: var(--dim); font-size: 11px; font-weight: 600; } .baseicon { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; } /* Campaign-UID-Badge ueber dem Base-/Logo-Icon (CAMPAIGN-UID-KONZEPT.md) */ .campwrap { position: relative; display: inline-block; } .campuid { position: absolute; top: -5px; left: -6px; font-size: 10px; line-height: 1; font-weight: 700; padding: 1px 3px; border-radius: 6px; background: var(--accent); color: #0b1220; pointer-events: none; } .campuid-inline { position: static; top: auto; left: auto; display: inline-block; margin-right: 4px; } /* Archive-View: Typ-Chip je Kampagne (Craft/Farm), ARCHIVE-KONZEPT.md */ .archchip { display: inline-block; border-radius: 4px; padding: 1px 8px; font-size: 11px; border: 1px solid var(--border); color: var(--dim); } .archchip-craft { border-color: #7b9bff; color: #7b9bff; } .archchip-farm { border-color: #6fcf97; color: #6fcf97; } /* Tablet-Icon mit Rarity-Rahmen und Currency-Icons in den Craft-Wegen */ .rimg { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; border: 1px solid transparent; border-radius: 4px; padding: 1px; margin-right: 2px; } .rimg.r-rare { border-color: #e7c15a; } .rimg.r-magic { border-color: #7b9bff; } .rimg.r-normal { border-color: #e8edf5; } .cimg { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin: 0 1px; } /* Divine-Icon in einem Feld-Label (Earnings Base cost), auf Label-Groesse skaliert */ .lblico img { width: 14px; height: 14px; vertical-align: -2px; margin: 0; } td.modsel { cursor: pointer; } td.modsel:hover .chip { border-color: var(--dim); } td.modsel.sel .chip { border-color: var(--accent); color: var(--accent); } /* Discovery Lead-Mod-Gruppierung (DISCOVERY-GRUPPEN-KONZEPT.md): Kopfzeile je Lead-Mod, aufklappbare Partnerzeilen, Kombo-Praemien-Spalte Δ */ tr.grouphead { cursor: pointer; } tr.grouphead:hover td { background: var(--bg); } /* Chip-Hover analog zum 1-Mod-Tab (td.modsel): default normaler Rahmen, hell nur bei Mouseover */ tr.grouphead:hover .chip { border-color: var(--dim); } .gchev { color: var(--dim); font-size: 11px; margin-right: 4px; } .gcount { display: inline-block; border: 1px solid var(--border); border-radius: 10px; padding: 0 6px; font-size: 11px; color: var(--dim); vertical-align: 1px; } tr.gchild td.gpartner { padding-left: 22px; color: var(--dim); } /* Negatives Δ = der Partner zahlt nichts Messbares, Information, keine Warnung */ td.dltcell.dneg { color: var(--dim); } /* Demand-Badges (PLAN-PHASE3-DEMAND-UI.md): Tier je getrackter Kombi. Leere Zelle fuer Ungetracktes (Entscheid E1), measuring bewusst kontrastarm */ td.demcell { white-space: nowrap; } .dembadge { display: inline-block; border: 1px solid var(--border); border-radius: 10px; padding: 0 7px; font-size: 11px; line-height: 1.6; cursor: help; } .dembadge.dem-liquid { color: var(--good); border-color: var(--good); } .dembadge.dem-moving { color: var(--accent); border-color: var(--accent); } .dembadge.dem-stale { color: var(--bad); border-color: var(--bad); opacity: .8; } .dembadge.dem-measuring { color: var(--dim); } /* v3 (.442): ABGELEITET aus der Einzel-Mod-Nachfrage. Gestrichelt und halbtransparent, weil die Aussage eine Obergrenze ist und keine Messung dieser Kombi. Nie dieselbe Optik wie ein gemessenes Tier. */ .dembadge.dem-derived { opacity: .55; border-style: dashed; } /* Zweites Badge NEBEN dem Tier: Front billig, verifizierte Verkaeufe teuer. Eigene Farbe, weil es keine Nachfrage-Stufe ist, sondern ein Roll-Hinweis */ .dembadge.dem-roll { color: var(--warn, #e7c15a); border-color: var(--warn, #e7c15a); margin-left: 4px; } /* Sankey im Craft-Weg-Breakdown, skaliert auf Panelbreite */ .treewrap { padding: 4px 0; } .view { display: none; } .view.active { display: block; } button:disabled { opacity: .35; cursor: default; } button.ghost:disabled:hover, button.small:disabled:hover { color: var(--dim); } button.rxdisabled { cursor: not-allowed; } /* Regex-Export temporaer deaktiviert (PLAN-REGEX-DEAKTIVIEREN.md) */ input:disabled, select:disabled, textarea:disabled { opacity: .45; cursor: default; } /* geschlossene Projekte read-only */ /* Feature-Gates: gesperrte Views bleiben sichtbar, sind aber nicht bedienbar (inert + Grau) mit Watermark-Overlay. .featlockwrap traegt das Overlay */ .featlockwrap { position: relative; } /* .427: Bewertungs-Sterne (Hover fuellt bis zum Cursor, Klick bewertet) */ .ratestars { display: inline-flex; gap: 3px; cursor: pointer; font-size: 19px; line-height: 1; color: var(--border); user-select: none; } .ratestar { transition: color .12s ease, transform .12s ease; } .ratestar.hot { color: #e7c15a; transform: scale(1.12); } .featlock { opacity: .45; filter: grayscale(.7); user-select: none; } .featwm { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 5; pointer-events: none; } .featwm .wm { font-size: clamp(22px, 6vw, 64px); font-weight: 800; letter-spacing: .3em; color: var(--dim); opacity: .35; transform: rotate(-14deg); text-transform: uppercase; white-space: nowrap; } .featwm .note { margin-top: 10px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; max-width: 70%; } .nav-item.featoff .lbl, .nav-item.featoff .ico { opacity: .55; } .featchip { font-size: 11px; font-weight: 400; color: var(--bad); border: 1px solid var(--bad); border-radius: 10px; padding: 1px 8px; margin-left: 10px; vertical-align: 3px; opacity: .8; } .tristate { cursor: pointer; text-align: center; min-width: 26px; user-select: none; } /* Kreis-Badge (.300): Zahl im Kreis statt " (n)"-Text, generisch fuer Sidebar-Zaehler (#ntfbadge, spaeter ggf. #fbbadge). Leer = unsichtbar per :empty (kein JS-Toggle), Cap "99+" setzt updateNotifBadge. Dunkle Textfarbe auf der Accent-Flaeche (weiss haette auf #5b9bff zu wenig Kontrast). */ .cntbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px; border-radius: 999px; background: var(--accent); color: var(--bg); /* .320 (nach .319-Fehlversuch mit -4px, der senkte den Kreis WEITER): vertical-align mit Laenge haengt an der Box-Baseline und ist bei inline-flex fontmetrik-abhaengig. Stattdessen middle als Anker plus deterministischer relative-Nudge nach OBEN. top ist der EINE Stellknopf, negativer = hoeher */ font-size: 10px; font-weight: 700; line-height: 1; vertical-align: middle; position: relative; top: -1.5px; } .cntbadge:empty { display: none; } /* Notifications-Panel (Dropdown an der Sidebar, kein eigener View) */ #ntfpanel { position: fixed; left: 214px; top: 64px; width: 360px; max-height: 70vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; z-index: 90; box-shadow: 0 10px 32px rgba(0,0,0,.55); } body.sb-collapsed #ntfpanel { left: 66px; } .ntfrow { display: flex; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--border); cursor: pointer; align-items: flex-start; font-size: 13px; } .ntfrow:hover { background: var(--bg); } .ntfrow.readn { opacity: .55; } .ntfrow .ntfbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ntfrow .ntfmeta { font-size: 11px; color: var(--dim); } .ntfrow .ntfmeta b { color: var(--text); font-weight: 600; } .ntfrow .ntfmeta .nstars { font-size: 10px; vertical-align: baseline; } .ntfrow .t { color: var(--dim); margin-left: auto; font-size: 11px; white-space: nowrap; } .ntfrow .ntfdel { color: var(--dim); font-size: 12px; padding: 0 2px; line-height: 1.3; opacity: 0; transition: opacity .1s; } .ntfrow:hover .ntfdel { opacity: .7; } .ntfrow .ntfdel:hover { opacity: 1; color: #d66; } /* dataTable-Framework (BULK-TABLES-KONZEPT.md): Scroll-Frame + Pin-Zeilen */ /* Early-Alpha-Watermark (.161): fix oben rechts, fett, blockiert nichts */ #alphamark { position: fixed; top: 10px; right: 16px; z-index: 200; pointer-events: none; font-weight: 800; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: #e7c15a; opacity: .55; transform: rotate(-2deg); text-shadow: 0 1px 4px rgba(0,0,0,.6); } #alphamark a { pointer-events: auto; color: inherit; text-decoration: none; cursor: pointer; } #alphamark a:hover { opacity: 1; text-decoration: underline; } #onboardbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 400; max-width: 660px; width: calc(100% - 40px); background: var(--panel); border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.5); } #onboardbar .ob-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; font-size: 13px; line-height: 1.5; color: var(--text); } #onboardbar a { color: var(--accent); cursor: pointer; } #onboardbar button { margin-left: auto; } .dtscroll { overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; } .dtscroll thead th { position: sticky; top: 0; background: var(--panel); z-index: 2; } /* .419 (Gustav): Attention = NUR der gelbe Balken links, KEINE Hintergrund-Toenung mehr. Balken als Pseudo-Element statt border-left, damit er am Parent mit einer kleinen Luecke starten kann — so laeuft der Strich nie ueber mehrere Parents durch */ tr.dtpin td:first-child, tr.dtchild td:first-child, tr.dtgrp td:first-child { position: relative; } tr.dtpin td:first-child::before, tr.dtchild td:first-child::before, tr.dtgrp td:first-child::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #5b8def; } /* Attention-Zeile: Balken gelb (gewinnt per Reihenfolge, auch auf Kindern) */ tr.dtpin td:first-child::before { background: #e7c15a; } /* Luecke ueber jedem Gruppen-Parent (gilt auch fuer gepinnte Parents) */ tr.dtgrp td:first-child::before { top: 5px; } /* .408/.409: Kind-Zeilen (Gebote) einer Build-Gruppe — kleiner, getoente Flaeche: klar als Gebot zum darueberstehenden Parent erkennbar */ tr.dtchild { font-size: 11.5px; background: rgba(91, 155, 255, .06); } tr.dtchild td { padding-top: 3px; padding-bottom: 3px; } .dot-on { display:inline-block; width:8px; height:8px; border-radius:50%; background: var(--good); margin-right:6px; } .dot-off { display:inline-block; width:8px; height:8px; border-radius:50%; background: var(--border); margin-right:6px; } .dot-black { display:inline-block; width:8px; height:8px; border-radius:50%; background:#111; border:1px solid var(--border); margin-right:6px; } /* Login-Overlay */ .overlay { position: fixed; inset: 0; background: rgba(5, 9, 18, .82); z-index: 100; display: flex; align-items: center; justify-content: center; } .authbox { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 28px 30px; width: 320px; } .authbox h2 { margin-top: 0; } .authbox input { width: 100%; margin-bottom: 10px; } /* Signup-Hinweiskasten (.275): auffaellig, aber im Stil des Panels. Accent-Rand links, leicht getoenter Hintergrund, nur im register-Modus sichtbar (core.js togglet). */ .signupnote { background: rgba(91, 155, 255, .10); border: 1px solid var(--accent); border-left: 3px solid var(--accent); border-radius: 6px; padding: 10px 12px; margin: 2px 0 12px; } .signupnote-h { color: var(--accent); font-weight: 600; font-size: 13px; margin-bottom: 4px; } .signupnote-b { color: var(--text); font-size: 12px; line-height: 1.45; } /* Feedback-Dialog: breiter als das Login-Fenster und Auswahl-Buttons umbrechen, sonst schneiden die Concerns-Buttons ueber den 320px-Rand hinaus ab. */ #fboverlay .authbox { width: 480px; max-width: 92vw; max-height: 88vh; overflow-y: auto; } #fbcats, #fbfeats { flex-wrap: wrap; } /* Order-Thread + Report (BULK-MESSAGES-KONZEPT.md): Panel unter der Transactions- Tabelle, Timeline im Messenger-Stil (.283): Bubbles schrumpfen auf die Textbreite (fit-content, WhatsApp/iMessage), eigene rechts BUENDIG mit dem Composer, fremde links, System-Zeilen kursiv mittig. Composer = Eingabe in voller Breite + kompakter Enter-Send, Propose-Button gleiche Hoehe. */ /* .387: Thread als RECHTER DRAWER (fixed, bildschirmhoch) statt unter der Tabelle — bei langen Transaktionslisten ging der Chat sonst unter. display kommt aus dem Stylesheet (flex), index.html haelt nur das initiale inline display:none, renderThreadPanel togglet auf ''. */ #txthread { position: fixed; top: 0; right: 0; height: 100vh; width: min(460px, 96vw); z-index: 60; margin: 0; display: flex; flex-direction: column; border: none; border-left: 1px solid var(--border); border-radius: 0; padding: 12px 16px; background: var(--bg); box-shadow: -12px 0 28px rgba(0, 0, 0, .45); overflow-y: auto; } /* Nachrichtenliste fuellt die Drawer-Hoehe, Composer bleibt unten */ .msgtl { flex: 1 1 auto; min-height: 60px; max-height: none; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* .285: Chat-Scrollbar in Designfarben (der weisse System-Balken passte nicht) */ .msgtl::-webkit-scrollbar { width: 8px; } .msgtl::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .msgtl::-webkit-scrollbar-thumb:hover { background: var(--dim); } .msgtl::-webkit-scrollbar-track { background: transparent; } .msgrow { padding: 5px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); font-size: 12.5px; width: fit-content; max-width: 78%; align-self: flex-start; /* .391: mehrzeilige/lange Nachrichten umbrechen statt abschneiden */ white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; } .msgrow.mine { align-self: flex-end; border-color: var(--accent); margin-right: 0; } .msgsys { align-self: center; font-size: 11.5px; } .msgcomp { display: flex; gap: 8px; align-items: stretch; } .msgcomp input { flex: 1; padding: 5px 10px; height: 34px; box-sizing: border-box; } /* .284: Send (⏎) und Propose handoff exakt gleich gross (Hoehe, Padding, Line-Height), nur der Glyph des Send-Buttons ist groesser */ .msgsend, .msgprop { width: auto !important; height: 34px; box-sizing: border-box; padding: 0 14px !important; line-height: 32px; flex: none; } .msgsend { font-size: 16px; } .msgprop { font-size: 12px; } #rptoverlay .authbox, #cxloverlay .authbox { width: 480px; max-width: 92vw; max-height: 88vh; overflow-y: auto; } /* Playbooks (PLAYBOOKS-KONZEPT.md): Index-Karten + Schritt-Karten + Beweisblock. Optik lehnt an bestehende Muster an: Karten = Panel-Look, Vertrauens-/Banner- Kaesten = Signup-Note-Look (Accent-Rand links). */ .pb-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 12px; max-width: 720px; cursor: pointer; background: var(--panel); } .pb-card:hover { border-color: var(--accent); } .pb-cardbody { padding: 12px 16px 14px; } /* Karten-Banner (.328): Gradient in Site-Palette, Base-Icon (gehotlinktes GGG-Art wie in Basebar/Kacheln) gross rechts, Outcome-Zeile links unten */ .pb-cardbanner { position: relative; height: 92px; overflow: hidden; background: linear-gradient(105deg, rgba(91,155,255,.16), rgba(231,193,90,.12) 60%, rgba(231,193,90,.22)); border-bottom: 1px solid var(--border); } /* Hintergrund = dasselbe Base-Art, riesig + geblurrt (Temple-Textur ohne vendored Assets); das scharfe Icon liegt obenauf */ .pb-cardbg { position: absolute; inset: -40%; width: 180%; height: 180%; object-fit: cover; filter: blur(18px) saturate(1.3); opacity: .5; } .pb-cardico { position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(-6deg); height: 72px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); } .pb-cardoutcome { position: absolute; left: 16px; bottom: 10px; font-weight: 700; font-size: 16px; color: var(--good, #4caf78); text-shadow: 0 1px 4px rgba(0,0,0,.6); } .pb-cardtitle { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; } /* Outcome-Hero im Detail (.328): Ergebnis zuerst, gross */ .pb-hero { border: 1px solid var(--border); border-left: 3px solid var(--good, #4caf78); border-radius: 8px; background: var(--panel); padding: 14px 18px; margin-bottom: 14px; max-width: 720px; } .pb-herohead { font-size: 21px; font-weight: 700; color: var(--good, #4caf78); } .pb-herosub { font-size: 12.5px; color: var(--dim); margin-top: 4px; line-height: 1.5; } /* Autor (.328): NUR Avatar + Name */ .pb-author { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dim); margin-right: 4px; } .pb-author img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); } .pb-author b { color: var(--text); font-weight: 600; } /* Upvote-Pill (.328): 1 Vote je User (Server), gefuellt = selbst gestimmt */ .pb-vote { border: 1px solid var(--border); background: none; color: var(--dim); border-radius: 999px; padding: 2px 10px; font-size: 11.5px; cursor: pointer; } .pb-vote:hover { border-color: var(--accent); color: var(--text); } .pb-vote.voted { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; } /* Flow-Zeilen (.330): Klick-Rezept als Pill-Kette mit Currency-/Base-Icons */ .pb-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 7px 0; } .pb-flownode { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; font-size: 12px; white-space: nowrap; } .pb-flownode.pb-flowgood { border-color: var(--good, #4caf78); color: var(--good, #4caf78); } .pb-flowarr { color: var(--dim); } .pb-flowico { height: 18px; } /* Balken-Chart in Schritt-Texten (.329, ersetzt die redundante Tabelle) */ .pb-chart { display: block; width: 100%; max-width: 580px; margin: 10px auto; } /* Zahlen-Tabelle in Schritt-Texten (.328, fuer kuenftige Playbooks) */ .pb-tbl { border-collapse: collapse; margin: 10px 0; font-size: 12px; } .pb-tbl th, .pb-tbl td { border: 1px solid var(--border); padding: 4px 10px; text-align: right; } .pb-tbl th:first-child, .pb-tbl td:first-child { text-align: left; } .pb-tbl th { color: var(--dim); font-weight: 600; background: var(--bg); } .pb-draft { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #e7c15a; border: 1px solid #e7c15a; border-radius: 4px; padding: 1px 6px; vertical-align: middle; margin-left: 6px; } .pb-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .pb-chip { font-size: 11px; color: var(--dim); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .pb-back { display: inline-block; color: var(--accent); cursor: pointer; font-size: 12.5px; margin-bottom: 10px; } /* Intro-Zeile der Uebersicht: auf Kachelbreite umbrechen (.333) */ #view-playbooks #pbsub { max-width: 720px; margin-bottom: 12px; } .pb-sharerow { display: flex; gap: 8px; margin-top: 10px; } .pb-sharebtn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); color: var(--dim); border-radius: 999px; padding: 4px 12px; font-size: 11.5px; cursor: pointer; } .pb-sharebtn:hover { border-color: var(--accent); color: var(--text); } .pb-sharebtn svg { flex: none; } .pb-back:hover { text-decoration: underline; } .pb-head h3 { margin: 0 0 4px; } .pb-head { margin-bottom: 14px; } .pb-banner { background: rgba(231, 193, 90, .08); border: 1px solid #e7c15a; border-left: 3px solid #e7c15a; border-radius: 6px; padding: 8px 12px; margin: 0 0 12px; max-width: 720px; font-size: 12.5px; line-height: 1.5; } /* Detail-Kopf: Zurueck-Link links, Saettigungs-Warnung oben rechts (.pb-warn). flex-wrap laesst die Warnung auf schmalen Screens unter den Link rutschen. */ .pb-toprow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 720px; } .pb-toprow .pb-back { margin-bottom: 0; } .pb-warn { margin-left: auto; max-width: 320px; display: flex; gap: 8px; background: rgba(231, 193, 90, .08); border: 1px solid #e7c15a; border-left: 3px solid #e7c15a; border-radius: 6px; padding: 8px 11px; font-size: 11.5px; line-height: 1.45; color: var(--dim); } .pb-warnico { flex: none; color: #e7c15a; font-weight: 700; } .pb-pubdate { font-size: 11px; color: var(--dim); align-self: center; } .pb-step { display: flex; gap: 14px; border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; max-width: 720px; background: var(--panel); } .pb-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--bg); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; } .pb-stepmain { min-width: 0; flex: 1; } .pb-steph { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; } .pb-steptext { font-size: 12.5px; line-height: 1.55; color: var(--text); margin-bottom: 8px; } .pb-steptext p { margin: 0 0 8px; } .pb-steptext p:last-child { margin-bottom: 0; } .pb-img { max-width: 100%; border: 1px solid var(--border); border-radius: 6px; display: block; margin: 0 0 8px; } /* Screenshot-Rahmen (.342): Fake-Fenster mit Titelleiste, grenzt Captures vom bedienbaren UI ab (gleiche Palette verleitete zum Klicken ins Bild) */ .pb-shot { margin: 8px 0; border: 1px solid var(--dim); border-radius: 8px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.45); max-width: 100%; } .pb-shotbar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; background: var(--border); } .pb-shotbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); opacity: .7; } .pb-shotbar em { margin-left: auto; font-style: normal; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); } .pb-shot img { display: block; max-width: 100%; height: auto; margin: 0; filter: saturate(.85) brightness(.93); } .pb-imgpend { border: 1px dashed var(--border); border-radius: 6px; padding: 18px; text-align: center; margin: 0 0 8px; } .pb-trust { background: rgba(91, 155, 255, .10); border: 1px solid var(--accent); border-left: 3px solid var(--accent); border-radius: 6px; padding: 10px 14px; margin: 0 0 12px; max-width: 720px; font-size: 12.5px; line-height: 1.55; } .pb-trust b { color: var(--accent); display: block; margin-bottom: 4px; } .pb-proof { border: 1px solid var(--border); border-left: 3px solid var(--good, #4caf78); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; max-width: 720px; background: var(--panel); } /* Services (.358, PLAN-SERVICES.md): Kategorie-Chip in Markt-/Hub-Zeilen */ .svcchip { display: inline-block; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--accent); color: var(--accent); font-size: 11px; font-weight: 600; } /* Markets-Submenu (.364): zwei Kind-Eintraege unter dem Markets-Item, offen solange der Markt-View aktiv ist. Im eingeklappten Zustand unsichtbar (52px-Rail zeigt nur Icons). Aktives Kind = gewaehltes Markt-Segment. */ .nav-sub { display: none; } .nav-sub.open { display: block; } .sidebar.collapsed .nav-sub { display: none !important; } /* .370: Kinder EINGERUECKT — der Accent-Balken (border-left des .active) sitzt damit auf der Sub-Ebene statt ganz links an der Sidebar-Kante */ .nav-sub .nav-item { margin-left: 30px; padding: 4px 16px 4px 16px; font-size: 13px; } @media (pointer: coarse) { .nav-sub .nav-item { padding: 8px 16px; } } .navcaret { font-size: 10px; margin-left: 6px; opacity: .7; } /* Order-Success-Panel (.383): ersetzt das Place-Order-Formular nach dem Listing */ .sucwrap { text-align: center; padding: 26px 12px 18px; } .sucico { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(70, 180, 100, .15); border: 1px solid #46b464; color: #46b464; font-size: 24px; font-weight: 700; } /* .388: solange der Thread-Drawer offen ist, raeumen die beiden fixen Top-Right-Elemente (Alpha-Watermark z200, Feedback-Sprechblase z80) die rechte Kante — sie laegen sonst UEBER dem Drawer (z60) */ body.threadopen #alphamark, body.threadopen #fbbtn { display: none !important; }