.project-status-widget,
.project-status-widget * {
box-sizing: border-box;
}
.project-status-widget {
font-family: ‚Libre Franklin‘, Arial, sans-serif;
max-width: 860px;
margin: 0 auto;
padding: 2rem 1rem;
background: transparent;
}
.project-status-widget h2,
.project-status-widget p {
margin: 0;
padding: 0;
}
.project-status-widget .pb-head {
text-align: center;
margin-bottom: 2rem;
}
.project-status-widget .pb-head h2 {
font-size: 1.5rem;
font-weight: 300;
color: #1F2022;
letter-spacing: -0.01em;
margin-bottom: .4rem;
}
.project-status-widget .pb-head p {
font-size: .9rem;
color: #666;
font-weight: 300;
}
.project-status-widget .pb-legend {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.project-status-widget .leg-item {
display: flex;
align-items: center;
gap: .4rem;
font-size: .8rem;
color: #555;
}
.project-status-widget .leg-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.project-status-widget .leg-live {
background: #FF6801;
}
.project-status-widget .leg-done {
background: #FFCFA0;
}
.project-status-widget .leg-running {
background: #1F2022;
}
.project-status-widget .leg-planned {
background: #D8D7DF;
}
.project-status-widget .pb-track {
position: relative;
padding-left: 2rem;
}
.project-status-widget .pb-track::before {
content: „“;
position: absolute;
left: 9px;
top: 12px;
bottom: 12px;
width: 2px;
background: #D8D7DF;
}
.project-status-widget .milestone {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.25rem;
position: relative;
cursor: pointer;
outline: none;
}
.project-status-widget .milestone:last-child {
margin-bottom: 0;
}
.project-status-widget .milestone:focus-visible .m-card {
border-color: #FF6801;
box-shadow: 0 0 0 3px rgba(255, 104, 1, .18);
}
.project-status-widget .m-dot-wrap {
position: absolute;
left: -2rem;
top: 10px;
width: 20px;
display: flex;
justify-content: center;
}
.project-status-widget .m-dot {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform .2s;
}
.project-status-widget .milestone:hover .m-dot {
transform: scale(1.15);
}
.project-status-widget .dot-live {
background: #FF6801;
}
.project-status-widget .dot-done {
background: #FFCFA0;
}
.project-status-widget .dot-running {
background: #1F2022;
}
.project-status-widget .dot-planned {
background: #D8D7DF;
border: 2px solid #bbb;
}
.project-status-widget .m-card {
flex: 1;
background: #fff;
border: 0.5px solid #e0dfdf;
border-radius: 10px;
padding: .85rem 1.1rem;
transition: box-shadow .2s, border-color .2s;
}
.project-status-widget .m-card:hover {
border-color: #FF6801;
box-shadow: 0 2px 12px rgba(255, 104, 1, .1);
}
.project-status-widget .m-card.active {
border-color: #FF6801;
box-shadow: 0 2px 16px rgba(255, 104, 1, .15);
}
.project-status-widget .m-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
}
.project-status-widget .m-title {
font-size: .95rem;
font-weight: 500;
color: #1F2022;
}
.project-status-widget .m-action {
display: flex;
align-items: center;
gap: .5rem;
flex-shrink: 0;
}
.project-status-widget .m-badge {
font-size: .7rem;
padding: 3px 10px;
border-radius: 99px;
white-space: nowrap;
flex-shrink: 0;
border: 1px solid transparent;
}
.project-status-widget .badge-live {
background: #FF6801;
color: #fff;
}
.project-status-widget .badge-done {
background: #FFF0E6;
color: #FF6801;
border-color: #FFCFA0;
}
.project-status-widget .badge-running {
background: #1F2022;
color: #fff;
}
.project-status-widget .badge-planned {
background: #F4F4F4;
color: #888;
border-color: #ddd;
}
.project-status-widget .m-date {
font-size: .75rem;
color: #aaa;
margin-top: .2rem;
}
.project-status-widget .m-detail {
font-size: .82rem;
color: #555;
margin-top: .6rem;
line-height: 1.6;
padding-top: .6rem;
border-top: 0.5px solid #f0f0f0;
}
.project-status-widget .m-detail[hidden] {
display: none;
}
.project-status-widget .m-arrow {
font-size: .75rem;
color: #aaa;
transition: transform .2s;
flex-shrink: 0;
}
.project-status-widget .m-arrow.open {
transform: rotate(180deg);
}
.project-status-widget .pb-footer {
text-align: center;
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 0.5px solid #e8e8e8;
}
.project-status-widget .pb-footer p {
font-size: .8rem;
color: #aaa;
font-weight: 300;
}
.project-status-widget .pb-footer span {
color: #FF6801;
}
@media (max-width: 500px) {
.project-status-widget .pb-track {
padding-left: 1.6rem;
}
.project-status-widget .pb-track::before {
left: 7px;
}
.project-status-widget .m-dot-wrap {
left: -1.6rem;
}
.project-status-widget .m-dot {
width: 16px;
height: 16px;
}
.project-status-widget .m-title {
font-size: .88rem;
}
.project-status-widget .m-top {
align-items: flex-start;
}
.project-status-widget .m-action {
gap: .35rem;
}
}
(() => {
const root = document.currentScript.previousElementSibling;
if (!root || !root.matches(„[data-project-status-widget]“)) {
return;
}
const track = root.querySelector(„[data-track]“);
const lastUpdate = root.querySelector(„[data-last-update]“);
if (!track || !lastUpdate) {
return;
}
const milestones = [
{
title: „Professioneller Service Desk“,
status: „done“,
date: „30. Juni 2026“,
detail: „Ein sechsköpfiges Team rund um Team Lead Alexander Gößl übernimmt ab sofort alle Serviceanfragen strukturiert und transparent. Viele Gesichter werden Ihnen bekannt vorkommen – neu ist vor allem die Art der Zusammenarbeit.“
},
{
title: „ServiceNow produktiv“,
status: „done“,
date: „30. Juni 2026“,
detail: „Jede Anfrage wird als strukturierter Case erfasst und von der ersten Meldung bis zur erfolgreichen Lösung begleitet. Informationen bleiben erhalten, Übergaben funktionieren reibungslos.“
},
{
title: „Nova – KI-Assistenz gestartet“,
status: „done“,
date: „30. Juni 2026“,
detail: „Nova unterstützt unser Serviceteam im Hintergrund: Anfragen werden aufgenommen, dokumentiert und strukturiert vorbereitet – besonders außerhalb der Geschäftszeiten. Nova ersetzt keine Menschen. Sie sorgt dafür, dass unsere Experten direkt loslegen können.“
},
{
title: „Kundenportal – Pilotbetrieb“,
status: „running“,
date: „Ab Mitte Juli 2026“,
detail: „Ausgewählte Pilotkunden erhalten als erste Zugang zum neuen Serviceportal. Dort können Sie Cases verfolgen, Statusupdates einsehen und Ihre Servicehistorie abrufen. Sie werden aktiv informiert, sobald Ihr Zugang bereitsteht.“
},
{
title: „Kundenportal – Rollout für alle Kunden“,
status: „running“,
date: „Ab Herbst 2026“,
detail: „Nach dem erfolgreichen Pilotbetrieb wird das Portal schrittweise für alle Kunden freigeschaltet. Sie müssen nichts tun – wir informieren Sie rechtzeitig.“
},
{
title: „Wissensdatenbank im Aufbau“,
status: „planned“,
date: „2. Halbjahr 2026“,
detail: „Eine strukturierte Wissensdatenbank ermöglicht es unserem Team, häufige Anfragen noch schneller und einheitlicher zu beantworten – und bildet die Grundlage für zukünftige Self-Service-Funktionen.“
},
{
title: „Erweiterte Self-Services“,
status: „planned“,
date: „2027“,
detail: „Auf Basis der Wissensdatenbank und der gesammelten Erfahrungen aus dem Portalbetrieb entwickeln wir schrittweise Self-Service-Funktionen – damit Sie einfache Anliegen künftig direkt selbst lösen können, wenn Sie möchten.“
}
];
const statusConfig = {
live: {
label: „Live“,
dotClass: „dot-live“,
badgeClass: „badge-live“
},
done: {
label: „Bald live“,
dotClass: „dot-done“,
badgeClass: „badge-done“
},
running: {
label: „Work in Progress“,
dotClass: „dot-running“,
badgeClass: „badge-running“
},
planned: {
label: „Geplant“,
dotClass: „dot-planned“,
badgeClass: „badge-planned“
}
};
const widgetId = `project-status-${Math.random().toString(36).slice(2)}`;
function createElement(tagName, className, textContent) {
const element = document.createElement(tagName);
if (className) {
element.className = className;
}
if (typeof textContent === „string“) {
element.textContent = textContent;
}
return element;
}
function closeAllItems() {
root.querySelectorAll(„.m-detail“).forEach((detail) => {
detail.hidden = true;
});
root.querySelectorAll(„.m-arrow“).forEach((arrow) => {
arrow.classList.remove(„open“);
});
root.querySelectorAll(„.m-card“).forEach((card) => {
card.classList.remove(„active“);
});
root.querySelectorAll(„.milestone“).forEach((milestone) => {
milestone.setAttribute(„aria-expanded“, „false“);
});
}
milestones.forEach((milestone, index) => {
const config = statusConfig[milestone.status] || statusConfig.planned;
const item = createElement(„div“, „milestone“);
item.setAttribute(„role“, „button“);
item.setAttribute(„tabindex“, „0“);
item.setAttribute(„aria-expanded“, „false“);
const detailId = `${widgetId}-detail-${index}`;
item.setAttribute(„aria-controls“, detailId);
const dotWrap = createElement(„div“, „m-dot-wrap“);
const dot = createElement(„div“, `m-dot ${config.dotClass}`);
dotWrap.appendChild(dot);
const card = createElement(„div“, „m-card“);
const top = createElement(„div“, „m-top“);
const title = createElement(„div“, „m-title“, milestone.title);
const action = createElement(„div“, „m-action“);
const badge = createElement(„span“, `m-badge ${config.badgeClass}`, config.label);
const arrow = createElement(„span“, „m-arrow“, „▾“);
action.appendChild(badge);
action.appendChild(arrow);
top.appendChild(title);
top.appendChild(action);
const date = createElement(„div“, „m-date“, milestone.date);
const detail = createElement(„div“, „m-detail“, milestone.detail);
detail.id = detailId;
detail.hidden = true;
card.appendChild(top);
card.appendChild(date);
card.appendChild(detail);
item.appendChild(dotWrap);
item.appendChild(card);
function toggleItem() {
const isOpen = !detail.hidden;
closeAllItems();
if (!isOpen) {
detail.hidden = false;
arrow.classList.add(„open“);
card.classList.add(„active“);
item.setAttribute(„aria-expanded“, „true“);
}
}
item.addEventListener(„click“, toggleItem);
item.addEventListener(„keydown“, (event) => {
if (event.key === „Enter“ || event.key === “ „) {
event.preventDefault();
toggleItem();
}
});
track.appendChild(item);
});
const currentDate = new Date();
lastUpdate.textContent = currentDate.toLocaleDateString(„de-DE“, {
day: „2-digit“,
month: „long“,
year: „numeric“
});
})();
aobis GmbH ist ein IT-Dienstleister aus Weißach-Kreuth am Tegernsee mit Spezialisierung auf IT-Infrastruktur, Managed Services, Cyber Security und Hospitality-IT. Mit Projekt Nova modernisiert aobis seinen gesamten Servicebereich: Ein dedizierter Service Desk unter Leitung von Alexander Gößl, die KI-Assistenz Nova auf Basis von ServiceNow und 3CLogic, sowie ein neues Kundenportal schaffen messbar besseren IT-Service für Unternehmenskunden im DACH-Raum. Nova ist DSGVO-konform, läuft auf Servern in Frankfurt und ist nach EU AI Act als KI-System gekennzeichnet.