/* ============================================================ Hestiaro · Design 2026 für eigenständige Instanzen (Kern / White Label) ------------------------------------------------------------ Wird NUR auf eigenständigen Instanzen geladen: instanz_html.js setzt beim Ausliefern und hängt diese Datei als LETZTES Stylesheet in den . Die MAYA-Instanz lädt sie nie und bleibt Byte für Byte, wie sie ist. Vorgehen wie webinar_design26.css: dieselben Token-Namen neu belegen, danach gezielte Korrekturen für die Kernbildschirme. Alle Regeln hängen an html.kern (höhere Spezifität als die Seitenstile); !important nur dort, wo index.html Inline-Stile oder feste Farben trägt. Hell UND Dunkel (03.11.2026): Farbwerte stehen nur in hestiaro/tokens.css (Rollen --h-*, gemeinsam mit den Kundenportalen). Diese Datei nennt nur var(--k-…)/var(--h-…); html.k-dunkel schaltet um (Abschnitt 26). Die Hex-Werte unten in der Regel-Liste beschreiben die HELLE Fassung. Regeln (Skill maya-design): - Schrift: nur Mona Sans (selbst gehostet als „MAYA Grotesk“), Rubriken breit in Versalien - Schwarz-Weiß: Weiß #FFFFFF · Grau #F4F4F3 · Grau tief #E9E9E7 · Nebentext #6E6C69 · Anthrazit #1E1D1C · Fließtext #3A3936 – plus GENAU EINE Akzentfarbe je Firma (firma.akzent in instanz/.json). instanz_html.js berechnet daraus beim Ausliefern --akzent, --akzent-tief, --akzent-hell, --akzent-text, --akzent-ring, --akzent-rgb. Diese Datei nennt NIE einen festen Akzent-Hexwert, nur var(--akzent…). Akzent sparsam: aktiver Navigationspunkt (Strich), der eine Hauptaufruf je Bildschirm, Fokusring, „neu/heiß“-Punkte, Leitsymbole, Fortschritt. Rot/Grün nur für Zustände, entsättigt. - keine Konturen/Trennlinien (nur 2-px-Fokusring), keine Verläufe, kein Creme - Radien: Pille 999 · Felder 12 · Karten 16 · Flächen 24 - Schatten nur für Schwebendes: 0 14px 36px rgba(30,29,28,.12) - Abstände 4/8/12/16/24/32/48/64 ============================================================ */ @font-face{font-family:'MAYA Grotesk';src:url(/assets/fonts/MAYAGrotesk-Regular.ttf) format('truetype');font-weight:400;font-display:swap} @font-face{font-family:'MAYA Grotesk';src:url(/assets/fonts/MAYAGrotesk-Medium.ttf) format('truetype');font-weight:500;font-display:swap} @font-face{font-family:'MAYA Grotesk';src:url(/assets/fonts/MAYAGrotesk-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap} @font-face{font-family:'MAYA Grotesk';src:url(/assets/fonts/MAYAGrotesk-Bold.ttf) format('truetype');font-weight:700 900;font-display:swap} @font-face{font-family:'MAYA Grotesk Breit';src:url(/assets/fonts/MAYAGroteskBreit-Medium.ttf) format('truetype');font-weight:400 900;font-display:swap} /* ── 1. Tokens ───────────────────────────────────────────────────────────── Die Farbwerte stehen NUR in hestiaro/tokens.css (Rollen --h-*, hell und dunkel, gemeinsam mit den Kundenportalen). Hier werden sie auf die Kurznamen dieser Datei (--k-*) und auf die Token-Namen des alten Tools (--ink, --bg, --card …) gelegt. html.kern[data-theme="dark"] steht mit in der Liste, damit die Dunkel-Werte des alten Tools (index.html :root[data-theme="dark"]) nie gewinnen. */ html.kern, html.kern:root, html.kern[data-theme="dark"], html.kern[data-theme="light"]{ /* eigene Namen (für Korrekturen unten) */ --k-weiss:var(--h-karte); --k-grau:var(--h-unter); --k-tief:var(--h-tief); --k-tief-2:var(--h-tief-2); --k-linie:var(--h-linie); --k-mittel:var(--h-mittel); --k-leise:var(--h-leise); --k-neben:var(--h-neben); --k-anthr:var(--h-stark); --k-text:var(--h-text); --k-umkehr:var(--h-umkehr); --k-ak:var(--akzent,var(--k-anthr)); --k-ak-tief:var(--akzent-tief,var(--k-text)); --k-ak-text:var(--akzent-text,#FFFFFF); /* Akzent als SCHRIFT: hell --akzent-tief, dunkel --akzent-dunkel (beide ≥ 4.5:1 auf ihrer Fläche) */ --k-ak-schrift:var(--h-ak-schrift); --k-ak-ring:var(--akzent-ring,var(--k-ak)); --k-ak-hell:var(--h-ak-flaeche); --k-rot:var(--h-rot); --k-gruen:var(--h-ok); --k-blau:var(--h-blau); /* Füllung für Felder und zweitrangige Knöpfe: halbtransparent, damit sie auf Weiß als Grau var(--k-grau) und auf grauen Flächen als Grau tief var(--k-tief) erscheinen */ --k-fuell:var(--h-fuell); --k-fuell-hover:var(--h-fuell-hover); --k-schwebend:var(--h-schwebend); --k-ring:0 0 0 2px var(--k-ak-ring); --k-sans:var(--h-sans); --k-breit:'MAYA Grotesk Breit','MAYA Grotesk',system-ui,sans-serif; /* bestehende Token-Namen neu belegt */ --font:var(--k-sans); --mono:var(--k-sans); --ink:var(--k-anthr); --ink-soft:var(--k-text); --bg:var(--k-weiss); --surface:var(--k-grau); --card:var(--k-grau); --line:transparent; --line-strong:transparent; --muted:var(--k-neben); --muted-light:var(--k-neben); /* Akzent = Anthrazit: aktive Zustände, Links, Zähler. Orange kommt gezielt (--k-orange). */ --accent:var(--k-anthr); --accent-hover:var(--k-text); --accent-dark:var(--k-anthr); --accent-soft:var(--k-tief); --accent-tint:var(--k-grau); --gold:var(--k-neben); --green:var(--h-ok); --green-deep:var(--h-ok); --green-soft:var(--k-grau); --ok:var(--h-ok); --blue:var(--h-blau); --red:var(--h-rot); --warn:var(--k-neben); --orange:var(--k-ak); --header:var(--k-weiss); --side-bg:var(--k-weiss); --grad-accent:linear-gradient(var(--k-anthr),var(--k-anthr)); --grad-soft:none; --grad-warm:none; --grad-wash:none; --grad-green:linear-gradient(var(--h-ok),var(--h-ok)); --ambient:none; --glass-bg:var(--k-weiss); --glass-blur:none; --glass-float:var(--k-weiss); --glass-line:transparent; --r-xs:8px; --r:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px; --sh:none; --sh-md:var(--k-schwebend); --sh-lg:var(--k-schwebend); --light-overlay:transparent; --light-overlay-soft:transparent; } html.kern body{font-family:var(--k-sans);background:var(--k-weiss);color:var(--k-anthr); font-feature-settings:normal;-webkit-font-smoothing:antialiased} html.kern button,html.kern input,html.kern select,html.kern textarea{font-family:var(--k-sans)} html.kern .app-main{background:var(--k-weiss);background-image:none} html.kern ::selection{background:var(--k-tief);color:var(--k-anthr)} /* Mona Sans setzt bei tabellarischen Ziffern eigene Schreibmaschinen-Formen (gepunktete Null, Serifen-Eins). Im Tool wirkt das fremd – daher proportionale Ziffern überall. */ html.kern,html.kern *{font-variant-numeric:normal!important} /* ── 2. Rubriken: breit, Versalien, Nebentext, nie fett ───────────────── */ html.kern :is(.ctab-th,.im2-head-row,.ak2-card-t,.ak2-focus-k,.nav2-sect,.nav2-pal-g,.eyebrow,.kpi-label, .steck-group-title,.pf-sect-title,.dash-panel-title,.dash-subdate,.user-role,.user-dd-role,.df > label,.modal-label){ font-family:var(--k-breit)!important;font-weight:500!important;font-size:11px!important;letter-spacing:.16em!important; text-transform:uppercase!important;color:var(--k-neben)!important} html.kern .ctab-th.on{color:var(--k-anthr)!important} /* Tabellenköpfe sind schmal: weniger Sperrung, sonst werden sie abgeschnitten */ html.kern :is(.ctab-th,.im2-head-row){letter-spacing:.08em!important;font-size:10.5px!important} /* ── 3. Flächen: Weiß als Grund, Grau für Inhalte, keine Rahmen ───────── */ html.kern .app-header{background:var(--k-weiss)!important;background-image:none!important;border:0!important;box-shadow:none!important} html.kern .nav2-panel{background:var(--k-weiss)!important;background-image:none!important;border:0!important} html.kern .nav2-side.exp .nav2-panel{box-shadow:var(--k-schwebend)!important} html.kern :is(#drawer,#propDrawer){background:var(--k-weiss)!important;border:0!important} html.kern body.nav2 :is(#drawer,#propDrawer){box-shadow:-14px 0 36px var(--h-schatten)!important} html.kern :is(.drawer-top,.prop-top,.profile-nav,.ak2-stages){background:transparent!important;border:0!important;box-shadow:none!important} html.kern .drawer-footer{background:var(--k-weiss)!important;border:0!important} /* Kontaktwege in der Akte (Anrufen/Mail mit Pfeil): Pille ohne Rand */ html.kern :is(.split-act,.dtop-way){border-color:transparent!important;border-radius:16px!important;background:var(--k-grau)!important} html.kern .split-act-divider{background:var(--k-weiss)!important} html.kern :is(.split-act-btn,.split-act-arrow):hover{background:var(--k-tief)!important} html.kern body.nav2 #drawer.akte2 .profile-nav,html.kern body.nav2 #propDrawer.immo2 .profile-nav{background:var(--k-weiss)!important} /* Karten in den Akten und auf Heute: grau, weich, ohne Rand */ html.kern :is(.ak2-card,.ak2-focus,.h2-card,.h2-stat,.im2-card,.ctab,.l2-panel,.kpi-tile,.dash-panel){ border:0!important;box-shadow:none!important;border-radius:16px!important} html.kern .ak2-focus{background:var(--k-grau)!important} html.kern .ak2-focus.leer{background:var(--k-grau)!important} html.kern .h2-stat-ico,html.kern .ak2-n{background:var(--k-weiss)!important} /* Notizfeld am Kunden: kein dunkler Seitenrand */ html.kern :is(.ak2-notecard,.drawer-note-top){border:0!important;box-shadow:none!important} /* Schwebendes: weiß, Schatten, große Rundung */ html.kern :is(.modal-box,.nav2-pal,.rc-modal,.cmp-box,.vgl-box){background:var(--k-weiss)!important;border:0!important; border-radius:24px!important;box-shadow:var(--k-schwebend)!important} html.kern :is(.user-dropdown,.ak2-menu,.zz-menu,.dd-menu,.ctx-menu,.mfab-act-lbl,.mfab-act-ico){ background:var(--k-weiss)!important;border:0!important;box-shadow:var(--k-schwebend)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} html.kern :is(.user-dropdown,.ak2-menu,.zz-menu){border-radius:16px!important} html.kern :is(.modal-overlay,.modal-wrap,.rc-modal-overlay,.cmp-overlay,.nl-overlay,.vgl-overlay,.nav2-pal-wrap){ background:var(--h-scrim-leise)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} html.kern :is(.modal-head,.modal-header,.modal-foot,.nav2-pal-in,.nav2-pal-f,.user-dd-header){border:0!important} html.kern .nav2-pal-f{background:var(--k-grau)!important} html.kern .modal-box :is(.modal-actions,.modal-foot,.drawer-footer){background:var(--k-weiss)!important;border:0!important} html.kern .user-dd-sep,html.kern .ak2-sep{background:var(--k-grau)!important} html.kern .user-dd-item:hover,html.kern .ak2-menu button:hover{background:var(--k-grau)!important} /* Trennlinien weg (Tabellenzeilen, Listen, Abschnitte) */ html.kern :is(.ctab-head,.ctab-row,.im2-row,.im2-head-row,.im2-tabs,.l2-bar,.im2-kids,.im2-kid,.im2-sek,.im2-check li,.im2-akts li,.pb-group){ border-color:transparent!important} html.kern .ctab-head{background:transparent!important} html.kern .ctab-row:hover,html.kern .im2-row:hover{background:var(--k-tief)!important} html.kern .ctab{background:var(--k-grau)!important} html.kern .im2-row{border-radius:12px} html.kern .im2-thumb.leer{border:0!important;background:var(--k-grau)!important} html.kern .col-bar{display:none!important} html.kern .col-num{background:var(--k-weiss)!important;border:0!important} html.kern .nav2-sect::before,html.kern .nav2-sub::before{display:none!important} /* ── 4. Knöpfe: Pille, ohne Rahmen. Haupt = Anthrazit, zweitrangig = Grau ─ */ html.kern :is(.btn,.btn-ghost,.btn-light,.btn-danger,.resv-btn,.hd-btn,.ak2-btn,.h2-btn,.im2-btn,.mtool-btn,.l2-fbtn,.prop-rc-btn){ border-radius:999px!important;border-color:transparent!important;box-shadow:none!important;filter:none!important; background:var(--k-fuell)!important;color:var(--k-anthr)!important;font-weight:600!important;letter-spacing:0!important} html.kern :is(.btn,.btn-ghost,.btn-light,.btn-danger,.resv-btn,.hd-btn,.ak2-btn,.h2-btn,.im2-btn,.mtool-btn,.l2-fbtn,.prop-rc-btn):hover{ background:var(--k-fuell-hover)!important;color:var(--k-anthr)!important} html.kern body.nav2 :is(.btn,.btn-ghost,.btn-light,.btn-danger,.resv-btn,.hd-btn,.ak2-btn,.h2-btn,.im2-btn,.l2-fbtn){height:38px;padding:0 18px} html.kern body.nav2 :is(.btn-sm,.btn.btn-sm){height:32px!important;padding:0 14px!important} html.kern .h2-btn.ghost{background:transparent!important} html.kern .h2-btn.ghost:hover{background:var(--k-grau)!important} /* Haupt (bisher Orange oder Verlauf) */ html.kern :is(.btn-accent,.btn.btn-accent,.resv-btn.primary,.ak2-btn.pri,.im2-btn.pri,.hd-btn.done,.prop-rc-btn:not(.ghost),.mobile-fab-btn){ background:var(--k-anthr)!important;color:var(--k-umkehr)!important} html.kern :is(.btn-accent,.btn.btn-accent,.resv-btn.primary,.ak2-btn.pri,.im2-btn.pri,.hd-btn.done,.prop-rc-btn:not(.ghost)):hover{ background:var(--k-text)!important;color:var(--k-umkehr)!important} html.kern .mobile-fab-btn{box-shadow:var(--k-schwebend)!important} /* Gefahr: rote Schrift auf Grau */ html.kern :is(.btn-danger,.btn.btn-danger,.btn-danger-soft){color:var(--k-rot)!important} html.kern :is(.btn,.btn-ghost,.btn-danger,.ak2-btn,.h2-btn,.im2-btn,.btn-icon):focus-visible{outline:none!important;box-shadow:0 0 0 2px var(--k-weiss),0 0 0 4px var(--k-ak-ring)!important} html.kern .btn:disabled,html.kern .btn[disabled]{opacity:.4!important} html.kern :is(.btn,.btn-ghost,.ak2-btn,.h2-btn,.im2-btn) svg{flex:none} html.kern .btn-icon{border-radius:999px!important} html.kern .btn-icon:hover{background:var(--k-grau)!important} /* Der eine Hauptaufruf im Akzent: „Anrufen“ in der Kundenakte beginnt das Gespräch */ html.kern .ak2-btn.pri[data-kern-orange],html.kern .ak2-acts .ak2-btn.pri:first-child{background:var(--k-ak)!important;color:var(--k-ak-text)!important} html.kern .ak2-acts .ak2-btn.pri:first-child:hover{background:var(--k-ak-tief)!important;color:#FFFFFF!important} /* ── 5. Felder: grau gefüllt, Radius 12, beim Tippen weiß mit 2-px-Ring ─── */ html.kern :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=button]):not([type=submit]):not([type=image]),select,textarea){ background-color:var(--k-fuell)!important;border-color:transparent!important;box-shadow:none!important; border-radius:12px!important;color:var(--k-anthr)} html.kern :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=button]):not([type=submit]):not([type=image]),select,textarea):focus{ background-color:var(--k-weiss)!important;outline:none!important;box-shadow:0 0 0 2px var(--k-ak-ring)!important} html.kern :is(input,textarea)::placeholder{color:var(--k-neben)!important;font-style:normal!important;opacity:1} html.kern .search-input{border-radius:999px!important} /* Felder in Verbund-Bausteinen: die Hülle ist das Feld */ html.kern :is(.nav2-pal-in,.h2-ask) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=button]):not([type=submit]):not([type=image]), html.kern :is(.nav2-pal-in,.h2-ask) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=button]):not([type=submit]):not([type=image]):focus{ background-color:transparent!important;box-shadow:none!important;border-radius:0!important} html.kern .h2-ask{border:0!important;background:var(--k-fuell)!important;border-radius:999px!important} html.kern .h2-ask svg{color:var(--k-neben)!important} /* Auswahlpfeil neutral */ html.kern .df select,html.kern .df select:hover{background-image:url("data:image/svg+xml;utf8,")!important} /* Häkchen in Anthrazit */ html.kern :is(input[type=checkbox],input[type=radio]){accent-color:var(--k-anthr)} /* ── 6. Umschalter, Reiter, Filter ──────────────────────────────────────── Umschalter: Spur Grau tief, aktive Option weiße Pille. Reiter (bisher Unterstrich): Pillen, aktiv Grau tief. */ html.kern :is(.seg-control,.rc-seg,.ana-seg,.bez-switch,.if-seg){background:var(--k-tief)!important;border:0!important;border-radius:999px!important;padding:3px!important} html.kern :is(.seg-control .seg-btn,.rc-seg button,.ana-seg .ana-seg-btn,.bez-switch .bez-tab,.if-seg button){border-radius:999px!important;border:0!important;box-shadow:none!important} html.kern :is(.seg-control .seg-btn.active,.rc-seg button.on,.rc-seg button.active,.ana-seg .ana-seg-btn.active,.bez-switch .bez-tab.active,.if-seg button.an){ background:var(--k-weiss)!important;color:var(--k-anthr)!important;box-shadow:none!important} html.kern :is(.seg-control .seg-btn.active svg,.seg-control .seg-btn.active .ico){color:var(--k-anthr)!important} html.kern .pot-inline-filters a.on{background:var(--k-tief)!important;color:var(--k-anthr)!important;box-shadow:none!important} html.kern :is(.l2-view,.im2-tab),html.kern :is(body.nav2 #drawer.akte2 .pnav-btn,body.nav2 #propDrawer.immo2 .profile-nav .pnav-btn){ border:0!important;box-shadow:none!important;border-radius:999px!important;padding:8px 14px!important;margin:0 0 6px!important;color:var(--k-text)!important;font-weight:600!important} html.kern :is(.l2-view,.im2-tab):hover,html.kern :is(body.nav2 #drawer.akte2 .pnav-btn,body.nav2 #propDrawer.immo2 .profile-nav .pnav-btn):hover{background:var(--k-grau)!important;color:var(--k-anthr)!important} html.kern :is(body.nav2 #drawer.akte2 .pnav-btn.active,body.nav2 #propDrawer.immo2 .profile-nav .pnav-btn.active){ background:var(--k-tief)!important;color:var(--k-anthr)!important} html.kern body.nav2 #drawer.akte2 .profile-nav{padding:8px 18px 4px!important;gap:4px!important} html.kern :is(.l2-n,.im2-tab-n){background:var(--k-weiss)!important;color:var(--k-neben)!important} html.kern :is(.l2-view.on .l2-n,.im2-tab.on .im2-tab-n){background:var(--k-weiss)!important;color:var(--k-anthr)!important} html.kern .l2-view.dran .l2-n,html.kern .l2-fn{background:var(--k-anthr)!important;color:var(--k-umkehr)!important} html.kern .l2-fbtn.on{background:var(--k-tief)!important} /* Kopfzeilen-Reiter alter Modus (Handy/Tablet) ohne Unterstrich und Leuchten */ html.kern .nav-tab::after,html.kern .nav-tab::before{display:none!important} html.kern .nav-tab.active{color:var(--k-anthr)!important} /* Filter-Chips / Etiketten: Pille, ohne Rand */ html.kern :is(.chip,.fin-chip,.akt-chip,.ak2-st-chip,.ak2-st-mini,.pb-chip,.cs-prov,.tag,.badge,.im2-art){ border-color:transparent!important;border-radius:999px!important;box-shadow:none!important} html.kern :is(.cs-prov,.pb-chip){background:var(--k-weiss)!important;color:var(--k-text)!important} /* Zähler: Anthrazit; „neu“-Punkte im Akzent */ html.kern :is(.nav-badge,.nav2-badge,.mnav-badge){background:var(--k-anthr)!important;color:var(--k-umkehr)!important} html.kern .nav2-ico .nav2-badge{border-color:var(--k-weiss)!important} html.kern .nav2-badge.soft{background:var(--k-tief)!important;color:var(--k-anthr)!important} html.kern .nav2-dot{background:var(--k-ak)!important} /* ── 7. Seitenleiste (nav2) ───────────────────────────────────────────── */ html.kern :is(.nav2-item,.nav2-sub){border-radius:999px!important} html.kern .nav2-item:hover,html.kern .nav2-sub:hover{background:var(--k-grau)!important;color:var(--k-anthr)!important} html.kern .nav2-item.on,html.kern .nav2-side:not(.exp) .nav2-grp.active > .nav2-item{background:var(--k-tief)!important} html.kern .nav2-grp.active > .nav2-item{color:var(--k-anthr)!important} html.kern .nav2-sub.on{background:var(--k-grau)!important;color:var(--k-anthr)!important;font-weight:600!important} html.kern .nav2-sub{padding-left:45px!important} html.kern .nav2-side.exp .nav2-search{background:var(--k-fuell)!important;border-color:transparent!important;border-radius:999px!important} html.kern .nav2-search{border-radius:999px!important} html.kern .nav2-kbd{border:0!important;background:var(--k-weiss)!important} html.kern .nav2-foot{border:0!important} html.kern body.nav2 .nav2-foot .user-btn,html.kern .nav2-side.exp .nav2-foot .user-btn{border-color:transparent!important} html.kern .nav2-side.exp .nav2-foot .user-btn{background:var(--k-grau)!important} html.kern .user-btn{border-color:transparent!important;background:var(--k-grau)!important} html.kern .user-ava{background:var(--k-anthr)!important;color:var(--k-umkehr)!important} /* Marke: Symbol in der schmalen Leiste, Wortbild im offenen Panel */ /* Zeichen 24 px auf der Symbolachse; Wortbild 30 px hoch (= 128 px breit, Mindestbreite 120 px) */ html.kern .nav2-brand .kern-mark{height:24px!important;width:24px!important} html.kern .nav2-brand .kern-logo{height:30px!important;width:auto!important;left:20px!important} html.kern .nav2-crumb-a::after{color:var(--k-neben)!important} html.kern .nav2-pal-r.on{background:var(--k-grau)!important} html.kern .nav2-pal-r.on .t,html.kern .nav2-pal-r.on .ico{color:var(--k-anthr)!important} html.kern .nav2-pal-r mark{text-decoration-color:var(--k-anthr)!important} /* ── 8. Kopfleiste (Handy/Tablet) ─────────────────────────────────────── */ html.kern .brand-logo-img.kern-logo{height:29px!important;width:auto!important} /* ── 9. Heute ─────────────────────────────────────────────────────────── */ html.kern .h2-hello h1{font-weight:600!important;letter-spacing:-.02em!important} html.kern .h2-hello h1 span,html.kern .dash-greeting .accent{color:var(--k-anthr)!important} html.kern .h2-stat b{font-weight:600!important} html.kern .h2-stat.warn b,html.kern .h2-stat.warn .h2-stat-ico{color:var(--k-anthr)!important} html.kern .h2-stat.warn .h2-stat-ico{background:var(--k-tief)!important} html.kern :is(.dash-hero-ai,.dash-hero){background:var(--k-grau)!important;background-image:none!important;border:0!important;border-radius:24px!important;box-shadow:none!important} html.kern .dash-hero{background:transparent!important} html.kern .dash-hero-ai::after,html.kern .dash-hero-ai::before{display:none!important} html.kern .dash-greeting{font-weight:600!important} /* ── 10. Pipeline ─────────────────────────────────────────────────────── */ html.kern .col-title{font-weight:600!important} /* ── 11. Kontakt-Akte ─────────────────────────────────────────────────── */ html.kern .ak2-st{background:var(--k-grau)!important;color:var(--k-neben)!important} html.kern .ak2-st:hover:not(.c):not([disabled]){background:var(--k-tief)!important;color:var(--k-anthr)!important} html.kern .ak2-st.d{background:var(--k-tief)!important;color:var(--k-text)!important} html.kern .ak2-st.c{background:var(--k-anthr)!important;color:var(--k-umkehr)!important} html.kern .d-ava{background:var(--k-grau)!important;border:0!important;color:var(--k-anthr)!important} html.kern .ak2-chk{border-color:var(--k-anthr)!important;background:var(--k-weiss)!important} html.kern .ak2-kv dd.hint{color:var(--k-anthr)!important} html.kern :is(.ak2-kv dd.warn,.ak2-focus-b small.od){color:var(--k-rot)!important} html.kern .ak2-res{color:var(--k-anthr)!important} /* ── 12. Objekte ──────────────────────────────────────────────────────── */ /* Status-Pillen: Orange (bisher „Aktiv“) wird Grün = läuft; Text in Anthrazit, Punkt in der Zustandsfarbe */ html.kern .im2-pill{color:var(--k-anthr)!important;background:var(--k-grau)!important} html.kern .im2-pill::before{background:var(--pc,var(--k-neben))!important} /* Status-Punkt kommt aus PROP_STATUS (kern.js: Aktiv = Akzent, Rest Grau); alte Festwerte zur Sicherheit */ html.kern .im2-pill[style*="b3541b" i]{--pc:var(--k-ak)!important} html.kern .im2-pill[style*="e0a06b" i]{--pc:var(--k-neben)!important} html.kern .im2-pill[style*="8f4214" i]{--pc:var(--k-anthr)!important} html.kern .im2-preis-gross{color:var(--k-anthr)!important;font-weight:600!important} html.kern .im2-ava{background:var(--k-tief)!important;color:var(--k-anthr)!important} html.kern .im2-art.ei{background:var(--k-tief)!important;color:var(--k-anthr)!important;border:0!important} /* ── 13. Handy (unter 769 px) ─────────────────────────────────────────── */ html.kern .mobile-nav{background:var(--k-weiss)!important;border:0!important;box-shadow:var(--k-schwebend)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} html.kern .mnav-item.active{background:var(--k-tief)!important;color:var(--k-anthr)!important} html.kern .mfab-act-ico{color:var(--k-anthr)!important} @media (max-width:768px){ html.kern :is(.btn,.btn-accent,.btn-ghost,.btn-light,.btn-danger){min-height:44px} } /* ── 14. Login-Seite (login.html) ─────────────────────────────────────── */ html.kern body:has(.login-wrap){background:var(--k-weiss)!important;background-image:none!important;color:var(--k-anthr);padding:16px} html.kern .login-wrap{max-width:420px;padding:0} html.kern .login-wrap .brand{margin-bottom:32px} html.kern .login-wrap .brand-img{filter:none!important;height:48px!important;width:auto!important;margin:0 auto} html.kern .login-wrap .brand .mark{color:var(--k-anthr)!important;font-weight:600} html.kern .login-wrap .card{--k-fuell:var(--k-weiss);background:var(--k-grau)!important;border:0!important;box-shadow:none!important;border-radius:24px!important;padding:32px!important} html.kern .login-wrap .card h2{font-size:24px!important;font-weight:600!important;margin-bottom:4px!important;letter-spacing:-.01em} html.kern .login-wrap .kern-firma{font-size:14px;color:var(--k-neben);margin:0 0 24px} html.kern .login-wrap .field{margin-bottom:16px} html.kern .login-wrap .field label{font-family:var(--k-sans)!important;font-weight:500!important;font-size:13px!important;letter-spacing:0!important;text-transform:none!important;color:var(--k-neben)!important;margin-bottom:8px!important} html.kern .login-wrap .field input{height:52px;padding:0 18px!important;font-size:16px!important;background-color:var(--k-weiss)!important} html.kern .login-wrap .field input:focus{box-shadow:0 0 0 2px var(--k-ak-ring)!important} /* Anmelden = der eine Hauptaufruf der Seite → Akzent */ html.kern .login-wrap .btn{height:52px!important;border-radius:999px!important;background:var(--k-ak)!important;color:var(--k-ak-text)!important;font-size:15px!important;margin-top:8px} html.kern .login-wrap .btn:hover{opacity:1!important;background:var(--k-ak-tief)!important;color:#FFFFFF!important} html.kern body:has(.login-wrap){flex-direction:column} html.kern .kern-herkunft{position:fixed;left:0;right:0;bottom:24px;display:flex;justify-content:center;pointer-events:none} html.kern .kern-herkunft img{height:30px;width:auto;display:block} @media (max-height:640px){html.kern .kern-herkunft{position:static;margin-top:48px}} html.kern .login-wrap .error{background:var(--k-weiss)!important;border:0!important;border-radius:12px!important;color:var(--k-rot)!important} /* ── 15. Kalender ─────────────────────────────────────────────────────── */ html.kern .cal-day-col.today{background:rgba(var(--h-stark-rgb),.03)!important} html.kern .cal-head-cell.today{background:var(--k-tief)!important} html.kern :is(.cal-head-cell.today .cal-head-day,.cal-head-cell.today .cal-head-date,.day-col.today .day-label){color:var(--k-anthr)!important} html.kern :is(.cal-today-btn){border-color:transparent!important} /* ── 16. Abgeschaltete Module (instanz/.json „module“: false) – nur Oberfläche ─ */ html.kern[data-kern-aus~="finanzen"] :is(#tab-finanzen,#ddFinanzen){display:none!important} /* ════════════════════════════════════════════════════════════════════════════ 17. Schwarz-Weiß mit Akzent (Runde 03.11.2026, Befunde Silas) ════════════════════════════════════════════════════════════════════════════ */ /* ── 17.1 Schrift: Satzschreibung statt gesperrter Versalien ─────────────────── Silas: gesperrte Versalien „sehen nicht gut aus“. Darum auf eigenständigen Instanzen grundsätzlich keine Versalien und keine Sperrung. Die frühere Rubrik-Liste darunter bleibt nur für Schrift/Größe/Farbe wirksam (Versalien gewinnt die Regel oben); wer eine Rubrik bewusst in Versalien will, gibt dem Element die Klasse .k-rubrik. Überschriften behalten ihre enge Laufweite. */ html.kern body *:not(h1):not(h2):not(.k-rubrik){text-transform:none!important} html.kern body *:not(h1):not(h2):not(.h2-hello *):not(.k-rubrik){letter-spacing:normal!important} html.kern :is(.ak2-card-t,.nav2-sect,.nav2-pal-g,.eyebrow,.lm-eyebrow,.kb-rubrik){ text-transform:uppercase!important;letter-spacing:.08em!important;font-family:var(--k-sans)!important; font-size:11px!important;font-weight:600!important;color:var(--k-neben)!important} /* Beschriftungen: Mona Sans 13 px, 500, Nebentext – Zusatz in derselben Zeile kleiner und normal */ html.kern :is(.df > label:not(.fixed-toggle):not(.pf-check),.modal-label,.compose-label,label.fld > span:first-child, .kpi-label,.steck-group-title,.pf-sect-title,.dash-panel-title,.dash-subdate,.user-role,.user-dd-role, .cal-backlog-label,.ctab-th,.im2-head-row,.ak2-focus-k,.settings-nav-sep,.set-label,.field-label){ font-family:var(--k-sans)!important;font-size:13px!important;font-weight:500!important;color:var(--k-neben)!important} html.kern :is(.df > label,.modal-label,.compose-label,label.fld > span:first-child) span{font-size:12px!important;font-weight:400!important;color:var(--k-neben)!important;opacity:1!important} html.kern :is(.ctab-th,.im2-head-row){font-size:12.5px!important} html.kern .ctab-th.on{color:var(--k-anthr)!important} html.kern .settings-nav-sep{font-size:12px!important;font-weight:600!important} html.kern .settings-nav-sep span{font-weight:400!important} /* Kennzahl-Kacheln (Analysen, Marketing): Zahl groß, Beschriftung normal darunter */ html.kern :is(.kpi-label,.mkt-kpi-l,.ana-kpi-l){font-size:13px!important;font-weight:500!important} /* Leitsymbol „Tipp“ in der Gesprächsvorbereitung: Punkt statt Emoji */ html.kern .prep-tips li::marker{content:'· ';color:var(--k-ak)} /* ── 17.2 Fokusring im Akzent (Barrierefreiheit: Ring hat ≥ 3:1 auf Weiß) ─────── */ html.kern :focus-visible{outline-color:var(--k-ak-ring)} html.kern :is(.df,.steck-field,.ak2-field):focus-within{box-shadow:none!important;outline:none!important;border-color:transparent!important} html.kern .df:has(> input:focus,> select:focus,> textarea:focus){box-shadow:none!important} /* ── 17.3 Auswahlfelder: EIN Pfeil rechts (Kachelmuster-Fehler) ───────────────── ui2.css setzt in Fenstern `background:var(--card)` (Kurzform) – das stellte background-repeat auf „repeat“ zurück, der Pfeil von .df select lief als Muster über das ganze Feld. */ html.kern select:not([multiple]):not([size]){ -webkit-appearance:none!important;appearance:none!important; background-image:url("data:image/svg+xml;utf8,")!important; background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:12px 8px!important; padding-right:38px!important;text-overflow:ellipsis} html.kern select:not([multiple]):not([size]):hover{background-image:url("data:image/svg+xml;utf8,")!important} html.kern :is(input[type=date],input[type=time],input[type=datetime-local],input[type=number]){background-image:none!important} /* ── 17.4 Häkchen und Auswahlknöpfe: ruhig, 6 px rund, schwarz nur wenn aktiv ──── */ html.kern input[type=checkbox]:not(.sw-input):not([role=switch]){ -webkit-appearance:none;appearance:none;width:18px;height:18px;min-width:18px;margin:0;flex:none; border:0!important;border-radius:6px!important;background:var(--k-tief) no-repeat center/12px 12px!important; box-shadow:none!important;cursor:pointer;vertical-align:-3px;transition:background-color .12s} html.kern input[type=checkbox]:not(.sw-input):not([role=switch]):hover{background-color:var(--k-tief-2)!important} html.kern input[type=checkbox]:not(.sw-input):not([role=switch]):checked{ background-color:var(--k-anthr)!important; background-image:url("data:image/svg+xml;utf8,")!important} html.kern input[type=checkbox]:not(.sw-input):not([role=switch]):indeterminate{background-color:var(--k-neben)!important} html.kern input[type=radio]{-webkit-appearance:none;appearance:none;width:18px;height:18px;min-width:18px;margin:0;flex:none; border:0!important;border-radius:50%!important;background:var(--k-tief)!important;box-shadow:none!important;cursor:pointer;vertical-align:-3px} html.kern input[type=radio]:checked{background:var(--k-anthr)!important;box-shadow:inset 0 0 0 5px var(--k-anthr),inset 0 0 0 9px var(--k-weiss)!important} html.kern :is(input[type=checkbox],input[type=radio]):focus-visible{outline:2px solid var(--k-ak-ring)!important;outline-offset:2px} /* Beschriftete Häkchen: auf einer Linie, Abstand 10 px */ html.kern :is(label.fixed-toggle,label.pf-check,.nav-vis-row,label:has(> input[type=checkbox]),label:has(> input[type=radio])){ display:inline-flex!important;align-items:center!important;gap:10px!important;font-size:14px!important;font-weight:500!important; color:var(--k-text)!important;line-height:1.35!important} html.kern .df > label.fixed-toggle{display:flex!important;padding:6px 0!important} /* ── 17.5 Formulare in Einstellungen und Fenstern: Beschriftung ÜBER dem Feld ────── */ html.kern label.fld{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;min-width:0} html.kern label.fld > :is(input,select,textarea){width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box} html.kern .settings-pane :is(.form-grid,[style*="grid-template-columns:1fr 1fr"]){ display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;max-width:720px!important} html.kern .settings-pane :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),select,textarea){ min-height:44px;padding-left:14px;padding-right:14px;font-size:14px} html.kern .settings-pane select{padding-right:38px!important} html.kern .settings-pane h4{font-size:16px!important;font-weight:600!important;color:var(--k-anthr)!important;margin:32px 0 12px!important} html.kern .settings-pane h4:first-child{margin-top:0!important} @media (max-width:768px){ html.kern .settings-pane :is(.form-grid,[style*="grid-template-columns:1fr 1fr"]),html.kern .df-row{grid-template-columns:minmax(0,1fr)!important} } /* Hinweis-Kästen: graue Fläche statt Seitenstrich */ html.kern :is(.hint-box,.info-box,.set-hint){border:0!important;border-left:0!important;background:var(--k-grau)!important;border-radius:12px!important; color:var(--k-text)!important;padding:12px 16px!important} html.kern .modal-box .hint-box,html.kern .settings-pane .hint-box{background:var(--k-grau)!important} /* onOffice gibt es auf eigenständigen Instanzen nicht */ html.kern :is(.settings-nav-btn[data-pane="onoffice"],.settings-pane[data-pane="onoffice"]){display:none!important} /* „+ Nummer hinzufügen“ usw.: gestrichelter oranger Rahmen → leiser grauer Knopf */ html.kern :is(.comm-add,.tatt-add,.btn-dashed,.add-dashed){border:0!important;background:var(--k-grau)!important;color:var(--k-anthr)!important; border-radius:999px!important;padding:8px 14px!important;font-weight:600!important} html.kern :is(.comm-add,.tatt-add):hover{background:var(--k-tief)!important} /* ── 17.6 Etiketten und Zustände ──────────────────────────────────────────────── */ /* Kopf der Akte: Wiedervorlage-Etikett war gestrichelt orange */ html.kern .dtop-chip{border:0!important;background:var(--k-grau)!important;color:var(--k-text)!important} html.kern .dtop-chip[style*="dashed"]{background:var(--k-grau)!important;color:var(--k-anthr)!important} /* Verlauf: Art der Aktivität in Grau (Telefonat grün, Termin lila, Mail orange) */ html.kern :is(.akt-t-anruf,.akt-t-mail,.akt-t-termin,.akt-tag,.akt-tag i){color:var(--k-neben)!important} html.kern .akt-group .akt-tag{border:0!important;background:var(--k-grau)!important} /* Phasen-/Status-Etiketten kommen aus STAGES (kern.js: Grau); Fläche einheitlich */ html.kern :is(.ctab-status,.status-dot-btn,.a-cat-chip,.cat-chip,.immo-status,.pill,.bez-status){border:0!important} html.kern :is(.ctab-status,.a-cat-chip,.cat-chip){background:var(--k-tief)!important} /* „Kunde hat sich gemeldet“ / neu: kleiner Akzentpunkt */ html.kern :is(.pc-gemeldet,.resv-dot,.l2-neu-dot,.lead-new-dot){background:var(--k-ak)!important;border:0!important;box-shadow:none!important} /* Avatare: grau, Betreuer anthrazit, ohne Ring */ html.kern .p-card-avas .ava-xs{border:0!important;background:var(--k-tief)!important;color:var(--k-anthr)!important} html.kern .p-card-avas .ava-xs.lead{background:var(--k-anthr)!important;color:var(--k-umkehr)!important} /* Fortschritt: Akzent (Verkaufsstand, Exposé-reif) */ html.kern .im2-bar{background:var(--k-tief)!important} html.kern .im2-bar .f{background:var(--k-ak)!important} html.kern .im2-bar .r{background:var(--k-mittel)!important} html.kern .im2-bar .v{background:var(--k-anthr)!important} /* Legende = dieselben Farben wie der Balken (vorher grün/gold/grau, passte nicht zum Balken) */ html.kern .im2-leg i.f{background:var(--k-ak)!important} html.kern .im2-leg i.r{background:var(--k-mittel)!important} html.kern .im2-leg i.v{background:var(--k-anthr)!important} html.kern .im2-leg i.s{background:var(--k-tief)!important;border:0!important} html.kern .im2-prog{background:var(--k-tief)!important} html.kern .im2-prog i{background:var(--k-ak)!important} html.kern .im2-stand b,html.kern .im2-vk b{color:var(--k-anthr)!important} /* Häkchen-Kreise „erledigt“: dezentes Grün ist erlaubt, ohne Rand */ html.kern .im2-ck{border-color:transparent!important;background:var(--k-tief)!important} html.kern .im2-ck.ok,html.kern .im2-ck[style*="background"]{background:var(--k-gruen)!important} /* Überfällig: dezentes Rot statt Signalrot */ html.kern :is(.overdue,.od,.p-card-due.od,.task-overdue){color:var(--k-rot)!important} /* ── 17.7 Pipeline ruhiger (Befund 03.11.): drei Zeilen je Karte ───────────────── (1) Name + Betreuer · (2) Objekt bzw. Thema in Nebentext · (3) nächster Schritt + Datum, Wert rechts. Nur Darstellung – Zählung, Sortierung und Logik bleiben unverändert. */ html.kern body.nav2 .board{gap:12px!important} html.kern body.nav2 .col{min-width:244px!important;width:244px!important;flex:0 0 244px!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important} html.kern .col-bar{display:none!important} html.kern .col-head{padding:4px 4px 0!important;border:0!important} html.kern .col-dot{background:var(--k-leise)!important;width:6px!important;height:6px!important} html.kern .col-title{font-size:14px!important;font-weight:600!important;color:var(--k-anthr)!important} html.kern .col-num{background:transparent!important;color:var(--k-neben)!important;font-weight:500!important;padding:0!important} html.kern .col-stats{padding:2px 4px 10px!important;border:0!important;display:flex;gap:8px;align-items:baseline} html.kern .col-stats .cs-vol{font-size:12.5px!important;color:var(--k-neben)!important;font-weight:500!important} html.kern .col-stats .cs-prov{background:transparent!important;color:var(--k-mittel)!important;font-size:11.5px!important;font-weight:400!important;padding:0!important;margin-left:auto} html.kern .col-cards{gap:12px!important;display:flex;flex-direction:column} html.kern .p-card{flex:none!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:0; padding:14px 16px!important;margin:0!important;background:var(--k-grau)!important;border:0!important;border-left:0!important; border-radius:16px!important;box-shadow:none!important} html.kern .p-card:hover{background:var(--k-tief)!important;box-shadow:none!important} html.kern .p-card.l2-alt{border-left:0!important} html.kern .p-card.l2-offen{box-shadow:0 0 0 2px var(--k-ak-ring)!important} html.kern :is(.p-card-foot,.p-card-right){display:contents!important} html.kern .p-card-name{grid-column:1;grid-row:1;font-size:14px!important;font-weight:600!important;color:var(--k-anthr)!important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px;min-width:0} html.kern .p-card-avas{grid-column:2;grid-row:1;align-self:center;display:inline-flex} html.kern .p-card-avas .ava-xs{width:20px!important;height:20px!important;font-size:8.5px!important} html.kern .p-card-meta{grid-column:1 / -1;grid-row:2;margin-top:2px!important;font-size:12.5px!important;color:var(--k-neben)!important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.kern .p-card-meta :is(.pc-thema,.pc-obj){color:var(--k-neben)!important;font-weight:400!important} html.kern .p-card-meta .pc-dot{display:none!important} html.kern .p-card-meta:has(.pc-obj) :is(.pc-thema,.pc-sep){display:none!important} html.kern .p-card-meta .pc-obj-fehlt{color:var(--k-anthr)!important} html.kern .p-card-resv{grid-column:1 / -1;grid-row:3;margin-top:6px!important;font-size:12px!important;color:var(--k-text)!important;background:transparent!important;border:0!important;padding:0!important} html.kern .p-card > .p-card-meta[style*="accent"]{grid-row:4;color:var(--k-text)!important} html.kern .l2-pc-next{grid-column:1;grid-row:5;display:flex!important;align-items:baseline;gap:6px;min-width:0; margin-top:8px!important;padding-top:0!important;border:0!important;font-size:12.5px!important} html.kern .l2-pc-next .l2-pc-t{color:var(--k-text)!important;flex:0 1 auto;min-width:0} html.kern .l2-pc-next .l2-pc-d{color:var(--k-neben)!important;font-weight:500!important;background:transparent!important;padding:0!important;flex:none} html.kern .l2-pc-next.od .l2-pc-d{color:var(--k-neben)!important;font-weight:500!important} /* überfällig > 3 Tage: kleiner Punkt (kern.js setzt .k-lange) – kein roter Text auf jeder Karte */ html.kern .l2-pc-next.k-lange .l2-pc-d::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--k-rot);margin-right:5px;vertical-align:1px} html.kern .p-card-value{grid-column:2;grid-row:5;align-self:end;margin-top:8px;font-size:13px!important;font-weight:600!important;color:var(--k-anthr)!important;white-space:nowrap} html.kern .p-card:not(:has(.l2-pc-next)) .p-card-value{grid-column:1 / -1;justify-self:start} html.kern :is(.l2-pc-age,.p-card-tasks){display:none!important} html.kern .l2-pc-anl{grid-column:1 / -1;grid-row:6;color:var(--k-neben)!important;font-weight:500!important} html.kern .col-empty{color:var(--k-mittel)!important;font-style:normal!important;border:0!important;background:transparent!important} /* Kontaktliste: dieselbe Ruhe – überfällig nur dezent, Phase grau */ html.kern :is(.l2-s-d,.l2-s-d.od){font-weight:500!important} html.kern .l2-s-d.od{color:var(--k-rot)!important} html.kern .l2-s-d.td{background:transparent!important;color:var(--k-anthr)!important;padding:0!important} html.kern .ctab-row{border-radius:12px!important} /* ── 17.8 Kalender: neutrale Termine, feine Stundenlinie (ausdrücklich erlaubt) ──── */ /* Stundenlinie: 1 px, sehr fein (Kalender = ausdrückliche Ausnahme von „keine Trennlinien“) */ html.kern .cal-hour-line{background:transparent!important;border-bottom:1px solid var(--k-linie)!important} html.kern .cal-hour-line.half{border-bottom-color:transparent!important} html.kern .cal-day-col{border-left:1px solid var(--k-linie)!important} /* Termine: weiße Karte auf grauem Raster, ohne Kante; Aufgaben blasser; Kollegen grau */ html.kern .cal-event,html.kern .cal-event.fixed,html.kern .cal-event.pcol,html.kern .cal-event.pcol.fixed, html.kern .cal-event.pcol.termin,html.kern .cal-event.pcol.termin.fixed{ background:var(--k-weiss)!important;background-image:none!important;border:0!important;border-radius:10px!important;box-shadow:none!important} html.kern .cal-event.pcol.aufgabe{background:color-mix(in srgb,var(--k-weiss) 55%,transparent)!important} html.kern .cal-event.pcol.aufgabe .cal-ev-title{color:var(--k-neben)!important} html.kern .cal-event.team{background:var(--k-tief)!important} html.kern .cal-event:hover{box-shadow:0 6px 18px var(--h-schatten)!important} html.kern .cal-event.done{background:var(--k-grau)!important;box-shadow:none!important;opacity:1!important} html.kern .cal-event.termin.done .cal-ev-title::before{color:var(--k-gruen)!important} html.kern :is(.cal-ev-time,.cal-ev-time-inline){color:var(--k-neben)!important} html.kern .cal-ev-who{color:var(--k-neben)!important} html.kern .cal-ghost{background:var(--k-ak-hell)!important;border:0!important;box-shadow:0 0 0 2px var(--k-ak-ring)!important} html.kern :is(.cal-ghost-time,.cal-ghost-title){color:var(--k-anthr)!important} html.kern .cal-hover-slot{background:rgba(var(--h-stark-rgb),.04)!important;border:0!important} html.kern .cal-hover-slot span{color:var(--k-neben)!important;opacity:1!important} html.kern .cal-now-line{background:var(--k-ak)!important;border-color:var(--k-ak)!important} html.kern .cal-now-line::before{background:var(--k-ak)!important} html.kern .cal-leg-dot{border:0!important;background:var(--k-tief)!important} html.kern .cal-leg-fixed,html.kern .cal-leg-termin{background:var(--k-weiss)!important;box-shadow:0 0 0 1px var(--k-linie)!important} html.kern .cal-leg-flex,html.kern .cal-leg-aufgabe{background:rgba(var(--h-stark-rgb),.08)!important} html.kern .cal-backlog{border:0!important;background:var(--k-grau)!important;border-radius:16px!important} html.kern .backlog-chip{border:0!important;border-left:0!important;background:var(--k-weiss)!important;box-shadow:none!important;border-radius:999px!important} html.kern :is(.backlog-chip-dur,.backlog-chip-due,.backlog-chip-due.overdue){background:var(--k-grau)!important;border:0!important;color:var(--k-neben)!important} html.kern .backlog-chip-due.overdue{color:var(--k-rot)!important} html.kern .cal-qv-dot,html.kern .cal-team-dot{box-shadow:none!important} html.kern .ag-termin-balken{background:var(--k-leise)!important} /* ── 17.9 Navigation: aktiver Punkt mit feinem Akzentstrich ───────────────────── */ html.kern .nav2-item{position:relative} html.kern :is(.nav2-item.on,.nav2-side:not(.exp) .nav2-grp.active > .nav2-item)::after{ content:'';position:absolute;left:-6px;top:50%;width:3px;height:16px;margin-top:-8px;border-radius:2px;background:var(--k-ak)} html.kern .nav2-item.on,html.kern .nav2-side:not(.exp) .nav2-grp.active > .nav2-item{background:var(--k-grau)!important} html.kern .nav2-sub.on{position:relative} html.kern .nav2-sub.on::after{content:'';position:absolute;left:30px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--k-ak)} html.kern .mnav-item{position:relative} html.kern .mnav-item.active{background:var(--k-grau)!important} html.kern .mnav-item.active::after{content:'';position:absolute;left:50%;bottom:4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--k-ak)} /* Umschalter/Reiter aktiv: weiß bzw. grau – Akzent nur als Strich darunter bei Reitern */ html.kern :is(.l2-view.on,.im2-tab.on){box-shadow:none!important} /* ── 17.10 Analysen, Marketing, Lead-Monitoring: Grau statt Bunt ───────────────── */ html.kern :is(.ana-akt-n,.ana-act-n,.act-num)[style*="color"]{color:var(--k-anthr)!important} html.kern [style*="color:#2e7d32" i],html.kern [style*="color:#1d9e75" i],html.kern [style*="color:#3f6b8a" i], html.kern [style*="color:#7c6df2" i],html.kern [style*="color:#7a5fb0" i],html.kern [style*="color:#2f6f6f" i], html.kern [style*="color:#3f7d5a" i],html.kern [style*="color:#5f7e57" i],html.kern [style*="color:#b6883f" i], html.kern [style*="color:#b8860b" i],html.kern [style*="color:#2e66a1" i],html.kern [style*="color:#e67e22" i], html.kern [style*="color:var(--blue)" i],html.kern [style*="color:var(--green)" i],html.kern [style*="color:var(--gold)" i]{color:var(--k-text)!important} html.kern [style*="color:#b3541b" i],html.kern [style*="color:#d2702f" i],html.kern [style*="color:#c1622a" i], html.kern [style*="color:#a8472b" i],html.kern [style*="color:#8f4214" i],html.kern [style*="color:#ca6f1e" i]{color:var(--k-ak-schrift)!important} html.kern [style*="color:#c0392b" i],html.kern [style*="color:#c62828" i],html.kern [style*="color:#b04040" i],html.kern [style*="color:#c0492f" i]{color:var(--k-rot)!important} html.kern [style*="background:#b3541b" i],html.kern [style*="background-color:#b3541b" i],html.kern [style*="background:#d2702f" i]{background:var(--k-ak)!important;color:var(--k-ak-text)!important} html.kern [style*="border-left:3px solid" i],html.kern [style*="border-left:4px solid" i]{border-left-color:transparent!important} html.kern [style*="dashed" i]:not(.cal-ghost){border-color:transparent!important} /* Diagramme: Flächen/Linien mit festen Buntwerten → Grau-Abstufungen, Akzent nur für die Hauptreihe */ html.kern svg :is([fill="#b3541b" i],[fill="#c0622a" i],[fill="#d2702f" i]){fill:var(--k-ak)!important} html.kern svg :is([stroke="#b3541b" i],[stroke="#d2702f" i]){stroke:var(--k-ak)!important} html.kern svg :is([fill="#e0a06b" i],[fill="#f0c9a6" i],[fill="#e8b48a" i]){fill:var(--k-leise)!important} html.kern svg :is([fill="#3f6b8a" i],[fill="#2f6f6f" i],[fill="#7a5fb0" i],[fill="#3f7d5a" i],[fill="#5f7e57" i],[fill="#b6883f" i],[fill="#1d9e75" i],[fill="#7c6df2" i]){fill:var(--k-neben)!important} html.kern svg :is([stroke="#3f6b8a" i],[stroke="#2f6f6f" i],[stroke="#7a5fb0" i],[stroke="#3f7d5a" i],[stroke="#5f7e57" i],[stroke="#b6883f" i],[stroke="#1d9e75" i],[stroke="#7c6df2" i]){stroke:var(--k-neben)!important} html.kern :is(.mkt-sync-pill){border:0!important;background:var(--k-grau)!important;color:var(--k-text)!important;border-radius:999px!important;padding:4px 10px!important} html.kern .mkt-sync-pill.on{color:var(--k-anthr)!important} html.kern .lm,html.kern .lm-wrap{margin-top:16px} /* ── 17.11 Postfach, Kontakt-Etiketten an Mails ─────────────────────────────────── */ html.kern :is(.mail-contact-chip,.ml-contact,.mail-tag,.ml-chip,.mlist-chip){border:0!important;background:var(--k-tief)!important;color:var(--k-text)!important} html.kern :is(.mail-filter-chip,.ml-filter,.mf-chip).active{box-shadow:none!important;border:0!important;background:var(--k-tief)!important} /* ── 17.12 Handy: keine Versalien-Knöpfe, ruhige Kacheln ───────────────────────── */ @media (max-width:768px){ html.kern :is(.split-act-btn,.dtop-way,.m-act-btn){font-weight:600!important} html.kern :is(.kpi-tile,.dash-kpi,.m-kpi){border:0!important;box-shadow:none!important} } /* ── 17.13 Objekt-Platzhalter: ruhiges Grau (Bild kommt aus /assets/hestiaro/objekt-platzhalter.svg) ── */ html.kern img[src*="objekt-platzhalter"]{object-fit:cover;object-position:center;background:var(--k-grau)} /* ════════════════════════════════════════════════════════════════════════════ 18. Blickführung (Grundvorgabe Silas 03.11.: „Ich weiß nicht, wo ich hingucken soll“) ------------------------------------------------------------------------------ Schwarz-Weiß bleibt die Basis, aber mit klarer Hierarchie: a) Flächen: Seitengrund leicht grau · Inhaltskarten weiß · darin Unterflächen #F4F4F3 b) je Bildschirm EIN Blickfang (Akzent-getönte Fläche oder dunkle Karte) c) Typografie mit deutlichen Sprüngen: Titel 30 · Abschnitt 17 · Text 14 · Neben 12–13 d) Akzent als Wegweiser: aktiver Navigationspunkt, der eine Hauptknopf, neu/fällig, Fortschritt, Symbole in Abschnittstiteln (Heute); Zustände als getönte Etiketten ════════════════════════════════════════════════════════════════════════════ */ html.kern,html.kern:root,html.kern[data-theme="dark"],html.kern[data-theme="light"]{ --k-grund:var(--h-seite); --bg:var(--k-grund); --card:var(--k-weiss); --surface:var(--k-grau); --k-rot-hell:var(--h-rot-flaeche); --k-gruen-hell:var(--h-ok-flaeche); --k-gelb-hell:var(--h-gold-flaeche); --k-gelb:var(--h-gold); } /* a) Flächen-Hierarchie */ html.kern body,html.kern .app-main{background:var(--k-grund)!important} html.kern :is(#drawer,#propDrawer),html.kern body.nav2 #drawer.akte2 .profile-nav,html.kern body.nav2 #propDrawer.immo2 .profile-nav{background:var(--k-grund)!important} html.kern .drawer-footer{background:var(--k-grund)!important} /* Achtung: :is() nimmt die Spezifität des stärksten Glieds – darum nur einfache Klassen in der Liste */ html.kern :is(.ak2-card,.h2-block,.h2-stat,.im2-card,.ctab,.l2-panel,.kpi-tile,.dash-panel,.dash-hero-ai, .p-card,.lm,.cal-wrap,.cal-grid-wrap,.cal-backlog,.ana-card,.ana-panel,.mkt-card,.mail-pane,.mail-list-pane,.mail-nav,.settings-card, .ak2-notecard){background:var(--k-weiss)!important} html.kern .login-wrap .card{background:var(--k-weiss)!important} /* Unterflächen, die bisher grau auf Weiß lagen, liegen jetzt direkt auf dem Grund: weiß */ html.kern :is(.ak2-st,.d-ava,.dtop-chip,.status-dot-btn,.ak2-chip,.ak2-st-chip){background:var(--k-weiss)!important} html.kern .ak2-st.d{background:var(--k-tief)!important} html.kern .ak2-st.c{background:var(--k-anthr)!important;color:var(--k-umkehr)!important} html.kern .ak2-note-kopf{background:transparent!important} html.kern .p-card:hover{background:var(--k-weiss)!important;box-shadow:0 0 0 2px var(--k-linie)!important} html.kern :is(.ctab-row,.im2-row):hover{background:var(--k-grau)!important} html.kern .im2-thumb.leer{background:var(--k-grau)!important} html.kern .h2-stat-ico,html.kern .ak2-n{background:var(--k-grau)!important} html.kern .backlog-chip{background:var(--k-grau)!important} html.kern .login-wrap .card{--k-fuell:rgba(var(--h-stark-rgb),.05)} html.kern .login-wrap .field input{background-color:var(--k-grau)!important} html.kern body:has(.login-wrap){background:var(--k-grund)!important} /* Schwebendes bleibt weiß mit Schatten; Seitenleiste weiß (eigener Bereich) */ html.kern .nav2-panel{background:var(--k-weiss)!important} /* c) Typografie-Hierarchie */ html.kern :is(.nav2-crumb-b,.nav2-crumb-a:only-child){font-size:30px!important;font-weight:600!important;letter-spacing:-.02em!important;line-height:1.15!important} html.kern .nav2-crumb-a:not(:only-child){font-size:14px!important;font-weight:500!important;color:var(--k-neben)!important} html.kern .h2-hello h1{font-size:32px!important;letter-spacing:-.02em!important} html.kern :is(.h2-block-h h3,.ak2-sec-t,.dash-panel-t,.im2-sec-t,.settings-pane h4,.lm h2,.lm-h2){font-size:17px!important;font-weight:600!important;color:var(--k-anthr)!important} html.kern :is(.h2-stat b,.kpi-value,.kpi-num,.lm-kpi b,.lm-zahl){font-size:32px!important;font-weight:600!important;line-height:1.05!important;color:var(--k-anthr)!important} html.kern .h2-stat{padding:16px!important} html.kern .h2-stat span,html.kern .h2-stat small{font-size:13px!important;color:var(--k-neben)!important} /* d) Akzent als Wegweiser */ /* Der eine Hauptknopf je Bildschirm (+ Kontakt, + Termin, + Immobilie, Speichern im Fenster) */ html.kern :is(.btn-accent,.btn.btn-accent,.resv-btn.primary,.mobile-fab-btn,.prop-rc-btn:not(.ghost)){background:var(--k-ak)!important;color:var(--k-ak-text)!important} html.kern :is(.btn-accent,.btn.btn-accent,.resv-btn.primary,.mobile-fab-btn,.prop-rc-btn:not(.ghost)):hover{background:var(--k-ak-tief)!important;color:#FFFFFF!important} /* Weitere schwarze Knöpfe (zweite Ebene) bleiben anthrazit: .ak2-btn.pri, .im2-btn.pri */ html.kern .nav2-item.on .nav2-lbl,html.kern .nav2-grp.active > .nav2-item .nav2-lbl{font-weight:700!important;color:var(--k-anthr)!important} /* Symbole in Abschnittstiteln auf Heute: leicht im Akzent */ html.kern .h2-block-ico{background:var(--k-ak-hell)!important;color:var(--k-ak-schrift)!important;border-radius:999px!important} /* Zustände als kleine getönte Etiketten statt bunter Schrift */ html.kern :is(.h2-row small .od,.l2-s-d.od,.backlog-chip-due.overdue,.ak2-focus-b small.od){ background:var(--k-rot-hell)!important;color:var(--k-rot)!important;border-radius:999px!important;padding:1px 8px!important;font-weight:600!important} html.kern .h2-row small .td{background:var(--k-gelb-hell)!important;color:var(--k-gelb)!important;border-radius:999px!important;padding:1px 8px!important;font-weight:600!important} html.kern .h2-stat.warn .h2-stat-ico{background:var(--k-rot-hell)!important;color:var(--k-rot)!important} html.kern .h2-stat.warn b{color:var(--k-anthr)!important} /* b) EIN Blickfang je Bildschirm ------------------------------------------------- */ /* Heute: der erste Block mit Inhalt (meist „Termine heute“ oder „Erledigen“) – Akzent-getönt */ html.kern .h2-col > .h2-block:has(.h2-row){background:var(--k-ak-hell)!important} html.kern .h2-col > .h2-block:has(.h2-row) ~ .h2-block:has(.h2-row){background:var(--k-weiss)!important} html.kern .h2-col ~ .h2-col > .h2-block{background:var(--k-weiss)!important} html.kern .h2-col > .h2-block:has(.h2-row) .h2-btn{background:var(--k-weiss)!important} /* Akte: „Nächster Schritt“ (rechts oben) */ html.kern .ak2-focus,html.kern .ak2-focus.leer{background:var(--k-ak-hell)!important} html.kern .ak2-focus .ak2-focus-k{color:var(--k-ak-schrift)!important} /* Listen (Kontakte, Objekte): die gewählte Ansicht mit Anzahl als dunkle Pille */ html.kern :is(.l2-view.on,.im2-tab.on){background:var(--k-anthr)!important;color:var(--k-umkehr)!important} html.kern :is(.l2-view.on .l2-n,.im2-tab.on .im2-tab-n){background:color-mix(in srgb,var(--k-umkehr) 16%,transparent)!important;color:var(--k-umkehr)!important} html.kern :is(.l2-n,.im2-tab-n){background:var(--k-tief)!important} /* Akten-Reiter bleiben hell (sonst zwei dunkle Elemente neben dem Hauptknopf) */ html.kern :is(body.nav2 #drawer.akte2 .pnav-btn.active,body.nav2 #propDrawer.immo2 .profile-nav .pnav-btn.active){background:var(--k-weiss)!important;color:var(--k-anthr)!important} /* Kalender: heutige Spalte */ html.kern .cal-head-cell.today{background:var(--k-ak-hell)!important} html.kern :is(.cal-head-cell.today .cal-head-day,.cal-head-cell.today .cal-head-date){color:var(--k-ak-schrift)!important;font-weight:700!important} html.kern .cal-day-col.today{background:rgba(var(--akzent-rgb,30,29,28),.035)!important} /* Einstellungen: gewählter Reiter */ html.kern .settings-nav-btn.active{background:var(--k-ak-hell)!important;color:var(--k-anthr)!important;font-weight:600!important} /* Pipeline: Wert rechts neben dem Namen, Betreuer klein in der Schritt-Zeile (lesbarer als drei Spalten in Zeile 3) */ html.kern .p-card-value{grid-column:2!important;grid-row:1!important;align-self:center!important;margin-top:0!important;justify-self:end!important} html.kern .p-card:not(:has(.l2-pc-next)) .p-card-value{grid-column:2!important;justify-self:end!important} html.kern .p-card-avas{grid-column:2!important;grid-row:5!important;justify-self:end!important;align-self:end!important;margin-top:8px} html.kern .p-card:not(:has(.l2-pc-next)) .p-card-avas{grid-row:2!important;margin-top:2px} html.kern .l2-pc-next .l2-pc-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;order:2} html.kern .l2-pc-next .l2-pc-d{order:1} html.kern .l2-pc-next .l2-pc-d::after{content:'·';margin-left:6px;color:var(--k-leise)} /* Analysen: Aktivitäten-Zahlen anthrazit (statt grün/blau/gold) */ html.kern .ana-act-num{color:var(--k-anthr)!important} html.kern .ana-act-num.accent{color:var(--k-ak-schrift)!important} html.kern .ana-legend-dot{box-shadow:none!important} /* Objektliste und Kontaktliste als weiße Fläche auf dem Grund */ html.kern body.nav2 :is(#immo-list,.im2-liste,.im2-wrap,.im2-sek){background:var(--k-weiss);border-radius:16px} html.kern .im2-sek + .im2-sek{border-top:0!important} /* Hinweise/Toasts unten links (Lead-Alarm): ohne Seitenstrich */ html.kern :is(.toast,.lm-toast,.aiping,.ai-ping,.ping-card){border-left:0!important;border:0!important} html.kern .mkt-explain-dot{background:var(--k-mittel)!important} html.kern .mkt-explain-col:first-child .mkt-explain-dot{background:var(--k-ak)!important} html.kern :is(.pf-mail-tag,.pf-tag-contact){border:0!important;background:var(--k-grau)!important;color:var(--k-text)!important} /* Handy-Akte: Kontaktwege als weiße Pillen auf dem Grund, „Anrufen“ = Hauptaufruf im Akzent */ html.kern :is(.split-act,.dtop-way){background:var(--k-weiss)!important} html.kern .dtop-ways > .split-act:first-child{background:var(--k-ak)!important} html.kern .dtop-ways > .split-act:first-child :is(.split-act-btn,.split-act-arrow,.split-act-label,.split-act-info,svg){color:var(--k-ak-text)!important} html.kern .dtop-ways > .split-act:first-child .split-act-divider{background:rgba(255,255,255,.35)!important} html.kern .dtop-ways > .split-act:first-child :is(.split-act-btn,.split-act-arrow):hover{background:var(--k-ak-tief)!important} html.kern .split-act-divider{background:var(--k-grund)!important} /* Agenda (Handy/Tablet): Tagesspalten ohne Rahmen, heute als Blickfang getönt; Kontaktname anthrazit */ html.kern :is(.day-col,.day-col.today,.day-col.overdue-col){border:0!important;box-shadow:none!important;background:var(--k-weiss)!important;border-radius:16px!important} html.kern .day-col.today{background:var(--k-ak-hell)!important} html.kern .a-contact{color:var(--k-text)!important} /* Mitteilungen (Seitenleisten-Modus): ohne dunklen Seitenstrich, weiß schwebend wie alle Fenster */ html.kern body.nav2 .ai-ping::before{display:none!important} html.kern body.nav2 .ai-ping{background:var(--k-weiss)!important;border-radius:16px!important} html.kern body.nav2 .ai-ping-btn{border:0!important;border-radius:999px!important} html.kern body.nav2 .ai-ping-btn:not(.primary){background:var(--k-grau)!important} /* ── Schieberegler: Bahn sichtbar ──────────────────────────────────────────── --line ist hier durchsichtig (keine Konturen). Die Regler-Bahnen (Wertermittlung, Rechner, Suchprofil) zeichnen ihre Spur aber mit --line/--line-strong; ohne Spur bleibt vom leeren Regler nur der gestrichelte Griff und wirkt wie ein Ladekreis. Nur für Regler neu belegt. */ html.kern input[type=range]{--line:var(--k-tief);--line-strong:var(--k-tief-2)} /* … ohne dass Feld-Regeln (.rc-field input: Rahmen var(--line)) um den Regler einen Kasten ziehen */ html.kern input[type=range]{border-color:transparent!important;box-shadow:none!important} /* ── Objekt-Akte: leerer Fotoplatz (immo2.js) ─────────────────────────────── */ html.kern .im2-fotos:not(.mehr) .im2-f1{border:0;background:var(--k-weiss)} html.kern .im2-leer-foto{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--k-neben);text-align:center} html.kern .im2-leer-foto b{font-size:13px;font-weight:600;color:var(--k-anthr)} html.kern .im2-leer-foto small{font-size:12px;font-weight:400;color:var(--k-neben)} html.kern .im2-fotos:hover .im2-leer-foto b{text-decoration:underline} /* ── Rückmeldung (Toast): Anthrazit mit weißer Schrift ─────────────────────── Stand vorher: weiße Fläche (Liste „Schwebendes“) mit Schrift var(--bg) = #F3F3F1 → unlesbar, Knöpfe wirkten tot (z. B. „Teilen“ ohne Kunde). Der Toast IST die Rückmeldung des Tools. */ html.kern .toast{background:var(--k-anthr)!important;color:var(--k-umkehr)!important;border:0!important;border-radius:999px!important; padding:12px 20px!important;font-size:14px!important;box-shadow:var(--k-schwebend)!important;backdrop-filter:none!important} /* ════════════════════════════════════════════════════════════════════════════ 19. Kunden (Prüfrunde 03.11.: Kontaktliste, Akte, Suchprofil, Dialoge) ════════════════════════════════════════════════════════════════════════════ */ /* Toast = die Rückmeldung des Tools. Abschnitt 3 macht ihn weiß, index.html färbt die Schrift mit var(--bg) – seit dem grauen Grund (18a) war „Gespeichert“, „Status: …“ unsichtbar. */ html.kern .toast{color:var(--k-anthr)!important;font-weight:600!important;border-radius:999px!important;padding:12px 20px!important} /* „Diesen Kontakt gibt es vermutlich schon“: Hinweisfläche statt Rahmen */ html.kern .dup-hint{border:0!important;background:var(--k-ak-hell)!important;border-radius:16px!important;padding:14px 16px!important} html.kern .dup-grund{border:0!important;background:var(--k-weiss)!important;color:var(--k-anthr)!important;border-radius:999px!important;padding:2px 8px!important} /* Kontaktliste: „seit n Tagen fällig“ als kurze Pille, nicht über die ganze Spalte */ html.kern body.nav2 .l2-s-d.od{display:inline-block!important;width:auto!important;max-width:100%} /* Suchprofil-Treffer: „Anbieten“ je Zeile zweitrangig (sonst acht Akzent-Knöpfe untereinander), Prozent anthrazit bzw. grün ab 85 %, Abweichungen als Zustand statt Akzent */ html.kern .ci-card:has(> .krit-score) > .btn.btn-accent, html.kern .c-right > .btn.btn-accent[onclick^="offerToContact"]{background:var(--k-grau)!important;color:var(--k-anthr)!important} html.kern .ci-card:has(> .krit-score) > .btn.btn-accent:hover, html.kern .c-right > .btn.btn-accent[onclick^="offerToContact"]:hover{background:var(--k-tief)!important;color:var(--k-anthr)!important} html.kern .krit-score[style*="#b3541b" i]{color:var(--k-anthr)!important} html.kern .krit-score[style*="#5d7a5d" i]{color:var(--k-gruen)!important} html.kern .krit-score[style*="#8a8378" i]{color:var(--k-neben)!important} html.kern .krit-mark{border-radius:999px!important} html.kern .krit-mark.ab{background:var(--k-tief)!important;color:var(--k-text)!important} html.kern .krit-mark.ab-schwer{background:var(--k-rot-hell)!important;color:var(--k-rot)!important} /* Aufgaben in der Akte: offener Haken war ein durchsichtiger Ring (Rahmen = transparent) und damit unsichtbar */ html.kern .task-check{border:0!important;background:var(--k-tief)!important} html.kern .task-check:hover{background:var(--k-tief-2)!important} html.kern .task-item.done .task-check{background:var(--k-gruen)!important;color:var(--k-umkehr)!important} /* Portal: Schalter „Öffentlicher Link“ – die allgemeine Häkchen-Regel (17.4) machte daraus ein Kästchen, über dem der Schalter-Knopf lag */ html.kern input[type=checkbox].pz-switch:not(.sw-input):not([role=switch]){width:36px!important;height:21px!important;min-width:36px!important; border-radius:999px!important;background:var(--k-tief)!important;background-image:none!important;position:relative} html.kern input[type=checkbox].pz-switch:not(.sw-input):not([role=switch]):checked{background:var(--k-anthr)!important;background-image:none!important} html.kern .pz-switch::after{box-shadow:none!important} /* Beziehungsart: ruhige Pille statt Akzent-Rahmen */ html.kern .bez-badge{border:0!important;background:var(--k-grau)!important;color:var(--k-text)!important} html.kern .bez-badge:hover{background:var(--k-tief)!important;color:var(--k-anthr)!important} /* Handy-Akte: Reiterleiste und Sprungleiste („Kontakt · Verknüpft …“) kleben beide oben. Die Reiterleiste ist hier durchsichtig (Abschnitt 3), darum lagen beide Schriften übereinander. Reiter bekommen den Grund, die Sprungleiste klebt darunter. */ @media (max-width:768px){ html.kern #drawer .profile-nav{background:var(--k-grund)!important} html.kern #drawer .ov-jump{top:48px!important;background:var(--k-grund)!important;border:0!important} } /* ── 19a. Tagesgeschäft (Prüfung 03.11.2026): Heute, To-Dos, Kalender, Agenda, Listen, Tagesliste ── */ /* Hinweis unten (toast): weiße Schrift (var(--bg)) lag auf Weiß, jede Rückmeldung war unsichtbar */ html.kern .toast{background:var(--k-anthr)!important;color:var(--k-umkehr)!important;border-radius:999px!important;padding:12px 20px!important; font-weight:500!important;max-width:calc(100vw - 32px);text-align:center} /* Kalender (Silas 03.11.: „Termine und Aufgaben sollten auch visuell zu sehen sein“). Die Fläche ist weiß, weiße Karten verschwanden darin. Jetzt echte Blöcke (Höhe = Dauer, 2 px Luft zur Rasterlinie): Termin = gefüllt im Personenton (CAL_TEAM_COLORS aus kern.js) mit Kante links, Aufgabe = hell mit Umriss und Häkchen-Kreis, Erledigtes blass. */ html.kern .cal-event,html.kern .cal-event.fixed,html.kern .cal-event.pcol,html.kern .cal-event.pcol.fixed, html.kern .cal-event.pcol.termin,html.kern .cal-event.pcol.termin.fixed{ border:2px solid transparent!important;background-clip:padding-box!important;border-radius:12px!important; background-color:color-mix(in srgb, var(--tc,var(--k-neben)) 18%, var(--k-weiss))!important; box-shadow:inset 3px 0 0 var(--tc,var(--k-neben))!important;padding-left:8px!important} html.kern .cal-event.pcol.aufgabe{background-color:color-mix(in srgb, var(--tc,var(--k-neben)) 4%, var(--k-weiss))!important; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--tc,var(--k-neben)) 45%, var(--k-weiss))!important} html.kern .cal-event.pcol.aufgabe .cal-ev-title{color:var(--k-anthr)!important;font-weight:500!important} html.kern .cal-event.pcol.aufgabe .cal-ev-title::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--tc,var(--k-neben));margin-right:5px;vertical-align:-1px} html.kern .cal-event.done,html.kern .cal-event.team.done{opacity:.55!important} html.kern .cal-event.done .cal-ev-title{color:var(--k-text)!important} html.kern .cal-event .cal-ev-title{color:var(--k-anthr)} html.kern .cal-event:hover{box-shadow:inset 3px 0 0 var(--tc,var(--k-neben)),0 6px 16px var(--h-schatten)!important;opacity:1!important} html.kern .cal-event.pcol.aufgabe:hover{box-shadow:inset 0 0 0 1.5px var(--tc,var(--k-neben)),0 6px 16px var(--h-schatten)!important} html.kern .cal-ev-zeit{font-weight:500;color:var(--k-text);font-variant-numeric:tabular-nums;margin-right:2px} html.kern .cal-event .cal-ev-who{color:var(--k-text)!important;font-weight:500!important;margin-top:2px} html.kern .cal-ev-kz{display:inline-flex;align-items:center;vertical-align:1px;margin-right:4px;height:15px;padding:0 5px;border-radius:999px;color:var(--k-umkehr); font-size:9.5px;font-weight:700;letter-spacing:0;line-height:1} /* Heute: nur Tageskopf und Jetzt-Linie hervorheben, nicht die ganze Spalte */ html.kern .cal-day-col.today{background:transparent!important} /* „+n“: weitere Einträge derselben Zeit (calKernSpalten in index.html) */ html.kern .cal-mehr{position:absolute;z-index:3;border:0;border-radius:10px;padding:0;background:var(--k-tief-2);color:var(--k-anthr); font:inherit;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:flex-start;justify-content:center;padding-top:6px} html.kern .cal-mehr:hover{background:var(--k-anthr);color:var(--k-umkehr)} html.kern .cal-mehr:focus-visible{outline:0;box-shadow:var(--k-ring)} html.kern .cal-mehr-pop{width:340px!important;padding:14px 8px 8px!important} html.kern .cal-mehr-pop .cal-qv-head{padding:0 6px} html.kern .cal-mehr-l{display:flex;flex-direction:column;gap:2px;max-height:360px;overflow:auto} html.kern .cal-mehr-z{display:flex;gap:12px;align-items:flex-start;width:100%;border:0;background:transparent;border-radius:12px;padding:8px; text-align:left;font:inherit;color:var(--k-anthr);cursor:pointer} html.kern .cal-mehr-z:hover{background:var(--k-grau)} html.kern .cal-mehr-t{flex:0 0 84px;font-size:12px;color:var(--k-neben);font-variant-numeric:tabular-nums;padding-top:1px} html.kern .cal-mehr-b{display:flex;flex-direction:column;gap:2px;min-width:0} html.kern .cal-mehr-b b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.kern .cal-mehr-b small{font-size:12px;color:var(--k-neben)} /* Heute: EIN Blickfang. Steht oben die Tagesliste (getönt, dunkler Knopf), bleibt der erste Block weiß. */ html.kern #view-uebersicht:has(#kern-tl-block .kern-tl) .h2-col > .h2-block:has(.h2-row){background:var(--k-weiss)!important} html.kern #view-uebersicht:has(#kern-tl-block .kern-tl) .h2-col > .h2-block:has(.h2-row) .h2-btn{background:var(--k-grau)!important} /* Tages-Fortschritt: Spur sichtbar statt eines frei schwebenden Strichs */ html.kern .h2-progress{background:var(--k-tief)!important} /* Tagesliste unter To-Dos: volle Breite wie Kalender und Agenda; „Alle abtelefonieren“ ist hier der eine Akzent-Knopf, der Kopf-Knopf „+ Termin / Aufgabe“ wird anthrazit */ html.kern #tasks-area > .lm.lm-ein{max-width:none!important;margin:0 0 32px!important} html.kern #view-aufgaben:has(#tasks-area > .lm .lm-haupt) .btn-accent:not(.lm-haupt){background:var(--k-anthr)!important;color:var(--k-umkehr)!important} html.kern #view-aufgaben:has(#tasks-area > .lm .lm-haupt) .btn-accent:not(.lm-haupt):hover{background:var(--k-text)!important} /* Listen: „+ Neue Liste“ war ohne Fläche (gestrichelter Rahmen ist hier abgeschaltet) nur loser Text */ html.kern .tl-card{border:0!important;box-shadow:none!important;border-radius:16px!important;background:var(--k-weiss)!important} html.kern .tl-card:hover{transform:none!important;box-shadow:0 0 0 2px var(--k-linie)!important} html.kern .tl-new-card{min-height:148px;align-items:flex-start!important;justify-content:center;padding:24px!important;gap:8px!important;color:var(--k-neben)!important} html.kern .tl-new-card > span:first-child{background:var(--k-anthr);color:var(--k-umkehr);border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600} html.kern .tl-new-card > span:last-child{font-size:13px!important;color:var(--k-neben)} html.kern .tl-new-card:hover > span:first-child{background:var(--k-text)} html.kern :is(.tl-kind,.tl-kind.event){text-transform:none!important;letter-spacing:0!important;font-size:12px!important;font-weight:600!important; color:var(--k-text)!important;background:var(--k-grau)!important;border-radius:999px!important;padding:3px 10px!important} html.kern .tl-intro{font-size:14px!important;color:var(--k-neben)!important;max-width:720px!important;margin:4px 0 20px!important} /* Legende: runde Punkte in der Fläche der Karten (sahen als graue Quadrate aus wie leere Ankreuzfelder) */ html.kern .cal-legend .cal-leg-dot{width:10px!important;height:10px!important;border-radius:50%!important;box-shadow:none!important} html.kern .cal-legend .cal-leg-termin{background:color-mix(in srgb, var(--k-neben) 35%, var(--k-weiss))!important} html.kern .cal-legend .cal-leg-aufgabe{background:var(--k-weiss)!important;box-shadow:inset 0 0 0 1.5px var(--k-mittel)!important} html.kern .cal-legend .cal-leg-dot[style*="--tc"]{background:var(--tc)!important} /* Heute: Abhak-Kreis als graue Fläche (weiß auf weißer Karte war er unsichtbar) */ html.kern .h2-chk{width:20px!important;height:20px!important;border:0!important;background:var(--k-tief)!important} html.kern .h2-chk:hover{background:var(--k-ak-hell)!important;box-shadow:0 0 0 2px var(--k-ak-ring)!important} /* Agenda: eigene Karten und Abhak-Kreis lagen weiß auf weißer Spalte (nur „heute“ ist getönt) */ html.kern .day-col:not(.today) .a-card{background:var(--k-grau)!important} html.kern .day-col.today .a-card{background:var(--k-weiss)!important} html.kern .a-card{border:0!important;border-radius:12px!important} html.kern .a-check{width:18px!important;height:18px!important;border:0!important;background:var(--k-tief-2)!important;color:var(--k-umkehr)!important} html.kern .a-check:hover{background:var(--k-ak-hell)!important;box-shadow:0 0 0 2px var(--k-ak-ring)!important} html.kern .a-check.on{background:var(--k-gruen,#4B7457)!important} /* Etiketten oben in der Karte: Art und Person stehen zusammen rechts (zwei margin-left:auto setzten die Art in die Mitte) */ html.kern .a-cat-chip + .a-cat-chip{margin-left:4px!important} /* Mitteilungskarten unten links: ohne Seitenstrich (Regel: keine Konturen) */ html.kern body.nav2 .ai-ping::before{display:none!important} html.kern body:has(#tasks-area > .lm .lm-haupt) .mobile-fab-btn{background:var(--k-anthr)!important;color:var(--k-umkehr)!important} html.kern .cal-legend{flex-wrap:wrap;row-gap:6px} html.kern .cal-legend > span{white-space:nowrap} /* ── 20. Rückweg „‹ Objekte“ (Silas 03.11.: „sieht immer so hässlich aus“) ───────── Vorher: kleiner grauer Fettdruck „‹ Zurück zu Objekte“ (Grammatik und Optik). Jetzt: runder Knopf mit Pfeil + Zielname in normaler Schrift, wie der Seitenkopf „Bereich / Unterseite“. */ html.kern .ak2-back{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:0; font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--k-text)} html.kern .ak2-back svg{box-sizing:content-box;width:16px;height:16px;padding:8px;border-radius:999px; background:var(--k-weiss);color:var(--k-anthr);transition:background .15s ease} html.kern .ak2-back:hover{color:var(--k-anthr)} html.kern .ak2-back:hover svg{background:var(--k-tief)} html.kern .ak2-back:focus-visible{outline:none} html.kern .ak2-back:focus-visible svg{box-shadow:0 0 0 3px var(--akzent-ring,rgba(179,84,27,.35))} html.kern .im2-backrow{margin-bottom:14px} html.kern .im2-backrow .ak2-back{margin:0} html.kern .im2-pfad .im2-pfad-sep{color:var(--k-neben);font-weight:400} html.kern .im2-pfad .im2-pfad-proj{font-size:14px;font-weight:500;color:var(--k-text)} html.kern .im2-pfad .im2-pfad-proj:hover{color:var(--k-anthr);text-decoration:underline} html.kern .im2-pfad .im2-pfad-akt{font-size:14px;font-weight:600;color:var(--k-anthr)} /* ── 21. Pipeline: ganz sanft zeigen, in welcher Spalte man ist (Silas 03.11.) ───── Beim Drüberfahren bekommt die ganze Spalte eine kaum sichtbare Fläche hinter den Karten, Titel und Punkt der Spalte werden kräftiger. Fläche über ::before, damit sich nichts verschiebt (die Spalte hat in Hestiaro kein Padding). Nur mit Maus, nicht am Handy. */ @media (hover:hover){ html.kern body.nav2 .col[data-stage]{position:relative;isolation:isolate} html.kern body.nav2 .col[data-stage]::before{content:'';position:absolute;inset:-2px -6px -8px;border-radius:22px;z-index:-1; background:color-mix(in srgb, var(--k-anthr) 4.5%, transparent);opacity:0;transition:opacity .2s ease;pointer-events:none} html.kern body.nav2 .col[data-stage]:hover::before{opacity:1} html.kern body.nav2 .col[data-stage] .col-title, html.kern body.nav2 .col[data-stage] .col-dot{transition:color .2s ease, background-color .2s ease} html.kern body.nav2 .col[data-stage]:hover .col-dot{background:var(--k-ak)!important} } @media (hover:hover) and (prefers-reduced-motion:reduce){ html.kern body.nav2 .col[data-stage]::before{transition:none} } /* ── 22. Schnellansicht eines Termins bzw. einer Aufgabe im Kalender (Silas 03.11.: „optisch verbessern“) ── Markup: calQvKern() in index.html (Klasse .qv2). Weiß, ein Blickfang (Titel + Zeit), Zeilen mit Symbolen, Kunde mit Anrufen-Knopf, Bestätigung als Statuszeile, eine Knopfleiste, Fußnote. Farben über die Rollen-Tokens --h-* (hestiaro/tokens.css); --tc = Personenton aus dem Kalender. Am Handy Blatt von unten. */ html.kern .cal-qv.qv2{width:372px;max-width:calc(100vw - 20px);padding:20px 20px 14px!important;border:0!important;border-radius:24px!important; background:var(--k-weiss)!important;color:var(--k-text);box-shadow:var(--k-schwebend)!important; font-size:14px;line-height:1.45;max-height:calc(100vh - 20px);overflow:auto} html.kern .qv2-kopf{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px} html.kern .qv2-tb{flex:1;min-width:0} html.kern .qv2-titel{font-size:19px;line-height:1.25;font-weight:600;letter-spacing:-.01em;color:var(--k-anthr)} html.kern .qv2-unter{margin-top:4px;font-size:13px;color:var(--k-neben)} html.kern .qv2-kreis{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:8px;vertical-align:0; box-shadow:inset 0 0 0 1.6px var(--tc,var(--k-neben))} html.kern .qv2-kreis.an{background:var(--k-gruen);box-shadow:none} html.kern .qv2-x{flex:none;width:36px;height:36px;margin:-6px -8px 0 0;border:0;border-radius:999px;background:transparent; color:var(--k-neben);cursor:pointer;display:grid;place-items:center} html.kern .qv2-x:hover{background:var(--k-fuell);color:var(--k-anthr)} html.kern .qv2-x svg{width:18px;height:18px} html.kern .qv2-ic{flex:none;width:18px;height:18px;margin-top:1px;color:var(--k-neben)} /* Zeit: der zweite Blickfang, auf grauer Fläche */ html.kern .qv2-zeit{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:var(--k-grau);margin-bottom:6px} html.kern .qv2-zeit b{display:block;font-size:16px;font-weight:600;color:var(--k-anthr);font-variant-numeric:tabular-nums} html.kern .qv2-zeit small{display:block;margin-top:2px;font-size:13px;color:var(--k-neben)} html.kern .qv2-zeit .qv2-ic{margin-top:2px;color:var(--k-anthr)} html.kern .qv2-zeilen{display:flex;flex-direction:column} html.kern .qv2-z{display:flex;gap:12px;align-items:flex-start;padding:9px 14px} html.kern .qv2-zi{flex:1;min-width:0;color:var(--k-text)} html.kern .qv2-zi small,html.kern .qv2-kunde small{display:block;font-size:12.5px;color:var(--k-neben)} html.kern .qv2-name{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--k-anthr);cursor:pointer;text-align:left;text-decoration:none} html.kern .qv2-name:hover{color:var(--h-ak-schrift,var(--akzent-tief,#1E1D1C))} html.kern .qv2-kunde{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:center} html.kern .qv2-kunde + .qv2-kunde{margin-top:8px} html.kern .qv2-kunde .qv2-name{grid-column:1} html.kern .qv2-kunde small{grid-column:1} html.kern .qv2-call{grid-column:2;grid-row:1 / span 2;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px; background:var(--k-grau);color:var(--k-anthr);font-size:13px;font-weight:600;text-decoration:none} html.kern .qv2-call:hover{background:var(--k-tief)} html.kern .qv2-ic-k{width:16px;height:16px} html.kern .qv2-leute{display:flex;flex-wrap:wrap;gap:6px 14px} html.kern .qv2-p{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} html.kern .qv2-kz{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--tc,var(--k-neben)); color:#FFFFFF;font-size:10px;font-weight:700} html.kern .qv2-notiz{white-space:pre-line;max-height:96px;overflow:auto;color:var(--k-text)} /* Bestätigung: eine ruhige Zeile, Häkchen grün, kleiner Textknopf rechts */ html.kern .qv2-status .qv2-zi{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;color:var(--k-neben)} html.kern .qv2-status .qv2-zi small{color:var(--k-neben)} html.kern .qv2-status.ja .qv2-ic,html.kern .qv2-status.ja .qv2-zi > span{color:var(--k-gruen)} html.kern .qv2-status.nein .qv2-ic,html.kern .qv2-status.nein .qv2-zi{color:var(--k-rot)} html.kern .qv2-mini{border:0;background:none;padding:2px 0;font:inherit;font-size:13px;font-weight:600;color:var(--k-anthr);cursor:pointer;white-space:nowrap} html.kern .qv2-mini:hover{text-decoration:underline;text-underline-offset:3px} html.kern .qv2-mini:disabled{color:var(--k-neben);cursor:default;text-decoration:none} /* Knopfleiste: ein Hauptknopf (anthrazit), ruhige Nebenknöpfe (grau) */ html.kern .qv2-fuss{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:2px} html.kern .qv2-btn{height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--k-grau);color:var(--k-anthr); font:inherit;font-size:14px;font-weight:600;cursor:pointer} html.kern .qv2-btn:hover{background:var(--k-tief)} html.kern .qv2-btn.qv2-haupt{background:var(--k-anthr);color:var(--k-umkehr)} html.kern .qv2-btn.qv2-haupt:hover{opacity:.88} html.kern :is(.qv2-btn,.qv2-x,.qv2-name,.qv2-mini,.qv2-call):focus-visible{outline:0;box-shadow:var(--k-ring)} html.kern .qv2-note{margin-top:12px;font-size:12px;color:var(--k-neben)} /* Handy: Blatt von unten, volle Breite, Griff oben, große Knöpfe */ html.kern .cal-qv.qv2.qv2-blatt{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;max-width:none!important; max-height:86vh;border-radius:24px 24px 0 0!important;padding:10px 16px calc(16px + env(safe-area-inset-bottom,0px))!important; box-shadow:0 0 0 100vmax var(--h-scrim),var(--k-schwebend)!important;z-index:1500} html.kern .qv2-griff{width:40px;height:4px;border-radius:999px;background:var(--k-tief);margin:0 auto 14px} html.kern .qv2-blatt .qv2-fuss{display:grid;grid-template-columns:1fr 1fr;gap:8px} html.kern .qv2-blatt .qv2-btn{height:48px} html.kern .qv2-blatt .qv2-haupt{grid-column:1 / -1} html.kern .qv2-blatt .qv2-z{padding:10px 4px} html.kern .qv2-blatt .qv2-zeit{padding:12px} html.kern .qv2-blatt .qv2-haupt + .qv2-btn:last-child{grid-column:1 / -1} /* ════════════════════════════════════════════════════════════════════════════ 23. Kontakt-Akte ohne Doppelungen (Silas 03.11.: „hier doppelt sich einiges“) ------------------------------------------------------------------------------ Kopf: Phasen-Chip entfällt (die Phasenleiste zeigt die Phase). Notiz für das Team unter dem Kopf, auf jedem Reiter. Rechts: Jetzt wichtig (mit dem nächsten Schritt), Stille Bilanz, Kontakt, Objekte. Steckbrief: zwei Flächen (weiße Karte, Felder hell gefüllt). Farben über die Rollen-Tokens --h-* (hestiaro/tokens.css), damit der Dunkelmodus greift. ════════════════════════════════════════════════════════════════════════════ */ @media (min-width:769px){ /* Kopf: die Phase steht im Status-Chip unter dem Namen (Phasenleiste entfällt, Abschnitt 25) */ /* Rechte Spalte: Jetzt wichtig + Stille Bilanz auf jedem Reiter (kundenbild.css blendet sie sonst aus) */ html.kern body.nav2 #drawer.akte2 #ak2-kb{display:grid!important;gap:12px} html.kern body.nav2 #drawer.akte2:not(.ak2-tab-kundenbild) #ak2-kb .kb-portal-karte{display:none} html.kern #ak2-kb .ak2-jetzt-vorab{background:var(--k-grau);border-radius:16px;padding:16px} html.kern #ak2-kb .ak2-jetzt-vorab .kb-kt{font-size:15px;font-weight:600;color:var(--k-anthr);margin-bottom:8px} /* Der nächste Schritt als Zeile oben in „Jetzt wichtig“: Akzent-getönt = Blickfang der Spalte */ html.kern #ak2-kb .kb-schritt{margin:6px 0 10px} html.kern #ak2-kb .kb-schritt .ak2-focus{margin:0;padding:10px 12px!important;border-radius:12px!important;gap:10px} html.kern #ak2-kb .kb-schritt .ak2-focus-b b{font-size:13.5px;line-height:1.35} html.kern #ak2-kb .kb-schritt .ak2-focus-k{font-size:10.5px!important} /* Kontakt-Karte: eine Karte statt zwei */ html.kern #drawer.akte2 .ak2-kontakt .ak2-mehr{font-size:12px;color:var(--k-neben);font-weight:400} /* Steckbrief: weiße Karte, Felder hell gefüllt, Beschriftung als Text ohne eigene Fläche */ html.kern body.nav2 #drawer.akte2 .ak2-steck .df{background:transparent!important;border:0!important;border-radius:0!important;padding:2px 0!important;box-shadow:none!important} html.kern body.nav2 #drawer.akte2 .ak2-steck .df:hover,html.kern body.nav2 #drawer.akte2 .ak2-steck .df:focus-within{background:transparent!important;box-shadow:none!important} html.kern body.nav2 #drawer.akte2 .ak2-steck .df > label{background:none!important;padding-left:0!important} html.kern body.nav2 #drawer.akte2 .ak2-steck .df :is(input:not([type=checkbox]):not([type=radio]),select,textarea){ background-color:var(--k-fuell)!important;border:0!important;border-radius:12px!important;padding:8px 12px!important;min-height:38px} html.kern body.nav2 #drawer.akte2 .ak2-steck .df :is(input:not([type=checkbox]):not([type=radio]),select,textarea):hover{background-color:var(--k-fuell-hover)!important} html.kern body.nav2 #drawer.akte2 .ak2-steck .df :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{ background-color:var(--k-weiss)!important;box-shadow:0 0 0 2px var(--k-ak-ring)!important} html.kern body.nav2 #drawer.akte2 .ak2-steck .df select{padding-right:32px!important} /* Stand des Beraters: Platz für den Punkt vor dem Text (die Regel oben zog den Text darüber) */ html.kern body.nav2 #drawer.akte2 .ak2-steck .df .adv-field:has(.adv-dot) .adv-sel{padding-left:24px!important} /* Leer-Strich „–“ lag nach dem neuen Innenabstand über dem Platzhalter; der Platzhalter genügt */ html.kern body.nav2 #drawer.akte2 .ak2-steck .df.ak2-leer::after{display:none!important} html.kern body.nav2 #drawer.akte2 .ak2-steck :is(.comm-list,.comm-row){background:transparent!important;border:0!important;box-shadow:none!important} html.kern body.nav2 #drawer.akte2 .ak2-steck .comm-add,html.kern body.nav2 #drawer.akte2 .ak2-steck .comm-list > button{background:transparent!important;border:0!important; color:var(--k-text)!important;justify-content:flex-start!important;padding-left:0!important} html.kern body.nav2 #drawer.akte2 .ak2-toc-suche{border:0!important;background:var(--k-fuell)!important;border-radius:12px!important} /* Aktiver Reiter: ruhig wie die übrigen Umschalter, kein dicker Akzentring beim Fokus */ html.kern body.nav2 #drawer.akte2 .pnav-btn:focus{outline:none} html.kern body.nav2 #drawer.akte2 .pnav-btn:focus-visible{outline:2px solid var(--k-neben)!important;outline-offset:2px;box-shadow:none!important} } /* Ein Akzentknopf je Bildschirm: „Speichern“ im Steckbrief ruhig (es speichert ohnehin automatisch) */ html.kern #drawer .drawer-footer .btn-accent[onclick^="saveContact"]{background:var(--k-tief)!important;color:var(--k-anthr)!important} html.kern #drawer .drawer-footer .btn-accent[onclick^="saveContact"]:hover{background:var(--k-tief-2)!important;color:var(--k-anthr)!important} /* ════════════════════════════════════════════════════════════════════════════ 24. Seitenrand als Token (Silas 03.11.: „so gequetscht irgendwie ins Eck rein“) ------------------------------------------------------------------------------ EIN Rand für alle Seiten: --k-rand (Computer 40 px, Handy 16 px), oben --k-rand-oben. Gilt für Seitenkopf, Filterzeilen, Listen, Tabellen und Board. Am Handy bleiben die bisherigen 16 px (index.html), darum greifen die Regeln erst ab 769 px. ════════════════════════════════════════════════════════════════════════════ */ html.kern{--k-rand:40px;--k-rand-oben:28px} @media (max-width:768px){ html.kern{--k-rand:16px;--k-rand-oben:12px} } @media (min-width:769px){ html.kern body.nav2 .view > :is(.view-toolbar,.aufgaben-bar){padding-left:var(--k-rand)!important;padding-right:var(--k-rand)!important; padding-top:var(--k-rand-oben)!important;padding-bottom:16px!important;min-height:84px} html.kern body.nav2 .view :is(.pipe-owner-filter,.kontakte-filters,.contacts-scroll,.akt-scroll,.tasks-scroll,.tl-wrap,.cal-wrap,.agenda, .qa-preview-wrap,.quick-add-wrap,.immo-filters,.immo-grid-wrap,.immo-map-wrap,.ana-scroll,.komm-sub,.if-body,.cal-bar.agenda-bar){ padding-left:var(--k-rand)!important;padding-right:var(--k-rand)!important} /* Pipeline: erste Spalte mit Rand, beim waagerechten Scrollen bleibt am Ende derselbe Rand */ html.kern body.nav2 .view .board{padding-left:var(--k-rand)!important;padding-right:var(--k-rand)!important;scroll-padding-inline:var(--k-rand)} } /* Pipeline-Filterzeile: Maße und Felder in hestiaro/pipelines.css (eine Reihe mit den Reitern) */ /* Pipeline-Karte ohne nächsten Schritt: Betreuer-Kreis lag über der Objektzeile */ html.kern .p-card:not(:has(.l2-pc-next)) .p-card-meta{grid-column:1!important;min-width:0} /* ════════════════════════════════════════════════════════════════════════════ 23. Pipeline: Spalten mit Luft, Karten mit Innenabstand (Silas 03.11.: „mehr Spacing zwischen jedem Punkt … diese Ecken sehen immer noch nicht so schön aus“) ════════════════════════════════════════════════════════════════════════════ */ @media (min-width:769px){ /* 26 px zwischen den Phasen; die Hover-Fläche (Abschnitt 21) reicht 12 px nach außen, also nie bis zur Nachbarspalte */ html.kern body.nav2 .view .board{gap:26px!important} } @media (hover:hover){ html.kern body.nav2 .col[data-stage]::before{inset:-4px -12px -10px!important;border-radius:22px!important} } /* Karte: 18 px Innenabstand, Inhalte nicht in die Ecken gedrückt */ html.kern .p-card{padding:18px 18px 16px!important;border-radius:16px!important;column-gap:12px!important} html.kern .col-cards{gap:12px!important} /* Betreuer: eigene Fußzeile rechts unten, nie über Objekt- oder Schrittzeile. Der nächste Schritt bekommt dafür die volle Breite (vorher teilte er sich die Zeile mit den Kreisen und war auf „M.“ gekürzt). */ html.kern .p-card .p-card-avas{grid-column:1 / -1!important;grid-row:7!important;justify-self:end!important;align-self:end!important;margin-top:10px!important} html.kern .p-card .l2-pc-next{grid-column:1 / -1!important} html.kern .p-card:not(:has(.l2-pc-next)) .p-card-avas{grid-column:1 / -1!important;grid-row:7!important;margin-top:10px!important} html.kern .p-card:not(:has(.l2-pc-next)) .p-card-meta{grid-column:1 / -1!important} /* Zwei oder mehr Betreuer: kleine, überlappende Gruppe mit Rand in der Kartenfarbe */ html.kern .p-card-avas{display:inline-flex!important;align-items:center;padding-left:2px} html.kern .p-card-avas .ava-xs{width:22px!important;height:22px!important;font-size:8.5px!important; border:2px solid var(--h-grund,#FFFFFF)!important;box-sizing:content-box;margin-left:-7px!important} html.kern .p-card-avas .ava-xs:first-child{margin-left:0!important} html.kern.k-dunkel .p-card-avas .ava-xs{border-color:var(--h-ebene,#1E1D1C)!important} /* ── 24 Logo in der eingeklappten Leiste fing Klicks ab (Silas 03.11.: Zurück führte „Zu Heute“) ── Das volle Logo (127 px, unsichtbar) ragte über die 64 px schmale Leiste und lag über dem Zurück-Knopf jeder Akte und dem Seitenkopf. Klicks nimmt allein der Logo-Knopf an, das Bild nie. */ html.kern .nav2-brand :is(.nav2-logo,img){pointer-events:none} /* ════════════════════════════════════════════════════════════════════════════ 25. Akten-Kopf ohne Phasenleiste, schrumpft beim Scrollen (Silas 03.11.: „unten links mehr Platz“) ------------------------------------------------------------------------------ Status-Chip unter dem Namen öffnet alle Phasen, Wiedervorlage und Absage (setContactStage mit den bestehenden Pflichtdialogen). Beim Runterscrollen (akte2.js: .ak2-kompakt) wird der Kopf eine schmale Leiste: Zurück, Name, Status, Anrufen, Termin, Mehr; die Notiz eine Zeile, Klick öffnet sie wieder. ════════════════════════════════════════════════════════════════════════════ */ @media (min-width:769px){ /* Status-Menü: schwebend, ruhig, aktuelle Phase markiert, Wiedervorlage/Absage abgesetzt */ html.kern body.nav2 #drawer.akte2 .status-menu{min-width:230px;padding:6px!important;border:0!important;border-radius:16px!important; background:var(--h-auf-ebene,#FFFFFF)!important;box-shadow:var(--h-schwebend,0 14px 36px rgba(30,29,28,.12))!important;z-index:80} html.kern body.nav2 #drawer.akte2 .status-menu-item{min-height:34px;border-radius:10px!important;font-size:13.5px!important;font-weight:500!important; color:var(--h-stark,#1E1D1C)!important;gap:10px} html.kern body.nav2 #drawer.akte2 .status-menu-item:hover{background:var(--h-fuell,rgba(30,29,28,.05))!important} html.kern body.nav2 #drawer.akte2 .status-menu-item.on{background:var(--k-ak-hell)!important;color:var(--h-stark,#1E1D1C)!important;font-weight:600!important} html.kern body.nav2 #drawer.akte2 .status-menu-item:nth-child(10){margin-top:8px} html.kern body.nav2 #drawer.akte2 .status-menu-sep{background:transparent!important;height:4px!important} html.kern body.nav2 #drawer.akte2 .status-dot-btn{cursor:pointer} /* „Mit KI ausfüllen“ steht im ···-Menü, nicht neben der Notiz; ohne den Knopf bleibt von der Kopfzeile nichts */ html.kern body.nav2 #drawer.akte2 .ak2-notiz .drawer-note-label{display:none!important} /* Kompakter Kopf */ html.kern body.nav2 #drawer.akte2 .drawer-top{transition:padding .22s ease} html.kern body.nav2 #drawer.akte2 .d-name{transition:font-size .22s ease} html.kern body.nav2 #drawer.akte2 .ak2-notiz{transition:margin .22s ease, padding .22s ease} html.kern body.nav2 #drawer.akte2.ak2-kompakt .drawer-top{display:flex!important;align-items:center;gap:16px;padding-top:10px!important;padding-bottom:8px!important} html.kern body.nav2 #drawer.akte2.ak2-kompakt .ak2-back{margin:0!important;flex:none} html.kern body.nav2 #drawer.akte2.ak2-kompakt .drawer-top-row{flex:1;min-width:0;align-items:center} html.kern body.nav2 #drawer.akte2.ak2-kompakt .d-ava{display:none!important} html.kern body.nav2 #drawer.akte2.ak2-kompakt .dtop-left{display:flex;align-items:center;gap:12px;min-width:0} html.kern body.nav2 #drawer.akte2.ak2-kompakt .d-name{font-size:18px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} html.kern body.nav2 #drawer.akte2.ak2-kompakt .d-name > span{display:none} html.kern body.nav2 #drawer.akte2.ak2-kompakt .d-badges{margin:0!important;flex:none} html.kern body.nav2 #drawer.akte2.ak2-kompakt .d-badges > :not(.status-pick){display:none!important} html.kern body.nav2 #drawer.akte2.ak2-kompakt .ak2-acts :is([onclick^="openContactCompose"],[onclick^="openWaChat"]){display:none!important} html.kern body.nav2 #drawer.akte2.ak2-kompakt .ak2-acts .ak2-btn{height:38px} html.kern body.nav2 #drawer.akte2.ak2-kompakt .ak2-kbhinweis{display:none!important} /* Notiz als eine Zeile; Klick (Fokus) öffnet sie wieder ganz */ html.kern body.nav2 #drawer.akte2.ak2-kompakt .ak2-notiz:not(:focus-within){margin-top:4px!important} html.kern body.nav2 #drawer.akte2.ak2-kompakt .ak2-notiz:not(:focus-within) .smart-tags{display:none!important} html.kern body.nav2 #drawer.akte2.ak2-kompakt .ak2-notiz:not(:focus-within) .drawer-note-ta{height:36px!important;min-height:36px!important;max-height:36px!important; overflow:hidden!important;white-space:nowrap;padding-top:8px!important;padding-bottom:8px!important;cursor:text} html.kern body.nav2 #drawer.akte2.ak2-kompakt .ak2-notiz-feld .hs-mikro-feld{top:18px} } @media (min-width:769px) and (prefers-reduced-motion:reduce){ html.kern body.nav2 #drawer.akte2 :is(.drawer-top,.d-name,.ak2-notiz){transition:none!important} } /* ── 25. Kopf von To-Dos (Kalender, Agenda, Listen): eine Fläche, ein Feld, ruhige Bedienelemente ── Silas 03.11.: „sieht nicht gut aus, zum Beispiel im Hintergrund oder diese Suchleiste“. - Kopf und Werkzeugzeile liegen auf demselben Grund; nur das Kalender-Raster ist die weiße Karte. - Schnell-Eingabe ist EIN Feld (eine weiße Füllung, Höhe wie der Knopf daneben), „↵“ dezent darin, Mikrofon (hestiaro/sprache.js), wenn die Spracheingabe eingerichtet ist. - Werkzeugzeile: ‹ › Heute als Gruppe, Datum als Auswahl, Team und Erledigte als Umschalter. Seitenrand bleibt unberührt (eigenes Paket, Token --k-rand). Farben über die Tokens (hestiaro/tokens.css). */ html.kern .tasks-area > .cal-wrap{background:transparent!important} html.kern .cal-wrap .cal-grid-scroll{background:var(--k-weiss)!important;border:0!important;border-radius:20px!important} html.kern .cal-wrap .cal-head-row{background:var(--k-weiss)!important} html.kern .cal-wrap .cal-backlog{background:var(--k-weiss)!important} html.kern .cal-wrap .cal-backlog .backlog-chip{background:var(--k-grau)!important} /* Schnell-Eingabe */ html.kern .quick-add-inner.qa-pill{height:40px;padding:0 6px 0 18px!important;border:0!important;border-radius:999px!important; background:var(--k-weiss)!important;box-shadow:none!important;gap:8px} html.kern .quick-add-inner.qa-pill:focus-within{box-shadow:0 0 0 2px var(--k-anthr)!important} /* :is(#…) hebt die Spezifität über die allgemeine Feldregel (input:not(…) × 8) des Kern-Themas */ html.kern .quick-add-inner.qa-pill :is(#qa-input-aufgaben,#qa-input-drawer,.qa-input){height:100%;padding:0!important;border:0!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;outline:0!important;font-size:14px;color:var(--k-anthr)} html.kern .quick-add-inner.qa-pill :is(#qa-input-aufgaben,#qa-input-drawer,.qa-input):focus{box-shadow:none!important;background:transparent!important} html.kern .quick-add-inner.qa-pill .qa-input::placeholder{color:var(--k-neben)} html.kern .quick-add-inner.qa-pill .qa-shortcut{background:transparent!important;border:0!important;padding:0 8px!important; font-size:15px;line-height:1;color:var(--k-neben);opacity:.7} html.kern .quick-add-inner.qa-pill:focus-within .qa-shortcut{opacity:1;color:var(--k-anthr)} html.kern .quick-add-inner.qa-pill.hs-mikro-wrap > :is(#qa-input-aufgaben,#qa-input-drawer,.qa-input){padding-right:0!important} html.kern .quick-add-inner.qa-pill.hs-mikro-wrap .qa-shortcut{margin-right:30px} html.kern .quick-add-inner.qa-pill .hs-mikro-feld{right:4px;width:32px;height:32px;color:var(--k-text)} html.kern .quick-add-inner.qa-pill .hs-mikro-feld:hover{background:var(--k-grau)} html.kern body.nav2 .view > .aufgaben-bar #btn-new-task-top{height:40px} /* Werkzeugzeile */ html.kern .cal-bar{gap:8px!important;align-items:center} html.kern :is(.cal-nav-btn,.cal-today-btn,.cal-team-btn,.cal-done-btn,.cal-range-btn){height:36px!important;border:0!important;box-shadow:none!important; background:var(--k-weiss)!important;color:var(--k-anthr)!important;font-size:14px!important;font-weight:600!important; border-radius:999px!important;display:inline-flex;align-items:center;gap:6px} html.kern :is(.cal-nav-btn,.cal-today-btn,.cal-team-btn,.cal-done-btn,.cal-range-btn):hover{background:var(--k-tief)!important;color:var(--k-anthr)!important} html.kern :is(.cal-nav-btn,.cal-today-btn,.cal-team-btn,.cal-done-btn,.cal-range-btn):focus-visible{outline:0;box-shadow:0 0 0 2px var(--k-anthr)!important} /* ‹ › Heute als Gruppe: drei Teile einer Pille mit feiner Fuge */ html.kern .cal-nav-btn{width:40px!important;padding:0!important;justify-content:center;font-size:17px!important} html.kern .cal-nav-btn:first-child{border-radius:999px 0 0 999px!important} html.kern .cal-nav-btn + .cal-nav-btn{border-radius:0!important;margin-left:-6px} html.kern .cal-nav-btn + .cal-nav-btn + .cal-today-btn{border-radius:0 999px 999px 0!important;margin-left:-6px;padding:0 16px 0 12px!important} /* Datum: Auswahl mit Pfeil; die Auswahl ist der Blickfang der Zeile */ html.kern .cal-range-btn{padding:0 14px 0 16px!important;font-size:15px!important;margin-left:4px} html.kern .cal-range-btn .cal-range-caret{opacity:.55;margin-left:2px} html.kern .cal-team-btn{padding:0 14px!important} html.kern .cal-team-btn.on{box-shadow:inset 0 0 0 1.5px var(--k-anthr)!important} html.kern .cal-team-btn .cal-range-caret{opacity:.55} /* Erledigte: Umschalter mit kleinem Schalter vorn (Text kommt aus kern.js: „Erledigte“) */ html.kern .cal-done-btn[onclick^="calToggleDone"]{padding:0 14px 0 10px!important} html.kern .cal-done-btn[onclick^="calToggleDone"]::before{content:'';flex:none;width:28px;height:16px;border-radius:999px; background:var(--k-anthr) radial-gradient(circle at 20px 8px,var(--k-umkehr) 5.5px,transparent 6px)} html.kern .cal-done-btn.off[onclick^="calToggleDone"]::before{background:var(--k-tief-2) radial-gradient(circle at 8px 8px,var(--k-weiss) 5.5px,transparent 6px)} html.kern .cal-done-btn.off[onclick^="calToggleDone"]{color:var(--k-text)!important} /* Legende rechts: ruhig, in einer Zeile mit den Knöpfen */ html.kern .cal-bar .cal-legend{font-size:12.5px!important;font-weight:500!important;color:var(--k-neben)!important;gap:6px 14px!important;align-self:center} @media (max-width:768px){ html.kern .quick-add-inner.qa-pill{height:44px} html.kern :is(.cal-nav-btn,.cal-today-btn,.cal-team-btn,.cal-done-btn,.cal-range-btn){height:40px!important} } /* In der Kontakt-Akte liegt das Feld auf Weiß: dort grau gefüllt (sonst unsichtbar) */ html.kern :is(.dtab-body,#drawer) .quick-add-inner.qa-pill{background:var(--k-grau)!important} html.kern :is(.dtab-body,#drawer) .quick-add-inner.qa-pill .hs-mikro-feld:hover{background:var(--k-tief)} /* ════════════════════════════════════════════════════════════════════════════ 26. Dunkelmodus (03.11.2026, Silas: „Dark Mode ins gesamte Tool“) ------------------------------------------------------------------------------ Die Farben kommen aus hestiaro/tokens.css (html.k-dunkel); alles oben zeigt auf Rollen-Tokens und kippt dadurch von selbst. Hier stehen nur Dinge, die sich nicht über Tokens lösen lassen: eingebettete SVG-Bilder (Pfeile, Häkchen), Logos, Personenfarben im Kalender und Stellen, an denen das alte Tool im Dunkeln eigene Festwerte setzt (index.html :root[data-theme="dark"] …). Umschalter: Einstellungen → Allgemein → „Erscheinungsbild“ und Benutzermenü (hestiaro/thema.js). ════════════════════════════════════════════════════════════════════════════ */ /* ── 26.1 Umschalter Erscheinungsbild (Einstellungen) und Schnellumschalter (Benutzermenü) ── */ html.kern .theme-switch{display:inline-flex!important;gap:0!important;background:var(--k-tief);border-radius:999px;padding:3px;max-width:420px;width:100%} html.kern .theme-opt{flex:1;border:0!important;background:transparent!important;color:var(--k-text)!important;border-radius:999px!important; min-height:36px;padding:0 14px!important;font-size:13.5px!important;font-weight:600!important;cursor:pointer} html.kern .theme-opt:hover{color:var(--k-anthr)!important} html.kern .theme-opt.active{background:var(--k-weiss)!important;color:var(--k-anthr)!important} html.kern .theme-opt:focus-visible{outline:2px solid var(--k-ak-ring)!important;outline-offset:2px} html.kern .theme-hint{font-size:13px!important;color:var(--k-neben)!important;margin-top:8px!important} html.kern .kern-thema-zeile{display:flex;flex-direction:column;gap:6px;padding:8px 14px 10px} html.kern .kern-thema-l{font-size:12.5px;font-weight:500;color:var(--k-neben)} html.kern .kern-thema-seg{display:flex;background:var(--k-tief);border-radius:999px;padding:3px} html.kern .kern-thema-seg button{flex:1;border:0;background:transparent;color:var(--k-text);font:inherit;font-size:12.5px;font-weight:600; min-height:30px;border-radius:999px;cursor:pointer;padding:0 8px} html.kern .kern-thema-seg button:hover{color:var(--k-anthr)} html.kern .kern-thema-seg button.active{background:var(--k-weiss);color:var(--k-anthr)} html.kern .kern-thema-seg button:focus-visible{outline:2px solid var(--k-ak-ring);outline-offset:1px} @media (max-width:768px){ html.kern .kern-thema-seg button{min-height:40px} } /* ── 26.2 Logos: helle Fassung im Dunkeln (Kopf, Seitenleiste, Login) ─────────── */ html.kern:not(.k-dunkel) .kern-auf-dunkel,html.kern.k-dunkel .kern-auf-hell{display:none!important} /* Logo ohne eigene helle Fassung: helle Plakette statt Umfärben (Firmenfarben bleiben echt) */ html.kern.k-dunkel .kern-plakette{background:#FFFFFF;padding:3px 7px;border-radius:8px;box-sizing:content-box} /* ── 26.3 Eingebettete Bilder: Pfeil im Auswahlfeld, Häkchen ──────────────────── */ html.kern.k-dunkel select:not([multiple]):not([size]),html.kern.k-dunkel .df select{background-image:url("data:image/svg+xml;utf8,")!important} html.kern.k-dunkel select:not([multiple]):not([size]):hover,html.kern.k-dunkel .df select:hover{background-image:url("data:image/svg+xml;utf8,")!important} html.kern.k-dunkel input[type=checkbox]:not(.sw-input):not([role=switch]):checked{ background-image:url("data:image/svg+xml;utf8,")!important} html.kern.k-dunkel :is(input[type=checkbox],input[type=radio]){accent-color:var(--k-anthr)} html.kern.k-dunkel input[type=checkbox]:not(.sw-input):not([role=switch]):hover{background-color:var(--k-tief-2)!important} /* Datum/Uhrzeit: Kalender-Symbol des Browsers hell */ html.kern.k-dunkel ::-webkit-calendar-picker-indicator{filter:invert(.85)} /* ── 26.4 Kalender: Personenfarben dunkel (kern.js tauscht CAL_TEAM_COLORS) ─────── Fläche 26 % Personenton auf der Karte, Kante und Kürzel im aufgehellten Ton, Kürzel-Schrift dunkel. */ html.kern.k-dunkel .cal-event,html.kern.k-dunkel .cal-event.fixed,html.kern.k-dunkel .cal-event.pcol,html.kern.k-dunkel .cal-event.pcol.fixed, html.kern.k-dunkel .cal-event.pcol.termin,html.kern.k-dunkel .cal-event.pcol.termin.fixed{ background-color:color-mix(in srgb, var(--tc,#8E8C87) 26%, var(--k-weiss))!important} html.kern.k-dunkel .cal-event.pcol.aufgabe{background-color:color-mix(in srgb, var(--tc,#8E8C87) 8%, var(--k-weiss))!important; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--tc,#8E8C87) 60%, var(--k-weiss))!important} html.kern.k-dunkel .cal-ev-kz{color:#141413!important} html.kern.k-dunkel .cal-event:hover{box-shadow:inset 3px 0 0 var(--tc,#8E8C87),0 6px 16px var(--h-schatten)!important} html.kern.k-dunkel .cal-legend .cal-leg-termin{background:color-mix(in srgb, #8E8C87 45%, var(--k-weiss))!important} html.kern.k-dunkel .cal-allday-chip{background:color-mix(in srgb, var(--tc,#8E8C87) 26%, var(--k-weiss))!important;color:var(--k-anthr)!important} /* ── 26.5 Schwebendes im Dunkeln: Menüs eine Stufe heller als die Karte, damit sie sich abheben ── */ html.kern.k-dunkel :is(.user-dropdown,.ak2-menu,.zz-menu,.dd-menu,.ctx-menu){background:var(--h-auf-ebene)!important} html.kern.k-dunkel :is(.user-dropdown,.ak2-menu,.zz-menu,.dd-menu,.ctx-menu) :is(.user-dd-item,button):hover{background:var(--k-tief)!important} html.kern.k-dunkel .user-dd-sep,html.kern.k-dunkel .ak2-sep{background:var(--k-tief)!important} html.kern.k-dunkel .kern-thema-seg{background:var(--k-weiss)} html.kern.k-dunkel .kern-thema-seg button.active{background:var(--k-tief)} /* ── 26.6 Bilder und Platzhalter: nicht grell auf dunklem Grund ───────────────── */ /* Platzhalter „Fotos folgen“ (helles SVG): umgekehrt statt grau, Grautöne bleiben neutral (#F4F4F3 → #222) */ html.kern.k-dunkel img[src*="objekt-platzhalter"]{filter:invert(.9) hue-rotate(180deg)} /* Weiße Schrift auf einer im Dunkeln hellen Fläche (Regeln und Inline-Stile des alten Tools): hestiaro/thema.js prüft die Elemente im Browser und setzt k-umkehr (umkehrPruefen). */ html.kern.k-dunkel .k-umkehr{color:var(--h-umkehr)!important} /* Altes Dunkel-Thema setzt eigene Brauntöne */ html.kern.k-dunkel .nl-canvas-wrap{background:var(--k-grund)!important} html.kern.k-dunkel .btn.btn-danger-soft{color:var(--k-rot)!important;border-color:transparent!important} html.kern.k-dunkel .krit-mark{background:var(--h-ok-flaeche)!important;color:var(--h-ok)!important} html.kern.k-dunkel .krit-mark:is(.ab){background:var(--k-tief)!important;color:var(--k-text)!important} html.kern.k-dunkel .krit-mark:is(.ab-schwer){background:var(--k-rot-hell)!important;color:var(--k-rot)!important} html.kern .user-dd-item.danger{color:var(--k-rot)!important} /* HTML-Mails sind für weißes Papier gestaltet (dunkle Schrift, eigene Farben): im Dunkeln weiß lassen, statt wie das alte Dunkel-Thema die Fläche dunkel zu färben (dunkle Schrift auf dunkel) */ html.kern.k-dunkel :is(.mail-reader-body.html iframe,.email-body-frame,.bh-mail-frame){background:#FFFFFF!important;border-radius:12px} /* Schnellansicht im Kalender: Personen-Kürzel dunkel wie im Raster (26.4) */ html.kern.k-dunkel .qv2-kz{color:#141413} /* ════════════════════════════════════════════════════════════════════════════ 27. Seitenbaustein (Silas 04.11.: „bitte immer den kompletten Screen benutzen, wie jeder andere Menüpunkt auch“) ------------------------------------------------------------------------------ So beginnt JEDER neue Bereich, dann sitzt er von selbst wie Kontaktliste und Pipeline:
body.innerHTML = kSeitenkopf({ bereich:'X', unter:'Y', rechts:'…' }) → Kopf „Bereich / Unterseite“, Rand, 84 px + '
…
' → Reiter (Knöpfe .k-reiter-b, gewählt .an) + '
…
'; → volle Breite, scrollt, Kopf bleibt stehen Mehrspaltig: .k-spalten (Inhalt + Seitenspalte), .k-spalten-halb (zwei gleich breite), .k-raster (Kacheln, füllt die Breite), .k-karten (ganze Karten in Spalten, Höhen egal). Regel: nie max-width und margin:auto auf der Seite. Lesebreiten gehören in einzelne Texte. Erklärung: wissen/ARCHITEKTUR.md „So baut man einen neuen Bereich“. ════════════════════════════════════════════════════════════════════════════ */ html.kern{--k-knopf-h:38px;--k-knopf-klein-h:32px;--k-luecke:16px} @media (max-width:768px){ html.kern{--k-knopf-h:44px;--k-knopf-klein-h:36px} } html.kern .k-seite{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;width:100%;box-sizing:border-box;color:var(--k-text);font-family:var(--k-sans)} html.kern .k-seite *{box-sizing:border-box} html.kern .k-seitenkopf{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:84px;box-sizing:border-box;padding:var(--k-rand-oben) var(--k-rand) 16px} html.kern .k-seitenkopf-titel{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;flex:1 1 auto;min-width:0} html.kern .k-seitenkopf .nav2-crumb{display:flex;align-items:baseline;gap:8px;min-width:0;flex:0 1 auto;margin:0} html.kern .k-seitenkopf-rechts{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* Reiter: dieselben Maße wie die Ansichten der Kontaktliste (.l2-view) */ html.kern .k-reiter{display:flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0} html.kern .k-seite > .k-reiter{flex:none;padding:0 var(--k-rand) 12px} html.kern .k-reiter-b{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:8px 14px;border:0;border-radius:999px;background:none;color:var(--k-text); font-family:var(--k-sans);font-size:13px;font-weight:600;line-height:18px;white-space:nowrap;cursor:pointer;transition:background-color .12s,color .12s;-webkit-tap-highlight-color:transparent} html.kern .k-reiter-b:hover{background:var(--k-grau);color:var(--k-anthr)} html.kern .k-reiter-b.an{background:var(--k-anthr);color:var(--k-umkehr)} html.kern .k-reiter-b:focus-visible{outline:none;box-shadow:0 0 0 2px var(--k-weiss),0 0 0 4px var(--k-ak-ring)} html.kern .k-inhalt{flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;box-sizing:border-box;padding:0 var(--k-rand) 32px} html.kern .k-karte{background:var(--k-weiss);border-radius:24px;padding:24px} html.kern .k-spalten{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,28%,480px);gap:var(--k-luecke);align-items:start} html.kern .k-spalten.k-spalten-halb{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch} html.kern .k-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--k-raster-min,340px),100%),1fr));gap:12px} html.kern .k-karten{columns:2 var(--k-karten-min,520px);column-gap:var(--k-luecke)} html.kern .k-karten > *{break-inside:avoid} @media (max-width:1024px){ html.kern .k-spalten,html.kern .k-spalten.k-spalten-halb{grid-template-columns:minmax(0,1fr)} } @media (max-width:768px){ html.kern .k-seitenkopf{min-height:0;padding-bottom:10px} html.kern .k-seitenkopf-titel{flex-basis:100%} html.kern .k-seitenkopf :is(.nav2-crumb-b,.nav2-crumb-a:only-child){font-size:23px!important} html.kern .k-seitenkopf .nav2-crumb-a:not(:only-child){font-size:13px!important} html.kern .k-seitenkopf .nav2-crumb-a:not(:only-child)::after{content:'/';margin-left:8px;font-weight:400} html.kern .k-reiter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} html.kern .k-reiter::-webkit-scrollbar{display:none} html.kern .k-reiter-b{flex:none;min-height:40px} html.kern .k-inhalt{padding-bottom:calc(94px + env(safe-area-inset-bottom))} html.kern .k-karte{padding:18px 16px;border-radius:20px} html.kern .k-karten{columns:1} } /* ── Hinweisfenster: der Hauptknopf bleibt ein Hauptknopf (04.11.2026) ─────────────────────── Die graue Knopffläche oben galt auch für .primary: weiße Schrift auf Hellgrau, Knöpfe wie „Als Lead anlegen“ waren unsichtbar. Hauptaktion = Akzent wie .btn-accent, Hell und Dunkel, Seitenleisten-Modus und Handy. Prüffall: test/dunkelmodus.test.js. */ html.kern .ai-ping-btn:not(.primary){color:var(--k-text)!important} html.kern .ai-ping-btn.primary{background:var(--k-ak)!important;border-color:var(--k-ak)!important;color:var(--k-ak-text)!important} html.kern .ai-ping-btn.primary:hover{background:var(--k-ak-tief)!important;color:#FFFFFF!important} /* 31. Meldungen über jedem Fenster. fenster.js hebt Fenster über 9800 hinaus; der Toast (6000) lag dann hinter „Anruf notieren“, „Bitte Ergebnis wählen“ war nicht lesbar. Er verdeckt nie einen Klick. */ html.kern .toast{z-index:100050} /* ── Seitenrand: Heute und Analysen wie jeder Bereich (04.11.2026, Alltagsprüfung Niedrig 14) ─ Beide brachten eine eigene Breite mit (1240 px mittig, eigener Innenabstand), der Titel stand bei 162 und 164 statt bei Leiste + --k-rand. Prüffall: test/layout.test.js. */ @media (min-width:769px){ html.kern body.nav2 #view-uebersicht .dash-scroll{padding-left:var(--k-rand)!important;padding-right:var(--k-rand)!important} html.kern body.nav2 #view-uebersicht :is(.dash-inner,.h2-root){max-width:none!important;margin-left:0!important;margin-right:0!important} html.kern body.nav2 #view-uebersicht .h2-root{padding-left:0!important;padding-right:0!important} html.kern body.nav2 #view-uebersicht .kern-tl{max-width:none;margin-left:0;margin-right:0} html.kern body.nav2 #view-analysen .a2{max-width:none;margin:0;padding-left:var(--k-rand);padding-right:var(--k-rand)} html.kern body.nav2 :is(#tasks-area,#kern-leads-scroll) > .lm.lm-ein{max-width:none;margin-left:0;margin-right:0} html.kern body.nav2 #tasks-area > .lm.lm-ein{padding-left:var(--k-rand);padding-right:var(--k-rand)} html.kern body.nav2 #kern-leads-scroll > .lm.lm-ein{padding-left:0;padding-right:0} } /* ── Zähler in Kommunikation → Anrufe: Zustandsfarben aus den Tokens (Niedrig 9) ─────────────── index.html nennt festes Rot, im Dunkeln nur 2,74:1 auf der Karte. --h-rot und --h-ok schaffen in beiden Modi 4,5:1. */ html.kern .pf-sect-count.red{background:var(--h-rot-flaeche)!important;border-color:transparent!important;color:var(--h-rot)!important} html.kern .pf-sect-count.green{background:var(--h-ok-flaeche)!important;border-color:transparent!important;color:var(--h-ok)!important} /* Bereich Beratung abgeschaltet (module.beratung: false): auch der Reiter „Rechner“ der Handy-Ansicht entfällt */ html.k-ohne-beratung #immo-subnav .seg-btn[data-k="rechner"]{display:none!important} /* ════════════════════════════════════════════════════════════════════════════ 28. Akte ruhiger (Silas 04.11.: „recht voll und beladen“) ------------------------------------------------------------------------------ Status-Chip wie die Chips daneben, Notiz nur noch ein Feld ohne Überschrift, zum Ziehen, gleich darüber die Reiter. Reihenfolge der Reiter = Reihenfolge im Code (AKTE_REITER_KERN): nav2.css stellt für MAYA Verlauf und Steckbrief mit order nach vorn, das gilt hier nicht. ════════════════════════════════════════════════════════════════════════════ */ html.kern #drawer .pnav-btn{order:0!important} html.kern .status-pick{display:inline-flex} html.kern .status-pick .status-dot-btn{display:inline-flex;align-items:center;gap:5px;border:0!important;border-radius:999px!important; padding:3px 9px 3px 4px!important;font-family:inherit;font-size:11.5px!important;font-weight:600!important;line-height:inherit; color:var(--k-text)!important;filter:none!important} html.kern .status-pick .status-dot-btn > span:first-child{width:5px!important;height:5px!important;margin-left:5px;flex-shrink:0} html.kern .drawer-top .dtop-chip,html.kern .status-pick .status-dot-btn{transition:background .12s} html.kern .status-pick .status-dot-btn:hover{background:var(--k-grau)!important} html.kern #drawer .drawer-note-top.ak2-notiz{display:block;margin:12px 28px 0;padding:0;background:transparent!important;border:0!important;box-shadow:none!important} html.kern #drawer .ak2-notiz-feld{position:relative;min-width:0} html.kern #drawer .ak2-notiz .drawer-note-ta{display:block;width:100%;min-height:44px;max-height:180px;field-sizing:content;resize:vertical;margin:0; border:0!important;border-radius:12px!important;background:var(--k-fuell)!important;color:var(--k-anthr); padding:11px 52px 11px 14px!important;font-size:14px;line-height:1.5;box-shadow:none!important} html.kern #drawer .ak2-notiz .drawer-note-ta:focus{background:var(--k-weiss)!important;box-shadow:0 0 0 2px var(--k-ak-ring)!important} html.kern #drawer .ak2-notiz .drawer-note-ta::placeholder{color:var(--k-neben);font-size:13.5px} html.kern #drawer .ak2-notiz-feld .hs-mikro-feld{top:22px;right:12px;transform:translateY(-50%)} html.kern #drawer .ak2-notiz #note-autosave-hint{position:absolute;right:56px;top:14px;margin:0;background:none!important;color:var(--k-gruen)!important; padding:0!important;font-size:12px!important;font-weight:500!important;pointer-events:none} html.kern #drawer .ak2-notiz .smart-tags:empty{display:none} html.kern body.nav2 #drawer.akte2 .profile-nav{padding-top:10px!important;padding-left:28px!important} /* erster Reiter bündig mit Feld und Karte */ @media (max-width:768px){ html.kern #drawer .drawer-note-top.ak2-notiz{margin:10px 16px 0} html.kern #drawer .ak2-notiz .drawer-note-label{margin:0} html.kern #drawer .ak2-notiz .note-ai-fill{margin:0 0 8px auto} } /* Beim Laden nie die alte Kopfleiste zeigen: Die Seitenleiste entsteht erst, wenn nav2.js am Ende der großen Seite läuft. Sicherheitsnetz: Bleibt das Skript aus, erscheint die Leiste nach 6 s doch, damit man nie ohne Menü dasteht. */ @media (min-width:769px){ html.kern body:not(.nav2) .app-header{visibility:hidden;animation:kern-kopf-spaet 0s 6s forwards} } @keyframes kern-kopf-spaet{to{visibility:visible}} /* ════════════════════════════════════════════════════════════════════════════ 32. Design-Regeln (Silas 06.11.2026, gemessen von test/design_regeln.test.js) ------------------------------------------------------------------------------ Keine Verläufe, kein Leuchten, keine Karten in Karten, nur Bewegung, die etwas bedeutet. Eine Fläche je Ebene: Wer in einer Karte liegt, trägt keine eigene Fläche. ════════════════════════════════════════════════════════════════════════════ */ /* Verläufe und Leuchten */ html.kern .in-bild-ph{background:var(--k-grau)!important} html.kern .prep-banner{background:var(--k-weiss)!important} html.kern :is(.bs-btn-pri,.seg-btn.active,.komm-tab.active,.ana-seg-btn.active,.ana-period-btn.active){box-shadow:none!important} html.kern .immo-photo-acts{background:rgba(0,0,0,.55)!important} /* Knöpfe auf dem Foto: gleichmäßige Abdunklung statt Verlauf */ html.kern body.nav2 .im2-tabs.im2-mit-sort .im2-sortslot{box-shadow:none!important} /* Bewegung: Der Knopf „+“ atmete und der Punkt „Kunde hat sich gemeldet“ pulsierte ohne Ende. Der Punkt selbst sagt es schon. */ html.kern .mobile-fab-btn,html.kern .pc-gemeldet,html.kern .ai-bell.has-new .ai-bell-dot{animation:none!important} /* Abzeichen: Heute zeigt bei leeren Abschnitten keine Null, darunter steht schon, dass nichts offen ist */ html.kern .h2-n.null{display:none} /* Agenda: die Tage sind Spalten, keine Karten. Heute erkennt man am Akzent in der Überschrift. */ html.kern :is(.day-col,.day-col.today,.day-col.overdue-col){background:transparent!important;padding-left:0;padding-right:0} html.kern .day-col.today .day-label{color:var(--k-ak-schrift)!important} html.kern :is(.a-card,.ag-termin,.day-col.today .a-card){background:var(--k-weiss)!important} /* Telefonie (Kommunikation): Kennzahlen und Verläufe liegen direkt auf dem Grund */ html.kern :is(.tel-wrap,.tel-overview .tel-wrap){background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important} html.kern :is(.tel-kpi,.tel-chart){background:var(--k-weiss)!important;border:0!important;border-radius:16px!important} html.kern .tel-wrap svg circle[stroke="var(--line)"]{stroke:var(--k-tief);opacity:1} /* Spur der Zielringe: lag auf Weiß, auf dem Grund wäre sie weg */ /* In einer Karte: keine zweite Fläche */ html.kern .ht-karte .ht-kachel,html.kern .ht-karte .ht-hinweis,html.kern .ht-karte .ht-leer,html.kern .hv-karte .hv-leer,html.kern .wm-mikro,html.kern .rechner-main .stx2-leer,html.kern .kb-schritt .ak2-focus{ background:transparent!important;border:0!important;border-radius:0!important;padding-left:0!important;padding-right:0!important} html.kern .ht-karte .ht-leer{text-align:left} html.kern .ht-karte .ht-tab td{background:transparent!important;border-radius:0!important} /* Akten: Die Reiterfläche ist die eine Karte, darin liegen keine zweiten Karten mehr */ html.kern body.nav2 #propDrawer.immo2 #prop-body:not(.expose-full) > .dtab-body,html.kern body.nav2 #drawer.akte2 .dtab-body.active{border-radius:24px} html.kern .dtab-body.active :is(.c-row,.foto-sec-group,.af-fehlt,.outcome-card,.hint-box,.prop-fp-card,.prop-fp-plan,.vm-listing,.hso-akte,.hvm-kanal){ background:transparent!important;border-color:transparent!important;box-shadow:none!important;border-radius:0!important;padding-left:0!important;padding-right:0!important} html.kern .dtab-body.active .c-row:hover{background:var(--k-grau)!important} /* Einstellungen: Rundung der Karte passt zu den Feldern darin (12 innen, also nicht 10 außen) */ html.kern :is(.ma-card,.ua-card){border-radius:16px!important} /* Reiter auf der grauen Spur: Nebentext erreichte nur 4,3:1 */ html.kern .seg-control .seg-btn:not(.active){color:var(--k-text)!important} /* 33. Lesbarkeit im Hellen (06.11.2026): --h-mittel ist nie Schrift, Reiter auf grauer Spur brauchen --h-text */ html.kern .col-empty,html.kern .cs-prov{color:var(--h-neben)!important;opacity:1} html.kern:not(.k-dunkel) .ana-seg .ana-seg-btn:not(.active){color:var(--h-text)} /* ════════════════════════════════════════════════════════════════════════════ 33. Kopf der Objekt-Akte (Silas 06.11.2026): dieselbe Haltung wie Leads und Analysen ------------------------------------------------------------------------------ Angaben sind eine ruhige Zeile, Aktionen EINE Reihe unten rechts, der Wechsler sitzt in der Ecke. Ein Blickfang: der Hauptknopf im Akzent. Der Preis ist groß und stark, trägt aber keine Farbe. Gemessen von test/design_regeln.test.js (Block akte). ════════════════════════════════════════════════════════════════════════════ */ html.kern .im2-kinfo{gap:0} html.kern .im2-kzeile{display:flex;align-items:center;justify-content:space-between;gap:var(--k-luecke);min-height:32px} html.kern .im2-meta{flex:1 1 auto;min-width:0;gap:2px 8px;font-size:13px;line-height:18px;color:var(--k-neben)} html.kern .im2-meta > *{font-size:13px;font-weight:500;line-height:18px;height:auto;padding:0;letter-spacing:0;text-transform:none} html.kern .im2-meta > * + *::before{content:'·';margin-right:8px;color:var(--k-neben);font-weight:400} html.kern .im2-meta > :is(.immo-status,.resv-chip)::before{margin-right:2px} html.kern .im2-meta .im2-art,html.kern .im2-meta .im2-art.pr,html.kern .im2-meta .im2-art.ei{background:none!important;border:0!important;border-radius:0;color:var(--k-anthr)!important;font-weight:600} html.kern .im2-meta :is(.im2-seg,.im2-nr){color:var(--k-neben)} html.kern .im2-meta :is(.immo-status,.resv-chip){background:none!important;border:0!important;border-radius:0;color:var(--k-text)!important;gap:6px;padding:0} html.kern .im2-meta .immo-status.clickable:hover{filter:none;text-decoration:underline} html.kern .im2-meta .resv-chip{cursor:pointer} html.kern .im2-meta .resv-chip:hover{text-decoration:underline} html.kern .im2-meta .immo-status-dot,html.kern .im2-meta .resv-dot{flex:none;width:7px;height:7px} html.kern .im2-kzeile .im2-wechsel{flex:none;margin:0} html.kern .im2-kzeile .im2-wechsel .im2-menu{left:auto;right:0} html.kern .im2-wbtn{border:0;background:var(--k-grau);color:var(--k-text);border-radius:999px;height:32px;min-width:32px;font-size:13px;font-weight:600} html.kern .im2-wbtn:hover:not(:disabled){background:var(--k-tief)} html.kern .im2-titel,html.kern .im2-titelzeile .im2-titel{margin:6px 0 0;font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.015em;white-space:normal; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} html.kern .im2-ort{margin-top:4px;font-size:14px;line-height:20px;white-space:normal;color:var(--k-neben)} html.kern .im2-krow{flex-wrap:nowrap;align-items:flex-end;gap:var(--k-luecke);padding-top:var(--k-luecke)} html.kern .im2-preis-box{flex:1 1 auto;gap:10px;flex-wrap:wrap} html.kern .im2-preis-gross{font-size:28px!important;line-height:34px;font-weight:650!important;letter-spacing:-.015em;color:var(--k-anthr)!important} html.kern .im2-preis-box small{font-size:13px;color:var(--k-neben)} html.kern .im2-acts{flex:none;flex-wrap:nowrap;gap:8px} html.kern .im2-acts .resv-btn{white-space:nowrap} html.kern .im2-btn.pri{background:var(--k-ak)!important;color:var(--k-ak-text)!important} html.kern .im2-btn.pri:hover{background:var(--k-ak-tief)!important;color:#FFFFFF!important} html.kern .im2-fotos{height:auto;min-height:164px;border-radius:24px} html.kern .im2-fotos:not(.mehr) .im2-f1{border-radius:24px} html.kern .im2-f1 img,html.kern .im2-fn img{position:absolute;inset:0} html.kern .im2-menu .im2-nur-eng{display:none} @media (max-width:1180px){ html.kern .im2-acts .resv-btn{display:none} html.kern .im2-menu .im2-nur-eng{display:flex} } @media (max-width:960px){ html.kern .im2-krow{flex-wrap:wrap} } /* ════════════════════════════════════════════════════════════════════════════ 34. Objekt-Akte kompakt (Silas 06.11.2026: „die Felder sind alle riesig“) ------------------------------------------------------------------------------ Höhe aus EINEM Wert (--k-feld-h, am Handy 44 px). Kurze Felder mehrspaltig nach Breite, lange Texte über die volle Breite. Objektdaten ohne Karte um alles: Abschnitte reichen. Gemessen von test:design-regeln. ════════════════════════════════════════════════════════════════════════════ */ html.kern{--k-feld-h:32px} @media (max-width:768px){ html.kern{--k-feld-h:44px} } html.kern #propDrawer .dtab-body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select){ height:var(--k-feld-h)!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important;font-size:13px!important;line-height:1.2} html.kern #propDrawer .dtab-body textarea{font-size:13px!important;line-height:1.45;padding-top:6px!important;padding-bottom:6px!important;min-height:calc(var(--k-feld-h) * 1.75);field-sizing:content;max-height:320px} html.kern #propDrawer .dtab-body .steck-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:8px var(--k-luecke);align-items:end} html.kern #propDrawer .dtab-body .df{margin:0;min-width:0} html.kern #propDrawer .dtab-body .df > label:not(.pf-check){display:block;margin:0 0 3px;font-size:12px!important;font-weight:500!important;line-height:16px;letter-spacing:0!important;text-transform:none!important;color:var(--k-neben)!important; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.kern #propDrawer .dtab-body .steck-group-title{margin:20px 0 8px;font-size:14px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--k-anthr)!important} html.kern #propDrawer .dtab-body .steck-group-title:first-child{margin-top:0} html.kern #propDrawer .dtab-body .pf-checkwrap{display:flex;align-items:center;min-height:var(--k-feld-h)} html.kern #propDrawer .dtab-body .pf-check{font-size:13px;letter-spacing:0;text-transform:none} html.kern #propDrawer .df.k-gefunden :is(input,select,textarea){box-shadow:0 0 0 2px var(--k-ak-ring)!important} /* Objektdaten: Abschnitte statt Karte um alles. Felder sind die Fläche. */ html.kern body.nav2 #propDrawer.immo2.im2-od-an #prop-body:not(.expose-full) > .dtab-body{background:transparent!important;border:0;border-radius:0;padding:0} html.kern body.nav2 #propDrawer.immo2.im2-od-an .dtab-body :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background-color:var(--k-weiss)!important} html.kern body.nav2 #propDrawer.immo2.im2-od-an .dtab-body :is(input,select,textarea):focus{box-shadow:0 0 0 2px var(--k-ak-ring)!important} html.kern body.nav2 #propDrawer.immo2 .profile-main > .drawer-body{padding-top:12px} /* Löschen, ZIP und Bilder stehen im Menü „…“ im Kopf, unten bleibt nur Speichern */ html.kern body.nav2 #propDrawer.immo2 .drawer-footer > span:first-child{display:none!important} /* Unterreiter: niedrig, und ab genug Breite in derselben Reihe wie die Reiter */ html.kern body.nav2 #propDrawer.immo2.im2-od-an .im2-subnav{padding-top:0;gap:2px} html.kern body.nav2 #propDrawer.immo2 .im2-subnav .pnav-btn{height:var(--k-knopf-klein-h);padding:0 12px;font-size:13px} @media (min-width:1500px){ html.kern body.nav2 #propDrawer.immo2.im2-breit.im2-od-an .profile-main{grid-template-columns:max-content minmax(0,1fr)} html.kern body.nav2 #propDrawer.immo2.im2-od-an .profile-nav{grid-column:1;padding-right:8px} html.kern body.nav2 #propDrawer.immo2.im2-od-an .im2-subnav{grid-column:2;grid-row:1;align-items:center;padding:0 260px 0 0} html.kern body.nav2 #propDrawer.immo2.im2-od-an .profile-main > .drawer-body{grid-column:1/-1} } /* Suchfeld: rechts in der Reiterzeile, am Handy eine eigene Zeile über den Reitern */ html.kern .k-objsuche{position:relative;display:flex;align-items:center;gap:8px;height:var(--k-feld-h);padding:0 10px;border-radius:999px;background:var(--k-grau);color:var(--k-neben);box-sizing:border-box} html.kern .k-objsuche > svg{flex:none;width:14px;height:14px} html.kern #propDrawer .k-objsuche input{flex:1;min-width:0;height:100%!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:13px!important;color:var(--k-anthr);outline:none} html.kern .k-objsuche input::-webkit-search-cancel-button{display:none} html.kern .k-objsuche kbd{flex:none;font:600 11px/16px var(--k-sans);padding:0 5px;border-radius:5px;background:var(--k-tief);color:var(--k-neben)} html.kern .k-objsuche:focus-within{box-shadow:0 0 0 2px var(--k-ak-ring)} html.kern .k-objsuche:focus-within kbd{display:none} html.kern .k-objsuche-l-box{position:absolute;top:calc(100% + 6px);right:0;z-index:40;width:min(380px,calc(100vw - 32px));max-height:min(60vh,400px);overflow:auto;padding:6px;border-radius:16px;background:var(--k-weiss);box-shadow:var(--k-schwebend)} html.kern .k-objsuche-l-box[hidden]{display:none} html.kern .k-objsuche-z{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;width:100%;padding:7px 10px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer;color:var(--k-anthr);font-family:var(--k-sans)} html.kern .k-objsuche-z.an,html.kern .k-objsuche-z:hover{background:var(--k-grau)} html.kern .k-objsuche-l{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.kern .k-objsuche-w{grid-column:2;grid-row:1;font-size:12.5px;color:var(--k-text);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.kern .k-objsuche-o{grid-column:1/-1;grid-row:2;font-size:12px;color:var(--k-neben);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html.kern .k-objsuche-n{padding:10px;font-size:13px;color:var(--k-neben)} @media (min-width:769px){ html.kern body.nav2 #propDrawer.immo2 .k-objsuche{grid-column:1/-1;grid-row:1;justify-self:end;align-self:center;width:220px;margin-right:28px;z-index:3} html.kern body.nav2 #propDrawer.immo2 .profile-nav{padding-right:260px} } /* Handy: Angaben ruhig, Aktionen in einer Reihe zum Wischen, Selteneres im Menü der Fußleiste */ @media (max-width:768px){ html.kern .k-objsuche{margin:8px var(--k-rand) 0;border-radius:12px} html.kern .k-objsuche kbd{display:none} html.kern .k-objsuche-l-box{left:0;right:0;width:auto} html.kern #propDrawer .dtab-body .steck-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))} html.kern .prop-top .d-badges{gap:2px 12px;font-size:13px;align-items:center} html.kern .prop-top .d-badges > :is(.p-card-seg,.immo-status,.immo-ref,.resv-chip){background:none!important;border:0!important;padding:0!important;font-size:13px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--k-text)!important} html.kern .prop-top .d-badges > .p-card-seg{color:var(--k-anthr)!important;font-weight:600!important} html.kern .prop-top-price{order:9;flex:0 0 100%;margin-top:6px;font-size:24px!important;font-weight:650;letter-spacing:-.015em;color:var(--k-anthr)!important} html.kern .prop-top-tools{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} html.kern .prop-top-tools::-webkit-scrollbar{display:none} html.kern .prop-top-tools > *{flex:none;white-space:nowrap} html.kern .prop-top-tools{align-items:center} html.kern .prop-top-tools :is(.prop-rc-btn,.resv-btn){height:44px;padding:0 16px;font-size:13px;border-radius:999px;display:inline-flex;align-items:center} html.kern .prop-top-tools .prop-rc-btn[onclick*="propExposeSenden"]{order:-1;background:var(--k-ak)!important;color:var(--k-ak-text)!important} html.kern .prop-top-tools .prop-rc-btn:not(.ghost){background:var(--k-grau)!important;color:var(--k-text)!important} html.kern .prop-back-btn{max-width:calc(100% - 56px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.kern .k-fussmenue{position:relative} html.kern .k-fussmenue > summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:var(--k-grau);color:var(--k-text);font-weight:700;cursor:pointer} html.kern .k-fussmenue > summary::-webkit-details-marker{display:none} html.kern .k-fussmenue-l{position:absolute;left:0;bottom:52px;z-index:40;display:grid;gap:4px;min-width:210px;padding:6px;border-radius:16px;background:var(--k-weiss);box-shadow:var(--k-schwebend)} html.kern .k-fussmenue-l button{width:100%;justify-content:flex-start;background:none!important;min-height:44px} } /* Kontakt-Akte: gleiche Form, die Angaben sind Text. Wählbar bleibt alles, die Fläche kommt erst beim Überfahren. */ html.kern body.nav2 #drawer.akte2 .d-badges{margin-left:-9px} html.kern body.nav2 #drawer.akte2 :is(.dtop-chip,.status-pick .status-dot-btn){background:transparent!important} html.kern body.nav2 #drawer.akte2 :is(.dtop-chip,.status-pick .status-dot-btn):hover{background:var(--k-grau)!important} /* Wohnungen eines Projekts: Die Zeile führt in die Einheit, „Öffnen“ sagt es sichtbar. Der Pfeil klappt nur die Vorschau auf. */ html.kern .bld-urow-auf{cursor:pointer} html.kern .bld-urow-auf:hover td{background:var(--k-grau)} html.kern .bld-urow-auf .bld-uchev{border:0;background:none;padding:2px 6px 2px 0;font:inherit;color:var(--k-neben);cursor:pointer} html.kern .bld-urow-auf .bld-act{white-space:nowrap} html.kern .bld-oeffnen{height:var(--k-knopf-klein-h);margin-left:6px;padding:0 14px;border:0;border-radius:999px;background:var(--k-grau);color:var(--k-anthr);font-family:var(--k-sans);font-size:13px;font-weight:600;cursor:pointer} html.kern body.nav2 #propDrawer .bld-tbl tbody tr .bld-act > .bld-oeffnen{opacity:1} /* immo2.css blendet die Spalte erst beim Überfahren ein */ html.kern .bld-oeffnen:hover{background:var(--k-tief)}