/* ===================================================================== openbi.Studio — Designsystem Grundfassung „Tageslicht", Nachtmodus „Stellwerk". Eine Datei, alle Werte als Variablen. Kein Stil in Seiten und Vorlagen. Fassung 1 · 24.08.2026 · Rolle openbistudio-neu Version im Dateinamen, weil auf Webdateien kein Cache-Control liegt. Alle eigenen Klassen tragen das Präfix obs-. Ohne Präfix bleiben nur die Klassen der globalen Systemvorlagen (btn, btn-primary, btn-ghost, obs-konto) — siehe Abschnitt 10. ===================================================================== */ /* ============================================================ openbi.Studio — Designsystem Grundfassung „Tageslicht": kühles Porzellan, Tinte, Ultramarin. Nachtmodus „Stellwerk": lackiertes Petrol, Emailschild-Elfenbein, Signalbernstein. Gleiche Typografie, gleiche Radien, gleiche Dichte — nur andere Farbwerte. Ein System, zwei Fassungen. ============================================================ */ :root{ --ground:#ECF0F2; --ground-2:#E2E8EB; --panel:#FFFFFF; --panel-2:#F4F7F8; --panel-3:#E7EDF0; --line:#D5DEE2; --line-2:#B9C6CC; --ink:#0F1A20; --ink-2:#4C5D66; --ink-3:#7B8C95; --accent:#2A3BE0; --accent-ink:#FFFFFF; --accent-soft:rgba(42,59,224,.09); --ok:#0E8A5F; --ok-soft:rgba(14,138,95,.11); --warn:#B4740A; --warn-soft:rgba(180,116,10,.12); --crit:#C0392B; --crit-soft:rgba(192,57,43,.10); --info:#0F6E92; --info-soft:rgba(15,110,146,.11); --lock:#7B8C95; --rail-bg:#FFFFFF; --frame-bg:#DCE4E8; --shadow-card:0 1px 2px rgba(19,40,55,.05); --lift:0 14px 34px rgba(19,40,55,.13); --scrim:rgba(23,44,58,.42); --grid-line:rgba(19,40,55,.07); --c1:#2A3BE0; --c2:#0F6E92; --c3:#6A4FCF; --c4:#B4740A; --c5:#8A97A0; --f-display:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif; --f-ui:'Instrument Sans',system-ui,sans-serif; --f-label:'Instrument Sans',system-ui,sans-serif; --f-mono:'Spline Sans Mono',ui-monospace,monospace; --label-tt:none; --label-ls:.005em; --label-fw:600; --label-fs:12px; --display-ls:-0.028em; --display-fw:700; --r-card:13px; --r-sm:8px; --r-pill:999px; --bw:1px; --pad:18px; --pad-lg:24px; --row-h:40px; --gap:16px; } /* Nachtmodus — nur Farben. Ungestempelte Dokumente folgen dem System. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground:#132126; --ground-2:#0E1A1E; --panel:#1A2C33; --panel-2:#213A43; --panel-3:#294652; --line:#2C4551; --line-2:#3D5D6B; --ink:#EFE9DC; --ink-2:#A6BBC2; --ink-3:#76919B; --accent:#F3A536; --accent-ink:#1A1206; --accent-soft:rgba(243,165,54,.15); --ok:#46B87C; --ok-soft:rgba(70,184,124,.15); --warn:#F3A536; --warn-soft:rgba(243,165,54,.15); --crit:#E2573F; --crit-soft:rgba(226,87,63,.16); --info:#67AEDA; --info-soft:rgba(103,174,218,.16); --lock:#8C9EA6; --rail-bg:#0E1A1E; --frame-bg:#0A1215; --shadow-card:inset 0 1px 0 rgba(255,255,255,.055); --lift:0 10px 30px rgba(0,0,0,.45); --scrim:rgba(6,14,17,.66); --grid-line:rgba(255,255,255,.06); --c1:#F3A536; --c2:#67AEDA; --c3:#9B87E8; --c4:#E0C36A; --c5:#8FA6AE; } } :root[data-theme="dark"]{ --ground:#132126; --ground-2:#0E1A1E; --panel:#1A2C33; --panel-2:#213A43; --panel-3:#294652; --line:#2C4551; --line-2:#3D5D6B; --ink:#EFE9DC; --ink-2:#A6BBC2; --ink-3:#76919B; --accent:#F3A536; --accent-ink:#1A1206; --accent-soft:rgba(243,165,54,.15); --ok:#46B87C; --ok-soft:rgba(70,184,124,.15); --warn:#F3A536; --warn-soft:rgba(243,165,54,.15); --crit:#E2573F; --crit-soft:rgba(226,87,63,.16); --info:#67AEDA; --info-soft:rgba(103,174,218,.16); --lock:#8C9EA6; --rail-bg:#0E1A1E; --frame-bg:#0A1215; --shadow-card:inset 0 1px 0 rgba(255,255,255,.055); --lift:0 10px 30px rgba(0,0,0,.45); --scrim:rgba(6,14,17,.66); --grid-line:rgba(255,255,255,.06); --c1:#F3A536; --c2:#67AEDA; --c3:#9B87E8; --c4:#E0C36A; --c5:#8FA6AE; } *{box-sizing:border-box} body{ margin:0; background:var(--frame-bg); color:var(--ink); font-family:var(--f-ui); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; } button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent); outline-offset:2px} @media (prefers-reduced-motion: no-preference){ .obs-tr{transition:background-color .14s ease,color .14s ease,border-color .14s ease,transform .14s ease} } .obs-mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums} .obs-num{font-variant-numeric:tabular-nums} .obs-lbl{ font-family:var(--f-label); font-size:var(--label-fs); font-weight:var(--label-fw); letter-spacing:var(--label-ls); text-transform:var(--label-tt); color:var(--ink-3); } /* ---------- App-Gerüst ---------- */ .obs-app{display:grid; grid-template-columns:206px 1fr; min-height:760px} .obs-rail{ background:var(--rail-bg); border-right:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; gap:22px; } .obs-logo{display:flex; align-items:center; gap:9px; padding:0 4px} .obs-logo-mark{ width:26px; height:26px; border-radius:var(--r-sm); background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:14px; } .obs-logo b{font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls); font-size:15px} .obs-navgroup{display:flex; flex-direction:column; gap:2px} .obs-navgroup .obs-lbl{padding:0 6px 6px} .obs-nav{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:var(--r-sm); background:none; border:0; width:100%; text-align:left; cursor:pointer; color:var(--ink-2); font-size:13px; font-weight:500; position:relative; } .obs-nav:hover{background:var(--panel); color:var(--ink)} .obs-nav[aria-current="page"]{background:var(--accent-soft); color:var(--accent); font-weight:600} .obs-nav .obs-ic{width:16px; height:16px; flex:none; opacity:.9} .obs-nav .obs-cnt{margin-left:auto; font-family:var(--f-mono); font-size:11px; color:var(--ink-3)} .obs-rail-foot{margin-top:auto; display:flex; flex-direction:column; gap:8px; padding:0 4px} .obs-workspace{display:flex; flex-direction:column; min-width:0} .obs-topbar{ display:flex; align-items:center; gap:14px; padding:11px 18px; border-bottom:1px solid var(--line); background:var(--panel); } .obs-org{ display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 10px; cursor:pointer; font-size:12.5px; font-weight:500; } .obs-org svg{opacity:.6} .obs-topbar-right{margin-left:auto; display:flex; align-items:center; gap:14px} .obs-credit{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15} .obs-credit b{font-family:var(--f-mono); font-size:13px; font-weight:500} .obs-avatar{ width:30px; height:30px; border-radius:var(--r-pill); background:var(--panel-3); border:1px solid var(--line-2); display:grid; place-items:center; font-family:var(--f-label); font-size:11px; font-weight:700; letter-spacing:.04em; } /* ---------- Screen-Grundlagen ---------- */ .obs-screen{display:none; padding:22px 24px 34px; min-width:0} .obs-screen.obs-on{display:block} .obs-screen.obs-flush{padding:0} .obs-head{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px} .obs-head h1{ margin:0; font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls); font-size:30px; line-height:1.08; text-wrap:balance; } .obs-head p{margin:5px 0 0; color:var(--ink-2); font-size:13px; max-width:62ch} .obs-head .obs-grow{margin-left:auto; display:flex; gap:8px; align-items:center} /* ---------- Knöpfe ---------- */ .btn{ display:inline-flex; align-items:center; gap:7px; border-radius:var(--r-sm); cursor:pointer; border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink); padding:0 13px; height:32px; font-size:13px; font-weight:600; font-family:var(--f-label); letter-spacing:.005em; white-space:nowrap; } .btn:hover{background:var(--panel-3)} .btn.obs-pri{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)} .btn.obs-pri:hover{filter:brightness(1.07)} .btn.obs-ghost{background:transparent; border-color:transparent; color:var(--ink-2)} .btn.obs-ghost:hover{background:var(--panel-2); color:var(--ink)} .btn.obs-danger{border-color:var(--crit); color:var(--crit); background:var(--crit-soft)} .btn.obs-sm{height:26px; padding:0 9px; font-size:12px} .btn[disabled]{opacity:.45; cursor:not-allowed} .btn.obs-busy{background:var(--warn-soft); border-color:var(--warn); color:var(--warn); cursor:progress; opacity:1} .btn.obs-busy .obs-sq{width:8px; height:8px; background:currentColor; border-radius:1px} .btn.obs-arm{background:var(--warn-soft); border-color:var(--warn); color:var(--warn)} /* ---------- Plaketten ---------- */ .obs-pill{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill); padding:2px 9px; font-family:var(--f-label); font-size:11.5px; font-weight:600; border:1px solid transparent; letter-spacing:.005em; white-space:nowrap; } .obs-pill .obs-dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none} .obs-pill.obs-ok{background:var(--ok-soft); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 35%,transparent)} .obs-pill.obs-warn{background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 35%,transparent)} .obs-pill.obs-crit{background:var(--crit-soft); color:var(--crit); border-color:color-mix(in srgb,var(--crit) 35%,transparent)} .obs-pill.obs-info{background:var(--info-soft); color:var(--info); border-color:color-mix(in srgb,var(--info) 35%,transparent)} .obs-pill.obs-mute{background:var(--panel-2); color:var(--ink-3); border-color:var(--line)} .obs-pill.obs-lock{background:var(--panel-2); color:var(--lock); border-color:var(--line)} /* ---------- Karten / Platten ---------- */ .obs-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); } .obs-card-h{ display:flex; align-items:center; gap:10px; padding:var(--pad) var(--pad-lg); border-bottom:1px solid var(--line); } .obs-card-h h2{margin:0; font-family:var(--f-display); font-size:15px; font-weight:var(--display-fw); letter-spacing:var(--display-ls)} .obs-card-h .obs-grow{margin-left:auto; display:flex; gap:8px; align-items:center} .obs-card-b{padding:var(--pad-lg)} /* ---------- Kennzahlen ---------- */ .obs-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--gap); margin-bottom:var(--gap)} .obs-kpi{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--pad) var(--pad-lg) calc(var(--pad) + 2px); box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:5px; min-width:0; } .obs-kpi b{ font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls); font-size:33px; line-height:1; font-variant-numeric:tabular-nums; } .obs-kpi small{font-size:11.5px; color:var(--ink-3)} .obs-kpi.obs-unmeasured{ background: repeating-linear-gradient(135deg,transparent 0 7px,color-mix(in srgb,var(--line) 55%,transparent) 7px 8px), var(--panel); } .obs-kpi.obs-unmeasured b{color:var(--ink-3); font-weight:400} .obs-kpi.obs-unmeasured small{color:var(--ink-3)} .obs-kpi .obs-why{ align-self:flex-start; font-family:var(--f-label); font-size:10.5px; letter-spacing:.04em; text-transform:var(--label-tt); color:var(--info); border:1px dashed color-mix(in srgb,var(--info) 45%,transparent); border-radius:var(--r-pill); padding:1px 7px; background:var(--info-soft); } /* ---------- Balken ---------- */ .obs-bar{height:6px; border-radius:var(--r-pill); background:var(--panel-3); overflow:hidden; display:flex} .obs-bar i{display:block; height:100%; background:var(--accent)} .obs-bar i.obs-ok{background:var(--ok)} .obs-bar i.obs-warn{background:var(--warn)} .obs-bar i.obs-crit{background:var(--crit)} .obs-bar i.obs-rest{background:color-mix(in srgb,var(--accent) 30%,transparent)} .obs-barwrap{display:flex; flex-direction:column; gap:6px; min-width:0} .obs-barwrap .obs-row{display:flex; align-items:baseline; gap:8px; font-size:12px; color:var(--ink-2)} .obs-barwrap .obs-row b{font-family:var(--f-mono); font-weight:500; color:var(--ink); font-size:12.5px} .obs-barwrap .obs-row .obs-grow{margin-left:auto} /* ---------- Landschaftskarten ---------- */ .obs-lands{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(430px,1fr)); align-items:start} .obs-land{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); display:flex; flex-direction:column; overflow:hidden; } .obs-land-h{display:flex; align-items:flex-start; gap:10px; padding:var(--pad) var(--pad-lg) 12px} .obs-land-h h3{ margin:0; font-family:var(--f-display); font-size:16.5px; font-weight:var(--display-fw); letter-spacing:var(--display-ls); line-height:1.2; font-size:18px; } .obs-land-h .obs-sub{margin-top:3px; font-size:12px; color:var(--ink-3); display:flex; gap:7px; align-items:center; flex-wrap:wrap} .obs-land-h .obs-grow{margin-left:auto; display:flex; gap:6px; align-items:center; flex:none} .obs-sys{ display:grid; grid-template-columns:118px 1fr 92px auto; align-items:center; gap:12px; padding:9px var(--pad-lg); border-top:1px solid var(--line); min-height:var(--row-h); } .obs-sys:hover{background:var(--panel-2)} .obs-sys-name{display:flex; align-items:center; gap:7px; min-width:0} .obs-sys-tag{ width:8px; height:8px; border-radius:50%; background:var(--info); flex:none; } .obs-sys[data-role="entwicklung"] .obs-sys-tag{background:var(--info)} .obs-sys[data-role="qs"] .obs-sys-tag{background:var(--warn)} .obs-sys[data-role="produktiv"] .obs-sys-tag{background:var(--ok)} .obs-sys-name b{font-family:var(--f-label); font-size:12px; font-weight:600; letter-spacing:.01em} .obs-sys-host{font-family:var(--f-mono); font-size:11.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .obs-sys-visits{display:flex; align-items:center; gap:8px; justify-content:flex-end} .obs-sys-visits b{font-family:var(--f-mono); font-size:12px; font-variant-numeric:tabular-nums} .obs-spark{display:block; flex:none} .obs-sys-acts{display:flex; gap:5px; opacity:.72} .obs-sys:hover .obs-sys-acts{opacity:1} .obs-land-f{ margin-top:auto; padding:11px var(--pad-lg); border-top:1px solid var(--line); background:var(--panel-2); display:flex; align-items:center; gap:12px; } .obs-land-f .obs-barwrap{flex:1} /* Bereitstellungskette in der Karte */ .obs-chainwrap{padding:13px var(--pad-lg) 14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px} .obs-chain{display:flex; align-items:center; gap:3px} .obs-chain i{flex:1; height:5px; border-radius:2px; background:var(--panel-3); display:block; min-width:6px} .obs-chain i.obs-done{background:var(--ok)} .obs-chain i.obs-now{background:var(--warn); box-shadow:0 0 0 2px var(--warn-soft)} .obs-chaincap{display:flex; align-items:baseline; gap:8px; font-size:12px; color:var(--ink-2); flex-wrap:wrap} .obs-chaincap b{font-family:var(--f-mono); font-size:12px; color:var(--ink)} .obs-chaincap .obs-rest{margin-left:auto; color:var(--ink-3)} .obs-waitbox{ margin:0 var(--pad-lg) var(--pad); padding:9px 12px; border-radius:var(--r-sm); background:var(--info-soft); border:1px solid color-mix(in srgb,var(--info) 30%,transparent); font-size:12.5px; color:var(--ink); display:flex; gap:9px; align-items:flex-start; } .obs-waitbox b{color:var(--info); font-family:var(--f-label); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; flex:none; padding-top:2px} /* ---------- Leerzustand ---------- */ .obs-empty{ border:1px dashed var(--line-2); border-radius:var(--r-card); padding:22px 24px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px; background:var(--panel-2); } .obs-empty > .obs-t{display:flex; flex-direction:column; gap:7px; align-items:flex-start; min-width:0; flex:1} .obs-empty .obs-acts{display:flex; gap:8px; flex:none; margin-left:auto} .obs-empty h4{margin:0; font-family:var(--f-display); font-size:15px; font-weight:var(--display-fw)} .obs-empty p{margin:0; color:var(--ink-2); font-size:13px; max-width:56ch} /* ---------- Builder ---------- */ .obs-builder{display:grid; grid-template-columns:minmax(360px,432px) 1fr; min-height:718px} .obs-bl{border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0; background:var(--panel)} .obs-br{display:flex; flex-direction:column; min-width:0; background:var(--ground)} .obs-ctx{ display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; background:var(--panel-2); } .obs-ctx .obs-grow{margin-left:auto; display:flex; gap:8px; align-items:center} .obs-feat{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--accent); background:var(--accent-soft); border-radius:var(--r-sm); padding:4px 10px; font-size:12.5px; } .obs-feat .obs-id{font-family:var(--f-mono); font-weight:500; color:var(--accent)} .obs-feat.obs-locked{border-color:var(--line-2); background:var(--panel-3); color:var(--ink-2)} .obs-feat.obs-locked .obs-id{color:var(--lock)} .obs-chat{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:16px} .obs-msg{display:flex; flex-direction:column; gap:7px; max-width:100%} .obs-msg .obs-who{display:flex; align-items:center; gap:7px} .obs-msg .obs-who .obs-lbl{color:var(--ink-2)} .obs-msg.obs-me .obs-bubble{ background:var(--panel-3); border:1px solid var(--line); border-radius:var(--r-card); padding:10px 13px; font-size:13.5px; } .obs-msg.obs-ai .obs-bubble{font-size:13.5px; line-height:1.55; color:var(--ink)} .obs-msg.obs-ai .obs-bubble p{margin:0 0 8px} .obs-msg.obs-ai .obs-bubble p:last-child{margin:0} .obs-aimark{ font-family:var(--f-label); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line); border-radius:var(--r-pill); padding:1px 6px; } .obs-tools{display:flex; flex-direction:column; gap:4px; margin-top:2px} .obs-tool{ display:flex; align-items:center; gap:8px; padding:5px 10px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line); font-size:12px; min-width:0; } .obs-tool .obs-tick{color:var(--ok); flex:none} .obs-tool b{font-weight:600} .obs-tool .obs-obj{font-family:var(--f-mono); font-size:11.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .obs-tool .obs-ms{margin-left:auto; font-family:var(--f-mono); font-size:11px; color:var(--ink-3); flex:none} .obs-ask{ border:1px solid var(--accent); border-left-width:3px; background:var(--accent-soft); border-radius:var(--r-sm); padding:12px 14px; display:flex; flex-direction:column; gap:10px; } .obs-ask p{margin:0; font-size:13.5px} .obs-ask .obs-opts{display:flex; gap:8px; flex-wrap:wrap} .obs-runstrip{ border-top:1px solid var(--line); background:var(--panel-2); padding:9px 16px; display:flex; align-items:center; gap:11px; flex-wrap:wrap; } .obs-clock{ display:inline-flex; align-items:center; gap:8px; border-radius:var(--r-sm); padding:3px 10px; border:1px solid color-mix(in srgb,var(--warn) 45%,transparent); background:var(--warn-soft); color:var(--warn); font-family:var(--f-mono); font-size:12px; font-variant-numeric:tabular-nums; } .obs-clock.obs-idle{border-color:var(--line); background:var(--panel-3); color:var(--ink-3)} .obs-clock .obs-sq{width:8px; height:8px; background:currentColor; border-radius:1px; flex:none} .obs-runstrip .obs-what{font-size:12.5px; color:var(--ink-2); min-width:0} .obs-runstrip .obs-what b{color:var(--ink); font-weight:600} .obs-steps{margin-left:auto} .obs-steplist{ border-top:1px solid var(--line); background:var(--ground-2); padding:8px 16px; display:none; flex-direction:column; gap:3px; } .obs-steplist.obs-on{display:flex} .obs-steplist div{font-family:var(--f-mono); font-size:11.5px; color:var(--ink-2); display:flex; gap:8px} .obs-steplist div span{color:var(--ink-3); flex:none} .obs-composer{border-top:1px solid var(--line); padding:12px 16px 14px; background:var(--panel); display:flex; flex-direction:column; gap:10px} .obs-inputrow{display:flex; gap:9px; align-items:flex-end} .obs-inputrow textarea{ flex:1; resize:none; min-height:76px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--panel-2); padding:9px 11px; font-size:13.5px; color:var(--ink); } .obs-inputrow textarea:disabled{background:var(--ground-2); color:var(--ink-3)} .obs-inputrow textarea::placeholder{color:var(--ink-3)} .obs-meter{display:flex; gap:16px; align-items:center; flex-wrap:wrap} .obs-meter .obs-barwrap{flex:1; min-width:190px} /* rechte Spalte */ .obs-tabs{display:flex; gap:2px; padding:8px 14px 0; border-bottom:1px solid var(--line); background:var(--panel); overflow-x:auto} .obs-tab{ background:none; border:0; border-bottom:2px solid transparent; cursor:pointer; padding:8px 12px 9px; font-family:var(--f-label); font-size:12.5px; font-weight:600; color:var(--ink-3); white-space:nowrap; display:flex; align-items:center; gap:6px; border-radius:var(--r-sm) var(--r-sm) 0 0; } .obs-tab:hover{color:var(--ink); background:var(--panel-2)} .obs-tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)} .obs-tab .obs-cnt{ font-family:var(--f-mono); font-size:10.5px; background:var(--accent); color:var(--accent-ink); border-radius:var(--r-pill); padding:0 5px; } .obs-panelbar{ display:flex; align-items:center; gap:9px; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--panel-2); flex-wrap:wrap; } .obs-panelbar .obs-grow{margin-left:auto; display:flex; gap:8px; align-items:center} .obs-tabpanel{display:none; flex:1; min-height:0; overflow:auto} .obs-tabpanel.obs-on{display:flex; flex-direction:column} /* Quelltext */ .obs-editor{display:grid; grid-template-columns:236px 1fr; flex:1; min-height:0} .obs-tree{border-right:1px solid var(--line); overflow:auto; padding:8px; background:var(--panel)} .obs-tnode{ display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:var(--r-sm); cursor:pointer; font-size:12.5px; color:var(--ink-2); } .obs-tnode:hover{background:var(--panel-2); color:var(--ink)} .obs-tnode.obs-sel{background:var(--accent-soft); color:var(--ink); font-weight:600; box-shadow:inset 2px 0 0 var(--accent)} .obs-tnode .obs-cnt{margin-left:auto; font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3)} .obs-tnode.obs-d1{padding-left:20px} .obs-tnode.obs-d2{padding-left:34px} .obs-code{overflow:auto; padding:14px 16px; background:var(--ground-2); font-family:var(--f-mono); font-size:12.5px; line-height:1.65} .obs-code pre{margin:0; white-space:pre} .obs-c-tag{color:var(--info)} .obs-c-att{color:var(--accent)} .obs-c-str{color:var(--ok)} .obs-c-com{color:var(--ink-3)} /* Skills / Dateien / Notizen */ .obs-list{display:flex; flex-direction:column} .obs-li{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line); min-height:var(--row-h); } .obs-li:hover{background:var(--panel-2)} .obs-li .obs-main{min-width:0; display:flex; flex-direction:column; gap:2px} .obs-li .obs-main b{font-size:13.5px; font-weight:600} .obs-li .obs-main span{font-size:12px; color:var(--ink-3)} .obs-li .obs-grow{margin-left:auto; display:flex; gap:8px; align-items:center; flex:none} .obs-files{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; padding:16px} .obs-file{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--panel); cursor:pointer} .obs-file .obs-thumb{height:88px; background:linear-gradient(135deg,var(--panel-3),var(--line)); display:block} .obs-file .obs-meta{padding:8px 10px} .obs-file .obs-meta b{display:block; font-family:var(--f-mono); font-size:11.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .obs-file .obs-meta span{font-size:11px; color:var(--ink-3)} .obs-dropzone{margin:0 16px 16px; border:1px dashed var(--line-2); border-radius:var(--r-sm); padding:16px; text-align:center; color:var(--ink-3); font-size:12.5px} .obs-todo{display:flex; align-items:flex-start; gap:11px; padding:11px 16px; border-bottom:1px solid var(--line)} .obs-todo input{margin-top:3px; accent-color:var(--accent); width:15px; height:15px} .obs-todo .obs-t{display:flex; flex-direction:column; gap:3px; min-width:0} .obs-todo .obs-t b{font-size:13.5px; font-weight:500} .obs-todo .obs-t span{font-size:11.5px; color:var(--ink-3)} .obs-todo.obs-done .obs-t b{text-decoration:line-through; color:var(--ink-3)} /* Schutzhinweis */ .obs-guard{ margin:14px 16px; padding:13px 15px; border-radius:var(--r-sm); display:flex; gap:12px; align-items:flex-start; background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--lock); } .obs-guard b{display:block; font-family:var(--f-label); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--lock); margin-bottom:4px} .obs-guard p{margin:0; font-size:12.5px; color:var(--ink-2); max-width:60ch} /* ---------- Datenmodell ---------- */ .obs-dm{display:grid; grid-template-columns:minmax(300px,364px) 1fr; min-height:718px} .obs-dmbar{ display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel-2); flex-wrap:wrap; } .obs-chipset{display:flex; gap:6px; flex-wrap:wrap; align-items:center} .obs-chip{ display:inline-flex; align-items:baseline; gap:6px; border:1px solid var(--line); background:var(--panel); border-radius:var(--r-pill); padding:3px 10px; font-size:12px; color:var(--ink-2); } .obs-chip b{font-family:var(--f-mono); font-size:12.5px; color:var(--ink); font-weight:500} .obs-chip.obs-accent{border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:var(--accent-soft)} .obs-dmcanvas{position:relative; flex:1; overflow:auto; padding:22px; background:var(--ground-2)} .obs-dmwrap{position:relative; display:flex; gap:42px; align-items:flex-start; min-width:max-content} .obs-dmtier{display:flex; flex-direction:column; gap:14px; width:190px; position:relative; z-index:2} #hhform[hidden]{display:none} #dmsvg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible} .obs-ent{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden} .obs-ent.obs-mand{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))} .obs-ent-h{display:flex; align-items:center; gap:7px; padding:9px 11px; cursor:pointer; background:var(--panel-2)} .obs-ent-h b{font-family:var(--f-mono); font-size:12.5px; font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis} .obs-ent-h .obs-chev{transition:transform .15s ease; color:var(--ink-3); flex:none} .obs-ent.obs-open .obs-ent-h .obs-chev{transform:rotate(90deg)} .obs-ent-h .obs-badge{ width:16px; height:16px; border-radius:3px; display:grid; place-items:center; flex:none; background:var(--accent-soft); color:var(--accent); font-family:var(--f-label); font-size:9px; font-weight:700; } .obs-ent-b{display:none; border-top:1px solid var(--line)} .obs-ent.obs-open .obs-ent-b{display:block} .obs-fld{ display:flex; align-items:center; gap:7px; padding:5px 11px; font-size:12px; cursor:pointer; border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent); } .obs-fld:last-child{border-bottom:0} .obs-fld:hover{background:var(--accent-soft)} .obs-fld .obs-n{font-family:var(--f-mono); font-size:11.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis} .obs-fld .obs-t{font-family:var(--f-label); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); flex:none} .obs-fld.obs-ref .obs-n{color:var(--info)} .obs-refgroup{border-bottom:1px solid var(--line)} .obs-refgroup summary{ padding:5px 11px; font-size:11.5px; color:var(--info); cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; font-family:var(--f-label); font-weight:600; } .obs-refgroup summary::-webkit-details-marker{display:none} .obs-refgroup summary:hover{background:var(--info-soft)} .obs-ent-f{display:flex; gap:6px; padding:7px 9px; background:var(--panel-2); border-top:1px solid var(--line)} .obs-ent-add{ border:1px dashed var(--line-2); border-radius:var(--r-card); background:transparent; cursor:pointer; padding:16px 12px; color:var(--ink-3); font-size:12.5px; display:flex; flex-direction:column; gap:4px; align-items:center; font-family:var(--f-label); font-weight:600; } .obs-ent-add:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)} .obs-stock{ position:sticky; bottom:0; margin-top:20px; background:var(--panel); border:1px solid var(--line-2); border-left:3px solid var(--warn); border-radius:var(--r-sm); padding:12px 14px; display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; z-index:3; box-shadow:var(--lift); } .obs-stock .obs-t{min-width:0} .obs-stock .obs-t b{display:block; font-family:var(--f-label); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--warn); margin-bottom:3px} .obs-stock .obs-t p{margin:0; font-size:12.5px; color:var(--ink-2); max-width:52ch} .obs-stock .obs-items{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto} /* ---------- Overlay ---------- */ .obs-scrim{ position:fixed; inset:0; background:var(--scrim); z-index:80; display:none; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(2px); } .obs-scrim.obs-on{display:flex} .obs-sheet{ width:100%; max-width:520px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-card); box-shadow:var(--lift); overflow:hidden; } .obs-sheet-h{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line)} .obs-sheet-h h3{margin:0; font-family:var(--f-display); font-size:16px; font-weight:var(--display-fw); letter-spacing:var(--display-ls)} .obs-sheet-h .obs-grow{margin-left:auto} .obs-sheet-b{padding:18px; display:flex; flex-direction:column; gap:16px} .obs-sheet-f{padding:13px 18px; border-top:1px solid var(--line); background:var(--panel-2); display:flex; gap:9px; align-items:center} .obs-sheet-f .obs-grow{margin-left:auto} .obs-grid6{display:grid; grid-template-columns:repeat(6,1fr); gap:12px} .obs-fw{display:flex; flex-direction:column; gap:5px; min-width:0} .obs-fw.obs-s2{grid-column:span 2} .obs-fw.obs-s3{grid-column:span 3} .obs-fw.obs-s4{grid-column:span 4} .obs-fw.obs-s6{grid-column:span 6} .obs-fw label{font-family:var(--f-label); font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--ink-2); text-transform:var(--label-tt)} .obs-fw input,.obs-fw select{ height:36px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--panel-2); padding:0 10px; font-size:13px; } .obs-fw .obs-hint{font-size:11.5px; color:var(--ink-3)} fieldset{border:1px solid var(--line); border-radius:var(--r-sm); padding:14px; margin:0} legend{padding:0 7px; font-family:var(--f-label); font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)} /* ---------- Designsystem-Screen ---------- */ .obs-sysgrid{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(430px,1fr)); align-items:start} .obs-swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px} .obs-sw{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden} .obs-sw i{display:block; height:46px} .obs-sw span{display:block; padding:5px 7px; font-family:var(--f-mono); font-size:10px; color:var(--ink-3); background:var(--panel-2)} .obs-specimen{display:flex; flex-direction:column; gap:12px} .obs-specimen .obs-l1{font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls); font-size:34px; line-height:1.05} .obs-specimen .obs-l2{font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls); font-size:20px} .obs-specimen .obs-l3{font-size:14px; color:var(--ink-2); max-width:60ch} .obs-specimen .obs-l4{font-family:var(--f-mono); font-size:12.5px; color:var(--ink-2)} .obs-row{display:flex; gap:9px; align-items:center; flex-wrap:wrap} .obs-stack{display:flex; flex-direction:column; gap:12px} .obs-rules{display:flex; flex-direction:column; gap:0} .obs-rule{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:18px; padding:14px 0; border-top:1px solid var(--line)} .obs-rule:first-child{border-top:0} .obs-rule h4{margin:0 0 4px; font-family:var(--f-display); font-size:14.5px; font-weight:var(--display-fw); letter-spacing:var(--display-ls)} .obs-rule .obs-src{font-family:var(--f-mono); font-size:11px; color:var(--ink-3)} .obs-rule p{margin:0; font-size:13px; color:var(--ink-2)} .obs-tbl{width:100%; border-collapse:collapse; font-size:13px} .obs-tbl th{ text-align:left; padding:7px 10px; border-bottom:1px solid var(--line-2); font-family:var(--f-label); font-size:var(--label-fs); font-weight:var(--label-fw); letter-spacing:var(--label-ls); text-transform:var(--label-tt); color:var(--ink-3); } .obs-tbl td{padding:8px 10px; border-bottom:1px solid var(--line)} .obs-tbl td.obs-n{font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right} .obs-tbl tr:hover td{background:var(--panel-2)} .obs-ctxbar{ display:flex; align-items:center; gap:12px; padding:9px 18px; flex-wrap:wrap; border-bottom:1px solid var(--line); background:var(--panel-2); } .obs-ctxbar[hidden]{display:none} .obs-ctxbar .obs-grow{margin-left:auto; display:flex; gap:9px; align-items:center} .obs-crumbs{display:flex; align-items:center; gap:5px; min-width:0; flex-wrap:wrap} .obs-crumbs button{ background:none; border:0; padding:3px 7px; border-radius:var(--r-sm); cursor:pointer; color:var(--ink-2); font-size:12.5px; font-weight:500; } .obs-crumbs button:hover{background:var(--panel-3); color:var(--ink)} .obs-crumbs .obs-sep{color:var(--ink-3); font-size:12px} .obs-crumbs .obs-cur{color:var(--ink); font-weight:600; font-size:12.5px; padding:3px 4px} .obs-railhint{ font-size:11.5px; color:var(--ink-3); line-height:1.45; padding:8px 10px; border:1px dashed var(--line-2); border-radius:var(--r-sm); background:var(--panel-2); } .obs-nav[hidden]{display:none} .obs-insthead{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; padding:20px 24px 16px; } .obs-insthead h1{ margin:0; font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls); font-size:26px; line-height:1.08; } .obs-insthead p{margin:5px 0 0; color:var(--ink-2); font-size:13px} .obs-insthead .obs-grow{margin-left:auto; display:flex; gap:8px; align-items:center} /* ---------- Feature-Kanban ---------- */ .obs-kanban{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); align-items:start} .obs-kcol{ background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-card); display:flex; flex-direction:column; min-height:300px; } .obs-kcol-h{display:flex; align-items:center; gap:9px; padding:13px 16px 11px} .obs-kcol-h .obs-tag{width:8px; height:8px; border-radius:50%; flex:none} .obs-kcol[data-role="entwicklung"] .obs-tag{background:var(--info)} .obs-kcol[data-role="qs"] .obs-tag{background:var(--warn)} .obs-kcol[data-role="produktiv"] .obs-tag{background:var(--ok)} .obs-kcol-h b{font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls); font-size:15px} .obs-kcol-h .obs-grow{margin-left:auto; display:flex; gap:7px; align-items:center} .obs-kcol-note{padding:0 16px 11px; font-size:12px; color:var(--ink-3)} .obs-kcol-b{padding:0 12px 12px; display:flex; flex-direction:column; gap:10px; flex:1} .obs-kcol.obs-can{outline:2px dashed var(--accent); outline-offset:-3px; background:var(--accent-soft)} .obs-kcol.obs-no{opacity:.5} .obs-fcard{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 13px; display:flex; flex-direction:column; gap:8px; cursor:grab; box-shadow:var(--shadow-card); } .obs-fcard:active{cursor:grabbing} .obs-fcard.obs-drag{opacity:.4} .obs-fcard .obs-top{display:flex; align-items:center; gap:8px} .obs-fcard .obs-fid{font-family:var(--f-mono); font-size:12px; font-weight:500; color:var(--accent)} .obs-fcard .obs-grip{margin-left:auto; color:var(--ink-3); flex:none} .obs-fcard h4{margin:0; font-size:14px; font-weight:600; line-height:1.3} .obs-fcard .obs-meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:11.5px; color:var(--ink-3)} .obs-fcard.obs-fixed{cursor:default; opacity:.92} .obs-fcard.obs-fixed .obs-grip{display:none} .obs-reportsec{display:flex; flex-direction:column; gap:8px} .obs-reportsec > .obs-lbl{display:flex; align-items:center; gap:7px} .obs-objlist{display:flex; flex-direction:column; gap:1px; max-height:150px; overflow:auto; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2)} .obs-objlist div{display:flex; gap:9px; padding:5px 10px; font-size:12px; align-items:center} .obs-objlist div + div{border-top:1px solid var(--line)} .obs-objlist .obs-k{font-family:var(--f-label); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); flex:none; width:118px} .obs-objlist .obs-v{font-family:var(--f-mono); font-size:11.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .obs-warnrow{ display:flex; gap:10px; padding:9px 11px; border-radius:var(--r-sm); font-size:12.5px; background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 32%,transparent); } .obs-warnrow b{color:var(--warn); flex:none; font-family:var(--f-label); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding-top:2px} .obs-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:120; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:11px 16px; box-shadow:var(--lift); font-size:13px; display:none; gap:10px; align-items:center; } .obs-toast.obs-on{display:flex} /* ---------- Projekt / Gantt ---------- */ .obs-projgrid{display:grid; grid-template-columns:1fr minmax(300px,382px); gap:var(--gap); align-items:start} .obs-gantt{--cols:11; overflow-x:auto} .obs-gr{display:grid; grid-template-columns:250px repeat(var(--cols),minmax(52px,1fr)); align-items:center; min-width:640px} .obs-gr.obs-weeks{position:sticky; top:0; background:var(--panel); z-index:2; border-bottom:1px solid var(--line-2)} .obs-gr.obs-weeks .obs-wk{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.05em; color:var(--ink-3); text-align:center; padding:7px 0; border-left:1px solid var(--grid-line); } .obs-gr.obs-weeks .obs-wk.obs-mon{color:var(--ink-2); font-weight:600} .obs-grow-lbl{padding:7px 12px 7px 0; display:flex; align-items:center; gap:8px; min-width:0} .obs-grow-lbl .obs-id{font-family:var(--f-mono); font-size:11px; color:var(--ink-3); flex:none} .obs-grow-lbl span.obs-n{font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .obs-gr.obs-phase .obs-grow-lbl span.obs-n{font-weight:700; font-family:var(--f-display); letter-spacing:var(--display-ls)} .obs-gr .obs-cell{height:34px; border-left:1px solid var(--grid-line)} .obs-gr:hover .obs-cell{background:var(--panel-2)} .obs-gbar{ height:16px; border-radius:4px; background:var(--accent); position:relative; align-self:center; margin:0 2px; display:flex; align-items:center; overflow:hidden; } .obs-gbar .obs-fill{position:absolute; inset:0 auto 0 0; background:color-mix(in srgb,#000 26%,var(--accent))} :root[data-theme="dark"] .obs-gbar .obs-fill{background:color-mix(in srgb,#fff 34%,var(--accent))} .obs-gbar .obs-pct{position:relative; font-family:var(--f-mono); font-size:9.5px; color:var(--accent-ink); padding-left:5px; z-index:1} .obs-gbar.obs-phasebar{height:9px; border-radius:2px; background:var(--ink-3); opacity:.5} .obs-gbar.obs-late{background:var(--crit)} .obs-mstone{width:0; height:0; align-self:center; justify-self:start; margin-left:-6px} .obs-mstone i{display:block; width:13px; height:13px; background:var(--ink); transform:rotate(45deg); border-radius:2px} .obs-today{position:relative} .obs-todayline{ position:absolute; top:0; bottom:0; width:2px; background:var(--crit); opacity:.6; z-index:4; pointer-events:none; } .obs-todayline span{ position:absolute; top:34px; left:5px; border:1px solid var(--crit); font-family:var(--f-label); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--crit); background:var(--panel); padding:0 4px; border-radius:3px; } #garrows{position:absolute; inset:0; pointer-events:none; z-index:3; overflow:visible} .obs-assign{display:grid; grid-template-columns:1fr 1fr; gap:0} .obs-assign > div{padding:var(--pad-lg)} .obs-assign > div + div{border-left:1px solid var(--line)} @media (max-width:1180px){ .obs-assign{grid-template-columns:1fr} .obs-assign > div + div{border-left:0; border-top:1px solid var(--line)} } /* ---------- Verwaltung ---------- */ .obs-usebars{display:flex; flex-direction:column; gap:3px} .obs-useday{display:grid; grid-template-columns:74px 1fr 96px; gap:12px; align-items:center; padding:4px 0} .obs-useday .obs-lbl{font-size:11.5px} .obs-usebar{display:flex; gap:2px; height:16px; align-items:stretch} .obs-usebar i{display:block; border-radius:2px} .obs-useday b{font-family:var(--f-mono); font-size:12px; text-align:right; font-variant-numeric:tabular-nums} .obs-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-2)} .obs-legend span{display:flex; align-items:center; gap:6px} .obs-legend i{width:9px; height:9px; border-radius:2px; display:block} .obs-threshold{ display:flex; gap:11px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-sm); background:var(--warn-soft); border:1px solid color-mix(in srgb,var(--warn) 32%,transparent); font-size:12.5px; } .obs-threshold b{color:var(--warn); font-family:var(--f-label); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; flex:none; padding-top:2px} /* ---------- Marketing ---------- */ .obs-app.obs-public{grid-template-columns:1fr} .obs-app.obs-public .obs-rail,.obs-app.obs-public .obs-topbar{display:none} .obs-pubnav{ display:flex; align-items:center; gap:22px; padding:16px 34px; border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:10; flex-wrap:wrap; } .obs-pubnav .obs-brand{display:flex; align-items:center; gap:9px; margin-right:14px} .obs-pubnav .obs-brand b{font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls); font-size:17px} .obs-pubnav a{color:var(--ink-2); text-decoration:none; font-size:13.5px; font-weight:500} .obs-pubnav a:hover{color:var(--ink)} .obs-pubnav .obs-grow{margin-left:auto; display:flex; gap:9px; align-items:center} .obs-mk{padding:0 0 40px} .obs-hero{padding:66px 34px 44px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:44px; align-items:center} .obs-hero .obs-eyebrow{display:inline-flex; align-items:center; gap:8px; margin-bottom:18px} .obs-hero h1{ margin:0 0 18px; font-family:var(--f-display); font-weight:800; letter-spacing:-.035em; font-size:clamp(34px,4.1vw,58px); line-height:.99; text-wrap:balance; } .obs-hero h1 em{font-style:normal; color:var(--accent)} .obs-hero p.obs-lead{margin:0 0 26px; font-size:16.5px; line-height:1.5; color:var(--ink-2); max-width:52ch} .obs-hero .obs-cta{display:flex; gap:11px; align-items:center; flex-wrap:wrap} .obs-hero .obs-cta .btn{height:44px; padding:0 20px; font-size:14.5px} .obs-hero .obs-fine{margin:16px 0 0; font-size:12.5px; color:var(--ink-3)} .obs-mkband{ display:flex; gap:0; border-block:1px solid var(--line); background:var(--panel); flex-wrap:wrap; } .obs-mkband div{flex:1; min-width:180px; padding:20px 26px; border-left:1px solid var(--line)} .obs-mkband div:first-child{border-left:0} .obs-mkband b{display:block; font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls); font-size:25px; line-height:1} .obs-mkband span{display:block; margin-top:6px; font-size:12.5px; color:var(--ink-2)} .obs-sec{padding:56px 34px} .obs-sec > h2{ margin:0 0 8px; font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:-.03em; font-size:31px; text-wrap:balance; } .obs-sec > p.obs-sub{margin:0 0 30px; color:var(--ink-2); font-size:15px; max-width:62ch} .obs-steps3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)} .obs-step3{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; display:flex; flex-direction:column; gap:9px} .obs-step3 .obs-no{ font-family:var(--f-mono); font-size:12px; color:var(--accent); border:1px solid var(--accent); border-radius:var(--r-pill); width:26px; height:26px; display:grid; place-items:center; } .obs-step3 h3{margin:0; font-size:16.5px; font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls)} .obs-step3 p{margin:0; font-size:13.5px; color:var(--ink-2)} .obs-tarife{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); align-items:start} .obs-tarif{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:24px; display:flex; flex-direction:column; gap:14px} .obs-tarif.obs-best{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} .obs-tarif .obs-name{font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls); font-size:19px} .obs-tarif .obs-price{font-family:var(--f-display); font-weight:800; letter-spacing:-.03em; font-size:36px; line-height:1} .obs-tarif .obs-price small{font-size:13px; font-weight:500; color:var(--ink-3); letter-spacing:0} .obs-tarif ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px} .obs-tarif li{display:flex; gap:9px; font-size:13.5px; color:var(--ink-2)} .obs-tarif li svg{flex:none; margin-top:3px; color:var(--ok)} .obs-mkfoot{padding:30px 34px; border-top:1px solid var(--line); display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:var(--ink-3)} .obs-mkfoot a{color:var(--ink-2); text-decoration:none} .obs-mkfoot a:hover{color:var(--ink)} .obs-mkfoot .obs-grow{margin-left:auto} @media (max-width:1100px){ .obs-hero{grid-template-columns:1fr; padding:44px 24px 34px} .obs-sec{padding:40px 24px} .obs-steps3,.obs-tarife{grid-template-columns:1fr} .obs-kanban{grid-template-columns:1fr} .obs-projgrid{grid-template-columns:1fr} } @media (max-width:1180px){ .obs-builder,.obs-dm{grid-template-columns:1fr} .obs-bl{border-right:0; border-bottom:1px solid var(--line)} .obs-lands{grid-template-columns:1fr} .obs-rule{grid-template-columns:1fr; gap:6px} } @media (max-width:860px){ .obs-app{grid-template-columns:1fr} .obs-rail{flex-direction:row; align-items:center; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line)} .obs-navgroup{flex-direction:row} .obs-navgroup .obs-lbl{display:none} .obs-rail-foot{display:none} .obs-editor{grid-template-columns:1fr} .obs-grid6{grid-template-columns:repeat(2,1fr)} .obs-fw.obs-s3,.obs-fw.obs-s4,.obs-fw.obs-s6{grid-column:span 2} } /* ===================================================================== 10 Aliase für globale Systemvorlagen `obsangemeldet` und `obsanmelden` sind global und tragen den CSRF-Schutz (%ANTIFORGERY_NAME% / %ANTIFORGERY_TOKEN%). Sie werden nicht umgeschrieben — dieses Stylesheet bedient ihre Klassen mit. ===================================================================== */ .btn{ display:inline-flex; align-items:center; gap:7px; border-radius:var(--r-sm); cursor:pointer; border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink); padding:0 13px; height:32px; font-size:13px; font-weight:600; font-family:var(--f-label); text-decoration:none; white-space:nowrap; } .btn:hover{background:var(--panel-3)} .btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)} .btn-primary:hover{filter:brightness(1.07)} .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-2)} .btn-ghost:hover{background:var(--panel-2); color:var(--ink)} .obs-konto{display:flex; align-items:center; gap:6px; margin:0} .obs-konto-name{font-weight:600} /* ===================================================================== 11 Gerüst der Seitenhülle Was der Prototyp nicht brauchte, weil er in einem Rahmen saß: Vollhöhe, Innenabstand des Inhaltsbereichs, klebender Fuß und die Liste, die `navbar` und `footerbar` wirklich ausgeben (ul/li/a). ===================================================================== */ .obs-app{min-height:100vh} .obs-workspace{flex:1; display:flex; flex-direction:column} .obs-main{padding:22px 24px 34px; min-width:0; flex:1} .obs-main.obs-flush{padding:0} .obs-footer{ margin-top:auto; padding:13px 24px; border-top:1px solid var(--line); background:var(--panel); } .obs-footer ul{margin:0; padding:0; list-style:none; display:flex; gap:16px; flex-wrap:wrap} .obs-footer li{margin:0} .obs-footer a{color:var(--ink-3); text-decoration:none; font-size:12.5px} .obs-footer a:hover{color:var(--ink)} .obs-navgroup ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px} .obs-navgroup li{margin:0} .obs-navgroup a.obs-nav{text-decoration:none} .obs-navgroup a.obs-nav.is-active{background:var(--accent-soft); color:var(--accent); font-weight:600} .obs-crumbs a{text-decoration:none} .obs-org:empty{display:none} .obs-logo{text-decoration:none; color:inherit} .obs-logo:hover b{color:var(--accent)} /* ===================================================================== 12 Umschalter und Verweise Der Umschalter stand im Prototyp in der Vorführleiste und ist beim Herauslösen mitgegangen — er ist aber eine echte Komponente: Fassung, Systemrolle, Vorschaubreite. Und was im Prototyp ein Knopf war, ist in der Hülle ein Verweis: Verweise brauchen ihre Farbe ausdrücklich, sonst nimmt der Browser sein Blau. ===================================================================== */ .obs-seg{ display:flex; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-pill); padding:2px; gap:2px; } .obs-seg button,.obs-seg a{ background:none; border:0; cursor:pointer; padding:6px 13px; text-decoration:none; border-radius:calc(var(--r-pill) - 1px); font-family:var(--f-label); font-size:12px; font-weight:600; color:var(--ink-2); white-space:nowrap; } .obs-seg button[aria-pressed="true"],.obs-seg a[aria-current="page"]{ background:var(--accent); color:var(--accent-ink); } .obs-seg button:hover:not([aria-pressed="true"]),.obs-seg a:hover:not([aria-current="page"]){ background:var(--panel-3); color:var(--ink); } .obs-seg button[disabled]{opacity:.4; cursor:not-allowed} .obs-seg.obs-small button,.obs-seg.obs-small a{padding:5px 10px; font-size:11px} .obs-crumbs a{color:var(--ink-2); text-decoration:none; padding:3px 7px; border-radius:var(--r-sm)} .obs-crumbs a:hover{background:var(--panel-3); color:var(--ink)} .obs-ctxbar .obs-grow{margin-left:auto; display:flex; gap:10px; align-items:center} .obs-ctxbar .obs-mono{font-size:12px; color:var(--ink-2)} /* ===================================================================== 13 [hidden] gegen display Das Attribut verliert gegen jede Klasse, die display setzt. Auf openbi.Studio ist diese Falle schon dreimal zugeschlagen (Kennwort- kasten, Technikfelder, Laufstreifen) — und beim ersten Aufruf der neuen Rolle ein viertes Mal: der Kontextblock der Seitenleiste stand offen, obwohl das Attribut gesetzt war. Deshalb hier ausdruecklich. ===================================================================== */ .obs-navgroup[hidden], .obs-railhint[hidden], .obs-rail-foot[hidden], .obs-card[hidden], .obs-empty[hidden], .obs-kpis[hidden], .obs-seg[hidden], .obs-crumbs[hidden], .obs-app [hidden]{display:none} /* ===================================================================== 14 Brücke zu den Stylesheets des Bestands Die Dateien der laufenden App färben zu 369 Stellen über Variablen und nur an 115 Stellen über feste Werte. Deshalb baut die neue Fassung sie nicht nach, sondern legt die 29 alten Variablennamen auf die neuen Tokens um. Damit wechselt der ganze Bestand die Fassung mit — Nachtmodus eingeschlossen — ohne dass eine Zeile im Bestand angefasst wird. Reihenfolge in der Hülle: erst `openbi-studio.css`, dann diese Datei. Bei gleicher Gewichtung gewinnt die spätere; wo der Bestand feste Werte trägt, braucht die Übersteuerung einen Vorfahren (`.obs-app .x`). Das ist ein Zwischenzustand: sobald jede Seite eigene Klassen der neuen Fassung hat, fällt der Verweis auf die alte Datei aus der Hülle. ===================================================================== */ :root{ /* Flaechen und Linien */ --color-surface:var(--panel); --color-bg:var(--panel-2); --color-line:var(--line); --color-divider:var(--line); --color-neutral-100:var(--panel-2); --color-neutral-200:var(--panel-3); --color-neutral-300:var(--line); --shell-dark:var(--ground-2); /* Text */ --color-text:var(--ink); --color-text-muted:var(--ink-3); --color-still:var(--ink-3); --color-neutral-700:var(--ink-2); --color-neutral-800:var(--ink-2); --color-neutral-900:var(--ink); --obs-farbe-gedaempft:var(--ink-3); /* Akzent — die alte Datei staffelt in 100/300/500/600/700/900. Die neue Fassung hat einen Akzent und Abstufungen ueber color-mix. */ --color-accent:var(--accent); --color-accent-100:var(--accent-soft); --color-accent-300:color-mix(in srgb,var(--accent) 45%,var(--panel)); --color-accent-500:var(--accent); --color-accent-600:var(--accent); --color-accent-700:var(--accent); --color-accent-900:color-mix(in srgb,var(--accent) 65%,var(--ink)); /* Zweiter Akzent war Gruen — das ist in der neuen Fassung der ok-Zustand. */ --color-accent-2-100:var(--ok-soft); --color-accent-2-500:var(--ok); --color-accent-2-700:var(--ok); /* Fehlerfarben */ --color-fehler-100:var(--crit-soft); --color-fehler-500:var(--crit); --color-fehler-700:var(--crit); /* Schrift. Die alte Datei erwartet Archivo — die Schriftdateien fehlen im Container, es greift system-ui. Die Umlegung heilt das mit. */ --font-heading:var(--f-display); --font-body:var(--f-ui); } /* Die Bestandsdateien werden nach dieser Datei geladen — bei gleicher Gewichtung gewinnt die spaetere. Deshalb tragen die drei Uebersteuerungen einen Vorfahren: `.obs-app .x` (0,2,0) schlaegt `.x` (0,1,0). Ohne das bleibt der feste Farbwert im Nachtmodus stehen; genau so ist es beim ersten Messen passiert. */ .obs-app .obs-ls-neuinstanz{border-top-color:var(--line)} .obs-app .obs-ls-neuinstanz-melder{color:var(--ink-2)} .obs-app .obs-ls-neuinstanz-melder.ist-fehler{color:var(--crit)} /* Ein einzelnes System soll nicht ueber die ganze Breite laufen. Der Bestand setzt `flex: 1 1 12rem`, was bei einem System die ganze Zeile fuellt — in der neuen Fassung sind die Systemkaesten begrenzt und die Kette liest sich als Kette, nicht als Balken. Bewusste Abweichung vom Bestand. */ .obs-app .obs-ls-system{flex:0 1 26rem} /* Lange Kennzahltexte: das Kontingent schreibt "4 von 99 Instanzen · 1 gekauft" in dasselbe Feld, in dem sonst eine Zahl steht. */ .obs-kpi.obs-lang b{font-size:21px; line-height:1.2} /* Klassen, die aus JavaScript des Bestands kommen und deshalb nicht umbenennbar sind: Eingabefelder und die zwei Knopfvarianten. */ .form-control{ height:36px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink); padding:0 10px; font-size:13px; } .form-control:focus-visible{outline:2px solid var(--accent); outline-offset:1px} select.form-control{height:36px} .btn-sm{height:26px; padding:0 9px; font-size:12px} .btn-secondary{background:var(--panel-2); border-color:var(--line-2); color:var(--ink)} .btn-secondary:hover{background:var(--panel-3)} /* Die Kachelkette bekommt die Radien und Kanten der neuen Fassung. Mehr nicht — Aufbau und Umbruchverhalten bleiben, wie der Bestand sie meint. */ .obs-ls-karte{border-radius:var(--r-card); box-shadow:var(--shadow-card)} .obs-ls-system{border-radius:var(--r-sm)} .obs-ls-titel{font-family:var(--f-display); letter-spacing:var(--display-ls); font-size:18px} .obs-ls-freizeile,.obs-ls-leer{border-radius:var(--r-sm)} /* ===================================================================== 15 Bestandsmarkup der Navigation `navbar` gibt nicht aus, was der Prototyp annahm. Gemessen am 24.08.2026 an app-neu: ul.navbar-nav > li.nav-item > a.nav-link — die Bootstrap-Namen des Bestands, ohne obs-nav. Abschnitt 11 traf damit nichts, und die Rail zeigte blaue Standardverweise. Selektor auf das echte Markup, Aussehen wie .obs-nav. ===================================================================== */ .obs-navgroup ul.navbar-nav{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; } .obs-navgroup .nav-item{margin:0} .obs-navgroup a.nav-link{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:var(--r-sm); color:var(--ink-2); font-size:13px; font-weight:500; text-decoration:none; } .obs-navgroup a.nav-link:hover{background:var(--panel); color:var(--ink)} .obs-navgroup a.nav-link.is-active, .obs-navgroup a.nav-link[aria-current="page"]{ background:var(--accent-soft); color:var(--accent); font-weight:600; } /* Dasselbe im Fuss: `footerbar` gibt ebenfalls nav-link aus. */ .obs-footer a.nav-link{color:var(--ink-3); text-decoration:none; font-size:12.5px} .obs-footer a.nav-link:hover{color:var(--ink)} .obs-footer ul.navbar-nav{flex-direction:row; gap:16px; flex-wrap:wrap} /* ===================================================================== 16 Breite in der Huelle Der Prototyp sass in einem Rahmen von 1180px. In der Huelle laeuft der Inhalt ueber die ganze Bildschirmbreite: gemessen am 24.08.2026 in einem 2596px breiten Fenster stand die Kachelreihe mittig in einem leeren Band, weil vier Kacheln von je 328px in 2596px zentriert werden. Das sieht wie ein Layoutfehler aus und ist nur eine fehlende Begrenzung. ===================================================================== */ .obs-main{max-width:1320px; margin-inline:auto; width:100%} /* Feste Farbe aus obs-ls-kontingent.css auf die Tafel legen, damit die Meldung in der Nachtfassung nicht schwarzrot bleibt. */ .obs-app .obs-ls-neuinstanz-melder.ist-fehler{color:var(--crit)} /* ===================================================================== 17 Drei Handgriffe am laufenden Auftritt Alle drei am 24.08.2026 an app-neu gemessen, nicht angenommen. ===================================================================== */ /* a) Die Paketauswahl im Anlegen-Feld nahm sich 1.272px und schob den Knopf in die dritte Zeile. Die Eingabe darf wachsen, die Auswahl wird begrenzt - dann liest die Zeile als Zeile. */ .obs-ls-neu{flex-wrap:wrap; align-items:center} .obs-ls-neu input.form-control{flex:1 1 18rem; min-width:0} .obs-ls-neu select.form-control{flex:0 1 22rem; min-width:0} /* b) Eine Navigationsgruppe ohne Verweise ist nur noch eine Ueberschrift. Fuer einen nicht angemeldeten Besucher blendet `navbar` jede Seite mit REQUIRES_LOGIN aus - dann stand "Organisation" allein in der Rail. Aeltere Browser ohne :has() ignorieren die Regel; dort bleibt es beim alten Bild, kaputt geht nichts. */ .obs-navgroup:not(:has(a)):not(:has(.obs-railhint)){display:none} /* c) Der feste Graustich der Meldezeile aus obs-ls-kontingent.css. */ .obs-app .obs-ls-neuinstanz-melder{color:var(--ink-2)} /* ===================================================================== 18 Reiter und Kennzahlen des Bestands ===================================================================== */ /* a) DER BLOCKER auf /verwaltung. Der Bestand schaltet Reiterinhalte ueber das Attribut `hidden`; dieses Stylesheet erwartete die Klasse `obs-on` und setzte display:none als Standard. Ergebnis: sechs Reiter und darunter nichts - auch der ausgewaehlte Panel war unsichtbar, mit vollem Inhalt im DOM. Fuenftes Mal, dass `hidden` und `display` in diesem Projekt aneinandergeraten, diesmal in der anderen Richtung: sichtbar ist jetzt der Standard. Gemessen am 24.08.2026: sechs Panels, eines ohne `hidden`, alle display:none, Hoehe 0. */ .obs-tabpanel:not([hidden]){display:flex; flex-direction:column} .obs-tabpanel[hidden]{display:none} /* b) Die Kennzahlenkacheln des Bestands tragen eigene Kindklassen statt b und small. Dieselbe Typografie, aber 26px statt 33px und umbruchfaehig: auf /verwaltung steht im Guthabenfeld ein Gleitkomma-Artefakt mit 17 Stellen. */ .obs-kpi-label{ font-family:var(--f-label); font-size:var(--label-fs); font-weight:var(--label-fw); letter-spacing:var(--label-ls); text-transform:var(--label-tt); color:var(--ink-3); } .obs-kpi-value{ font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls); font-size:26px; line-height:1.05; font-variant-numeric:tabular-nums; color:var(--ink); overflow-wrap:anywhere; } .obs-kpi-note{font-size:11.5px; color:var(--ink-3)} /* ===================================================================== 19 Zwei Artefakte, von Kai gesehen (24.08.2026) ===================================================================== */ /* a) Die Reiterleiste steht auf overflow-x:auto, damit viele Reiter rollen koennen. Windows zeichnet dafuer eine Rollleiste mit Pfeilen an den rechten Rand der Karte - sie sah wie ein defektes Element aus. Rollen bleibt, die Leiste verschwindet. */ .obs-tabs{overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none} .obs-tabs::-webkit-scrollbar{width:0; height:0} /* b) Der Hinweiskasten am Fuss der Rail ist aus der Huelle genommen. Er gehoert zum Kontextblock (Builder, Datenmodell, Transport) und stand auf jeder Seite, weil noch keine Seite ihren Kontext mitschickt - unten links ein grauer Zettel ohne Anlass. Er kommt zurueck, sobald die Instanzseiten data-obs-ctx tragen. Die Regel bleibt als Netz, falls die Huelle den Kasten je wieder enthaelt. */ .obs-rail-foot:empty{display:none} /* ===================================================================== 20 Ab hier unter festem Namen: /CMS/css/obs.css Zehn Fassungen in einem Nachmittag sind kein Weg. Ab jetzt derselbe Pfad, geaendert ueber delete_webfile und neu anlegen - die Huelle bleibt unangetastet. Der Browser braucht dann Strg+Shift+R. ===================================================================== */ /* Das Guthabenfeld schnitt seinen Wert ab: openbi-studio.css setzt white-space:nowrap und wird NACH dieser Datei geladen, gewinnt also bei gleicher Gewichtung. Mit Vorfahren davor sticht die neue Regel. (Der 17-stellige Wert selbst ist ein Gleitkomma-Artefakt in den Daten und gehoert dort behoben, nicht hier.) */ .obs-app .obs-kpi-value{white-space:normal} /* ===================================================================== 21 Die Rail ist eine Vorlage, keine navbar Abschnitt 11 und 15 formatierten die Liste, die `navbar` ausgab (ul.navbar-nav / li / a.nav-link). Seit dem 24.08.2026 kommt die Rail aus der Vorlage obsneu-railnav: feste Verweise mit den Zeichen des Entwurfs, zwei Gruppen (Organisation, Werkstatt) und der Kontextblock. Die Gruppe selbst muss den Stapel deshalb bilden - vorher tat das die Liste. Beide Wege bleiben stehen, damit eine Seite mit `navbar` nicht auf einmal anders aussieht. ===================================================================== */ .obs-navgroup{display:flex; flex-direction:column; gap:2px; min-width:0} .obs-navgroup > .obs-lbl{margin:0 0 5px 5px} .obs-navgroup a.obs-nav{text-decoration:none} .obs-rail .obs-nav .obs-ic{flex:none} .obs-rail .obs-nav{gap:9px} /* ===================================================================== 22 Drei Namen, die der Bruecke fehlten Gemessen am 24.08.2026 quer ueber 18 Seiten und 9 Bestands-Stylesheets: die Seiten benutzen drei Variablennamen, die Abschnitt 14 nicht kennt. Jeder unbekannte Name faellt auf seinen Ersatzwert zurueck — und der ist ein fester Hellwert. Sichtbar geworden an den Projektmarken auf /team: hellgraue Flaeche, helle Schrift, unlesbar in der Nachtfassung. ===================================================================== */ :root,[data-theme="light"],[data-theme="dark"]{ --color-border:var(--line); --color-border-stark:var(--line-2); --font-mono:var(--f-mono); } /* ===================================================================== 23 Die Bausteine, die der Bestand benutzt und der Entwurf nicht kannte Gemessen am 24.08.2026 ueber 18 Seiten: 96 Klassen ohne Regel in dieser Datei. Die meisten gehoeren zu einer Seitenfamilie und haben ihr eigenes Stylesheet (obs-skl-, obs-adm-, obs-plgs-, obs-pj-, obs-bn-). Neun sind dagegen Bausteine, die auf vielen Seiten stehen - und auf Seiten ohne openbi-studio.css standen sie GANZ ohne Regel da (auf /administration gemessen: kein Rahmen, kein Abstand, Ueberschrift in der Textschrift). Sie bekommen hier die Werte des Entwurfs. Der Vorfahre .obs-app steht davor, weil die Bestandsdateien nach dieser geladen werden. ===================================================================== */ /* Zuerst der stille Fehler: obs-visually-hidden hatte keine Regel. Eine Beschriftung, die versteckt sein soll, stand damit sichtbar neben dem Feld ("Name der neuen Landschaft"). Kein Design, sondern ein Defekt. */ .obs-visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* Der Seitenkopf des Bestands ist der Kopf des Entwurfs. */ .obs-app .obs-page-head{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:0 0 var(--gap); padding:0; background:none; border:0; } .obs-app .obs-page-head h1{ margin:0; font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls); font-size:26px; line-height:1.08; } .obs-app .obs-page-head p{margin:5px 0 0; color:var(--ink-2); font-size:13px} .obs-app .obs-page-head .obs-grow{margin-left:auto; display:flex; gap:8px; align-items:center} /* Eine Platte ist eine Karte. */ .obs-app .obs-section{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-card); padding:var(--pad-lg); margin:0 0 var(--gap); } .obs-app .obs-section > h2,.obs-app .obs-section > h3{ margin:0 0 10px; font-family:var(--f-display); font-weight:var(--display-fw); letter-spacing:var(--display-ls); font-size:16px; line-height:1.2; } /* Tabellen tragen die Tabelle des Entwurfs (obs-tbl). */ .obs-app .obs-table{width:100%; border-collapse:collapse; font-size:13px} .obs-app .obs-table th{ text-align:left; padding:7px 10px; border-bottom:1px solid var(--line-2); font-family:var(--f-label); font-size:var(--label-fs); font-weight:var(--label-fw); letter-spacing:var(--label-ls); text-transform:var(--label-tt); color:var(--ink-3); } .obs-app .obs-table td{padding:8px 10px; border-bottom:1px solid var(--line)} .obs-app .obs-table tr:hover td{background:var(--panel-2)} /* Die starke und die leise Zelle, und die Etikette ueber der Ueberschrift. */ .obs-app .obs-cell-strong{font-weight:600; color:var(--ink)} .obs-app .obs-cell-sub{font-size:11.5px; color:var(--ink-3)} .obs-app .obs-kicker-muted{ font-family:var(--f-label); font-size:var(--label-fs); font-weight:var(--label-fw); letter-spacing:var(--label-ls); text-transform:var(--label-tt); color:var(--ink-3); } .obs-app .obs-hero-lead{color:var(--ink-2); font-size:14px; line-height:1.5} .obs-app .obs-kpis-5{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--gap)} /* ===================================================================== 24 Nackte Eingabefelder Der Bestand setzt nicht ueberall eine Klasse: openbi:shopproducts baut sein Formular selbst, mit blanken input- und textarea-Elementen. Ohne Regel nimmt der Browser Weiss - auf /administration in der Nachtfassung drei weisse Loecher im Formular "Neues Paket anlegen". Deshalb gilt das Aussehen von .form-control fuer jedes Feld im Rahmen, unabhaengig von der Klasse. Knoepfe und Schalter sind ausgenommen: die haben eigene. ===================================================================== */ .obs-app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=color]), .obs-app select, .obs-app textarea{ background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 9px; font:inherit; font-size:13px; box-sizing:border-box; } .obs-app textarea{min-height:70px; resize:vertical} .obs-app input:focus-visible,.obs-app select:focus-visible,.obs-app textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); } .obs-app ::placeholder{color:var(--ink-3); opacity:1} /* Und die Beschriftungen davor: der Bestand schreibt sie als Fliesstext neben das Feld. Als Etikette gelesen wird daraus eine Zeile. */ .obs-app form label{color:var(--ink-2); font-size:12.5px} /* ===================================================================== 25 Nackte Knoepfe im Inhalt Auf /profile stand die Reiterleiste als blanke