/* =================================================================== visuals lib — editorial baseline (derived from saas-ui-lab/superhack.html) Warm cream paper · single deep-clay accent · hairline discipline · Hanken Grotesk display · JetBrains Mono micro-labels · precision radii. Single-theme light by design (diagrams are print-like documents). =================================================================== */ :root{ /* Canvas-/Struktur-Farben liegen zentral in style/theme.css (verlinkt) -- hier nur noch Fonts, Radien und ein paar Legacy-Akzente. Editieren der Farben: style/theme.css. */ --gold:#b07d12; --gold-wash:#f6efdd; --blue:#4f7290; --blue-wash:#e8eef2; --ok:#2e7d4f; --ok-wash:#e8f1ea; --r-lg:6px; --r-md:5px; --r-sm:4px; --r-full:999px; --serif:"Source Serif 4",Georgia,ui-serif,serif; --sans:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace; color-scheme:light; /* ---------- superlook-App-FRAME ---------- Am ECHTEN platform.claude.com/docs-Screenshot kalibriert (Christian, 2026-08-27): die Seite ist WEISS/neutral, NICHT das warme Ivory des CDS-Extrakts (#faf9f5 las zu gelb). Seite + Sidebar eine weisse Flaeche, Cards weiss, Trennung ueber einen hellen NEUTRALEN Hairline-Ton + die Grau-Pillen- Leiter. Nur ein Hauch Waerme im Grau (Anthropic), aber die Grundflaeche ist weiss. clay/#d97757 nur sparsam (Links/Marker); das warme Map-Papier #f0eee6 liegt als getoente Flaeche darauf. */ /* Direkte Farb-Copies vom platform.claude.com/docs-Screenshot (Christian, 2026-08-27). */ --fr-bg-page:#fcfcfb; /* bg ueberall -- Seite, Sidebar, Topbar, Stage */ --fr-bg-raised:#ffffff; /* Modals/Drawer/Inputs -- ein Hauch heller als die Flaeche (Lift) */ --fr-bg-inset:#f2f2f1; /* eingelassen: kbd, Code-inline */ --fr-bg-hover:#f0f0ef; /* Nav-Link HOVER (heller) -- direkte Copy */ --fr-bg-active:#e3e3e2; /* Nav-Link AKTIV (dunkler) -- direkte Copy */ --fr-text:#0b0b0b; /* primaer (Header/Wortmarke) -- direkte Copy */ --fr-text-2:#52514e; /* Navigation-Link -- direkte Copy */ --fr-text-3:#898781; /* muted (Zahlen/Labels) -- direkte Copy */ --fr-border:#e3e3e2; /* Nav-Border / Hairline (direkte Copy) */ --fr-dot:#eeeeed; /* Canvas-Punktraster -- sehr hell, winzig */ --fr-brand:#d97757; /* accent clay -- sparsam (Links/Marker) */ --fr-accent-fn:#2c84db; /* accent funktional-blau -- sparsam (Info) */ --fr-r-xs:6px; --fr-r:8px; --fr-r-lg:10px; --fr-r-xl:12px; /* CDS-Radien-Leiter */ /* Exakter Font-Stack der Docs (Christian). anthropicSans ist proprietaer -> laedt bei uns nicht und faellt auf system-ui (SF/Segoe) durch, genau wie die Docs ohne die Custom-Font aussehen. */ --fr-sans:"anthropicSans","anthropicSans Fallback",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --side-w:312px; /* Sidebar VOLL (Overlay beim Hover) -- historisch, jetzt rail+flyout */ --side-flyout-w:300px; /* Flyout-Breite (Overlay), per Griff ziehbar; Default = Doppelklick-Reset */ --side-rail:60px; /* Sidebar RUHE (Icon-Rail) -- reserviert die Layout-Breite, kein Reflow */ --std-sidebar-w:272px; /* (historisch) */ --nav-content-left:var(--side-flyout-w); /* linke Kante der Content-Pane = Nav-Breite; 0 wenn eingeklappt */ } *{box-sizing:border-box;margin:0;padding:0} /* Duenne Scrollbars GLOBAL -- eine Quelle fuer alle Container (orgnav, Chips, Suchpalette, Drawer, TOC ...). height:6px deckt horizontale Leisten mit ab (z.B. die Lane-Reihe in der Suche). Einzel-Definitionen pro Container gibt es bewusst nicht mehr -- ::-webkit-scrollbar vererbt nicht, aber * trifft jeden Knoten. */ /* Der alte .side__nav-Stil, global: 11px Spur, aber der Thumb schwebt als ~5px-Pille frei -- 3px transparenter Rand (traegt --fr-bg-page) + background-clip:padding-box. Optisch DUENNER als ein 6px-Flachbalken an der Kante. Standard-Properties (scrollbar-width/-color) NUR in Firefox: in Chromium 121+ deaktiviert ihr Vorhandensein die ::-webkit-scrollbar-Pseudoelemente komplett -> natives dickes "thin". @supports-Guard: Chromium kennt den Selector -> Block gilt dort NICHT; Firefox kennt ihn nicht -> Block gilt (thin + gleiche Farbe, kein Border-Trick). */ @supports not selector(::-webkit-scrollbar){ *,*::before,*::after{scrollbar-width:thin;scrollbar-color:transparent transparent} .sb-live{scrollbar-color:var(--fr-bg-active) transparent} } *::-webkit-scrollbar{width:11px;height:11px} *::-webkit-scrollbar-track{background:transparent} /* Auto-Hide (Scroll-Activity): Thumb im Ruhezustand unsichtbar; die schwebende ~5px-Pille erscheint NUR waehrend/kurz nach dem Scrollen -- der scrollende Container bekommt .sb-live (per JS in interact.js; ein Klassen-Toggle triggert in Chromium den Scrollbar-Restyle, den reines CSS-:hover NICHT ausloest). Wer nicht scrollt, sieht keinen Balken. Rand im Ruhezustand transparent, sonst leere Schiene auf andersfarbigem Grund; auf .sb-live traegt er bg-page (schwebende Pille). */ *::-webkit-scrollbar-thumb{background:transparent;border:3px solid transparent;border-radius:6px;background-clip:padding-box} .sb-live::-webkit-scrollbar-thumb{background:var(--fr-bg-active);border-color:var(--fr-bg-page)} .sb-live::-webkit-scrollbar-thumb:hover{background:var(--fr-text-3)} *::-webkit-scrollbar-corner{background:transparent} html,body{height:100%} body{font-family:var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden} /* ultra-subtle film grain over the paper */ body::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px} /* ---------- fullscreen chrome: slim topbar + stage ---------- */ .topbar{position:fixed;top:0;left:0;right:0;height:58px;display:flex;align-items:center;gap:22px;padding:0 22px;border-bottom:1px solid var(--line);background:rgba(240,238,230,.9);backdrop-filter:blur(8px);z-index:10} .topbar h1{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:-.01em} .topbar h1 b{color:var(--accent);font-weight:600} .legend{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap} .li{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .sw{width:24px;height:0;border-top:2px solid var(--ink-soft)} .sw.d{border-top-style:dashed;border-color:var(--accent-soft)} .sw.g{border-color:var(--gold)} .sw.b{border-color:var(--blue)} .sw.o{border-color:var(--ok)} .li.note{color:var(--gold)} .stage{position:fixed;top:58px;left:0;right:0;bottom:0;display:grid;place-items:center;padding:8px;user-select:none;-webkit-user-select:none} .stage svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none} .stage svg.grabbing{cursor:grabbing} /* ---------- zoom controls (bottom-left, panel-safe) ---------- */ .zoomctl{position:fixed;left:18px;bottom:18px;z-index:15;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--paper);box-shadow:0 1px 2px rgba(26,20,15,.04),0 12px 32px -16px rgba(26,20,15,.12);overflow:hidden} .zoomctl button{font:inherit;font-family:var(--mono);font-size:13px;width:34px;height:32px;border:none;background:none;color:var(--ink-soft);cursor:pointer;border-top:1px solid var(--line)} .zoomctl button:first-child{border-top:none} .zoomctl button:hover{background:var(--paper-2);color:var(--accent)} /* ---------- side panel (Notion-like) ---------- */ .panel{position:fixed;top:58px;right:0;bottom:0;width:min(var(--panel-w,420px),92vw);background:#fff;border-left:1px solid var(--line);box-shadow:-18px 0 44px -30px rgba(26,20,15,.3);transform:translateX(103%);transition:transform .22s cubic-bezier(.25,.6,.3,1);z-index:20;display:flex;flex-direction:column} .panel.open{transform:none} .panel.resizing{transition:none;user-select:none} @media(prefers-reduced-motion:reduce){.panel{transition:none}} .panel__resize{position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:col-resize;z-index:1} .panel__resize::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:transparent;transition:background-color .15s ease-out} .panel__resize:hover::after,.panel.resizing .panel__resize::after{background:var(--accent-soft)} .panel__head{padding:20px 22px 16px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px} .panel__head>div{min-width:0} .p-kicker{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} .panel__head h2{font-family:var(--serif);font-size:1.35rem;font-weight:600;letter-spacing:-.015em;margin-top:4px} .panel__close{margin-left:auto;flex:none;font:inherit;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);background:none;color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s} .panel__close:hover{color:var(--accent);border-color:var(--accent)} /* Drawer-Kopf-Aktionen: Link-Kopier-Button neben dem X, gleiche Optik. */ .panel__actions{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px} .panel__actions .panel__close{margin-left:0} .panel__act{flex:none;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);background:none;color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s} .panel__act:hover{color:var(--accent);border-color:var(--accent)} .panel__act svg{display:block} .panel__act .ic-check{display:none} .panel__act.is-copied{color:var(--accent);border-color:var(--accent)} /* ~1.5s Feedback nach dem Kopieren */ .panel__act.is-copied .ic-link{display:none} .panel__act.is-copied .ic-check{display:block} .panel__body{padding:18px 22px 28px;overflow-y:auto;font-size:.88rem;line-height:1.65;color:var(--ink-soft)} .panel__body p{margin-bottom:12px;text-wrap:pretty} /* Abschnitts-Ueberschrift im Console-Stil: Sans/600/~14.5px, KEIN uppercase; Trennung durch Weissraum (viel drueber, knapp drunter) statt Linien. */ .panel__body h3{font-family:var(--fr-sans);font-size:.92rem;font-weight:600;letter-spacing:-.005em; text-transform:none;color:var(--ink);margin:22px 0 8px} .panel__body h3:first-child{margin-top:4px} /* Key-Value-Block (Notion-Stil): Key links schmal+muted, Wert rechts; lange Werte brechen um. */ .p-kv{display:grid;grid-template-columns:minmax(120px,38%) 1fr;row-gap:6px;column-gap:14px;margin:2px 0 12px} .p-kv-k{font-size:.8rem;color:var(--muted);line-height:1.5} .p-kv-v{font-size:.82rem;color:var(--ink);line-height:1.5;overflow-wrap:anywhere} .p-kv-v.is-mono{font-family:var(--mono);font-size:.76rem} .panel__body ul{list-style:none;margin:0 0 12px} .panel__body li{padding-left:16px;position:relative;margin-bottom:6px;font-size:.85rem;color:var(--muted)} .panel__body li::before{content:"—";position:absolute;left:0;color:var(--accent)} /* Design-Spec: nummerierte Liste 1) 2) 3) */ .panel__body ol.p-ol{list-style:none;counter-reset:i;margin:2px 0 12px} .panel__body ol.p-ol li{counter-increment:i;padding-left:26px;position:relative;margin-bottom:8px;font-size:.85rem;color:var(--ink-soft);line-height:1.5} .panel__body ol.p-ol li::before{content:counter(i) ")";position:absolute;left:0;top:.05em;color:var(--accent);font-family:var(--mono);font-size:.74rem;font-weight:600} .panel__body p.p-clicked{margin-top:16px;padding-top:10px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.68rem;color:var(--dim-2);letter-spacing:.02em} .p-status{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-sm);padding:3px 8px;margin-bottom:14px;border:1px solid} .st-ok{color:var(--ok);background:var(--ok-wash);border-color:#cfe3d5} .st-gold{color:var(--gold);background:var(--gold-wash);border-color:#e9dcb8} .st-blue{color:var(--blue);background:var(--blue-wash);border-color:#d3dee7} .st-dim{color:var(--dim-2);background:var(--paper-2);border-color:var(--line)} .st-risk{color:var(--accent);background:var(--accent-wash);border-color:#edccbb} /* Clay -- kritisch, z.B. Internet+Admin-Port offen */ /* ---------- section TOC (Notion-artig, rechts; nur vom interact.js erzeugt, wenn die Seite genug linksbuendige zlab-Sektionen hat -> Katalog, nicht Infra) ---------- */ #toc{ position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:16; max-height:78vh;overflow-y:auto;max-width:min(248px,32vw); display:flex;flex-direction:column;gap:1px;padding:11px 12px 12px 14px; background:rgba(251,250,247,.5);border:1px solid rgba(212,207,194,.45); border-radius:var(--r-md);backdrop-filter:blur(7px); box-shadow:0 8px 30px -18px rgba(26,20,15,.25); opacity:.55;transition:opacity .18s ease,background-color .18s ease; } #toc:hover{opacity:1;background:rgba(251,250,247,.86)} #toc__title{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);margin-bottom:7px;text-align:right} .toc__item{ appearance:none;border:none;background:none;cursor:pointer;font:inherit; font-size:11px;line-height:1.4;color:var(--muted); padding:3px 8px 3px 0;border-right:2px solid transparent; transition:color .15s,border-color .15s; display:flex;justify-content:flex-end;align-items:baseline;gap:8px;max-width:100%; } .toc__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .toc__range{font-family:var(--mono);font-size:8.5px;letter-spacing:.03em;color:var(--dim-2);flex:none} .toc__item:hover{color:var(--ink)} .toc__item:hover .toc__range{color:var(--muted)} .toc__item.active{color:var(--accent);border-right-color:var(--accent);font-weight:600} .toc__item.active .toc__range{color:var(--accent)} @media(prefers-reduced-motion:reduce){#toc{transition:none}} /* ---------- Org-Nav: linker Account-Switcher (nur Map-Seiten, via style/orgnav.js) ---------- Ruhezustand = schmaler Rail mit vertikalem Org-Namen. HOVER-getrieben: Maus drueber klappt SOFORT auf, Maus weg klappt nach ~340ms wieder zu -- die Schliess-Verzoegerung liegt rein in transition-delay (offen: 0s, geschlossen: .34s), kein JS-Timer, kein Flattern beim Weg zur Liste. is-open = Klick-/Touch-Fallback (Geraete ohne Hover). Hoehe konstant (immer die volle Panel-Hoehe, nur die Breite animiert) -> kein Hoehen-Sprung. */ .orgnav{position:fixed;top:70px;left:0;z-index:16;width:34px;max-height:calc(100vh - 150px); display:flex;flex-direction:column; /* flex-Kette bis zur Liste, damit overflow-y greift */ overflow:hidden;background:rgba(251,250,247,.86);border:1px solid var(--line-2);border-left:none; border-radius:0 var(--r-md) var(--r-md) 0;backdrop-filter:blur(8px); box-shadow:0 8px 30px -18px rgba(26,20,15,.28); transition:width .28s cubic-bezier(.25,.6,.3,1);transition-delay:.34s} /* ZUklappen verzoegert */ .orgnav:hover,.orgnav.is-open{width:262px;transition-delay:0s} /* AUFklappen sofort */ /* Rail -- vertikaler Org-Name als Griff, nur im Ruhezustand sichtbar */ .orgnav__rail{position:absolute;inset:0;width:34px;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:9px;pointer-events:none;opacity:1; transition:opacity .18s ease;transition-delay:.34s} .orgnav:hover .orgnav__rail,.orgnav.is-open .orgnav__rail{opacity:0;transition-delay:0s} .orgnav__chev{flex:none;width:7px;height:7px;border-right:1.7px solid var(--muted); border-bottom:1.7px solid var(--muted);transform:rotate(-45deg)} .orgnav__railname{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--serif);font-size:12.5px; font-weight:600;letter-spacing:.02em;color:var(--ink-soft);white-space:nowrap;overflow:hidden; max-height:calc(100vh - 240px);text-overflow:ellipsis} /* Panel -- Kopf + Liste, bei Hover/Open sichtbar */ .orgnav__panel{width:262px;flex:1 1 auto;min-height:0;display:flex;flex-direction:column; opacity:0;transition:opacity .18s ease;transition-delay:.34s} .orgnav:hover .orgnav__panel,.orgnav.is-open .orgnav__panel{opacity:1;transition-delay:.03s} .orgnav__head{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-bottom:1px solid var(--line)} .orgnav__org{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .orgnav__count{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2)} .orgnav__list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px} /* min-height:0 -> Liste darf schrumpfen und scrollen statt die Karte zu ueberlaufen */ .orgnav__row{display:flex;flex-direction:column;gap:2px;padding:7px 9px;border-radius:var(--r-sm); text-decoration:none;color:var(--ink-soft)} .orgnav__row:hover{background:var(--paper-2)} .orgnav__row.is-current{background:var(--accent-wash);box-shadow:inset 2px 0 0 var(--accent)} .orgnav__name{font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .orgnav__row.is-current .orgnav__name{color:var(--accent)} .orgnav__meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .orgnav__id{font-family:var(--mono);font-size:9.5px;color:var(--dim-2);letter-spacing:.02em} .orgnav__nums{flex:none;display:flex;gap:9px;font-family:var(--mono);font-size:9.5px;color:var(--muted)} @media(prefers-reduced-motion:reduce){.orgnav,.orgnav__rail,.orgnav__panel{transition:none}} @media(max-width:720px){.orgnav{display:none}} /* ---------- Suchpalette (Cmd/Ctrl+K), Notion-artiges Overlay (via style/searchpal.js) ---------- */ .searchpal{position:fixed;inset:0;z-index:80;display:none;justify-content:center;align-items:flex-start; padding-top:12vh;background:rgba(11,11,11,.32); /* Fallback: neutraler dunkler Scrim, kein Braun */ background:color-mix(in srgb, var(--fr-text) 32%, transparent); /* aus der Nav-Textfarbe abgeleitet */ backdrop-filter:blur(3px)} .searchpal.is-open{display:flex} .searchpal__box{width:min(1120px,90vw);max-height:74vh;display:flex;flex-direction:column;overflow:hidden; background:var(--paper);border:1px solid var(--line-2);border-radius:10px; box-shadow:0 24px 64px -24px rgba(26,20,15,.5),0 4px 12px -8px rgba(26,20,15,.3)} .searchpal__top{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)} .searchpal__k{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--dim-2); border:1px solid var(--line-2);border-radius:4px;padding:2px 6px} .searchpal__input{flex:1;border:none;background:none;outline:none;font-family:var(--fr-sans);font-size:16px; color:var(--ink);letter-spacing:-.01em} .searchpal__input::placeholder{color:var(--dim-3)} .searchpal__list{padding:6px} .searchpal__empty{padding:22px 14px;text-align:center;color:var(--dim-2);font-size:13px} /* Lane-Reihe: eine Spalte je Resource-Type, horizontal scrollbar wenn mehr als reinpassen. */ .searchpal__lanes{display:flex;align-items:flex-start;gap:8px;padding:6px;overflow-x:auto;overflow-y:hidden} .searchpal__lanes.is-single{display:block} /* ein Typ, keine Accounts -> volle Breite */ .searchpal__lane{flex:0 0 216px;width:216px;min-width:0;display:flex;flex-direction:column;border-radius:var(--r-sm)} .searchpal__lanes.is-single .searchpal__lane{flex:1 1 auto;width:auto} .searchpal__lane-head{display:flex;align-items:baseline;gap:7px;padding:6px 9px;margin:0 2px 4px;border-radius:6px} .searchpal__lane-label{flex:0 1 auto;min-width:0;font-size:11px;font-weight:600;letter-spacing:.01em; color:var(--dim-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .searchpal__lane-code{flex:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim-3)} .searchpal__lane-count{flex:none;margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--dim-3)} .searchpal__lane.is-active-lane .searchpal__lane-head{background:var(--accent-wash)} .searchpal__lane.is-active-lane .searchpal__lane-label{color:var(--accent)} .searchpal__lane-body{overflow-y:auto;max-height:392px;display:flex;flex-direction:column;gap:1px} /* Item = 1:1 orgnav-Zeile: Name oben (12.5px), meta-Zeile mono darunter (space-between). */ .searchpal__row{display:flex;flex-direction:column;gap:2px;padding:7px 9px;border-radius:var(--r-sm);cursor:pointer} .searchpal__row.is-active{background:var(--accent-wash);box-shadow:inset 2px 0 0 var(--accent)} .searchpal__name{min-width:0;font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .searchpal__row.is-active .searchpal__name{color:var(--accent)} .searchpal__sub{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0} .searchpal__subacct,.searchpal__subid{min-width:0;font-family:var(--mono);font-size:9.5px;color:var(--dim-2);letter-spacing:.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .searchpal__subrg,.searchpal__submeta{flex:none;font-family:var(--mono);font-size:9.5px;color:var(--muted)} .searchpal__more{padding:6px 9px;font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--dim-3)} /* ============ superlook App-FRAME (Claude-Console-Sprache) ============ Alles unter .app (nur die Shell app.html setzt die Klasse) -> Standalone-Seiten voellig unberuehrt. Farblos-ruhig, Hairlines statt Schatten, kein Terracotta. Die Map + ihr warmes Papier (#f0eee6) bleiben unveraendert -- der weisse Frame um das warme Papier ist der gewollte Kontrast. */ .app{background:var(--fr-bg-page);font-family:var(--fr-sans)} /* Frame-Font; die Map-SVG-Texte tragen eigene font-family und bleiben unberuehrt */ /* Layout reserviert nur die RAIL-Breite -> die volle Sidebar legt sich als Overlay drueber, die Map reflowt nie (kein Wobble beim Auf-/Zuklappen). */ .app .topbar{left:var(--nav-content-left);background:var(--fr-bg-page);border-bottom-color:var(--fr-border);backdrop-filter:none;transition:left .15s ease} /* Topbar-Titel = schlanke Breadcrumb-Zeile, gleiche Groesse wie die Nav-Links (Christian: 1.75rem war viel zu gross fuer die schmale Leiste). Sans 14px, Akzent-Teil 600. */ .app .topbar h1{font-family:var(--fr-sans);font-size:14px;font-weight:500;line-height:1.4;letter-spacing:0;color:var(--fr-text)} .app .topbar h1 b{font-weight:600;color:var(--fr-text)} .app .topbar h1 .sl-id{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--fr-text-3);margin-left:5px} .app .li{color:var(--fr-text-3)} /* Canvas mit dezentem Punktraster (Dot-Grid) statt plain einfarbig -- wie auf Canvas-/Whiteboard-UIs. */ .app .stage{left:var(--nav-content-left);background-color:var(--fr-bg-page);transition:left .15s ease; background-image:radial-gradient(var(--fr-dot) 0.6px,transparent 0.7px); background-size:16px 16px;background-position:-1px -1px} .app .zoomctl{left:calc(var(--nav-content-left) + 18px);border-color:var(--fr-border);background:var(--fr-bg-raised);box-shadow:none;transition:left .15s ease} .app .zoomctl button{color:var(--fr-text-2);border-top-color:var(--fr-border)} .app .zoomctl button:hover{background:var(--fr-bg-hover);color:var(--fr-text)} /* 2.5D | 3D Ansicht-Umschalter (oben rechts ueberm Canvas) + 3D-iframe */ .view-toggle{position:fixed;top:70px;right:18px;z-index:16;display:flex;overflow:hidden; background:var(--fr-bg-raised);border:1px solid var(--fr-border);border-radius:var(--fr-r); box-shadow:0 1px 2px rgba(26,20,15,.05)} .vt-btn{font-family:var(--fr-sans);font-size:12px;font-weight:500;padding:6px 13px;border:none;background:none; color:var(--fr-text-2);cursor:pointer} .vt-btn+.vt-btn{border-left:1px solid var(--fr-border)} .vt-btn:hover{background:var(--fr-bg-hover);color:var(--fr-text)} .vt-btn.is-active{background:var(--fr-bg-active);color:var(--fr-text)} /* Wrapper gibt die echte Hoehe (position:fixed inset), der iframe fuellt ihn 100% -- sonst kollabiert er auf den 300x150-Default. Pane-BG = Frame-Weiss, damit der iframe-Boot nicht weiss blitzt. */ .view3d-wrap{position:fixed;top:58px;left:var(--nav-content-left);right:0;bottom:0;z-index:6; display:none;overflow:hidden;background:var(--fr-bg-page);transition:left .15s ease} .app.mode-3d .view3d-wrap{display:block} .view3d{display:block;width:100%;height:100%;border:0} .app.mode-3d .zoomctl{display:none} /* der 3D-Viewer bringt sein eigenes HUD */ /* Details-Panel als Console-Drawer (weiss, Hairline links, gleitet ueber den Content) */ .app .panel{background:var(--fr-bg-raised);border-left-color:var(--fr-border)} .app .panel__head,.app .panel__body h3{border-color:var(--fr-border)} .app .panel__head h2{color:var(--fr-text)} .app .p-kicker{color:var(--fr-text-3)} .app .panel__close{border-color:var(--fr-border);color:var(--fr-text-2)} .app .panel__close:hover{border-color:var(--fr-text-3);color:var(--fr-text)} .app .panel__act{border-color:var(--fr-border);color:var(--fr-text-2)} .app .panel__act:hover,.app .panel__act.is-copied{border-color:var(--fr-text-3);color:var(--fr-text)} .app .panel__body{color:var(--fr-text-2)} .app .panel__body h3{color:var(--fr-text)} .app .p-kv-k{color:var(--fr-text-3)} .app .p-kv-v{color:var(--fr-text)} .app .panel__resize:hover::after,.app .panel.resizing .panel__resize::after{background:var(--fr-text-3)} /* ---- Sidebar (orgnav im App-Modus: .orgnav--app) -- NORMALE Sidebar (Upwind-Muster): standardmaessig expandiert, per Chevron manuell einklappbar. KEIN Hover-Overlay mehr; die Content-Pane rueckt beim Ein/Ausklappen nach (BEWUSSTER Reflow, .15s). Der alte Rail/Chip-/Hover-Code ist tot (.side__rail* unten ungenutzt). Oben Brand + Collapse-Chevron, darunter der Focus-Switcher, dann der Focus-Body. */ .orgnav--app{position:fixed;top:0;left:0;bottom:0;width:var(--side-flyout-w);z-index:18;max-height:none; background:var(--fr-bg-page);border-right:1px solid var(--fr-border);display:flex;flex-direction:column; padding:14px 14px 12px;transition:transform .15s ease} body.nav-collapsed{--nav-content-left:0} body.nav-collapsed .orgnav--app{transform:translateX(-100%)} .orgnav--app.resizing{transition:none} /* User-Sektion unten links (Console-Muster): volle Nav-Breite, feine Trennlinie darueber, Popover nach OBEN. */ .nav__user{position:relative;flex:none;margin:0 -14px -12px;padding:8px;border-top:1px solid var(--fr-border)} .nav__user-trig{display:flex;align-items:center;gap:10px;width:100%;font:inherit;text-align:left;padding:7px 8px;border:none;border-radius:var(--fr-r);background:none;color:var(--fr-text);cursor:pointer;transition:background-color .12s} .nav__user-trig:hover,.nav__user-trig[aria-expanded="true"]{background:var(--fr-bg-hover)} .nav__user-av{flex:none;width:30px;height:30px;border-radius:8px;background:var(--fr-bg-active);display:grid;place-items:center;font-family:var(--serif);font-size:13px;font-weight:600;color:var(--fr-text-2)} .nav__user-id{min-width:0;flex:1} .nav__user-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav__user-sub{font-size:11.5px;color:var(--fr-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .nav__user-chev{flex:none;color:var(--fr-text-3);display:flex} .nav__user-chev svg{width:16px;height:16px} .nav__user-pop{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);z-index:40;max-width:280px; background:var(--fr-bg-raised);border:1px solid var(--fr-border);border-radius:var(--fr-r-lg);padding:5px; box-shadow:0 1px 2px rgba(26,20,15,.05),0 12px 32px -12px rgba(26,20,15,.28)} .nav__user-pop[hidden]{display:none} .nav__pop-head{font-size:11.5px;color:var(--fr-text-3);padding:8px 10px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav__pop-item{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;font:inherit;font-size:13px;text-align:left;padding:8px 10px;border:none;border-radius:var(--fr-r-xs);background:none;color:var(--fr-text);cursor:pointer;text-decoration:none} .nav__pop-item:hover{background:var(--fr-bg-hover)} .nav__pop-ext{margin-left:auto;color:var(--fr-text-3);display:flex} .nav__pop-ext svg{width:14px;height:14px} .nav__pop-div{height:1px;background:var(--fr-border);margin:5px 6px} .nav__top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 12px} .nav__brand{display:flex;align-items:center;gap:9px;min-width:0} .nav__brand svg{width:24px;height:24px;display:block;flex:none} .nav__brand-name{font-family:var(--fr-sans);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--fr-text);text-transform:lowercase} .nav__collapse{flex:none;width:28px;height:28px;display:grid;place-items:center;border:0;background:none;color:var(--fr-text-3);border-radius:var(--fr-r);cursor:pointer} .nav__collapse:hover{background:var(--fr-bg-hover);color:var(--fr-text)} .nav__collapse svg{width:15px;height:15px;display:block} /* Focus-Switcher: aktiver Focus (Icon + Label), dezent getoent, volle Breite; oeffnet das Set-focus-Modal. */ .nav__focus{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;margin-bottom:14px;font:inherit; background:var(--fr-bg-inset);border:1px solid var(--fr-border);border-radius:var(--fr-r);cursor:pointer;text-align:left} .nav__focus:hover{background:var(--fr-bg-hover)} .nav__focus-ic{flex:none;width:18px;height:18px;color:var(--fr-text-2)} .nav__focus-ic svg{width:18px;height:18px;display:block} .nav__focus-label{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--fr-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav__focus-chev{flex:none;width:14px;height:14px;color:var(--fr-text-3)} .nav__focus-chev svg{width:14px;height:14px;display:block} /* Body = Focus-Inhalt (Suchfeld+Accounts / Sektionen); scrollt selbst ueber .side__nav. */ .side__full{flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column} /* Expand-Griff (nur eingeklappt): schmaler Chevron am linken Rand. */ .nav__expand{display:none} /* Expand-Griff: vertikal exakt auf die Topbar-Zeilenmitte (Topbar 58px hoch -> Button 34px, top 12 -> Mitte 29). Luft: 12px zur Fensterkante links; die Topbar-padding-left (58) laesst ~12px Gap zum Titel. */ body.nav-collapsed .nav__expand{position:fixed;top:12px;left:12px;z-index:20;display:grid;place-items:center;width:34px;height:34px; border:1px solid var(--fr-border);border-radius:var(--fr-r);background:var(--fr-bg-raised);color:var(--fr-text-2);cursor:pointer;box-shadow:0 1px 2px rgba(26,20,15,.06)} body.nav-collapsed .nav__expand:hover{background:var(--fr-bg-hover);color:var(--fr-text)} .nav__expand svg{width:16px;height:16px;display:block} .app.nav-collapsed .topbar{padding-left:58px} /* Titel raeumt den Expand-Chevron frei (12+34+12) -- beide Klassen an der Body */ /* Resize-Griff: fixed am rechten Nav-Rand (Nav bei left:0 -> Kante bei --side-flyout-w). Immer greifbar wenn expandiert; eingeklappt weg. Die 2px-::after-Linie nur bei Hover/Ziehen. */ .side__resize{position:fixed;top:0;bottom:0;width:10px;left:calc(var(--side-flyout-w) - 5px);z-index:19;cursor:col-resize; opacity:1;pointer-events:auto;transition:opacity .12s ease} body.nav-collapsed .side__resize{opacity:0;pointer-events:none} .side__resize::after{content:"";position:absolute;right:4px;top:0;bottom:0;width:2px;background:transparent;transition:background-color .15s ease-out} .side__resize:hover::after,.orgnav--app.resizing .side__resize::after{background:var(--fr-text-3)} /* Account-Chips im Rail (Quick-Links): Kuerzel-Badges, Suche darunter gepinnt. Scrollbar = globaler Default. */ .side__chips{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center; gap:4px;overflow-y:auto;padding:2px 0;scrollbar-gutter:stable both-edges} /* symmetrisches Gutter -> Chips zentriert unter dem Badge */ .side__chip{flex:none;width:34px;height:28px;display:grid;place-items:center;border-radius:var(--fr-r); font-family:var(--fr-sans);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--fr-text-2); text-decoration:none;cursor:pointer} .side__chip:hover{background:var(--fr-bg-hover);color:var(--fr-text)} .side__chip.is-current{background:var(--fr-bg-active);color:var(--fr-text)} /* Aktiv-Pille wie in der Vollliste */ /* Wortmarke im superaccess-Stil (super*-Produkte gleich): Sans statt Serif, 600/15px, ls -.01em, lowercase */ .side__brand{display:flex;align-items:center;gap:9px;padding:2px 8px 20px} .side__brand svg{width:24px;height:24px;display:block;flex:none} /* gleiche Groesse wie im Rail */ .side__brand-name{font-family:var(--fr-sans);font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--fr-text);text-transform:lowercase} .side__org{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;margin-bottom:10px;font:inherit; background:var(--fr-bg-raised);border:1px solid var(--fr-border);border-radius:var(--fr-r);cursor:pointer;text-align:left} .side__org:hover{background:var(--fr-bg-hover)} .side__org-name{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--fr-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side__org-chev{flex:none;width:6px;height:6px;border-right:1.5px solid var(--fr-text-3);border-bottom:1.5px solid var(--fr-text-3);transform:rotate(45deg);margin-bottom:2px} .side__search{display:flex;align-items:center;gap:7px;width:100%;padding:8px 12px;margin-bottom:14px;font:inherit; background:var(--fr-bg-raised);border:1px solid var(--fr-border);border-radius:var(--fr-r);cursor:text;text-align:left} .side__search:hover{border-color:var(--fr-text-3)} .side__search-t{flex:1;font-size:13px;color:var(--fr-text-3)} .kbd{flex:none;font-family:var(--mono);font-size:11px;color:var(--fr-text-2);background:var(--fr-bg-inset); border:1px solid var(--fr-border);border-radius:var(--fr-r-xs);padding:0 5px;line-height:1.5} .side__navhead{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--fr-text-3);padding:6px 10px 6px} .side__nav{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px} .side__row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--fr-r);text-decoration:none;cursor:pointer} .side__row:hover{background:var(--fr-bg-hover)} .side__row.is-current{background:var(--fr-bg-active)} .side__row-name{flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--fr-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side__row.is-current .side__row-name{color:var(--fr-text)} .side__row-meta{flex:none;font-family:var(--mono);font-size:10px;color:var(--fr-text-3);letter-spacing:.02em} .side__foot{border-top:1px solid var(--fr-border);margin:8px -14px 0;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px} .side__foot-count{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--fr-text-3)} .side__foot-link{display:inline-flex;align-items:center;gap:7px;font:inherit;font-family:var(--fr-sans);font-size:12.5px;color:var(--fr-text-2);background:none;border:0;border-radius:var(--fr-r);padding:6px 8px;cursor:pointer} .side__foot-link:hover{background:var(--fr-bg-hover);color:var(--fr-text)} .side__foot-link svg{width:14px;height:14px;display:block;flex:none} /* ---- Console-Suchpalette (weisses Modal, graue Pillen) ---- */ .app .searchpal__box{background:var(--fr-bg-raised);border-color:var(--fr-border);border-radius:var(--fr-r-xl)} .app .searchpal__top{border-bottom-color:var(--fr-border)} .app .searchpal__k{color:var(--fr-text-2);border-color:var(--fr-border)} .app .searchpal__input{color:var(--fr-text)} .app .searchpal__input::placeholder{color:var(--fr-text-3)} .app .searchpal__empty{color:var(--fr-text-2)} .app .searchpal__lane-label{color:var(--fr-text-2)} .app .searchpal__lane-code{color:var(--fr-text-3)} .app .searchpal__lane-count{color:var(--fr-text-3)} .app .searchpal__lane.is-active-lane .searchpal__lane-head{background:var(--fr-bg-active)} /* aktive Lane: graue Pille */ .app .searchpal__lane.is-active-lane .searchpal__lane-label{color:var(--fr-text)} .app .searchpal__row{border-radius:var(--fr-r)} .app .searchpal__row:hover{background:var(--fr-bg-hover)} /* Hover wie Nav (#f0f0ef) ... */ .app .searchpal__row.is-active{background:var(--fr-bg-active);box-shadow:none} /* ... Active dunkler (#e3e3e2), gewinnt per Quellreihenfolge */ .app .searchpal__name,.app .searchpal__row.is-active .searchpal__name{color:var(--fr-text)} .app .searchpal__subacct,.app .searchpal__subid{color:var(--fr-text-2)} .app .searchpal__subrg,.app .searchpal__submeta,.app .searchpal__more{color:var(--fr-text-3)} /* Zahl-Sprung-Indikator (unten mittig) */ #numjump{ position:fixed;left:50%;bottom:26px;z-index:30;pointer-events:none; font-family:var(--mono);font-size:15px;letter-spacing:.06em;color:var(--paper); background:rgba(28,23,18,.92);padding:8px 16px;border-radius:var(--r-md); box-shadow:0 10px 30px -12px rgba(26,20,15,.5); opacity:0;transform:translateX(-50%) translateY(6px); transition:opacity .12s ease,transform .12s ease; } #numjump.show{opacity:1;transform:translateX(-50%) translateY(0)} #numjump.miss{background:rgba(168,67,30,.95)} /* ============ Settings / App-Management (style/settings.js) -- Console-Look, fr-Tokens ============ */ /* Settings ist ein Flyout-INHALT-Modus, KEIN eigenes Layout: die Mini-Rail bleibt, die Content-Flaeche sitzt an derselben linken Kante wie die Karte (left:rail) -> kein Pixel-Shift beim Wechsel App<->Settings. Der Settings-Flyout (Brand, Back, Sektionen) ueberlagert wie das Account-Flyout, gleiche Auf/Zu/Griff-Mechanik. */ /* scrollbar-gutter:stable -> die 11px-Scrollleiste reserviert IMMER Platz, egal ob die Page scrollt. Sonst verschiebt sich die zentrierte 720px-Spalte je nach Content-Hoehe (scrollbare vs. kurze Pages wirkten unterschiedlich breit). both-edges haelt die Spalte symmetrisch zentriert. */ .settings{position:fixed;top:0;left:var(--nav-content-left);right:0;bottom:0;z-index:12;background:var(--fr-bg-page);overflow-y:auto;scrollbar-gutter:stable both-edges;transition:left .15s ease} .settings[hidden]{display:none} body[data-sidebar="settings"] .side__rail-btn--gear{background:var(--fr-bg-active);color:var(--fr-text)} /* Zahnrad aktiv */ /* Der Settings-Flyout nutzt .side__row auf