/* Erzeugt von tools/build-assets.php — nicht von Hand ändern. */
:root { --hesse-blue: #4e57a3; --hesse-green: #00a67a; --hesse-gradient: linear-gradient(45deg, #4e57a3 0%, #00a67a 100%); --hesse-web-gradient: linear-gradient(45deg, #ffff47 5%, #17d1f3 95%); --ground: #f4f5f4; --surface: #ffffff; --surface-2: #eef0ee; --surface-3: #e3e6e3; --ink: #101210; --ink-2: #565a57; --ink-3: #7d827e; --line: #e2e5e2; --line-2: #cdd2ce; --accent: #007f5e; --accent-pure: #00a67a; --accent-soft: #e2f5ef; --on-accent: #ffffff; --focus: #00a67a; --rel-customer: #0f7a48; --rel-distributor: #146b52; --rel-opportunity: #3a5fae; --rel-prospect: #b4700f; --rel-unassessed: #7d827e; --rel-former: #9c3b36; --rel-competitor: #6b4fa8; --ok: #0f7a48; --warn: #b4700f; --danger: #b0322c; --radius: 3px; --radius-lg: 6px; --shadow-sm: 0 1px 2px rgb(0 0 0 / .06), 0 6px 18px -12px rgb(0 0 0 / .2); --shadow-lg: 0 2px 6px rgb(0 0 0 / .08), 0 26px 60px -26px rgb(0 0 0 / .3); --font: "Uni Neue", Figtree, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-mono: "Ubuntu Sans Mono", ui-monospace, "SF Mono", Menlo, monospace; --map-ground: #eceff1; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #0b0c0b; --surface: #141614; --surface-2: #1c1f1d; --surface-3: #262a27; --ink: #eef1ee; --ink-2: #a2a8a4; --ink-3: #797f7b; --line: #262a27; --line-2: #363c38; --accent: #35c79c; --accent-pure: #00a67a; --accent-soft: #0b2e25; --on-accent: #04120d; --rel-customer: #35c08a; --rel-distributor: #2aa87a; --rel-opportunity: #6f92dd; --rel-prospect: #e0a048; --rel-unassessed: #8b918d; --rel-former: #d9736d; --rel-competitor: #9b83e0; --ok: #35c08a; --warn: #e0a048; --danger: #e0736d; --shadow-sm: 0 1px 2px rgb(0 0 0 / .5), 0 6px 18px -12px rgb(0 0 0 / .7); --shadow-lg: 0 2px 6px rgb(0 0 0 / .5), 0 26px 60px -26px rgb(0 0 0 / .8); --map-ground: #0d1013; color-scheme: dark; } } :root[data-theme="dark"] { --ground: #0b0c0b; --surface: #141614; --surface-2: #1c1f1d; --surface-3: #262a27; --ink: #eef1ee; --ink-2: #a2a8a4; --ink-3: #797f7b; --line: #262a27; --line-2: #363c38; --accent: #35c79c; --accent-pure: #00a67a; --accent-soft: #0b2e25; --on-accent: #04120d; --rel-customer: #35c08a; --rel-distributor: #2aa87a; --rel-opportunity: #6f92dd; --rel-prospect: #e0a048; --rel-unassessed: #8b918d; --rel-former: #d9736d; --rel-competitor: #9b83e0; --ok: #35c08a; --warn: #e0a048; --danger: #e0736d; --shadow-sm: 0 1px 2px rgb(0 0 0 / .5), 0 6px 18px -12px rgb(0 0 0 / .7); --shadow-lg: 0 2px 6px rgb(0 0 0 / .5), 0 26px 60px -26px rgb(0 0 0 / .8); --map-ground: #0d1013; color-scheme: dark; } :root { --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: .16s; --dur: .26s; --dur-slow: .42s; --lift: 0 10px 28px -14px rgb(0 0 0 / .28); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
*, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } p { margin: 0 0 .6em; } ul, ol, dl { margin: 0; padding: 0; } li { list-style: none; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } .tnum, .table .num, .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .muted { color: var(--ink-3); font-size: .82rem; } .hint { color: var(--ink-3); font-size: .82rem; margin: .5rem 0 0; } .unknown { color: var(--ink-3); font-style: italic; } .link { color: var(--accent); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); } .skip-link { position: absolute; left: .5rem; top: -3rem; z-index: 100; padding: .55rem .9rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); transition: top .12s ease; } .skip-link:focus { top: .5rem; } .ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ico--xs { width: .8em; height: .8em; margin-left: .25em; } .topbar { position: sticky; top: 0; z-index: 40; background: var(--surface); } .topbar__row { display: flex; align-items: center; gap: 1rem; padding: .45rem clamp(.75rem, 2vw, 1.25rem); max-width: 1760px; margin: 0 auto; } .brandrule { height: 3px; background: var(--hesse-gradient); } .brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; } .brand__logo { width: 100%; height: auto; display: block; } .brand__plate { display: block; border-radius: 8px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand__plate { background: #fff; padding: .3rem .5rem; margin: -.3rem -.5rem; } } :root[data-theme="dark"] .brand__plate { background: #fff; padding: .3rem .5rem; margin: -.3rem -.5rem; } :root[data-theme="light"] .brand__plate { background: none; padding: 0; margin: 0; } .globalsearch { position: relative; display: flex; align-items: center; gap: .4rem; flex: 1 1 auto; max-width: 520px; } .globalsearch__ico { position: absolute; left: .6rem; color: var(--ink-3); pointer-events: none; width: 1rem; height: 1rem; } .globalsearch__input { width: 100%; padding: .45rem .7rem .45rem 2rem; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); font: inherit; font-size: .9rem; } .globalsearch__input::placeholder { color: var(--ink-3); } .globalsearch__go { flex: none; } .topbar__tools { display: flex; align-items: center; gap: .4rem; margin-left: auto; } .langswitch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .langswitch__link { padding: .28rem .5rem; font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-3); text-decoration: none; background: var(--surface); } .langswitch__link + .langswitch__link { border-left: 1px solid var(--line); } .langswitch__link.is-current { background: var(--surface-3); color: var(--ink); } .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; } .iconbtn:hover { color: var(--ink); border-color: var(--line-2); } .ico--moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ico--sun { display: none; } :root:not([data-theme="light"]) .ico--moon { display: block; } } :root[data-theme="dark"] .ico--sun { display: none; } :root[data-theme="dark"] .ico--moon { display: block; } .usermenu { position: relative; } .usermenu__button { display: flex; align-items: center; gap: .45rem; cursor: pointer; list-style: none; padding: .2rem .45rem .2rem .2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .usermenu__button::-webkit-details-marker { display: none; } .avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--hesse-gradient); color: #fff; font-size: .78rem; font-weight: 700; } .usermenu__name { font-size: .85rem; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .usermenu__panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50; min-width: 15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: .4rem; } .usermenu__meta { padding: .5rem .6rem; margin: 0 0 .3rem; border-bottom: 1px solid var(--line); font-size: .85rem; } .usermenu__item { display: block; padding: .45rem .6rem; border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: .88rem; } .usermenu__item:hover { background: var(--surface-2); } .usermenu__item--out { color: var(--danger); border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .55rem; } .shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0; max-width: 1760px; margin: 0 auto; align-items: start; } .sidenav { position: sticky; top: 3.4rem; padding: .9rem .55rem; display: flex; flex-direction: column; gap: .35rem; min-height: calc(100vh - 3.4rem); border-right: 1px solid var(--line); transition: padding .22s var(--ease); } .sidenav__list { display: flex; flex-direction: column; gap: 2px; } .shell { transition: grid-template-columns .26s var(--ease); } :root[data-nav="collapsed"] .shell { grid-template-columns: 64px minmax(0, 1fr); } :root[data-nav="collapsed"] .sidenav__link { justify-content: center; padding: .6rem 0; gap: 0; } :root[data-nav="collapsed"] .sidenav__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .sidenav__link { position: relative; display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: .9rem; white-space: nowrap; transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); } .sidenav__link .ico { flex: none; transition: transform .22s var(--ease); } .sidenav__link:hover { background: var(--surface-2); color: var(--ink); transform: translateX(2px); } .sidenav__link:hover .ico { transform: scale(1.08); } .sidenav__link[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 600; } .sidenav__link[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 0 3px 3px 0; background: var(--accent-pure); translate: 0 -50%; animation: rail-in .32s var(--ease) forwards; } @keyframes rail-in { to { height: 62%; } } :root:not([data-nav-seen]) .sidenav__list li { animation: nav-in .32s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); } @keyframes nav-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } :root[data-nav-seen] .sidenav__link[aria-current="page"]::before { animation: none; height: 62%; } .sidenav__badge { margin-left: auto; flex: none; font-size: .58rem; font-weight: 700; letter-spacing: .08em; padding: .12rem .3rem; border-radius: 4px; background: var(--accent-soft); color: var(--accent); } :root[data-nav="collapsed"] .sidenav__badge { display: none; } .navtoggle { margin-top: auto; align-self: stretch; display: flex; align-items: center; gap: .55rem; min-height: 2.1rem; padding: .35rem .5rem; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--ink-3); cursor: pointer; font: inherit; font-size: .82rem; text-align: left; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); } .navtoggle__text { white-space: nowrap; } :root[data-nav="collapsed"] .navtoggle__text { display: none; } .navtoggle:hover { color: var(--ink); border-color: var(--line); background: var(--surface-2); } .navtoggle:focus-visible { outline: 2px solid var(--accent-pure); outline-offset: 2px; } .navtoggle__ico { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .28s var(--ease); } :root[data-nav="collapsed"] .navtoggle { align-self: center; justify-content: center; width: 2.1rem; padding: 0; border-radius: 50%; border-color: var(--line); background: var(--surface); } :root[data-nav="collapsed"] .navtoggle__ico { rotate: 180deg; } .main { min-width: 0; padding: 1rem clamp(.75rem, 2vw, 1.25rem) 3rem; } .main:focus { outline: none; } .tabbar { display: none; } .page { display: flex; flex-direction: column; gap: 1rem; } .page--narrow { max-width: 720px; } .page--prose { max-width: 940px; } .pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pagehead__title { font-size: clamp(1.2rem, 2.2vw, 1.6rem); } .pagehead__sub { margin: .15rem 0 0; color: var(--ink-3); font-size: .85rem; max-width: 70ch; } .pagehead__crumb { margin: 0 0 .2rem; font-size: .8rem; } .pagehead__actions { display: flex; gap: .5rem; flex-wrap: wrap; } .pagehead__filter { display: flex; gap: .4rem; flex-wrap: wrap; } .pagehead__filter .input { width: auto; min-width: 9rem; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); } .card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .card__title { font-size: .95rem; letter-spacing: .01em; margin-bottom: .7rem; } .card__head .card__title { margin-bottom: 0; } .card__subtitle { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin: 1.1rem 0 .45rem; } .card__foot { margin: .8rem 0 0; font-size: .85rem; } .card__foot--ai { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .8rem; margin-top: 1rem; } .grid { display: grid; gap: 1rem; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .grid--sales { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } .grid--contacts { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .sidestack { display: flex; flex-direction: column; gap: 1rem; } .prose { max-width: 78ch; color: var(--ink); } .prose--sm { font-size: .88rem; color: var(--ink-2); } .prose--entry { border-left: 2px solid var(--accent-pure); padding-left: .8rem; } .prose--next { border-left: 2px solid var(--hesse-blue); padding-left: .8rem; } .alert { padding: .6rem .8rem; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface-2); font-size: .88rem; margin: 0 0 .8rem; } .alert--ok { border-color: var(--ok); background: var(--accent-soft); color: var(--ink); } .alert--danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); } .alert--warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); } .alert--info { border-color: var(--line-2); background: var(--surface-2); color: var(--ink-2); } .alert--muted { border-style: dashed; color: var(--ink-3); background: transparent; } .empty { margin: .3rem 0; padding: .75rem .9rem; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--ink-3); font-size: .88rem; background: transparent; } .empty__hint { display: block; margin-top: .25rem; color: var(--ink-3); font-size: .82rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .45rem .85rem; min-height: 2.15rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); font: inherit; font-size: .88rem; font-weight: 500; text-decoration: none; cursor: pointer; } .btn:hover { border-color: var(--ink-3); } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn--primary:hover { filter: brightness(1.06); border-color: var(--accent); } .btn--quiet { background: transparent; border-color: var(--line); color: var(--ink-2); } .btn--quiet.is-on { border-color: var(--accent); color: var(--accent); } .btn--ghost { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); } .btn--ghost:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); } .btn--block { width: 100%; } .btn--sm { padding: .25rem .55rem; min-height: 1.8rem; font-size: .8rem; } .btn--xs { padding: .15rem .45rem; min-height: 1.6rem; font-size: .74rem; } .form { display: flex; flex-direction: column; gap: .75rem; } .form--inline { margin-top: .8rem; } .field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .field--grow { flex: 1 1 12rem; } .field--narrow { flex: 0 0 8rem; } .field-row { display: flex; gap: .75rem; flex-wrap: wrap; } .form__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; } .label { font-size: .78rem; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; } .req { font-weight: 400; color: var(--ink-3); font-size: .72rem; } .input { width: 100%; padding: .45rem .6rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); font: inherit; font-size: .9rem; } .input:disabled, .input[readonly] { background: var(--surface-2); color: var(--ink-2); } .input--area { resize: vertical; min-height: 4.5rem; line-height: 1.5; } .input--num { max-width: 9rem; } .input--xs { padding: .2rem .35rem; font-size: .78rem; } .check { display: flex; align-items: center; gap: .45rem; padding: .18rem .1rem; cursor: pointer; font-size: .86rem; } .check--standalone { padding: .35rem 0; } .check__box { accent-color: var(--accent-pure); width: 1rem; height: 1rem; flex: none; } .check__label { flex: 1 1 auto; min-width: 0; } .check__hint { display: block; color: var(--ink-3); font-size: .78rem; } .check__count { color: var(--ink-3); font-size: .76rem; flex: none; } .withside { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; align-items: start; } .withside__aside { position: sticky; top: 3.6rem; } .filters { display: flex; flex-direction: column; gap: .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: .9rem; max-height: calc(100vh - 5rem); overflow: auto; } .filters__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; } .filters__title { font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); } .filters__clear { font-size: .78rem; } .filters__actions { display: flex; flex-direction: column; gap: .4rem; position: sticky; bottom: 0; background: var(--surface); padding-top: .5rem; } .filters__note { color: var(--ink-3); font-size: .74rem; margin: 0; } .filter { border: 0; padding: 0; margin: 0; min-width: 0; } .filter__legend { font-size: .78rem; font-weight: 600; color: var(--ink-2); padding: 0 0 .2rem; } .filter__options { display: flex; flex-direction: column; } .filter__options--scroll { max-height: 12rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: .25rem .4rem; } .filter__options--row { flex-direction: row; flex-wrap: wrap; gap: .75rem; } .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .table { width: 100%; border-collapse: collapse; font-size: .86rem; } .table caption { text-align: left; } .table th, .table td { padding: .5rem .65rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--ink-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; white-space: nowrap; } .table tbody tr:hover { background: var(--surface-2); } .table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; } .table tfoot th, .table tfoot td { background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--line-2); } .table .num { text-align: right; } .table--dense th, .table--dense td { padding: .38rem .55rem; } .table__name a { color: var(--ink); font-weight: 600; text-decoration: none; } .table__name a:hover { color: var(--accent); text-decoration: underline; } .table__sub { display: block; color: var(--ink-3); font-size: .76rem; font-weight: 400; } .table__action { max-width: 22rem; } .table__actiontext { display: block; } .table__due { font-size: .78rem; color: var(--ink-3); } .cell--clip { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; } .cell--share { min-width: 8rem; white-space: nowrap; } .is-overdue { color: var(--danger); font-weight: 600; } .is-whitespot th[scope="row"] { box-shadow: inset 2px 0 0 var(--warn); } .sortlink { color: inherit; text-decoration: none; white-space: nowrap; } .sortlink:hover { color: var(--accent); } .sortlink.is-active { color: var(--ink); } .sortlink__dir { color: var(--accent); } .pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; } .pager__range { color: var(--ink-3); font-size: .82rem; margin: 0; } .pager__list { display: flex; gap: .25rem; flex-wrap: wrap; } .pager__link { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; padding: 0 .5rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); text-decoration: none; font-size: .84rem; background: var(--surface); } .pager__link:hover { border-color: var(--line-2); color: var(--ink); } .pager__link.is-current { background: var(--surface-3); color: var(--ink); font-weight: 600; } .pager__link.is-disabled { opacity: .45; pointer-events: none; } .pager__gap { padding: 0 .2rem; color: var(--ink-3); } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .75rem; } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .kpi__link { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.05rem; text-decoration: none; color: inherit; height: 100%; } .kpi__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .kpi__ico { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; transition: transform var(--dur) var(--ease); } .kpi__ico svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .kpi--interactive:hover .kpi__ico { transform: scale(1.08) rotate(-3deg); } .kpi__ico--blue { background: rgb(78 87 163 / .12); color: #4e57a3; } .kpi__ico--green { background: rgb(0 166 122 / .13); color: #0a7f5f; } .kpi__ico--violet { background: rgb(124 96 200 / .12); color: #6a52ad; } .kpi__ico--amber { background: rgb(196 138 18 / .14); color: #a06f06; } :root[data-theme="dark"] .kpi__ico--blue { color: #98a2e8; } :root[data-theme="dark"] .kpi__ico--green { color: #4fd2a8; } :root[data-theme="dark"] .kpi__ico--violet { color: #b4a0f0; } :root[data-theme="dark"] .kpi__ico--amber { color: #e3b24a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kpi__ico--blue { color: #98a2e8; } :root:not([data-theme="light"]) .kpi__ico--green { color: #4fd2a8; } :root:not([data-theme="light"]) .kpi__ico--violet { color: #b4a0f0; } :root:not([data-theme="light"]) .kpi__ico--amber { color: #e3b24a; } } .kpi__label { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); } .kpi__value { font-size: 2.05rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } .kpi__note { font-size: .72rem; color: var(--ink-3); } .kpi--accent { border-color: color-mix(in srgb, var(--accent-pure) 40%, var(--line)); } .kpi--accent .kpi__value { color: var(--accent); } .kpi--danger .kpi__value { color: var(--danger); } .meter { display: inline-flex; align-items: center; gap: .4rem; } .meter__track { display: block; width: 4.5rem; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; flex: none; } .meter__fill { display: block; height: 100%; background: var(--hesse-gradient); border-radius: 3px; } .meter__value { font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2ch; } .meter--compact .meter__track { width: 3rem; height: 5px; } .meter--compact .meter__value { font-size: .78rem; } .meter[data-tier="LOW"] .meter__fill { opacity: .45; } .meter[data-tier="MEDIUM"] .meter__fill { opacity: .75; } .pts { font-weight: 600; } .pts__max { color: var(--ink-3); font-size: .78rem; } .pts__bar { display: block; width: 4rem; height: 4px; background: var(--surface-3); border-radius: 2px; margin: .2rem 0 0 auto; overflow: hidden; } .pts__fill { display: block; height: 100%; background: var(--accent-pure); } .scoretotal { font-size: .95rem; font-weight: 700; } .bars { display: flex; flex-direction: column; gap: .35rem; } .bar { display: grid; grid-template-columns: minmax(6rem, 11rem) 1fr auto; align-items: center; gap: .6rem; font-size: .85rem; } .bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar__label a { color: var(--ink); text-decoration: none; } .bar__label a:hover { color: var(--accent); text-decoration: underline; } .bar__track { display: block; height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; } .bar__track--wide { width: 100%; margin: .3rem 0 0; } .bar__fill { display: block; height: 100%; background: var(--hesse-gradient); } .bar__value { color: var(--ink-2); font-size: .82rem; } .stackwrap { display: block; min-width: 7rem; } .stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-3); } .stack--empty { display: block; } .stack__seg { display: block; height: 100%; } .stack__seg[data-value="CUSTOMER"] { background: var(--rel-customer); } .stack__seg[data-value="DISTRIBUTOR"] { background: var(--rel-distributor); } .stack__seg[data-value="OPPORTUNITY"] { background: var(--rel-opportunity); } .stack__seg[data-value="PROSPECT"] { background: var(--rel-prospect); } .stack__seg[data-value="UNASSESSED"] { background: var(--rel-unassessed); } .completeness { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 0; } .completeness__value { font-size: 1.5rem; font-weight: 700; } .completeness__count { color: var(--ink-3); font-size: .82rem; } .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .45rem; border-radius: var(--radius); font-size: .78rem; font-weight: 500; line-height: 1.5; border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface-2); white-space: nowrap; } .chip--sm { font-size: .72rem; padding: .05rem .35rem; } .chip--plain { background: transparent; } .chip--muted { color: var(--ink-3); border-style: dashed; } .chip--warn { border-color: var(--warn); color: var(--warn); background: transparent; } .chip--danger { border-color: var(--danger); color: var(--danger); background: transparent; } .chip--rel { border-color: currentColor; background: transparent; } .chip--rel[data-value="CUSTOMER"] { color: var(--rel-customer); } .chip--rel[data-value="DISTRIBUTOR"] { color: var(--rel-distributor); } .chip--rel[data-value="OPPORTUNITY"] { color: var(--rel-opportunity); } .chip--rel[data-value="PROSPECT"] { color: var(--rel-prospect); } .chip--rel[data-value="UNASSESSED"] { color: var(--rel-unassessed); } .chip--rel[data-value="FORMER_CUSTOMER"] { color: var(--rel-former); } .chip--rel[data-value="COMPETITOR"] { color: var(--rel-competitor); } .chip--tier[data-value="HIGH"] { color: var(--ok); border-color: var(--ok); background: var(--accent-soft); } .chip--tier[data-value="MEDIUM"] { color: var(--warn); border-color: var(--warn); background: transparent; } .chip--tier[data-value="LOW"] { color: var(--ink-3); background: transparent; } .chip--coating[data-value="CONFIRMED"] { color: var(--ok); border-color: var(--ok); } .chip--coating[data-value="INFERRED"] { color: var(--warn); border-color: var(--warn); } .chip--coating[data-value="NONE"] { color: var(--ink-3); border-style: dashed; } .chip--coord[data-value="EXACT"] { color: var(--ok); } .chip--coord[data-value="OSB"] { color: var(--warn); } .chip--coord[data-value="CITY"] { color: var(--ink-3); border-style: dashed; } .chip--prio[data-value="URGENT"] { color: var(--danger); border-color: var(--danger); } .chip--prio[data-value="HIGH"] { color: var(--warn); border-color: var(--warn); } .chip--prio[data-value="LOW"] { color: var(--ink-3); } .chip--status[data-value="CUSTOMER"] { color: var(--ok); border-color: var(--ok); } .chip--status[data-value="LOST"], .chip--status[data-value="NOT_RELEVANT"] { color: var(--ink-3); border-style: dashed; } .claim { display: inline-block; padding: .02rem .35rem; border-radius: 2px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: 1px solid currentColor; white-space: nowrap; } .claim[data-claim="FACT"] { color: var(--ok); } .claim[data-claim="INFERENCE"] { color: var(--warn); } .claim[data-claim="UNKNOWN"] { color: var(--ink-3); border-style: dashed; } .taglist { display: flex; flex-wrap: wrap; gap: .3rem; } .tag { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .45rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); font-size: .8rem; color: var(--ink-2); } .tag--seg { border-color: color-mix(in srgb, var(--accent-pure) 45%, var(--line)); color: var(--accent); } .tag--missing { border-style: dashed; color: var(--ink-3); background: transparent; } .tag--tech { background: transparent; } .extlink { display: inline-flex; align-items: center; font-size: .84rem; } .deflist { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .3rem .9rem; font-size: .87rem; } .deflist--cols { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: 1.75rem; } @media (max-width: 900px) { .deflist--cols { grid-template-columns: max-content minmax(0, 1fr); } } .deflist dt { color: var(--ink-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; padding-top: .15rem; } .deflist dd { margin: 0; min-width: 0; } .dd__note { display: block; color: var(--ink-3); font-size: .78rem; margin-top: .15rem; } .ilist { display: flex; flex-direction: column; } .ilist__item { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; } .ilist__item:last-child { border-bottom: 0; } .ilist__main { min-width: 0; } .ilist__meta { display: block; color: var(--ink-3); font-size: .8rem; } .ilist__side { display: flex; align-items: center; gap: .4rem; flex: none; font-size: .82rem; color: var(--ink-2); } .leads { display: flex; flex-direction: column; } .lead { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .4rem .7rem; padding: .45rem 0; border-bottom: 1px solid var(--line); } .lead:last-child { border-bottom: 0; } .lead__name { grid-column: 1; color: var(--ink); font-weight: 600; text-decoration: none; font-size: .9rem; } .lead__name:hover { color: var(--accent); text-decoration: underline; } .lead__meta { grid-column: 1; grid-row: 2; color: var(--ink-3); font-size: .78rem; } .lead__score { grid-column: 2; grid-row: 1 / span 2; } .lead__tier { grid-column: 3; grid-row: 1 / span 2; } .c360 { display: flex; flex-direction: column; gap: 1rem; } .c360__head { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); } .c360__crumb { margin: 0 0 .25rem; font-size: .8rem; } .c360__name { font-size: clamp(1.3rem, 2.6vw, 1.9rem); } .c360__legal { color: var(--ink-3); font-size: .85rem; margin: .1rem 0 .5rem; } .c360__address { font-size: .88rem; color: var(--ink-2); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .c360__chips { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .6rem 0 0; } .c360__score { border-left: 1px solid var(--line); padding-left: 1.2rem; } .c360__scorelabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0; } .c360__scorevalue { font-size: 2.4rem; font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -.03em; } .c360__scoremax { font-size: 1rem; color: var(--ink-3); font-weight: 500; } .c360__tier { margin: .45rem 0 .2rem; } .c360__scorelink { font-size: .8rem; margin: 0 0 .6rem; } .tabs { display: flex; flex-direction: column; gap: 1rem; } .tabs__list { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--line); } .tabs__tab { padding: .55rem .85rem; white-space: nowrap; text-decoration: none; color: var(--ink-2); font-size: .9rem; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs__tab:hover { color: var(--ink); } .tabs__tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent-pure); } .tabs__panel:focus { outline: none; } .tabs__panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; } .intel { display: flex; flex-direction: column; gap: 1rem; } .card--brief { border-color: color-mix(in srgb, var(--accent-pure) 30%, var(--line)); } .brief__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; } .riskcodes { display: flex; flex-direction: column; gap: .35rem; } .risk { padding-left: 1rem; position: relative; font-size: .88rem; color: var(--ink-2); } .risk::before { content: "–"; position: absolute; left: 0; color: var(--warn); } .inlineform { display: inline-flex; } .signals { display: flex; flex-direction: column; gap: .8rem; } .signal { border-left: 2px solid var(--line-2); padding-left: .8rem; } .signal[data-severity="2"], .signal[data-severity="3"] { border-left-color: var(--warn); } .signal__head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: 0 0 .15rem; } .signal__kind { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); } .signal__date { font-size: .78rem; color: var(--ink-3); } .signal__headline { font-weight: 600; font-size: .9rem; margin: 0 0 .2rem; } .claims { display: flex; flex-direction: column; gap: .8rem; } .claimrow { border-left: 2px solid var(--line); padding-left: .8rem; } .claimrow__text { margin: .2rem 0; font-size: .89rem; } .claimrow__src { margin: 0; } .sources { display: flex; flex-direction: column; gap: .75rem; counter-reset: src; } .source { padding-left: 1.7rem; position: relative; } .source::before { counter-increment: src; content: counter(src); position: absolute; left: 0; top: .1rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .source__title { margin: 0; font-weight: 600; font-size: .89rem; } .source__url { margin: 0; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3); overflow-wrap: anywhere; } .source__note { margin: .2rem 0 0; font-size: .84rem; color: var(--ink-2); } .source__date { margin: .1rem 0 0; font-size: .76rem; color: var(--ink-3); } .contacts { display: flex; flex-direction: column; } .contact { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line); } .contact:last-child { border-bottom: 0; } .contact.is-optout { opacity: .72; } .contact__main { flex: 1 1 auto; min-width: 0; } .contact__name { margin: 0; font-weight: 600; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .contact__role { margin: .1rem 0; color: var(--ink-3); font-size: .82rem; } .contact__reach { margin: .1rem 0; display: flex; gap: .8rem; flex-wrap: wrap; font-size: .85rem; } .contact__legal { margin: .3rem 0 0; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; } .timeline { display: flex; flex-direction: column; } .tl { display: flex; gap: .75rem; padding: .1rem 0 .9rem; position: relative; } .tl::before { content: ""; position: absolute; left: 5px; top: 1.1rem; bottom: 0; width: 1px; background: var(--line); } .tl:last-child::before { display: none; } .tl__marker { width: 11px; height: 11px; border-radius: 50%; flex: none; margin-top: .35rem; background: var(--surface); border: 2px solid var(--line-2); position: relative; z-index: 1; } .tl[data-type="STATUS_CHANGE"] .tl__marker { border-color: var(--accent-pure); } .tl[data-type="VISIT"] .tl__marker, .tl[data-type="MEETING"] .tl__marker { border-color: var(--hesse-blue); } .tl__body { min-width: 0; flex: 1 1 auto; } .tl__head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: 0 0 .15rem; } .tl__date { font-size: .78rem; color: var(--ink-3); } .tl__who { font-size: .78rem; color: var(--ink-3); } .tl__subject { margin: 0; font-weight: 600; font-size: .89rem; } .tl__meta { margin: .15rem 0 0; font-size: .78rem; color: var(--ink-3); } .tasklist { display: flex; flex-direction: column; } .task { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--line); } .task:last-child { border-bottom: 0; } .task__check { flex: none; } .task__body { min-width: 0; flex: 1 1 auto; } .task__title { margin: 0; font-size: .9rem; font-weight: 500; } .task__desc { margin: .1rem 0 0; font-size: .82rem; color: var(--ink-3); } .task__meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: .25rem 0 0; font-size: .8rem; color: var(--ink-3); } .task.is-done .task__title { text-decoration: line-through; color: var(--ink-3); } .tasklist--done { opacity: .8; } .checkbtn { width: 1.5rem; height: 1.5rem; margin-top: .1rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); color: transparent; cursor: pointer; } .checkbtn:hover { border-color: var(--accent); color: var(--accent); } .checkbtn.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .segmented { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; } .segmented__link { padding: .35rem .7rem; font-size: .84rem; color: var(--ink-2); text-decoration: none; background: var(--surface); } .segmented__link + .segmented__link { border-left: 1px solid var(--line); } .segmented__link.is-current { background: var(--surface-3); color: var(--ink); font-weight: 600; } .page--map { min-height: 0; } .mapshell { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 1rem; align-items: start; } .mapshell__filters { position: sticky; top: 3.6rem; } .mapshell__map { display: flex; flex-direction: column; gap: .5rem; } .mapcanvas { min-height: 60vh; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--map-ground); display: flex; align-items: center; justify-content: center; } .mapcanvas__fallback { color: var(--ink-3); font-size: .85rem; padding: 1rem; text-align: center; max-width: 30ch; } .mapmissing { margin-bottom: .25rem; } .maplegend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .78rem; color: var(--ink-2); } .maplegend__item { display: inline-flex; align-items: center; gap: .35rem; } .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--rel-unassessed); } .dot[data-value="CUSTOMER"] { background: var(--rel-customer); } .dot[data-value="DISTRIBUTOR"] { background: var(--rel-distributor); } .dot[data-value="OPPORTUNITY"] { background: var(--rel-opportunity); } .dot[data-value="PROSPECT"] { background: var(--rel-prospect); } .dot[data-value="FORMER_CUSTOMER"] { background: var(--rel-former); } .dot[data-value="COMPETITOR"] { background: var(--rel-competitor); } .mapshell__results { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: .8rem .9rem; max-height: calc(100vh - 5rem); overflow: auto; position: sticky; top: 3.6rem; } .mapshell__title { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: .5rem; } .resultlist { display: flex; flex-direction: column; } .result { padding: .5rem 0; border-bottom: 1px solid var(--line); } .result:last-child { border-bottom: 0; } .result__name { color: var(--ink); font-weight: 600; text-decoration: none; font-size: .88rem; } .result__name:hover { color: var(--accent); text-decoration: underline; } .result__meta { margin: .05rem 0; color: var(--ink-3); font-size: .78rem; } .result__chips { margin: .2rem 0 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .page--wide { max-width: none; } .kanban { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .75rem; align-items: start; } .kcol { flex: 0 0 17rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: .6rem; display: flex; flex-direction: column; gap: .5rem; } .kcol__head { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; } .kcol__title { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); } .kcol__count { font-size: .78rem; color: var(--ink-3); } .kcol__list { display: flex; flex-direction: column; gap: .45rem; min-height: 2rem; } .kcol__empty { color: var(--ink-3); font-size: .8rem; font-style: italic; padding: .4rem .2rem; } .kcol__more { margin: 0; font-size: .78rem; } .kcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .6rem; display: flex; flex-direction: column; gap: .25rem; } .kcard__name { color: var(--ink); font-weight: 600; font-size: .86rem; text-decoration: none; } .kcard__name:hover { color: var(--accent); text-decoration: underline; } .kcard__meta { margin: 0; font-size: .76rem; color: var(--ink-3); } .kcard__chips { margin: 0; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .kcard__owner { margin: 0; font-size: .74rem; color: var(--ink-3); } .kcard__move { display: flex; gap: .25rem; margin-top: .2rem; } .kcard__move .input { flex: 1 1 auto; min-width: 0; } .claimkey { display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem; font-size: .87rem; } .claimkey li { display: flex; align-items: center; gap: .5rem; } .factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .75rem; } .fact { display: flex; flex-direction: column; padding: .6rem .7rem; background: var(--surface-2); border-radius: var(--radius); } .fact__value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; } .fact__label { font-size: .76rem; color: var(--ink-3); } .body--blank { min-height: 100vh; } .errorcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; text-align: left; box-shadow: var(--shadow-sm); } .errorcard__status { font-size: 3rem; font-weight: 700; line-height: 1; color: var(--ink-3); margin: 0; } .errorcard__title { font-size: 1.3rem; margin: .3rem 0 .5rem; } .errorcard__text { color: var(--ink-2); } .errorcard__detail { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-3); white-space: pre-wrap; background: var(--surface-2); padding: .6rem; border-radius: var(--radius); overflow-x: auto; } .errorcard__actions { display: flex; gap: .5rem; margin-top: 1rem; } @media (max-width: 1180px) { .mapshell { grid-template-columns: 230px minmax(0, 1fr); } .mapshell__results { grid-column: 1 / -1; position: static; max-height: 26rem; } } @media (max-width: 1024px) { .shell { grid-template-columns: 196px minmax(0, 1fr); } .sidenav { padding: .75rem .4rem; } .sidenav__link { font-size: .85rem; padding: .45rem .5rem; } .withside { grid-template-columns: 1fr; } .withside__aside { position: static; } .filters { max-height: none; } .grid--sales, .grid--contacts { grid-template-columns: 1fr; } .c360__head { grid-template-columns: 1fr; } .c360__score { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: .9rem; } } @media (max-width: 860px) { .mapshell { grid-template-columns: 1fr; } .mapshell__filters { position: static; } .usermenu__name { display: none; } } @media (max-width: 640px) { body { padding-bottom: 4rem; font-size: 15px; } .shell { grid-template-columns: 1fr; } .sidenav { display: none; } .topbar__row { flex-wrap: wrap; row-gap: .5rem; padding: .5rem .75rem; } .globalsearch { order: 3; flex-basis: 100%; max-width: none; } .globalsearch__go { display: none; } .topbar__tools { margin-left: auto; } .tabbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .tabbar__list { display: flex; } .tabbar__list li { flex: 1 1 0; } .tabbar__link { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem .2rem; color: var(--ink-3); text-decoration: none; font-size: .66rem; min-height: 3rem; justify-content: center; } .tabbar__link .ico { width: 1.35em; height: 1.35em; } .tabbar__link[aria-current="page"] { color: var(--accent); } .main { padding: .75rem .75rem 1.5rem; } .kpi__value { font-size: 1.6rem; } .field-row { flex-direction: column; gap: .6rem; } .kcol { flex-basis: 15rem; } .deflist { grid-template-columns: 1fr; gap: .1rem; } .deflist dd { margin-bottom: .5rem; } .table--dense { font-size: .82rem; } .pagehead { align-items: flex-start; } } @media (max-width: 420px) { .card { padding: .85rem .8rem; } .c360__head { padding: .9rem .8rem; } .errorcard { padding: 1.25rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } @media print { .topbar, .sidenav, .tabbar, .filters, .form__actions, .pager, .c360__watch { display: none !important; } .shell { grid-template-columns: 1fr; } .card, .tablewrap { box-shadow: none; break-inside: avoid; } body { background: #fff; } } .disc__profile { min-height: 4.5rem; resize: vertical; font: inherit; } .disc__grid { display: grid; gap: .9rem; margin-top: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } .disc__set { border: 0; padding: 0; margin: 1.2rem 0 0; } .disc__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .disc__cost { margin: 0; max-width: 46ch; } .disc__violations summary { padding: .8rem 1rem; cursor: pointer; font-weight: 600; } .chips { display: flex; flex-wrap: wrap; gap: .4rem; } .chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 99px; font-size: .82rem; cursor: pointer; background: var(--surface); } .chip input { accent-color: var(--accent-pure); } .chip:has(input:checked) { border-color: var(--accent-pure); background: var(--surface-2); font-weight: 600; } .chip:focus-within { outline: 2px solid var(--accent-pure); outline-offset: 2px; } .cand { margin-bottom: 1rem; border-left: 3px solid var(--line); } .cand--new { border-left-color: var(--accent-pure); } .cand--duplicate { border-left-color: #b8860b; } .cand--accepted { border-left-color: #0f7a48; opacity: .78; } .cand--rejected { opacity: .55; } .cand__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .cand__name { font-size: 1.15rem; margin: 0; } .cand__where { color: var(--ink-3); font-size: .85rem; margin: .15rem 0 0; } .cand__score { text-align: right; flex: none; } .cand__scorecap { display: block; font-size: .62rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; } .cand__text { font-size: .9rem; line-height: 1.6; margin: .8rem 0 0; } .cand__text--why { color: var(--ink-2); } .cand__claims { margin-top: 1rem; } .cand__sources { margin-top: 1rem; } .cand__foot { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; } .cand__decide { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .cand__reason { max-width: 18rem; } .cand__decided { margin: 0; color: var(--ink-2); font-size: .88rem; } .list--links { word-break: break-word; } .tag--ok { background: rgb(15 122 72 / .12); color: #0f7a48; } .tag--warn { background: rgb(184 134 11 / .14); color: #8a6508; } @media (max-width: 640px) { .cand__head { flex-direction: column; } .cand__score { text-align: left; } .cand__reason { max-width: none; width: 100%; } .disc__foot { flex-direction: column; align-items: stretch; } } .cand__claims { display: block; overflow-x: auto; } .cand__claims table { min-width: 32rem; } .tablewrap { overflow-x: auto; } .reveal { animation: reveal var(--dur-slow) var(--ease-out) both; } .reveal-stagger > * { animation: reveal var(--dur-slow) var(--ease-out) both; } .reveal-stagger > *:nth-child(1) { animation-delay: 30ms } .reveal-stagger > *:nth-child(2) { animation-delay: 70ms } .reveal-stagger > *:nth-child(3) { animation-delay: 110ms } .reveal-stagger > *:nth-child(4) { animation-delay: 150ms } .reveal-stagger > *:nth-child(5) { animation-delay: 190ms } .reveal-stagger > *:nth-child(6) { animation-delay: 230ms } .reveal-stagger > *:nth-child(7) { animation-delay: 270ms } .reveal-stagger > *:nth-child(8) { animation-delay: 310ms } @keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .card, .kpi { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card--interactive:hover, .kpi--interactive:hover { transform: translateY(-2px); box-shadow: var(--lift); } .btn, .adm-btn { transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .btn:hover, .adm-btn:hover { transform: translateY(-1px); } .btn:active, .adm-btn:active { transform: translateY(0); } .reveal-rows tbody tr { animation: reveal-row var(--dur) var(--ease-out) both; } .reveal-rows tbody tr:nth-child(1) { animation-delay: 20ms } .reveal-rows tbody tr:nth-child(2) { animation-delay: 40ms } .reveal-rows tbody tr:nth-child(3) { animation-delay: 60ms } .reveal-rows tbody tr:nth-child(4) { animation-delay: 80ms } .reveal-rows tbody tr:nth-child(5) { animation-delay: 100ms } .reveal-rows tbody tr:nth-child(6) { animation-delay: 120ms } .reveal-rows tbody tr:nth-child(7) { animation-delay: 140ms } .reveal-rows tbody tr:nth-child(8) { animation-delay: 160ms } .reveal-rows tbody tr:nth-child(n+9) { animation-delay: 180ms } @keyframes reveal-row { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .reveal-rows tbody tr { transition: background var(--dur-fast) var(--ease); } [data-grow] { --grow-to: 0%; width: 0; animation: grow-bar var(--dur-slow) var(--ease-out) forwards; } @keyframes grow-bar { to { width: var(--grow-to); } } [data-count] { font-variant-numeric: tabular-nums; } .main { animation: page-in var(--dur) var(--ease-out) both; } @keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .is-hidden { opacity: 0; transform: translateY(12px); } .bar__fill[data-grow] { width: var(--grow-to, 0%); } @media (prefers-reduced-motion: no-preference) { .bar__fill[data-grow] { width: 0; animation: grow-bar var(--dur-slow) var(--ease-out) forwards; } } .brand--bar { flex: none; display: flex; align-items: center; width: min(320px, 30vw); transition: width var(--dur) var(--ease); } :root[data-nav="collapsed"] .brand--bar { width: min(268px, 26vw); } @media (max-width: 1200px) { .brand--bar { width: 244px; } } @media (max-width: 860px) { .brand--bar { width: 208px; } } @media (max-width: 640px) { .brand--bar { width: 184px; } } .brand--bar .brand__plate { width: 100%; } .railuser { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; padding: .55rem .6rem; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; text-decoration: none; color: inherit; transition: background var(--dur-fast) var(--ease); } .railuser:hover { background: var(--surface-2); } .railuser__avatar { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--hesse-gradient); color: #fff; font-size: .82rem; font-weight: 700; } .railuser__text { display: flex; flex-direction: column; min-width: 0; } .railuser__name { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .railuser__role { font-size: .7rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-nav="collapsed"] .railuser { justify-content: center; padding: .55rem 0; } :root[data-nav="collapsed"] .railuser__text { display: none; } .sidenav { overflow-y: auto; overscroll-behavior: contain; } .sidenav__list { flex: 1 1 auto; } .topbar__row > .globalsearch { flex: 1 1 auto; max-width: 46rem; } @media (max-width: 860px) { .railuser { display: none; } } @media print { .is-hidden { opacity: 1 !important; transform: none !important; } } [hidden] { display: none !important; } .runchip { display: inline-flex; align-items: center; gap: .45rem; max-width: 20rem; padding: .3rem .7rem .3rem .55rem; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: .78rem; text-decoration: none; white-space: nowrap; animation: chip-in var(--dur) var(--ease-out) both; } @keyframes chip-in { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } } .runchip:hover { color: var(--ink); border-color: var(--ink-3); } .runchip__text { overflow: hidden; text-overflow: ellipsis; } .runchip__pct { font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .runchip__spin { flex: none; width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent-pure) 30%, transparent); border-top-color: var(--accent-pure); animation: chip-spin 1s linear infinite; } @keyframes chip-spin { to { rotate: 360deg } } .runchip[data-state="running"] { border-color: color-mix(in srgb, var(--accent-pure) 45%, var(--line)); } .runchip[data-state="done"] { border-color: color-mix(in srgb, #0f7a48 45%, var(--line)); color: #0f7a48; } .runchip[data-state="done"] .runchip__spin, .runchip[data-state="failed"] .runchip__spin, .runchip[data-state="stalled"] .runchip__spin { animation: none; border-top-color: currentColor; } .runchip[data-state="failed"] { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); color: var(--danger); } .runchip[data-state="stalled"] { color: #8a6508; border-color: rgb(184 134 11 / .5); } @media (max-width: 860px) { .runchip__text, .runchip__pct { display: none; } .runchip { padding: .35rem; } } @media (prefers-reduced-motion: reduce) { .runchip__spin { animation: none; } } .turbobar { position: fixed; inset: 0 auto auto 0; z-index: 200; height: 2px; width: 0; opacity: 0; background: var(--hesse-gradient, var(--accent)); pointer-events: none; transition: width .2s linear, opacity .2s var(--ease); } .turbobar[data-on] { width: 80%; opacity: 1; transition: width 2s cubic-bezier(.1,.7,.3,1), opacity .1s; } @media (prefers-reduced-motion: reduce) { .turbobar { transition: opacity .1s; } .turbobar[data-on] { width: 80%; transition: opacity .1s; } }
.login { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: 100vh; min-height: 100dvh; } .login__form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 2rem; background: var(--surface); } .login__inner { width: 100%; max-width: 23rem; } .brand--login { display: block; margin-bottom: 2.25rem; } .brand--login .brand__logo { width: 100%; height: auto; } .brand--login .brand__plate { display: block; width: 100%; } .login__title { font-size: 1.65rem; letter-spacing: -.01em; } .login__lead { color: var(--ink-2); font-size: .92rem; line-height: 1.55; margin: .4rem 0 1.75rem; max-width: 30ch; } .login__foot { margin-top: 1.5rem; display: flex; justify-content: flex-start; } .hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(45deg, #3f4c99 0%, #24628b 45%, #069a79 100%); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.75rem, 3.2vw, 3.25rem); min-height: 34rem; } .hero::before { content: ""; position: absolute; inset: -20%; z-index: 0; background: radial-gradient(38% 42% at 72% 34%, rgb(255 255 255 / .18), transparent 70%), radial-gradient(46% 46% at 18% 88%, rgb(78 87 163 / .45), transparent 72%); pointer-events: none; } .hero__stars { position: absolute; inset: 0; z-index: 0; opacity: .55; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 78% 12%, #fff, transparent), radial-gradient(1.6px 1.6px at 62% 72%, #fff, transparent), radial-gradient(1.2px 1.2px at 28% 62%, #fff, transparent), radial-gradient(1.4px 1.4px at 88% 54%, #fff, transparent), radial-gradient(1.1px 1.1px at 42% 30%, #fff, transparent), radial-gradient(1.3px 1.3px at 8% 74%, #fff, transparent), radial-gradient(1.2px 1.2px at 95% 82%, #fff, transparent); animation: hero-twinkle 7s ease-in-out infinite alternate; } @keyframes hero-twinkle { from { opacity: .32 } to { opacity: .7 } } .hero__globe { position: absolute; z-index: 0; right: -6%; top: 50%; translate: 0 -50%; width: min(78%, 46rem); aspect-ratio: 1; pointer-events: none; } .hero__globe canvas { width: 100%; height: 100%; display: block; } .hero__top, .hero__foot { position: relative; z-index: 2; } .hero__top { max-width: min(30rem, 56%); } .hero__title { font-size: clamp(2rem, 3.3vw, 3.1rem); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: 0; text-wrap: balance; max-width: 14ch; } .hero__subtitle { font-size: clamp(.9rem, 1.02vw, 1.05rem); font-weight: 600; line-height: 1.45; margin: .8rem 0 0; max-width: 40ch; color: rgb(255 255 255 / .92); } .hero__lines { margin: 1.1rem 0 0; padding: 0; list-style: none; font-size: clamp(.82rem, .95vw, .95rem); line-height: 1.75; color: rgb(255 255 255 / .8); max-width: 34ch; } .hero__claim { font-size: clamp(1.6rem, 2.6vw, 2.5rem); font-weight: 300; letter-spacing: -.01em; margin: 0; color: rgb(255 255 255 / .95); } .hero__cards { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hcard { position: absolute; width: clamp(9.5rem, 15vw, 13.5rem); padding: .7rem .8rem .75rem; border-radius: 10px; background: rgb(255 255 255 / .09); border: 1px solid rgb(255 255 255 / .18); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); box-shadow: 0 12px 34px -18px rgb(0 0 0 / .55); animation: hcard-float 9s ease-in-out infinite; } .hcard--1 { top: 9%; right: 4%; animation-delay: -.4s } .hcard--2 { top: 39%; right: 9%; animation-delay: -2.6s } .hcard--3 { top: 60%; left: 2%; animation-delay: -5.1s; width: clamp(10.5rem, 17vw, 15rem) } .hcard--4 { bottom: 19%; left: 33%; animation-delay: -1.5s } .hcard--5 { bottom: 9%; right: 4%; animation-delay: -3.8s } @keyframes hcard-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-9px) } } .hcard__label { font-size: .56rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 700; color: rgb(255 255 255 / .68); display: block; margin-bottom: .45rem; } .hcard__text { font-size: .68rem; line-height: 1.4; color: rgb(255 255 255 / .9); margin: 0 } .hcard__note { font-size: .6rem; color: rgb(255 255 255 / .62); margin: .3rem 0 0 } .hbars { display: flex; flex-direction: column; gap: .28rem; margin: 0 } .hbar { display: grid; grid-template-columns: 4.4rem 1fr; gap: .4rem; align-items: center } .hbar__name { font-size: .58rem; color: rgb(255 255 255 / .78) } .hbar__track { height: 4px; border-radius: 99px; background: rgb(255 255 255 / .16); overflow: hidden } .hbar__fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7ee8c4, #d8fff2); width: 0; animation: hbar-grow 1.1s cubic-bezier(.2, .7, .3, 1) forwards; } @keyframes hbar-grow { to { width: var(--w, 60%) } } .hcols { display: flex; align-items: flex-end; gap: 2px; height: 2.1rem; margin-top: .3rem } .hcols i { flex: 1; border-radius: 1px 1px 0 0; background: linear-gradient(180deg, #9df3d6, rgb(157 243 214 / .35)); height: 0; animation: hcol-grow .9s cubic-bezier(.2, .7, .3, 1) forwards; } @keyframes hcol-grow { to { height: var(--h, 50%) } } .hdial { display: flex; align-items: center; gap: .6rem; margin-top: .1rem } .hdial svg { width: 3rem; height: 3rem; flex-shrink: 0 } .hdial__track { fill: none; stroke: rgb(255 255 255 / .18); stroke-width: 4 } .hdial__value { fill: none; stroke: #9df3d6; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: hdial-sweep 2.4s cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes hdial-sweep { to { stroke-dashoffset: 14 } } .hdial__num { font-size: 1.15rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums } .hdial__cap { font-size: .58rem; color: rgb(255 255 255 / .68); display: block; margin-top: .15rem } .hlegend { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem } .hlegend span { font-size: .55rem; padding: .1rem .4rem; border-radius: 99px; border: 1px solid rgb(255 255 255 / .3); color: rgb(255 255 255 / .85); } .hspark { display: block; width: 100%; height: 1.6rem; margin-top: .35rem; overflow: visible } .hspark path { fill: none; stroke: #9df3d6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: hspark-draw 1.8s ease-out forwards; } @keyframes hspark-draw { to { stroke-dashoffset: 0 } } .hero__top, .hero__foot, .hcard { opacity: 0; animation-fill-mode: forwards; } .hero__top { animation: hero-in .7s cubic-bezier(.2, .7, .3, 1) .05s forwards } .hero__foot { animation: hero-in .7s cubic-bezier(.2, .7, .3, 1) .35s forwards } .hcard { animation: hero-in .6s cubic-bezier(.2, .7, .3, 1) forwards, hcard-float 9s ease-in-out infinite } .hcard--1 { animation-delay: .45s, .9s } .hcard--2 { animation-delay: .60s, 1.2s } .hcard--3 { animation-delay: .75s, 1.5s } .hcard--4 { animation-delay: .90s, 1.8s } .hcard--5 { animation-delay: 1.05s, 2.1s } @keyframes hero-in { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } } @media (max-width: 1100px) { .hcard--2, .hcard--3 { display: none } } @media (max-width: 860px) { .login { grid-template-columns: 1fr } .hero { order: -1; min-height: 21rem; padding: 1.5rem 1.35rem 1.75rem; } .hero__globe { right: -22%; width: 30rem; opacity: .8 } .hero__cards { display: none } .hero__claim { font-size: 1.5rem } .hero__lines { display: none } .hero__top { max-width: none } .hero__title { font-size: 1.7rem; max-width: 18ch } .hero__subtitle { font-size: .88rem; margin-top: .5rem } .brand--login { margin-bottom: 1.75rem } } @media (prefers-reduced-motion: reduce) { .hero__stars { animation: none } .hcard, .hero__top, .hero__foot { animation: none !important; opacity: 1; transform: none } .hbar__fill { animation: none; width: var(--w, 60%) } .hcols i { animation: none; height: var(--h, 50%) } .hdial__value { animation: none; stroke-dashoffset: 14 } .hspark path { animation: none; stroke-dashoffset: 0 } }