/* AK One — App-Styling. Design-System „Werkbank" (Linear/Attio-Schule) · Stufe 1 = Token-Layer (19.07.2026). Marke unverändert (Petrol #00303f + Teal #007F92). Fonts self-hosted (public/fonts, SIL OFL) statt Google-CDN. Spec: clients/ak-one-design-system.md. Dichte/Line-Icons/Sidebar folgen in Stufe 2/3. */ /* — Self-hosted Fonts: Inter (Body) + Roboto Condensed (Zahlen/Labels), latin, woff2, display:swap — */ @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/inter-400.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/inter-500.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/inter-600.woff2") format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/inter-700.woff2") format("woff2")} @font-face{font-family:"Roboto Condensed";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/roboto-condensed-400.woff2") format("woff2")} @font-face{font-family:"Roboto Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/roboto-condensed-700.woff2") format("woff2")} :root{ color-scheme:light; /* Marke (unverändert) */ --petrol:#00303f; --teal:#007F92; --teal-strong:#006475; --teal-wash:#e9f2f4; /* Neutral-Basis: hell, kühl, flach (Werkbank) */ --bg:#fafafa; --sidebar:#f4f5f6; --surface:#ffffff; --surface-sunken:#f0f2f3; --line:#e5e7e8; --line-2:#d6dadb; --ink:#1a262c; --ink-2:#3f4e56; --mut:#5c6b73; --faint:#8b979d; /* Semantik (Text-Varianten dunkel genug für Kontrast) */ --ok:#0f9d63; --ok-wash:#e7f4ee; --warn:#b45309; --warn-wash:#f8efe2; --err:#b3261e; --err-wash:#faece9; /* Kategorie Kommunikation (24.08.2026, Julien): eigene Orange-Umrandung für Kanal-Reiter (E-Mail/WhatsApp), getrennt von --warn benannt, teilt sich aber bewusst dieselbe Farbe. */ --comm:var(--warn); --comm-wash:var(--warn-wash); /* Elevation — zwei Stufen (Optik-Pass 02.08.2026): --e-flat für ruhende Flächen (Karte/Panel/KPI, ersetzt das bisherige --shadow:none), --e-pop für Overlays UND den Hover-/Lift-Zustand darüber. Beide dezent — Hairlines bleiben die Haupt-Struktur, Schatten ist nur der feine Zusatz. */ --e-flat:0 1px 2px rgba(20,38,44,.05),0 1px 1px rgba(20,38,44,.03); --e-pop:0 4px 16px rgba(20,38,44,.12),0 1px 3px rgba(20,38,44,.08); /* Radius eng (Anwendung auf Komponenten erst in Stufe 3) */ --r-sm:6px; --r-md:8px; --r-lg:10px; --r-full:999px; /* Typo-Skala dicht (Anwendung auf Komponenten erst in Stufe 3) */ --t-h1:17px; --t-h2:14px; --t-base:15px; --t-sm:14px; --t-xs:12.5px; /* 28.09.2026 call28-editor Z02: lesbare Schriftgrößen. */ --lh:1.45; /* Spacing (4px-Basis, eng) */ --s1:4px; --s2:6px; --s3:9px; --s4:12px; --s5:16px; --s6:22px; --s8:30px; /* Motion (zurückhaltend) */ --ease:cubic-bezier(.2,.8,.2,1); --dur:.14s; /* z-Skala (semantisch) */ --z-side:40; --z-sticky:50; --z-menu:1000; --z-modal:1200; --z-toast:1300; /* Fonts self-hosted */ --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-num:"Roboto Condensed",system-ui,-apple-system,sans-serif; /* Pflicht-Kompat-Aliase (additiv — ALLE Alt-Referenzen bleiben gültig; grep: --grey 245×, --teal-dark, --shadow, --cream) */ --grey:var(--mut); --teal-dark:var(--teal-strong); --shadow:var(--e-flat); --cream:var(--bg); } *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--ink); font:15px/1.55 var(--font)} /* Basis bleibt 15px in Stufe 1 — Dichte (13.5px) folgt in Stufe 3 */ h1,h2,h3,.cond{font-family:"Roboto Condensed","Arial Narrow",Inter,sans-serif} a{color:var(--teal);text-decoration:none;transition:color var(--dur) var(--ease)} a:hover{color:var(--teal-strong)} button{font-family:inherit} /* — Fokus-Ring global (Werkbank §3.4): 2px Weiß-Gap + Teal-Ring, sauber auf hellen Flächen — */ :focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px rgba(0,127,146,.55)} /* — Placeholder-Kontrast ≥4.5:1 (Optik-Pass 02.08.): --mut statt Browser-Default-Dimming (Firefox dimmt z.B. mit opacity:.54 zusätzlich) — #5c6b73 auf Weiß misst ~5.5:1. — */ ::placeholder{color:var(--mut);opacity:1} /* — Reduced-Motion respektieren (Barrierefreiheit; vorher 0×) — */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ---------- Header / Nav (Cockpit-Menüstruktur) ---------- */ header{position:sticky;top:0;z-index:50;background:var(--petrol);color:#fff;padding:0 20px} .hwrap{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:14px;height:60px} .logo{font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:19px;letter-spacing:.4px;white-space:nowrap} .logo small{display:block;font-size:10.5px;letter-spacing:3px;color:#7fc6d2;font-weight:400;margin-top:-3px} .nav{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nav a{color:#c8dde2;font-size:13.5px;font-weight:600;padding:7px 9px;border-radius:9px;transition:.15s;white-space:nowrap} .nav a:hover{background:rgba(255,255,255,.08);color:#fff} .nav a.on{background:var(--teal);color:#fff} .nav a.soon{color:#6f909a;cursor:default} .nav a.soon:hover{background:transparent;color:#6f909a} .nav a.soon::after{content:"bald";font-size:9px;font-weight:700;background:#37535f;color:#9fc3cd; border-radius:5px;padding:1px 5px;margin-left:5px;letter-spacing:.5px;vertical-align:middle} .huser{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px;color:#bcd8de;white-space:nowrap} .huser b{color:#fff;font-weight:600} .lgout{color:#9fbfc7;font-size:12.5px;text-decoration:none;border:1px solid #2a4a56;border-radius:8px;padding:6px 11px} .lgout:hover{color:#fff;border-color:#5b8794} @media(max-width:900px){.nav a{padding:6px 9px;font-size:13px}.huser span.role{display:none}} /* ---------- Layout ---------- */ .wrap{max-width:96vw;margin:0 auto;padding:22px 20px 90px} /* fluid statt fix 1320px (Wunsch Alexandra 31.07.) */ .pagehead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px} .pagehead h1{font-size:26px;margin:0;color:var(--petrol)} .pagehead .sub{color:var(--grey);font-size:13.5px} .spacer{flex:1} /* ---------- Tabs (Liste | Board | Karte) ---------- */ .tabs{display:flex;gap:8px;margin:18px 0 16px;flex-wrap:wrap} .tab{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:12px; padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block; transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease), color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)} .tab.on{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(0,127,146,.25)} .tab.soon{opacity:.6;cursor:not-allowed} /* ---------- Toolbar (Suche + NL-Scope) ---------- */ .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px} .search{flex:1;min-width:220px;position:relative} .search input{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 14px 11px 38px;font-size:15px;outline:none;background:#fff} .search input:focus{border-color:var(--teal)} .search::before{content:"🔍";position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.6} .scope{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--grey)} .scope select{border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;background:#fff;outline:none} .scope select:focus{border-color:var(--teal)} /* ---------- Kanban ---------- */ /* 26.08.2026 (32-Punkte-Korrekturliste, Punkt 29) — die horizontale Scrollleiste sitzt am UNTEREN Rand von .board (native overflow-x:auto-Leiste, keine eigene Komponente). Bisher nahm .col mit einem festen "calc(100vh - 250px)" an, dass ALLES oberhalb des Boards genau 250px hoch ist — das stimmte nicht mehr, sobald mehrere Filterzeilen (Zeitfilter/"Meine"/ Niederlassung) übereinander stehen (am Live-Layout gemessen oft 300-320px). Die Spalten wuchsen dadurch über den sichtbaren Bereich hinaus, die Leiste landete unterhalb des Viewports — man musste erst die ganze Seite scrollen, um sie überhaupt zu sehen. FIX: kandidaten.ejs setzt die CSS-Variable --board-max-h per JS auf die WIRKLICH freie Höhe (gemessen ab board.getBoundingClientRect().top, nicht geraten). "calc(100vh - 250px)" bleibt als Fallback stehen, falls JS noch nicht gelaufen ist oder deaktiviert wurde — reine Wert-Herkunft geändert, KEINE Änderung an overflow/min-height (das war die frühere Falle, s. [[feedback-scrollcontainer-minheight-falle]] — dort brach das äußere Seiten-Scrollen, hier bleibt display/overflow der Kette unangetastet). */ .board{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;align-items:flex-start} .col{flex:0 0 288px;background:var(--surface-sunken);border:1px solid var(--line);border-radius:16px; display:flex;flex-direction:column;max-height:var(--board-max-h, calc(100vh - 250px));overflow:hidden; position:relative} /* 26.08.2026 Punkt 32: Anker für die absolut positionierte A-Z-Leiste unten */ .col-head{display:flex;align-items:center;gap:8px;padding:13px 15px 10px;position:sticky;top:0;border-radius:15px 15px 0 0} /* 09.09.2026 (Punkt C, vakanzkandidaten-Paket) — NUR wenn .col-head ein DIREKTES Kind von .col-body ist (kandidaten.ejs#Board, seit heute: der Kopf steht jetzt IN der Spalte statt davor, Begruendung dort) gleicht diese Regel .col-bodys eigenes Padding (4px oben/12px seitlich) mit negativen Raendern aus, damit der Kopf weiterhin randlos ueber die volle Spaltenbreite reicht und oben buendig mit den abgerundeten Ecken von .col abschliesst (border-radius unveraendert). `top:-4px` statt `0`, weil die sticky-Schwelle sich auf .col-bodys PADDING-Kante bezieht — der Kopf ist per margin-top:-4px genau um das Padding nach oben gezogen, `top` muss ihm exakt dorthin folgen, sonst ruckt er beim ersten Scroll-Pixel um 4px. z-index rein defensiv, damit der Kopf beim Scrollen sichtbar UEBER den Karten bleibt, auch wenn eine Karte kuenftig selbst eine position bekommen sollte. Der Kind-Kombinator ">" trifft NUR diese neue Verschachtelung — views/a81-board.ejs nutzt dieselben Klassen mit der alten Struktur (.col-head bleibt dort direktes Kind von .col, kein Kind von .col-body) und bleibt dadurch unangetastet. */ .col-body>.col-head{margin:-4px -12px 4px;top:-4px;z-index:2} /* 26.08.2026 (32-Punkte-Korrekturliste, Punkt 32) — A-Z-Sprungleiste am rechten Spaltenrand, nur von JS eingehängt (kandidaten.ejs#azLeisteAufbauen), sobald eine Spalte "viele" Karten hat. Reine Frontend-Navigation: kein Server-Roundtrip, sie scrollt nur innerhalb der bereits im DOM stehenden Karten der eigenen Spalte (scrollIntoView), nie über Spaltengrenzen hinweg. Bewusst sehr schmal (14px) und randnah, damit sie kaum Kartentext überdeckt; `.col{overflow:hidden}` schneidet nichts ab, weil sie innerhalb der Spaltenbox bleibt (right:3px, nicht außerhalb). */ .col-az{position:absolute;right:3px;top:46px;bottom:8px;width:14px;display:flex;flex-direction:column; justify-content:space-between;align-items:center;z-index:5;pointer-events:none} .col-az button{all:unset;pointer-events:auto;cursor:pointer;font-size:8.5px;font-weight:700; line-height:1;color:var(--grey);padding:1px 0} .col-az button:hover{color:var(--teal)} .col-az button.az-leer{opacity:.32;cursor:default;pointer-events:none} .col-dot{width:10px;height:10px;border-radius:50%;flex:none} /* Punkt 5 (Call 21.07.): Status-Farbe als Blickfang — grosser Punkt am Kandidatenkopf + Inline-Punkt in Pillen/Buttons/Liste */ .status-dot-xl{display:inline-block;width:18px;height:18px;border-radius:50%;vertical-align:middle;margin-right:11px} .status-dot-inline{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:6px} .status-dot-lg{display:inline-block;width:13px;height:13px;border-radius:50%;vertical-align:middle;margin-right:7px} .col-title{font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:15px;color:var(--petrol)} .col-count{margin-left:auto;font-size:12px;font-weight:700;color:var(--grey);background:#fff;border:1px solid var(--line);border-radius:999px;padding:1px 9px} .col-body{flex:1;overflow-y:auto;padding:4px 12px 12px;min-height:60px} .col-body.drag-over{background:#e8f4f6} .card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 13px;margin-bottom:10px; box-shadow:var(--shadow);cursor:pointer;transition:box-shadow .12s,transform .12s} /* P0: Karte IST klickbar → pointer statt grab */ .card:hover{border-color:var(--line-2)} /* Werkbank: flach — Hover über Hairline statt Schatten */ .card:hover:not(.sortable-chosen){box-shadow:var(--e-pop)} /* zarter Lift; :not() schützt den staerkeren Drag-Schatten */ .card.sortable-chosen{cursor:grabbing} .card.sortable-ghost{opacity:.4} .card.sortable-chosen{box-shadow:0 8px 22px rgba(0,127,146,.22)} .card .cn{font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:3px} .card .cmeta{font-size:12px;color:var(--grey);display:flex;flex-wrap:wrap;gap:4px 10px} .card .cprof{margin-top:7px;display:flex;flex-wrap:wrap;gap:5px} .chipx{font-size:11px;font-weight:600;border-radius:7px;padding:2px 8px;background:#eef4f0;color:#20704d} .card .cnl{font-size:10.5px;font-weight:700;letter-spacing:.3px;color:var(--mut);text-transform:uppercase} .morebtn{width:100%;border:1.5px dashed var(--line);background:#fff;color:var(--grey);border-radius:10px; padding:8px;font-size:12.5px;font-weight:600;cursor:pointer} .morebtn:hover{border-color:var(--teal);color:var(--teal)} .emptycol{text-align:center;color:var(--mut);font-size:12.5px;padding:14px 4px} /* Karten-Caret (Status per Klick ändern, Call #2) */ .card{position:relative} .card-caret{position:absolute;top:7px;right:7px;width:22px;height:22px;border:1px solid var(--line);background:#fff; border-radius:7px;color:var(--grey);font-size:13px;line-height:1;cursor:pointer;padding:0;opacity:.55; transition:opacity var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)} .card:hover .card-caret{opacity:1} .card-caret:hover{border-color:var(--teal);color:var(--teal)} .card .cn{padding-right:24px} /* Platz für den Caret, damit lange Namen nicht drunter laufen */ /* DSGVO-Warnung (Call #7): keine Einwilligung → roter Rand + Badge */ .card.dsgvo-warn{border-left:3px solid var(--err)} .dsgvo-badge{font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--err);background:#fdf0ef;border:1px solid #f2cfcb; border-radius:6px;padding:1px 6px} /* Status-Menü (schwebt an der Karte) */ .status-menu{position:absolute;z-index:1200;background:#fff;border:1px solid var(--line);border-radius:12px; box-shadow:0 12px 34px rgba(0,48,63,.22);padding:5px;min-width:210px} .status-menu-item{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;text-align:left; padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--ink);cursor:pointer} .status-menu-item:hover{background:#f2f9fa} .status-menu-item.cur{font-weight:700;background:#eef7f8;cursor:default} .sm-dot{width:10px;height:10px;border-radius:50%;flex:none} /* Status-Pille als Button (Detailseite) */ .pill-btn{border:1px solid var(--line);background:#eef4f8;color:#2b5f78;font-weight:700;font-size:12px; border-radius:999px;padding:3px 11px;cursor:pointer;font-family:inherit} .pill-btn:hover{border-color:var(--teal);color:var(--teal)} /* DSGVO-Zeile (Detail, ganz oben) */ .dsgvo-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;margin:0 0 12px;font-size:13.5px} .dsgvo-row.ok{background:#eefaf3;border:1px solid #c4e8d3;color:#14532d} .dsgvo-row.bad{background:#fdf0ef;border:1px solid #f2cfcb;color:#8c2f28} .dsgvo-ico{font-weight:800;font-size:16px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none} .dsgvo-row.ok .dsgvo-ico{background:#1e9e6a;color:#fff} .dsgvo-row.bad .dsgvo-ico{background:var(--err);color:#fff} .btn-mini{border:1px solid currentColor;background:transparent;color:inherit;border-radius:8px;padding:5px 11px; font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;opacity:.85} .btn-mini:hover{opacity:1} /* Arbeitserlaubnis-Zeile (Detail, #33) + Badges */ .wp-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;margin:10px 0 0;font-size:13.5px} .wp-row.ok{background:#eefaf3;border:1px solid #c4e8d3;color:#14532d} .wp-row.bad{background:#fdf0ef;border:1px solid #f2cfcb;color:#8c2f28} .wp-row.warn{background:#fdf6ec;border:1px solid #f0e2c8;color:#8a5a10} .wp-row.unk{background:#f4f2ec;border:1px solid var(--line);color:#6b675e} .wp-ico{font-weight:800;font-size:15px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none} .wp-row.ok .wp-ico{background:#1e9e6a;color:#fff}.wp-row.bad .wp-ico{background:var(--err);color:#fff} .wp-row.warn .wp-ico{background:var(--warn);color:#fff}.wp-row.unk .wp-ico{background:#b8b2a6;color:#fff} .wp-badge{font-size:10px;font-weight:700;border-radius:6px;padding:1px 6px} .wp-badge.ja{background:#eefaf3;color:#14653a}.wp-badge.nein{background:#fdf0ef;color:#8c2f28} .wp-badge.befristet{background:#fdf6ec;color:#8a5a10} /* Firmen-Status-Pillen (#23) */ .pill.kunde{background:#eefaf3;color:#14653a}.pill.interessent{background:#fdf6ec;color:#8a5a10} .pill.neu{background:#eaf1fb;color:#2b4f9e}.pill.inaktiv{background:#f2f0ea;color:#7a746a} /* Vakanz-Online-Status */ .pill.online{background:#eefaf3;color:#14653a}.pill.nicht_online{background:#fdf6ec;color:#8a5a10} .pill.entwurf{background:#eef1f6;color:#54617f} /* NEU-Badge (Neuzugang letzte 7 Tage) */ .neu-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;color:#fff;background:#378ADD; /* blau = Statusfarbe 'Neuer Kandidat' (Julien 29.07.) */ border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle;box-shadow:0 1px 4px rgba(55,138,221,.4)} tr:has(.neu-badge) td{background:#f4fbfc} /* ganze Zeile leicht hervorheben */ /* 26.08.2026 (32-Punkte-Korrekturliste, Punkte 24+25) — Ungelesene Antwort: roter Punkt mit Zahl, auf dem Dashboard-Block "Neue Antworten" (views/vertrieb.ejs) UND auf den Board-Karten (views/kandidaten.ejs, beide Rendering-Stellen). GLEICHE Farbsprache wie dsgvo-badge/ wp-badge.nein (var(--err) = Achtung) statt einer dritten, neu erfundenen Warnfarbe. */ .antworten-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.3px;color:#fff; background:var(--err);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle} /* Call-Punkt 10: „Nicht kontaktieren"-Kennzeichnung (Status-Hygiene, z. B. Betrugsfall) */ .dnc-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.3px;color:#fff;background:#b23a3a;border-radius:6px;padding:1px 6px;vertical-align:middle} /* Call-Punkt 8: „zu weit"-Markierung im Matching (sichtbar, nicht ausgefiltert) */ .zuweit-badge{display:inline-block;font-size:10.5px;font-weight:700;color:#8a5a10;background:#fdf6ec;border:1px solid #f0dcae;border-radius:6px;padding:1px 6px;vertical-align:middle} /* 3-Stufen-Konzept (31.07.): "später verfügbar" im Matching sichtbar, aber nicht als Warnung — informativ blau */ .spaeter-badge{display:inline-block;font-size:10.5px;font-weight:700;color:#2b4f9e;background:#eaf1fb;border:1px solid #c9d9f0;border-radius:6px;padding:1px 6px;vertical-align:middle} /* Dashboard-Kacheln (#31) */ .statbox{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px;display:block} .statbox .n{font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:30px;color:var(--teal);line-height:1} .statbox .l{font-size:12px;color:var(--grey);margin-top:5px} @media(max-width:820px){ [style*="repeat(4,1fr)"]{grid-template-columns:1fr 1fr !important} } /* ---------- Login / Change-PW ---------- */ .authpage{min-height:100vh;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--petrol) 0%,var(--teal) 100%);padding:20px} .authcard{background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,48,63,.22); padding:36px 34px;width:100%;max-width:400px} .authcard .brand{font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:26px;color:var(--petrol);text-align:center} .authcard .brand small{display:block;font-size:11px;letter-spacing:3px;color:var(--teal);font-weight:400;margin-top:1px} .authcard h2{font-size:17px;color:var(--ink);text-align:center;margin:18px 0 4px;font-weight:600} .authcard .lead{text-align:center;color:var(--grey);font-size:13px;margin-bottom:22px} .field{margin-bottom:15px} .field label{display:block;font-size:12.5px;font-weight:600;color:var(--grey);margin-bottom:5px} .field input{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font-size:15px;outline:none} .field input:focus{border-color:var(--teal)} .btn{width:100%;background:var(--teal);color:#fff;border:0;border-radius:11px;padding:13px; font-weight:700;font-size:15px;cursor:pointer;box-shadow:var(--e-flat); transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)} .btn:hover{background:var(--teal-dark);box-shadow:var(--e-pop)} .btn:active{transform:translateY(1px);box-shadow:var(--e-flat)} .btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none} .errbox{background:#fdf0ef;border:1px solid #f2cfcb;color:#8c2f28;border-radius:11px;padding:11px 14px;font-size:13.5px;margin-bottom:16px} .okbox{background:#eefaf3;border:1px solid #c4e8d3;color:#14532d;border-radius:11px;padding:11px 14px;font-size:13.5px;margin-bottom:16px} /* ---------- Modal (Vermittelt-Pflichtfelder F4) ---------- */ /* 🔴 W-4 (Runde 3, 05.09.2026, Kimi-Fund gegen Runde 2) — z-index von literal 100 auf die vorhandene Variable --z-modal (1200) gehoben: mit 100 lag der schwebende KI-Knopf (.ki-fab, z-index:1100, s. unten) BILDLICH ÜBER jedem offenen Modal-Hintergrund und konnte theoretisch Modal-Aktionen am rechten unteren Rand überdecken (auf schmalen Viewports ≤520px). Jetzt liegt das Modal wieder über dem FAB, wie bei jedem anderen Overlay in diesem Haus, das absichtlich über allem liegen soll (--z-modal). Geprüft (05.09.2026): kein anderes Overlay rutscht dadurch unter den FAB — .status-menu (Kandidatenkarte) ist bereits literal 1200, #gsucheBox (--z-menu:1000) war und bleibt unter dem FAB, .toast (Flash-Meldung, literal 120, NICHT auf --z-toast:1300) lag VORHER über dem alten modal-bg(100) und liegt jetzt darunter — das ist die einzige Verschiebung durch diese eine Zeile; folgenlos, weil ein Toast praktisch nie gleichzeitig mit einem offenen Modal sichtbar ist (Toast kommt nach einer abgeschlossenen Aktion, das Modal ist dann schon zu). Als Randnotiz für ein künftiges Paket vermerkt: .toast auf --z-toast ziehen wäre konsequenter, liegt aber außerhalb des für diese Runde freigegebenen Ausschnitts (nur .modal-bg/.ki-fab). */ .modal-bg{position:fixed;inset:0;background:rgba(0,48,63,.5);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:20px} .modal{background:#fff;border-radius:18px;padding:26px;width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:90vh;overflow-y:auto} .modal h3{margin:0 0 4px;font-size:20px;color:var(--petrol)} .modal .msub{color:var(--grey);font-size:13px;margin-bottom:18px} .modal .actions{display:flex;gap:10px;margin-top:8px} .modal .actions .btn{flex:1} .btn-ghost{background:#fff;color:var(--grey);border:1.5px solid var(--line)} .btn-ghost:hover{background:var(--surface-sunken);color:var(--ink)} /* ---------- Blauer KI-Knopf (Platzhalter, voller Assistent nach Abnahme §6/§7) ---------- */ /* 16.10.2026 meldeknopf-position-1016 R2: Melden links neben KI mit 16px Abstand und gleicher Mitte. Nur der gemeinsame untere Freiraum wächst; Vorschauen und alle übrigen Inhalte behalten ihre Bestandsbreiten. */ .meldung-einstieg{position:fixed;right:98px;bottom:22px;width:120px;height:60px;display:flex;align-items:center;z-index:900} .meldung-einstieg button{display:block;width:100%;min-height:44px;padding:6px 8px; border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface); color:var(--petrol);font-size:12px;line-height:1.3;cursor:pointer;box-shadow:var(--e-flat)} .meldung-einstieg button:hover{background:var(--teal-wash);border-color:var(--teal)} body:has(.meldung-einstieg) .wrap{padding-bottom:98px} @media(max-width:480px){.meldung-einstieg{right:90px;bottom:14px}} @media print{ .meldung-einstieg,#meldung-dialog{display:none} body:has(.meldung-einstieg) .wrap{padding-bottom:80px} } .ki-fab{position:fixed;right:22px;bottom:22px;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer; background:radial-gradient(circle at 35% 35%,#12aec6,var(--teal-dark));color:#fff;font-size:26px;z-index:1100; box-shadow:0 10px 30px rgba(0,127,146,.4);animation:breathe 2.4s ease-in-out infinite} @keyframes breathe{0%,100%{box-shadow:0 10px 30px rgba(0,127,146,.35)}50%{box-shadow:0 10px 30px rgba(0,127,146,.15),0 0 0 14px rgba(0,127,146,0)}} .ki-hint{position:fixed;right:22px;bottom:92px;background:#fff;border:1px solid var(--line);border-radius:12px; padding:12px 15px;font-size:13px;max-width:250px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:80;color:var(--ink)} /* ---------- KI-Assistent-Panel ---------- */ .ki-panel{position:fixed;right:22px;bottom:94px;width:min(390px,calc(100vw - 44px));height:min(560px,calc(100vh - 140px)); background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,48,63,.3); z-index:1100;display:flex;flex-direction:column;overflow:hidden} /* über Leaflet-Panes (z~400-1000) */ .ki-panel[hidden]{display:none} /* display:flex überschreibt sonst das hidden-Attribut → Panel wäre IMMER offen */ .ki-head{display:flex;align-items:center;gap:10px;padding:13px 16px;background:var(--petrol);color:#fff} .ki-title{font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:16px} .ki-sub{font-size:11px;color:#8fc3cd;margin-left:auto} .ki-close{background:none;border:0;color:#9fbfc7;font-size:22px;cursor:pointer;line-height:1;padding:0 2px} .ki-close:hover{color:#fff} .ki-clear{background:none;border:0;color:#9fbfc7;font-size:14px;cursor:pointer;line-height:1;padding:0 2px} .ki-clear:hover{color:#fff} .ki-msgs{flex:1;overflow-y:auto;padding:14px;background:var(--bg)} .ki-msgs .msg{max-width:86%;padding:10px 13px;border-radius:13px;margin-bottom:10px;font-size:13.5px;line-height:1.5;word-wrap:break-word} .ki-msgs .msg.bot{background:#fff;border:1px solid var(--line);color:var(--ink)} .ki-msgs .msg.user{background:var(--teal);color:#fff;margin-left:auto} .ki-note{font-size:11.5px;color:#8a5a10;background:#fdf6ec;border:1px solid #f0e2c8;border-radius:8px;padding:5px 8px;margin-top:8px} .ki-match{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:11px; padding:8px 10px;margin-top:8px;text-decoration:none;color:var(--ink);transition:.12s} .ki-match:hover{border-color:var(--teal);box-shadow:0 3px 10px rgba(0,127,146,.12)} .ki-rank{font-family:"Roboto Condensed",sans-serif;font-weight:700;background:var(--petrol);color:#fff;border-radius:7px; min-width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;flex:none} .ki-mi{flex:1;min-width:0} .ki-mi b{font-size:13px;display:block} .ki-mi small{color:var(--grey);font-size:11.5px} .ki-score{font-family:"Roboto Condensed",sans-serif;font-weight:700;color:var(--teal);font-size:16px;flex:none} .ki-chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line);background:#fff} .ki-chips .chip{border:1.5px solid #cfe7ec;background:#f2f9fa;color:#0b515d;border-radius:999px;padding:5px 11px;font-size:11.5px;cursor:pointer} .ki-chips .chip:hover{background:#e2f1f4} .ki-inrow{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:#fff} .ki-inrow input{flex:1;border:1.5px solid var(--line);border-radius:11px;padding:10px 13px;font-size:14px;outline:none} .ki-inrow input:focus{border-color:var(--teal)} .ki-inrow .send{background:var(--teal);color:#fff;border:0;border-radius:11px;padding:0 16px;font-weight:700;font-size:13px;cursor:pointer} .ki-dots{display:inline-flex;gap:4px;padding:2px 0} .ki-dots i{width:7px;height:7px;border-radius:50%;background:#9fb4ba;animation:kidot 1.2s infinite} .ki-dots i:nth-child(2){animation-delay:.15s}.ki-dots i:nth-child(3){animation-delay:.3s} @keyframes kidot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}} /* ---------- Listen / Tabellen (Unternehmen, Vakanzen) ---------- */ .panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden} .dtable{width:100%;border-collapse:collapse;font-size:14px} .dtable th{text-align:left;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--grey); padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface-sunken);font-weight:700} .dtable td{padding:12px 16px;border-bottom:1px solid var(--line)} .dtable tr:last-child td{border-bottom:0} .dtable tbody tr:hover{background:var(--surface-sunken)} /* 09.09.2026 (Call-Auftrag R07, Paket polish2) — Kandidatentabellen (Vorgeschlagene Kandidaten an Vakanz und Firma) sitzen in schmalen Spalten (z. B. #vak3Spalten): die .dtable-Regel oben scrollt erst ab @media(max-width:820px) VIEWPORT-Breite, das trifft eine schmale GRID-SPALTE bei 1512/1280px Fensterbreite nicht. Eigener, unbedingter Scroll-Wrapper statt abgeschnittener rechter Spalte (Status/Aktionen) -- ohne die bestehende .dtable-Regel fuer alle anderen Tabellen im Haus zu veraendern. */ .dtable-scroll{overflow-x:auto} .dtable-scroll .dtable{min-width:480px} /* 09.09.2026 (Call-Auftrag R06, Paket polish2) — #vak3Spalten (views/vakanz-detail.ejs) hat VIER direkte Kind-Divs (Anzeigentext/Bewerbungen/Kandidaten/Bundesagentur+Veroeffentlichung), aber nur drei Grid-Spalten (repeat(3,1fr)). Ohne feste grid-column-Zuweisung landete "Passende Kandidaten" per Auto-Placement in Spalte 3/Reihe 1 -- und die Bundesagentur-Spalte dadurch erst in Reihe 2: "Stelle"/"Vorgeschlagene Kandidaten"/"Bundesagentur: Freigabe und Vorschau" starteten NICHT auf gleicher Hoehe. Jetzt haelt Spalte 2 Bewerbungen+Kandidaten untereinander, Spalte 3 haelt die Bundesagentur-Karte -- alle drei benannten Karten beginnen in Reihe 1. Bei schmaler Darstellung faellt die feste Spaltennummer zurueck auf natuerliche DOM-Reihenfolge, sonst wuerde ein Element eine Spalte verlangen, die die bestehende [style*="repeat(3,1fr)"]-Kollaps-Regel (s. u.) dann gar nicht mehr anbietet. Keine feste Hoehe: unterschiedliche Kartenhoehen bleiben erlaubt. */ #vak3Spalten > #spalteKandidaten{grid-column:2} #vak3Spalten > #spalteBundesagentur{grid-column:3} @media(max-width:820px){ #vak3Spalten > #spalteKandidaten, #vak3Spalten > #spalteBundesagentur{grid-column:auto} } /* 09.09.2026 (Call-Auftrag R09, Paket polish2) — "Profil für erstellen & prüfen" (partials/matchlist.ejs + views/vakanz-detail.ejs#vjProfilKnopfZeigen) ist ein : ohne eigenes display bleibt ein "inline", dann zeichnet der Browser bei Zeilenumbruch (langer Firmenname) den Rahmen JE ZEILE statt als EINEN geschlossenen Kasten. Scoped auf .mlprofil, damit alle anderen btn-mini-Verwendungen im Haus unangetastet bleiben. */ .mlprofil .btn-mini{display:inline-block;white-space:normal;text-align:left;line-height:1.35} .dtable a{font-weight:600} .pill{font-size:11px;font-weight:700;border-radius:999px;padding:2px 10px;display:inline-block} .pill.kunde{background:#eefaf3;color:#14653a}.pill.interessent{background:#fdf6ec;color:#8a5a10} .pill.neu{background:#eef4f8;color:#2b5f78}.pill.inaktiv{background:#f2f0ea;color:#7a746a} .pill.offen{background:#eefaf3;color:#14653a}.pill.besetzt{background:#f2f0ea;color:#7a746a} .pill.ba{background:#eef1fb;color:#3b46a0}.pill.own{background:#e9f6f8;color:#0b6272} .pill.wiederkehrend{background:#f5eefc;color:#6b3fa0} /* Call-Punkt 1: neue Anfrage, Firma bereits bekannt */ .pager{display:flex;gap:8px;align-items:center;justify-content:center;padding:14px} .pager a,.pager span{border:1.5px solid var(--line);border-radius:9px;padding:7px 13px;font-size:13px;font-weight:600;background:#fff} .pager .cur{background:var(--teal);color:#fff;border-color:var(--teal)} .pager .off{opacity:.4;pointer-events:none} .filterbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px} .fbtn{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink);text-decoration:none} .fbtn.on{background:var(--petrol);color:#fff;border-color:var(--petrol)} .emptybox{padding:34px;text-align:center;color:var(--grey)} /* ---------- Match-Ergebnisse (Vorfilter/KI) ---------- */ .matchrow{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line)} .matchrow:last-child{border-bottom:0} .mrank{font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-weight:700;background:var(--petrol);color:#fff; border-radius:9px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none} .mbody{flex:1;min-width:0} .mname{font-weight:700} .mmeta{font-size:12px;color:var(--grey);display:flex;gap:10px;flex-wrap:wrap;margin-top:2px} .mscore{flex:none;text-align:right} .mscore .sc{font-family:"Roboto Condensed",sans-serif;font-weight:700;font-size:22px;color:var(--teal);line-height:1} .mscore .kmv{font-size:11px;color:var(--grey)} .scorebar{height:7px;background:var(--surface-sunken);border-radius:6px;margin-top:6px;overflow:hidden;width:120px} .scorefill{height:100%;border-radius:6px;background:linear-gradient(90deg,#0aa6bd,#007F92)} /* ---------- Flash / Toast ---------- */ .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--petrol);color:#fff; padding:12px 20px;border-radius:12px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:120} .toast.err{background:var(--err)} .toast.ok{background:var(--ok)} /* ---------- Responsive-Defensive (Call #12: „abgeschnitten" auf anderen Bildschirmen) ---------- */ img{max-width:100%;height:auto} /* Fotos nie überlaufen lassen */ .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} @media(max-width:980px){ .detail-grid{grid-template-columns:1fr} /* Kandidaten-Detail: 2 Spalten → gestapelt */ } @media(max-width:820px){ .wrap{padding:16px 12px 90px} .pagehead h1{font-size:22px} .dtable{display:block;overflow-x:auto;white-space:nowrap} /* breite Tabellen horizontal scrollen statt abschneiden */ .board .col{flex-basis:84vw} /* Kanban-Spalten auf Handy breiter greifbar */ } /* KI-Panel auf kleinen Screens fast vollflächig statt fix 390px (verhinderte „abgeschnitten") */ @media(max-width:480px){ .ki-panel{right:10px;left:10px;bottom:80px;width:auto;height:min(70vh,calc(100vh - 110px))} .ki-fab{right:14px;bottom:14px} } /* Header nicht quetschen wenn viel Navigation + langer Name (Alex' Bildschirm war gequetscht) */ @media(max-width:1300px){ .hwrap{gap:9px} .nav a{padding:6px 8px;font-size:12.5px} .nav a.soon::after{display:none} .huser{font-size:11.5px;gap:9px} } @media(max-width:1120px){ .huser b{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom} .lgout{padding:5px 8px} } /* Grids, die auf 4 Spalten stehen, fluide machen (Dashboard-Kacheln etc.) */ [style*="repeat(4,1fr)"]{grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important} [style*="repeat(3,1fr)"]{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important} /* P1: Quellen-Badges (Website/Meta/Manuell/Cockpit) — eine Wahrheit in lib/source-labels.js */ .src-badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px;letter-spacing:.2px;white-space:nowrap} .src-website{background:#e0f2f4;color:#00707f} .src-meta{background:#e7f0fe;color:#1a66d0} .src-manuell{background:#ececec;color:#555} .src-cockpit{background:#f4ead8;color:#8a6420} .src-other{background:#ececec;color:#555} /* Mitarbeiter-Avatar (Profil-Feature): Foto oder Initialen-Kreis, überall wo Namen stehen */ /* Julien 30.07., zweiter Anlauf: Der CSS-Zoom (object-view-box mit EINEM Wert fuer alle) traf nicht jeden — „manche Gesichter sind nicht richtig drin". Er ist wieder raus. Stattdessen liegt fuer jede Person ein von Hand gesetzter Kopf-Ausschnitt in public/assets/avatare/. Damit genuegt hier cover: keine Magie, kein Browser-Gefaelle. */ .uavatar{border-radius:50%;object-fit:cover;vertical-align:middle;flex:none} .uinit{display:inline-flex;align-items:center;justify-content:center;background:var(--petrol);color:#fff;font-weight:700;letter-spacing:.3px} /* V1: „NL prüfen" — Eingang ohne Ortssignal, bewusst sichtbar unzugeordnet statt still falsch */ .nl-pruefen{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px;background:#fdf0e3;color:#b45309;border:1px solid #f3ddc0;white-space:nowrap} /* V2: Sprach-Dispo — vorgeschlagener Ergebnis-Button (Keyword-Match, Klick bestätigt) */ .dispo-btn.suggest{outline:3px solid #2563eb;outline-offset:1px;background:#e7f0fe} /* Dialer-Status (Partial, genutzt auf /dialer und /vertrieb) */ .dstate{font-size:14px;font-weight:600;color:var(--grey)} .dstate.ok{color:var(--ok)}.dstate.err{color:var(--err)} .dstate.busy{color:var(--teal)}.dstate.warn{color:#b45309} /* ============================================================================ Werkbank Stufe 2 — App-Shell: linke Seitenleiste ersetzt die Top-Nav. Nav-ZIELE unverändert, nur umpositioniert. Hairline statt Schatten, Line-Icons statt Emoji. ============================================================================ */ body.app{padding-left:224px} /* nur App-Shell — Login/Change-PW haben eigenen body ohne Seitenleiste */ .side{position:fixed;left:0;top:0;bottom:0;width:224px;background:var(--sidebar);border-right:1px solid var(--line); display:flex;flex-direction:column;gap:2px;padding:14px 10px 10px;z-index:var(--z-side);overflow-y:auto} .side-brand{padding:2px 8px 12px} .side-wm{display:block;font-family:var(--font-num);font-weight:700;font-size:18px;letter-spacing:.3px;color:var(--petrol);line-height:1.1} .side-brand small{display:block;font-size:9.5px;letter-spacing:2.2px;color:var(--faint);font-weight:600;margin-top:2px} .side-search{position:relative;margin:0 4px 12px;display:flex;align-items:center} .side-search .ni{position:absolute;left:9px;width:15px;height:15px;color:var(--faint);pointer-events:none} .side-search input{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 9px 7px 30px; font:inherit;font-size:12.5px;background:var(--surface);color:var(--ink);outline:none} .side-search input:focus{border-color:var(--teal)} #gsucheBox{display:none;position:absolute;top:36px;left:0;width:290px;max-height:380px;overflow:auto;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e-pop);z-index:var(--z-menu);padding:4px} #gsucheBox a{display:block;padding:7px 9px;border-radius:var(--r-sm);color:var(--ink);font-size:12.5px;text-decoration:none} #gsucheBox a:hover{background:var(--teal-wash)} .gs-k{display:inline-block;font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.4px;margin-right:5px} .gs-s{color:var(--mut);font-size:11.5px} .gs-empty{padding:10px;color:var(--mut);font-size:12.5px} .side-nav{display:flex;flex-direction:column;gap:1px} .side-nav a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm); font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:none; transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .side-nav a .ni{width:17px;height:17px;flex:none;color:var(--mut)} .side-nav a:hover{background:rgba(0,48,63,.05);color:var(--ink)} .side-nav a.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--line),var(--e-flat)} .side-nav a.on .ni{color:var(--teal)} /* 12.08.2026 — Zwischenueberschrift in der Seitenleiste. Anlass: „Unternehmen" war in elf gleich aussehenden Zeilen nicht auffindbar. Bewusst leise gehalten (gleiche Sprache wie .side-brand small): sie soll dem Auge einen Ankerpunkt geben, nicht mit den Menuepunkten konkurrieren. */ .side-cap{font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--faint); font-weight:700;padding:12px 9px 3px;user-select:none;pointer-events:none} .side-nav > .side-cap:first-child{padding-top:2px} .side-sep{height:1px;background:var(--line);margin:10px 6px} .side-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px} .side-user{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none} .side-user:hover{background:rgba(0,48,63,.05)} .su-txt{min-width:0;line-height:1.2} .su-txt b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .su-txt small{display:block;font-size:10.5px;color:var(--mut)} .side-logout{font-size:11.5px;color:var(--mut);text-decoration:none;padding:2px 8px} .side-logout:hover{color:var(--ink)} /* 🔴 Codex 8a (Runde 2, 05.09.2026) — RÜCKBAU des §4-Fix oben: Julien wollte ausdrücklich "auf jeder Seite rechts unten so ein KI-Zeichen" (Call 05.09.2026, wörtlich). Der §4-Fix hatte den schwebenden Knopf komplett unsichtbar gemacht (display:none!important) und den Zugang auf einen ruhigen Seitenleisten-Eintrag verlegt — das war eine frühere, dokumentierte, aber Juliens direktem Wunsch WIDERSPRECHENDE Design-Entscheidung. Der Seitenleisten-Eintrag (#kiSideLink, views/partials/header.ejs) bleibt zusätzlich bestehen (zwei Wege zum selben Panel, kein Widerspruch). Geprüft (05.09.2026, Runde 2): .ki-fab (app.css, position:fixed;right:22px; bottom:22px;z-index:1100) kollidiert NICHT mit der Kanban-Board-Scrollleiste (.board hat overflow-x:auto INNERHALB der Seite, .col begrenzt sich selbst auf --board-max-h und lässt damit immer reservierten Platz darunter frei — die Scrollleiste des Boards sitzt nie im selben Bildbereich wie der Knopf unten rechts). z-index-Vergleich gegen Modal-Aktionen: DAMALS (Runde 2) nutzte .modal-bg z-index:100 (nicht die Variable --z-modal:1200) — der FAB (1100) lag damit BILDLICH ÜBER einem offenen Modal-Hintergrund. Das war kein neuer Fehler dieses Pakets (app.css/.modal-bg lagen außerhalb des damaligen ki18-Reviers, nur die .ki-fab-Zeile durfte angefasst werden) — als Fund für ein künftiges Paket vermerkt. ✅ BEHOBEN in Runde 3 (05.09.2026, Kimi-Fund W-4, Revier für .modal-bg diesmal freigegeben, s. dortiger Kommentar): .modal-bg nutzt jetzt --z-modal, liegt also wieder ÜBER dem FAB. ⚠️ NIEMALS wieder `.ki-fab{display:none!important}` hier eintragen, ohne vorher mit Julien Rücksprache zu halten — das war explizit sein Wunsch, kein Bug. */ /* §4-Fix: kein farbiger Seitenstreifen mehr — volle Hairline + zarter Tint, das Badge trägt die Information */ .card.dsgvo-warn{border:1px solid #ecc9c4;background:var(--err-wash)} /* Responsive: <900px wird die Seitenleiste zur oberen Leiste — alle Ziele erreichbar, ohne JS */ @media(max-width:900px){ body.app{padding-left:0} .side{position:static;width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px; border-right:0;border-bottom:1px solid var(--line);padding:8px 10px;overflow:visible} .side-brand{padding:0 8px 0 2px} .side-brand small{display:none} .side-search{margin:0;flex:1;min-width:150px} .side-nav{flex-direction:row;flex-wrap:wrap} .side-sep{display:none} .side-foot{margin:0;padding:0;border:0;flex-direction:row;align-items:center} .su-txt small{display:none} } /* ============================================================================ Werkbank Stufe 3 — Dichte + enge Radien + flache Zustände (§3.2/§3.3). Bewusst global über Tokens statt 20 Einzel-Views: mehr Info pro Screen, präzise statt verspielt. Reine Optik — keine Funktions-/Layout-Logik. ============================================================================ */ body{font-size:var(--t-base);line-height:var(--lh)} .wrap{padding:18px 18px 80px} .pagehead h1{font-size:var(--t-h1);letter-spacing:-.2px} .pagehead .sub{font-size:var(--t-sm)} /* Flächen: engere Radien, kompaktere Innenabstände */ .panel{border-radius:var(--r-lg)} .card{border-radius:var(--r-md);padding:10px 11px;margin-bottom:8px} .card .cn{font-size:13.5px} .col{border-radius:var(--r-lg)} .col-title{font-size:14px} .statbox{border-radius:var(--r-lg);padding:12px 14px} .statbox .n{font-size:26px} .statbox .l{font-size:var(--t-xs);color:var(--mut);text-transform:uppercase;letter-spacing:.4px;margin-top:3px} /* Bedienelemente: kompakt, 1px-Hairline statt 1.5px, flach */ .tab{border-radius:var(--r-md);padding:7px 13px;font-size:var(--t-sm);border-width:1px} .tab.on{box-shadow:none} /* Werkbank ist flach — kein Teal-Glow */ .btn{border-radius:var(--r-md);font-size:var(--t-base)} .fbtn{border-radius:var(--r-sm);padding:6px 11px;font-size:var(--t-sm);border-width:1px} .btn-ghost,.pager a,.pager span,.morebtn{border-width:1px} .pager a,.pager span{border-radius:var(--r-sm);font-size:var(--t-sm);padding:6px 11px} .pill,.src-badge,.chipx{font-size:var(--t-xs)} .neu-badge{box-shadow:none} /* flach */ .search input,.field input,.scope select,.ki-inrow input{border-width:1px;border-radius:var(--r-md);font-size:var(--t-base)} .search input{padding:9px 12px 9px 34px} /* Tabellen dichter (Recruiting-Daten: mehr Zeilen sichtbar = Feature) */ .dtable{font-size:var(--t-sm)} .dtable th{font-size:10.5px;padding:9px 14px;letter-spacing:.5px} .dtable td{padding:9px 14px} /* Status-Punkt für Listenzeilen (Werkbank: Punkt + Wort statt bunter Fläche) */ .sdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle;background:var(--faint)} .sdot.ok{background:var(--ok)}.sdot.warn{background:var(--warn)}.sdot.err{background:var(--err)} /* Empty-States: lehren statt „nichts da" */ .emptybox{padding:26px 18px;color:var(--mut);font-size:var(--t-sm)} .emptycol{font-size:var(--t-xs)} /* Kennzahl-Strip (Stufe 3, §5): EINE Karte, Spalten per Hairline getrennt — statt 4 schwebender Boxen. Label bewusst --mut statt des in §5 skizzierten --faint: --faint hat nur 2.87:1 und ist laut §2 ausdrücklich NUR Deko, nie lesbarer Text. Kontrast schlägt Layout-Skizze. */ .kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface); border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px} .kpi{padding:12px 16px;border-left:1px solid var(--line);display:block;text-decoration:none;color:inherit} .kpi:first-child{border-left:0} a.kpi:hover{background:var(--surface-sunken)} .kpi-l{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--mut);font-weight:700} .kpi-n{font-family:var(--font-num);font-weight:700;font-size:26px;line-height:1.1;color:var(--ink);margin-top:4px} .kpi-n.ok{color:var(--ok)} /* Ehrlichkeits-Zusatz unter einer Kennzahl (z.B. „+12 ohne NL"): sichtbar, aber nachrangig. --mut statt --faint, damit es lesbar bleibt — es ist ein Hinweis, keine Deko. */ .kpi-sub{font-size:var(--t-xs);color:var(--mut);margin-top:2px} @media(max-width:820px){.kpi-strip{grid-template-columns:1fr 1fr}.kpi:nth-child(3){border-left:0}} /* ============================================================================ Auf-/Zuklappen + selbstordnendes Panel-Layout (Julien 29.07.2026): „wenn es zu gross ist muss man die ganze Zeit scrollen — optisch unguenstig und unprofessionell … der Mitarbeiter soll entlastet werden." Zwei Bausteine, beide reine Optik — keine Funktions-/Route-/DB-Aenderung: 1)
— jedes Panel laesst sich zuklappen 2) .panelflow — Panels ruecken auf, statt Loecher zu lassen ============================================================================ */ /* --- 1. Klapp-Panel ------------------------------------------------------- */ /* Die vorhandene Kopfzeile des Panels wird zum und behaelt ihr eigenes Padding aus der jeweiligen Ansicht. Hier steht nur, was ueberall gilt. */ details.panel > summary{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent; } details.panel > summary::-webkit-details-marker{display:none} /* Der Winkel steht bewusst LINKS vor dem Titel: rechts kleben in vielen Koepfen schon „alle →"-Links und Kennzahlen per margin-left:auto — dort waere er im Weg. Zu = zeigt nach rechts, offen = zeigt nach unten. */ details.panel > summary::before{ content:''; flex:none; width:6px; height:6px; border-right:1.5px solid var(--mut); border-bottom:1.5px solid var(--mut); transform:rotate(-45deg); transition:transform var(--dur) var(--ease); } details.panel[open] > summary::before{transform:rotate(45deg)} details.panel > summary:hover{background:var(--surface-sunken)} details.panel > summary:hover::before{border-color:var(--ink)} details.panel > summary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(0,127,146,.55)} /* Ein zugeklapptes Panel ist nur noch seine Kopfzeile — der Titel darf dann nicht mehr den Abstand zum weggeklappten Inhalt mitschleppen. */ details.panel:not([open]) > summary > h3{margin-bottom:0} @media(prefers-reduced-motion:reduce){details.panel > summary::before{transition:none}} /* --- 2. Selbstordnendes Panel-Layout -------------------------------------- */ /* Vorher: zwei starre Spalten. Eine kurze Kachel neben einer langen liess ein Loch ueber die volle Kachelhoehe stehen (z.B. „Niederlassungen — Vermittlungen" und „Top-Mitarbeiter", die oft leer sind). Jetzt fliessen die Panels und ordnen sich beim Auf-/Zuklappen von selbst neu. Die Reihenfolge bleibt erhalten: erst Spalte 1 von oben nach unten, dann Spalte 2 — das Wichtigste steht also weiterhin zuerst. */ .panelflow{columns:2;column-gap:16px} .panelflow > *{ break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; margin:0 0 16px; width:100%; } @media(max-width:980px){.panelflow{columns:1}} /* Verschachtelte Klapp-Bereiche INNERHALB eines Panels (z.B. „Leistung je Mitarbeiter und Niederlassung", „Protokoll (Technik)") sprechen dieselbe Sprache wie das Panel selbst — nur eine Spur zurueckhaltender. */ .panel details:not(.panel) > summary{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; cursor:pointer; list-style:none; } .panel details:not(.panel) > summary::-webkit-details-marker{display:none} .panel details:not(.panel) > summary::before{ content:''; flex:none; width:5px; height:5px; border-right:1.5px solid var(--faint); border-bottom:1.5px solid var(--faint); transform:rotate(-45deg); transition:transform var(--dur) var(--ease); } .panel details:not(.panel)[open] > summary::before{transform:rotate(45deg)} .panel details:not(.panel) > summary:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(0,127,146,.45)} /* Ein Panel, das eine breite Tabelle traegt, laeuft im fliessenden Raster ueber ALLE Spalten. Sonst quetscht es sich in eine halbe Breite und zwingt der Nachbarspalte einen Leerraum in seiner vollen Hoehe auf (gemessen 29.07.: 858px in den Auswertungen). Gilt inhaltlich, nicht nach Tageshoehe. */ .panelflow > .breit{column-span:all; -webkit-column-span:all} /* ============================================================================ Zustandswechsel weich statt hart (Julien-GO 30.07., „risikolose Stufe"). Rein additiv: setzt ausschliesslich `transition` und ueberschreibt nichts. Aufgenommen sind nur Elemente, die heute HART umspringen — wo schon ein Uebergang definiert ist (.nav a, .btn, .card, .card-caret, .side-nav a), steht der Selektor bewusst nicht dabei. Bewegung abgestellt? Die globale @media (prefers-reduced-motion) weiter oben drueckt die Dauer auf .001ms — hier braucht es keine zweite Ausnahme. --- Erweitert 02.08. (Optik-Pass): Formularfelder + restliche Sidebar-/Tab-Elemente ergaenzt, Eigenschaftsliste um box-shadow/transform erweitert (fuer die neue Hover-Elevation auf Karten/Buttons + das Druck-Feedback unten). Ungenutzte Properties sind No-Ops — ein