OpenNIT
Quelltext des aktuellen Standes
Fassung 1.1.1
portal.css
42 KB/* ============================================================
Self-Service-Portal (Prefix: ssp-)
Professionelle, eigenständige Außenansicht für Mitarbeiter:innen –
bewusst ohne das interne Tool-Chrome. Farben ausschließlich über
Design-Tokens; Icons monochrom (Font Awesome).
============================================================ */
body.ssp-body {
/* Elevation-/Radius-System des Portals – ein Satz abgestufter Schatten für
ein ruhiges, „schwebendes" SaaS-Flächenbild. Nur hier definiert, damit es
das interne Tool nicht beeinflusst. */
--ssp-radius: 16px;
--ssp-radius-sm: 12px;
--ssp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
--ssp-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.07);
--ssp-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06);
--ssp-ring: 0 0 0 3px rgba(99, 102, 241, 0.18);
color: var(--color-text);
background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);
background-attachment: fixed;
min-height: 100vh; margin: 0;
display: flex; flex-direction: column;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Eigenes Hintergrundbild: Bild bleibt beim Scrollen stehen, darüber liegt ein
weißes Overlay, dessen Deckkraft (--ssp-overlay) im Backend eingestellt wird.
Bild und Deckkraft kommen als Custom Properties vom Layout. */
body.ssp-body.ssp-has-bg {
background-image:
linear-gradient(rgba(var(--white-rgb), var(--ssp-overlay, 0.85)),
rgba(var(--white-rgb), var(--ssp-overlay, 0.85))),
var(--ssp-bg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
}
/* Touch-Geräte scrollen das Bild mit – dort stellen mobile Browser einen
festen Hintergrund unzuverlässig dar. */
@media (hover: none) {
body.ssp-body.ssp-has-bg { background-attachment: scroll; }
}
/* ── Topbar ─────────────────────────────────────────────────── */
.ssp-topbar {
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
padding: 0 1.5rem; height: 60px;
display: flex; align-items: center; gap: 1rem;
position: sticky; top: 0; z-index: 50;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
/* Die Marke behält immer ihre volle Breite – der Portaltitel wird nie
abgeschnitten. Reicht der Platz nicht, klappt stattdessen die Navigation
in das Burger-Menü (Messung siehe layouts/portal.php). */
.ssp-brand {
display: flex; align-items: center; gap: 0.6rem; flex: none;
text-decoration: none; color: inherit; border-radius: 0.35rem;
}
.ssp-brand:hover .ssp-topbar-title { color: var(--color-primary); }
.ssp-brand:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.ssp-brand img.ssp-logo { max-height: 32px; }
.ssp-topbar-title {
font-weight: 700; color: var(--color-text); font-size: 0.95rem;
white-space: nowrap;
}
.ssp-burger {
display: none; border: none; background: transparent; cursor: pointer;
color: var(--color-text-muted); font-size: 1.05rem; line-height: 1;
padding: 0.35rem 0.5rem; border-radius: 0.35rem; flex: none;
}
.ssp-burger:hover { background: var(--gray-100); color: var(--color-text); }
.ssp-nav { display: flex; align-items: center; gap: 0.2rem; height: 100%; }
/* Bis zur ersten Breitenmessung bleibt die Navigation unsichtbar: sonst wird
sie kurz als volle Leiste gezeichnet und klappt erst danach sichtbar zum
Burger (Flackern bei jedem Seitenwechsel). Ohne JavaScript greift der
noscript-Block im Layout und zeigt sie regulär an. */
.ssp-topbar:not(.is-measured) .ssp-nav { visibility: hidden; transition: none; }
/* Während einer Messung werden Übergänge abgeschaltet: fits() nimmt dafür
kurzzeitig .is-collapsed weg und setzt es wieder – ohne diese Sperre würde
das Zurücksetzen die Einfahr-Animation auslösen, bei jedem Messlauf erneut. */
.ssp-topbar.is-measuring .ssp-nav,
.ssp-topbar.is-measuring .ssp-nav a { transition: none !important; }
.ssp-nav a {
display: inline-flex; align-items: center; gap: 0.45rem; height: 36px;
padding: 0 0.85rem; text-decoration: none; border-radius: 9999px;
color: var(--color-text-muted); font-size: 0.85rem; font-weight: 600;
transition: background 0.15s, color 0.15s;
/* Einzeilig und in natürlicher Breite: erst dadurch wird ein Überlauf der
Kopfleiste messbar (siehe Burger-Umschaltung in layouts/portal.php). */
white-space: nowrap; flex: none;
}
.ssp-nav a i { font-size: 0.8rem; }
.ssp-nav a:hover { color: var(--color-text); background: var(--gray-100); }
.ssp-nav a.active { color: var(--indigo-700); background: var(--indigo-50); }
/* Eigene Links verweisen nach außen – dezent per Pfeil gekennzeichnet */
.ssp-nav a.ssp-nav-external::after { content: '\2197'; margin-left: 0.2rem; font-size: 0.75em; opacity: 0.6; }
.ssp-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
/* Einheitliche Höhe aller Kopfleisten-Buttons (a- und button-Elemente) */
.ssp-topbar-actions .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
height: 32px; padding: 0 0.7rem; line-height: 1; box-sizing: border-box;
}
.ssp-avatar {
width: 32px; height: 32px; border-radius: 50%; flex: none;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--indigo-500), var(--indigo-700));
color: var(--white, var(--color-bg));
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
}
.ssp-user {
display: none; font-size: 0.8rem; font-weight: 600; color: var(--color-text);
max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 780px) { .ssp-user { display: inline; } }
/* ── Inhalt & Footer ────────────────────────────────────────── */
.ssp-wrap { max-width: 920px; width: 100%; margin: 0 auto; padding: 1.75rem 1rem 3rem; flex: 1; }
.ssp-footer {
text-align: center; padding: 1rem 1.25rem;
font-size: 0.78rem; color: var(--color-text-muted);
background: var(--color-bg); border-top: 1px solid var(--color-border);
box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.02);
}
/* Seitenkopf */
.ssp-hello { margin: 0 0 1.75rem; }
/* Texte außerhalb der Karten (Hero, Zurück-Link) nutzen die konfigurierbare
Inhaltsfarbe --ssp-content-text (Fallback = Standardfarbe), damit sie auch auf
einem dunklen Hintergrundbild lesbar bleiben. */
.ssp-hello h1 { font-size: 1.7rem; font-weight: 800; margin: 0 0 0.35rem; color: var(--ssp-content-text, var(--color-text)); letter-spacing: -0.02em; line-height: 1.2; }
.ssp-hello p { margin: 0; color: var(--ssp-content-text, var(--color-text-muted)); font-size: 0.94rem; line-height: 1.55; }
.ssp-page-actions { margin-left: auto; flex: none; }
.ssp-pagehead { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.ssp-pagehead .ssp-hello { margin: 0; flex: 1; min-width: 0; }
/* ── Karten ─────────────────────────────────────────────────── */
.ssp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; }
.ssp-card {
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: var(--ssp-radius); padding: 1.35rem 1.4rem;
box-shadow: var(--ssp-shadow-sm);
}
.ssp-card h2 {
font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--color-text);
display: flex; align-items: center; gap: 0.6rem; letter-spacing: -0.01em;
}
.ssp-card p { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.55; }
.ssp-card-icon {
width: 40px; height: 40px; border-radius: 12px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--indigo-50), var(--indigo-100));
color: var(--indigo-700); font-size: 1rem;
box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.12);
}
a.ssp-card-link {
text-decoration: none; display: block; position: relative;
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
a.ssp-card-link:hover {
border-color: var(--indigo-300);
box-shadow: var(--ssp-shadow-lg);
transform: translateY(-3px);
}
a.ssp-card-link:hover .ssp-card-icon {
background: linear-gradient(135deg, var(--indigo-500), var(--indigo-700));
color: var(--white, var(--color-bg));
}
a.ssp-card-link::after {
content: '\2192'; position: absolute; top: 1.2rem; right: 1.2rem;
color: var(--gray-300); font-size: 0.95rem; transition: color 0.18s ease, transform 0.18s ease;
}
a.ssp-card-link:hover::after { color: var(--color-primary); transform: translateX(3px); }
.ssp-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 1.25rem; height: 1.25rem; padding: 0 0.4rem; border-radius: 9999px;
background: var(--color-primary); color: var(--white, var(--color-bg)); font-size: 0.7rem; font-weight: 700;
}
.ssp-soon {
display: inline-block; margin-top: 0.65rem; padding: 0.12rem 0.55rem;
border-radius: 9999px; background: var(--gray-100); color: var(--gray-500);
font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.ssp-card--disabled { opacity: 0.75; }
/* Einstellungs-Zeile (z. B. Standard-Ansicht, nur Dual-Session) */
.ssp-settings { margin-top: 1.25rem; }
.ssp-settings form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.65rem; }
.ssp-settings select { max-width: 280px; }
/* ── Ticketliste ────────────────────────────────────────────── */
.ssp-list { display: flex; flex-direction: column; gap: 0.55rem; }
.ssp-ticket {
display: flex; align-items: center; gap: 0.9rem; text-decoration: none;
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: var(--ssp-radius-sm); padding: 0.9rem 1.15rem;
box-shadow: var(--ssp-shadow-sm);
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.ssp-ticket:hover { border-color: var(--indigo-300); box-shadow: var(--ssp-shadow); transform: translateY(-2px); }
.ssp-ticket-icon {
width: 38px; height: 38px; border-radius: 11px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
color: var(--gray-500); font-size: 0.9rem;
}
.ssp-ticket-main { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; flex: 1; }
.ssp-ticket-subject { font-weight: 600; color: var(--color-text); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssp-ticket-meta { font-size: 0.73rem; color: var(--color-text-muted); }
.ssp-ticket .status-pill { flex: none; }
/* Leerzustand */
.ssp-empty {
background: var(--color-bg); border: 1px dashed var(--color-border);
border-radius: var(--ssp-radius); padding: 3rem 1.5rem; text-align: center;
}
.ssp-empty i {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; margin-bottom: 0.9rem;
border-radius: 50%; background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
font-size: 1.4rem; color: var(--gray-400);
}
.ssp-empty p { margin: 0 0 1rem; color: var(--color-text-muted); font-size: 0.9rem; }
/* ── Ticket-Detail ──────────────────────────────────────────── */
.ssp-back {
display: inline-flex; align-items: center; gap: 0.35rem;
font-size: 0.78rem; font-weight: 600; color: var(--ssp-content-text, var(--color-text-muted)); text-decoration: none;
margin-bottom: 0.6rem;
}
.ssp-back:hover { color: var(--ssp-content-text, var(--color-text)); }
.ssp-ticket-head {
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: var(--ssp-radius); padding: 1.25rem 1.4rem; margin-bottom: 1.1rem;
box-shadow: var(--ssp-shadow-sm);
}
.ssp-ticket-head h1 { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.6rem; color: var(--color-text); letter-spacing: -0.01em; }
.ssp-ticket-id { color: var(--gray-500); font-weight: 500; }
.ssp-ticket-info {
margin: 0; font-size: 0.8rem; color: var(--color-text-muted);
display: flex; align-items: center; gap: 0.4rem 0.9rem; flex-wrap: wrap;
}
.ssp-ticket-info i { color: var(--gray-400); margin-right: 0.25rem; }
/* Nachrichten-Thread */
.ssp-thread { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.25rem; }
.ssp-msg {
display: flex; gap: 0.65rem; max-width: 94%;
}
.ssp-msg-mine { align-self: flex-start; }
.ssp-msg-staff { align-self: flex-end; flex-direction: row-reverse; }
.ssp-msg-avatar {
width: 32px; height: 32px; border-radius: 50%; flex: none; margin-top: 2px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.68rem; font-weight: 700;
background: var(--gray-200); color: var(--gray-600);
}
.ssp-msg-staff .ssp-msg-avatar { background: var(--indigo-100); color: var(--indigo-800); }
.ssp-msg-bubble {
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: 0.65rem; padding: 0.7rem 0.95rem; min-width: 0;
}
.ssp-msg-staff .ssp-msg-bubble { background: var(--indigo-50); border-color: var(--indigo-200); }
.ssp-msg-meta { display: flex; justify-content: space-between; gap: 0.9rem; font-size: 0.72rem; color: var(--color-text-muted); margin-bottom: 0.3rem; }
.ssp-msg-meta strong { color: var(--color-text); font-size: 0.76rem; }
.ssp-msg-body { font-size: 0.87rem; color: var(--color-text); line-height: 1.55; overflow-wrap: anywhere; }
.ssp-msg-body img { max-width: 100%; height: auto; border-radius: 0.35rem; }
.ssp-msg-body p:first-child { margin-top: 0; }
.ssp-msg-body p:last-child { margin-bottom: 0; }
/* System-Zeile in der Timeline (z. B. Bearbeiter-Übergabe) */
.ssp-event {
align-self: center; text-align: center;
font-size: 0.75rem; color: var(--ssp-content-text, var(--color-text-muted));
padding: 0.1rem 0.75rem;
}
.ssp-event i { color: var(--ssp-content-text, var(--gray-400)); margin-right: 0.3rem; font-size: 0.7rem; }
/* Anhänge */
.ssp-atts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.ssp-att {
display: inline-flex; align-items: center; gap: 0.3rem;
background: var(--gray-50); border: 1px solid var(--color-border);
border-radius: 0.4rem; padding: 0.25rem 0.6rem;
font-size: 0.75rem; font-weight: 500; color: var(--color-text); text-decoration: none;
}
.ssp-att i { color: var(--gray-400); font-size: 0.7rem; }
.ssp-att:hover { border-color: var(--indigo-300); background: var(--color-bg); }
.ssp-att small { color: var(--color-text-muted); font-weight: 400; }
/* Geräteliste: Zeile mit Aktion rechts */
.ssp-device { cursor: default; }
.ssp-device .btn { flex: none; }
.ssp-device-item { display: flex; flex-direction: column; }
.ssp-device-item .ssp-confirm { margin-top: -0.35rem; }
/* Geräte-Selbstbestätigung: Rückfrage unter der Gerätezeile */
.ssp-confirm {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
border: 1px solid var(--indigo-200); border-top: none;
border-radius: 0 0 0.55rem 0.55rem;
background: var(--indigo-50);
padding: 0.6rem 0.9rem;
}
.ssp-confirm-text { flex: 1; min-width: 12rem; font-size: 0.84rem; font-weight: 600; color: var(--color-text); }
.ssp-confirm-text i { color: var(--indigo-600); margin-right: 0.35rem; }
.ssp-confirm-yes { margin: 0; }
.ssp-confirm-note { color: var(--color-text-muted); }
.ssp-confirm-note i { color: var(--green-600, var(--gray-500)); }
/* „Nicht mehr vorhanden“: aufklappbare Meldung ohne Skript */
.ssp-confirm-missing { margin: 0; }
.ssp-confirm-missing > summary {
list-style: none; cursor: pointer; user-select: none;
display: inline-flex; align-items: center; gap: 0.4rem;
border: 1px solid var(--color-border); border-radius: 0.4rem;
background: var(--color-bg); padding: 0.3rem 0.7rem;
font-size: 0.78rem; font-weight: 500; color: var(--color-text-muted);
}
.ssp-confirm-missing > summary::-webkit-details-marker { display: none; }
.ssp-confirm-missing > summary:hover { border-color: var(--red-300); color: var(--red-600); }
.ssp-confirm-missing[open] > summary { border-color: var(--red-300); color: var(--red-600); }
/* Aufgeklappt belegt die Meldung eine eigene Zeile der Rückfrage-Leiste. */
.ssp-confirm-missing[open] { flex-basis: 100%; }
.ssp-confirm-missing form {
margin-top: 0.6rem; padding: 0.7rem 0.8rem;
border: 1px solid var(--color-border); border-radius: 0.5rem; background: var(--color-bg);
}
.ssp-confirm-missing .form-group { margin-bottom: 0.6rem; }
.ssp-confirm-missing label { font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); }
@media (max-width: 560px) {
.ssp-confirm { flex-direction: column; align-items: stretch; }
.ssp-confirm .btn, .ssp-confirm-missing > summary { justify-content: center; width: 100%; }
}
/* Antwortbox & Formulare */
.ssp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .ssp-form-row { grid-template-columns: 1fr; } }
.ssp-replybox h2, .ssp-form h2 { margin-bottom: 0.75rem; }
.ssp-hint { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.55; }
.ssp-att-label { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); display: block; margin-bottom: 0.3rem; }
.ssp-form .form-group label { font-size: 0.82rem; font-weight: 600; color: var(--color-text); }
.ssp-form-hint { font-size: 0.74rem; color: var(--gray-500); margin-top: 0.25rem; display: block; }
/* ── Störungs-/Wartungs-Banner ──────────────────────────────── */
/* Vorschau-Leiste: Portal aus Sicht eines Standorts betrachten */
.ssp-preview {
display: flex; align-items: center; gap: 0.5rem;
border: 1px dashed var(--gray-300); border-radius: 0.55rem;
padding: 0.5rem 0.85rem; margin-bottom: 0.75rem;
background: var(--gray-50); font-size: 0.82rem; color: var(--gray-700);
}
.ssp-preview form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0; }
.ssp-preview label { font-weight: 600; }
.ssp-preview select {
border: 1px solid var(--gray-300); border-radius: 0.4rem;
padding: 0.2rem 0.4rem; font-size: 0.82rem; font-family: inherit; background: var(--color-bg);
}
.ssp-preview--on { border-style: solid; border-color: var(--amber-200); background: var(--amber-50); }
.ssp-preview-note { color: var(--amber-800); }
/* Sachhinweis ohne Warncharakter: keine Standortzuordnung vorhanden. */
.ssp-preview-note--hint { color: var(--gray-600); }
.ssp-notice {
display: flex; gap: 0.75rem; align-items: flex-start;
border: 1px solid var(--amber-200, var(--color-border)); border-left-width: 4px;
background: var(--amber-50, var(--gray-50));
border-radius: 0.55rem; padding: 0.8rem 1rem; margin-bottom: 0.75rem;
}
.ssp-notice > i { font-size: 0.95rem; margin-top: 0.15rem; color: var(--amber-600, var(--gray-500)); }
.ssp-notice-body { min-width: 0; }
.ssp-notice-body strong { display: block; font-size: 0.88rem; color: var(--color-text); }
.ssp-notice-body p { margin: 0.25rem 0 0; font-size: 0.83rem; color: var(--color-text-muted); line-height: 1.5; }
.ssp-notice-time { display: block; margin-top: 0.3rem; font-size: 0.73rem; color: var(--gray-500); }
.ssp-notice--major, .ssp-notice--critical {
border-color: var(--red-200); border-left-color: var(--red-500); background: var(--red-50);
}
.ssp-notice--major > i, .ssp-notice--critical > i { color: var(--red-600); }
.ssp-notice--maint {
border-color: var(--indigo-200); border-left-color: var(--indigo-500); background: var(--indigo-50);
}
.ssp-notice--maint > i { color: var(--indigo-600); }
/* Deflection-Karte im Ticketformular */
.ssp-deflect { border-color: var(--amber-200, var(--color-border)); margin-bottom: 1rem; }
.ssp-deflect-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.ssp-deflect-item {
display: flex; align-items: center; gap: 0.75rem; margin: 0;
background: var(--gray-50); border: 1px solid var(--color-border);
border-radius: 0.5rem; padding: 0.55rem 0.8rem;
}
.ssp-deflect-title { flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.ssp-deflect-item .btn { flex: none; }
/* ── Anträge: Angaben-Tabelle + Entscheidungs-Verlauf ───────── */
.ssp-kv { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.ssp-kv th, .ssp-kv td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.ssp-kv th { color: var(--color-text-muted); font-weight: 600; width: 38%; }
.ssp-kv tr:last-child th, .ssp-kv tr:last-child td { border-bottom: none; }
.ssp-wf-thread { display: flex; flex-direction: column; gap: 0.6rem; }
.ssp-wf-item { border-left: 3px solid var(--gray-200); padding-left: 0.75rem; }
.ssp-wf-meta { font-size: 0.76rem; color: var(--color-text-muted); }
.ssp-wf-meta strong { color: var(--color-text); }
.ssp-wf-note { font-size: 0.84rem; color: var(--color-text); margin-top: 0.2rem; line-height: 1.5; }
/* ── Wissensdatenbank ───────────────────────────────────────── */
.ssp-kb-search { margin-bottom: 1rem; }
.ssp-kb-searchrow { display: flex; gap: 0.5rem; }
.ssp-kb-searchrow .form-control { flex: 1; min-width: 0; }
.ssp-kb-searchrow .btn { flex: none; }
.ssp-kb-group { margin-bottom: 0.75rem; }
.ssp-kb-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.ssp-kb-list li + li { border-top: 1px solid var(--gray-100); }
.ssp-kb-list a {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 0.15rem; text-decoration: none;
font-size: 0.87rem; color: var(--color-text);
}
.ssp-kb-list a i { color: var(--gray-400); font-size: 0.8rem; }
.ssp-kb-list a:hover { color: var(--color-primary); }
.ssp-kb-content { font-size: 0.9rem; color: var(--color-text); line-height: 1.65; overflow-wrap: anywhere; }
.ssp-kb-content img { max-width: 100%; height: auto; border-radius: 0.35rem; }
.ssp-kb-content h1, .ssp-kb-content h2, .ssp-kb-content h3 { margin: 1.1rem 0 0.5rem; line-height: 1.3; }
.ssp-kb-content h1 { font-size: 1.15rem; } .ssp-kb-content h2 { font-size: 1.05rem; } .ssp-kb-content h3 { font-size: 0.95rem; }
.ssp-kb-content p { margin: 0 0 0.75rem; }
.ssp-kb-content ul, .ssp-kb-content ol { margin: 0 0 0.75rem; padding-left: 1.4rem; }
.ssp-kb-content table { width: 100%; border-collapse: collapse; margin: 0 0 0.75rem; font-size: 0.85rem; }
.ssp-kb-content th, .ssp-kb-content td { border: 1px solid var(--color-border); padding: 0.4rem 0.55rem; text-align: left; }
.ssp-kb-content pre { background: var(--gray-50); padding: 0.7rem; border-radius: 0.4rem; overflow-x: auto; font-size: 0.82rem; }
.ssp-kb-content code { font-family: var(--font-family-mono); font-size: 0.85em; }
.ssp-kb-content blockquote { margin: 0 0 0.75rem; padding-left: 0.9rem; border-left: 3px solid var(--gray-200); color: var(--color-text-muted); }
.ssp-kb-foot { margin-top: 1rem; }
/* Live-Vorschläge im Ticketformular */
.ssp-kb-hits {
margin-top: 0.6rem; padding: 0.7rem 0.85rem;
background: var(--indigo-50); border: 1px solid var(--indigo-200); border-radius: 0.5rem;
}
.ssp-kb-hits[hidden] { display: none; }
.ssp-kb-hits-head { margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--indigo-800); }
.ssp-kb-hits-head i { margin-right: 0.3rem; }
.ssp-kb-hits ul { list-style: none; margin: 0; padding: 0; }
.ssp-kb-hits li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; }
.ssp-kb-hits li a { font-size: 0.85rem; color: var(--color-text); text-decoration: none; font-weight: 500; }
.ssp-kb-hits li a:hover { text-decoration: underline; }
.ssp-kb-hit-topic { font-size: 0.72rem; color: var(--color-text-muted); }
/* ── Einstellungs-Modal (Zahnrad im Kopfbereich) ────────────── */
.ssp-modal-backdrop {
position: fixed; inset: 0; z-index: 200;
background: rgba(0, 0, 0, 0.45);
display: flex; align-items: flex-start; justify-content: center;
padding: 10vh 1rem 1rem;
}
/* Das display-flex oben gewinnt sonst gegen das hidden-Attribut */
.ssp-modal-backdrop[hidden] { display: none; }
.ssp-modal {
background: var(--color-bg); border-radius: var(--ssp-radius);
max-width: 440px; width: 100%;
box-shadow: var(--ssp-shadow-lg);
animation: ssp-modal-in 0.18s ease-out;
}
@keyframes ssp-modal-in {
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.ssp-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--color-border);
font-weight: 700; color: var(--color-text); font-size: 0.95rem;
}
.ssp-modal-header i { color: var(--gray-400); margin-right: 0.35rem; }
.ssp-modal-close {
border: none; background: transparent; cursor: pointer;
font-size: 1.25rem; line-height: 1; color: var(--gray-500); padding: 0.15rem 0.35rem;
}
.ssp-modal-close:hover { color: var(--color-text); }
.ssp-modal-body { padding: 1rem 1.1rem 1.2rem; }
/* ── Vorschau-Lightbox (Bilder & PDFs) ──────────────────────── */
.ssp-lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.ssp-lightbox[hidden] { display: none; }
.ssp-lightbox-img[hidden], .ssp-lightbox-frame[hidden] { display: none; }
.ssp-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); }
.ssp-lightbox-figure {
position: relative; margin: 0; max-width: min(92vw, 1100px); max-height: 88vh;
display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.ssp-lightbox-img { max-width: 100%; max-height: 78vh; border-radius: 0.4rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.ssp-lightbox-frame { width: min(92vw, 1000px); height: 78vh; border: none; border-radius: 0.4rem; background: var(--color-bg); }
.ssp-lightbox-caption {
display: flex; align-items: center; gap: 1rem;
color: var(--gray-200, var(--gray-200)); font-size: 0.8rem;
}
.ssp-lightbox-caption a { color: var(--gray-200, var(--gray-200)); text-decoration: underline; }
.ssp-lightbox-btn {
position: relative; z-index: 1; border: none; cursor: pointer;
background: rgba(255, 255, 255, 0.12); color: var(--white, var(--color-bg));
width: 40px; height: 40px; border-radius: 50%; font-size: 1.1rem; line-height: 1;
}
.ssp-lightbox-btn:hover { background: rgba(255, 255, 255, 0.25); }
.ssp-lightbox-close { position: absolute; top: 1rem; right: 1rem; }
.ssp-lightbox-nav { margin: 0 0.75rem; flex: none; }
/* ── Navigation kollabiert zum Burger, sobald sie zu breit wird ─ */
/* Umschaltung per JS (Overflow-Messung, siehe layouts/portal.php): sobald die
Menüpunkte nicht mehr in eine Zeile passen, erhält die Topbar .is-collapsed
und die Navigation klappt hinter den Burger. Unabhängig von der Zahl der
freigeschalteten Module. */
.ssp-topbar.is-collapsed .ssp-burger { display: inline-flex; align-items: center; justify-content: center; }
/* Eingeklappt fährt die Navigation als durchgehende Leiste von links ein
(volle Fensterhöhe), statt als Klappfeld unter der Kopfleiste zu hängen. */
.ssp-topbar.is-collapsed .ssp-nav {
position: fixed; top: 0; left: 0; bottom: 0; right: auto;
width: min(280px, 82vw); height: 100vh; z-index: 60;
display: flex; flex-direction: column; align-items: stretch; gap: 0;
background: var(--color-bg); border-right: 1px solid var(--color-border);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.14);
padding: 0.5rem 0; overflow-y: auto; overscroll-behavior: contain;
transform: translateX(-100%);
/* Ausgeblendet auch für Tastatur/Screenreader, nicht nur optisch verschoben */
visibility: hidden;
transition: transform 0.22s ease, visibility 0.22s ease;
}
.ssp-topbar.is-collapsed .ssp-nav.is-open { transform: translateX(0); visibility: visible; }
/* Abdunklung hinter der Leiste – schließt beim Klick (siehe layouts/portal.php).
WICHTIG: .ssp-topbar ist sticky mit z-index 50 und bildet damit einen eigenen
Stapelkontext. Die Navigation liegt darin, ihr z-index wirkt also nur
innerhalb der Kopfleiste. Der Backdrop muss deshalb UNTER 50 bleiben, sonst
legt er sich über die Menüpunkte und macht sie unklickbar. */
.ssp-nav-backdrop {
position: fixed; inset: 0; z-index: 40;
background: rgba(15, 23, 42, 0.45);
opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s ease;
}
.ssp-nav-backdrop.is-open { opacity: 1; visibility: visible; }
/* Im Burger-Menü bewusst KEIN Pill-Look: flache, volle Zeilen statt runder
Kapseln – auch der aktive Eintrag (nur linke Akzentlinie). */
.ssp-topbar.is-collapsed .ssp-nav a {
height: auto; padding: 0.8rem 1.25rem; border-radius: 0;
border-left: 3px solid transparent;
}
@media (prefers-reduced-motion: reduce) {
.ssp-topbar.is-collapsed .ssp-nav,
.ssp-nav-backdrop { transition: none; }
}
.ssp-topbar.is-collapsed .ssp-nav a:hover { background: var(--gray-100); }
.ssp-topbar.is-collapsed .ssp-nav a.active {
color: var(--indigo-700); background: var(--indigo-50);
border-left-color: var(--color-primary);
}
.ssp-topbar.is-collapsed .ssp-nav a i { width: 1.1rem; text-align: center; }
@media (max-width: 640px) {
.ssp-topbar { gap: 0.5rem; padding: 0 0.75rem; }
.ssp-topbar-title { display: none; }
.ssp-pagehead { flex-direction: column; }
.ssp-page-actions { margin-left: 0; }
.ssp-msg { max-width: 100%; }
.ssp-deflect-item { flex-wrap: wrap; }
.ssp-lightbox-nav { margin: 0 0.25rem; }
.ssp-lightbox-figure { max-width: 96vw; }
}
/* Genehmigungen: Zähler-Badge in der Navigation + Entscheidungs-Buttons */
.ssp-nav-badge {
display: inline-block; min-width: 1.15rem; padding: 0 0.35rem;
margin-left: 0.15rem; border-radius: 999px;
background: var(--amber-500); color: var(--color-on-accent);
font-size: 0.72rem; font-weight: 700; line-height: 1.15rem; text-align: center;
}
.ssp-approval-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
@media (max-width: 560px) {
.ssp-approval-actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* ── SaaS-Feinschliff: Buttons, Eingaben, Bubbles ───────────────── */
/* Buttons im Portal reagieren einheitlich mit sanftem Anheben. */
.ssp-body .btn {
border-radius: 10px; font-weight: 600;
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.ssp-wrap .btn-primary, .ssp-wrap .btn-success, .ssp-wrap .btn-danger { box-shadow: var(--ssp-shadow-sm); }
.ssp-wrap .btn-primary:hover, .ssp-wrap .btn-success:hover, .ssp-wrap .btn-danger:hover {
transform: translateY(-1px); box-shadow: var(--ssp-shadow);
}
.ssp-wrap .btn:active { transform: translateY(0); }
/* Eingabefelder: ruhigere Radien + klarer Fokus-Ring (Portal-Scope). */
.ssp-body .form-control {
border-radius: 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ssp-body .form-control:focus {
border-color: var(--indigo-400, var(--indigo-500));
box-shadow: var(--ssp-ring); outline: none;
}
/* Nachrichten-Bubbles etwas weicher. */
.ssp-msg-bubble { border-radius: 14px; box-shadow: var(--ssp-shadow-sm); }
.ssp-msg-mine .ssp-msg-bubble { border-bottom-left-radius: 5px; }
.ssp-msg-staff .ssp-msg-bubble { border-bottom-right-radius: 5px; }
/* ── Systemstatus-Hinweis auf der Startseite ─────────────────── */
.ssp-statuscard {
border: 1px solid var(--amber-200); border-left: 4px solid var(--amber-500);
background: var(--color-bg); border-radius: var(--ssp-radius, 0.6rem);
padding: 0.95rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--ssp-shadow-sm);
}
.ssp-statuscard--danger { border-color: var(--red-200); border-left-color: var(--red-500); }
.ssp-statuscard-head { display: flex; align-items: center; gap: 0.7rem; }
.ssp-statuscard-icon {
flex: none; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: var(--amber-50); color: var(--amber-600); font-size: 0.9rem;
}
.ssp-statuscard--danger .ssp-statuscard-icon { background: var(--red-50); color: var(--red-600); }
.ssp-statuscard-headtext { min-width: 0; }
.ssp-statuscard-headtext strong { display: block; font-size: 0.95rem; color: var(--color-text); }
.ssp-statuscard-sub { font-size: 0.8rem; color: var(--color-text-muted); }
.ssp-statuscard-link {
margin-left: auto; flex: none; font-size: 0.82rem; font-weight: 600;
color: var(--color-primary); text-decoration: none; white-space: nowrap;
display: inline-flex; align-items: center; gap: 0.3rem;
}
.ssp-statuscard-link i { font-size: 0.72rem; transition: transform 0.15s ease; }
.ssp-statuscard-link:hover { text-decoration: underline; }
.ssp-statuscard-link:hover i { transform: translateX(2px); }
.ssp-statuscard-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; }
.ssp-statuscard-list li {
display: flex; align-items: center; gap: 0.55rem;
padding: 0.5rem 0; border-top: 1px solid var(--color-border);
}
.ssp-statuscard-name { flex: 1; min-width: 0; font-weight: 500; color: var(--color-text); font-size: 0.88rem; }
.ssp-statuscard-list .status-pill { flex: none; }
/* ── IT-Ankündigungen (Startseite) ──────────────────────────── */
.ssp-announce {
display: flex; gap: 0.75rem; align-items: flex-start;
border: 1px solid var(--indigo-200); border-left-width: 4px;
border-left-color: var(--indigo-500); background: var(--indigo-50);
border-radius: 0.55rem; padding: 0.8rem 1rem; margin-bottom: 0.75rem;
}
.ssp-announce > i { font-size: 0.95rem; margin-top: 0.15rem; color: var(--indigo-600); }
.ssp-announce-body { min-width: 0; }
.ssp-announce-body strong { display: block; font-size: 0.88rem; color: var(--color-text); }
.ssp-announce-body p { margin: 0.25rem 0 0; font-size: 0.83rem; color: var(--color-text-muted); line-height: 1.55; }
.ssp-announce--success { border-color: var(--emerald-200); border-left-color: var(--emerald-500); background: var(--emerald-50); }
.ssp-announce--success > i { color: var(--emerald-600); }
.ssp-announce--warning { border-color: var(--amber-200); border-left-color: var(--amber-500); background: var(--amber-50); }
.ssp-announce--warning > i { color: var(--amber-600); }
/* ── Mein Profil ────────────────────────────────────────────── */
.ssp-profile-tiles {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem; margin-bottom: 1rem;
}
.ssp-profile-tile {
display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: var(--ssp-radius, 0.6rem); padding: 0.9rem 1rem;
text-decoration: none; box-shadow: var(--ssp-shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ssp-profile-tile:hover { transform: translateY(-2px); box-shadow: var(--ssp-shadow); border-color: var(--indigo-300); }
.ssp-profile-tile-icon { color: var(--indigo-500); font-size: 1rem; }
.ssp-profile-tile-num { font-size: 1.5rem; font-weight: 700; color: var(--color-text); line-height: 1.1; }
.ssp-profile-tile-label { font-size: 0.78rem; color: var(--color-text-muted); }
.ssp-profile-list { margin: 0.25rem 0 0; padding: 0; }
.ssp-profile-row {
display: flex; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--color-border);
}
.ssp-profile-row:first-child { border-top: 0; }
.ssp-profile-row dt { flex: 0 0 9rem; color: var(--color-text-muted); font-size: 0.85rem; }
.ssp-profile-row dt i { color: var(--gray-400); margin-right: 0.35rem; width: 1rem; text-align: center; }
.ssp-profile-row dd { margin: 0; font-weight: 500; color: var(--color-text); font-size: 0.9rem; word-break: break-word; }
/* ── Ticket-Zufriedenheit (CSAT) ────────────────────────────── */
/* Abstand zwischen Nachrichten-Verlauf und den folgenden Karten
(Rückmeldung, Antworten) auf der Ticket-Detailseite. */
.ssp-thread ~ .ssp-card { margin-top: 1.1rem; }
.ssp-feedback-given { margin: 0 0 0.5rem; }
.ssp-feedback-comment { margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--color-text); }
/* Abgegebene Bewertung (statische Sterne). */
.ssp-stars { display: inline-flex; gap: 0.15rem; font-size: 1.4rem; line-height: 1; }
.ssp-star { color: var(--gray-300); }
.ssp-star.is-on { color: var(--amber-500); }
/* Eingabe: 5 Sterne (direction:rtl, damit alle links des gewählten leuchten). */
.ssp-stars-input {
display: inline-flex; gap: 0.3rem; direction: rtl; margin-bottom: 0.75rem;
}
.ssp-stars-input input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ssp-stars-input label {
font-size: 2.1rem; line-height: 1; cursor: pointer; color: var(--gray-300);
transition: color 0.12s, transform 0.12s; user-select: none;
}
.ssp-stars-input label:hover,
.ssp-stars-input label:hover ~ label,
.ssp-stars-input input:checked ~ label { color: var(--amber-500); transform: scale(1.08); }
.ssp-stars-input input:focus-visible + label { outline: 2px solid var(--indigo-600); outline-offset: 2px; border-radius: 4px; }
/* ── Barrierefreiheit ───────────────────────────────────────── */
/* Nur für Screenreader (visuell versteckt, aber vorlesbar). */
.ssp-sr-only {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
/* „Zum Inhalt springen" – erst bei Tastatur-Fokus sichtbar. */
.ssp-skip {
position: absolute; left: 0.5rem; top: -3rem; z-index: 100;
background: var(--color-bg); color: var(--color-text);
border: 1px solid var(--color-border); border-radius: 0.4rem;
padding: 0.5rem 0.9rem; font-size: 0.85rem; font-weight: 600;
text-decoration: none; box-shadow: var(--ssp-shadow);
transition: top 0.15s ease;
}
.ssp-skip:focus { top: 0.5rem; }
/* Der Inhalts-Container ist Fokusziel des Skip-Links – kein sichtbarer Rahmen. */
#ssp-main:focus { outline: none; }
/* Deutlich sichtbarer Tastatur-Fokus auf allen interaktiven Elementen. */
.ssp-body a:focus-visible,
.ssp-body button:focus-visible,
.ssp-body input:focus-visible,
.ssp-body select:focus-visible,
.ssp-body textarea:focus-visible,
.ssp-body [tabindex]:focus-visible {
outline: 2px solid var(--indigo-600);
outline-offset: 2px;
border-radius: 4px;
}
/* Bewegung reduzieren: Übergänge/Animationen/Hover-Verschiebungen abschalten. */
@media (prefers-reduced-motion: reduce) {
.ssp-body *,
.ssp-body *::before,
.ssp-body *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.ssp-body a.ssp-card-link:hover,
.ssp-body .ssp-ticket:hover,
.ssp-body .ssp-profile-tile:hover { transform: none; }
}
/* ── Persönliches Postfach ──────────────────────────────────── */
/* Glocke in der Kopfleiste: Zähler sitzt am Symbol, nicht daneben. */
.ssp-bell {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; flex: none; border-radius: 9px;
color: var(--color-text-muted); text-decoration: none;
transition: background-color 0.18s ease, color 0.18s ease;
}
.ssp-bell:hover, .ssp-bell.active { background: var(--gray-100); color: var(--color-text); }
.ssp-bell-badge {
position: absolute; top: 1px; right: 0;
min-width: 1.05rem; padding: 0 0.25rem; border-radius: 999px;
background: var(--red-500); color: var(--color-on-accent);
font-size: 0.65rem; font-weight: 700; line-height: 1.05rem; text-align: center;
}
/* Eine Nachricht: Zeile wie ein Ticket, mit Wegwerf-Knopf am Rand. */
.ssp-msg { display: flex; align-items: stretch; gap: 0.5rem; }
.ssp-msg-body {
display: flex; align-items: center; gap: 0.9rem; text-decoration: none; flex: 1; min-width: 0;
background: var(--color-bg); border: 1px solid var(--color-border);
border-radius: var(--ssp-radius-sm); padding: 0.9rem 1.15rem;
box-shadow: var(--ssp-shadow-sm);
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
a.ssp-msg-body:hover { border-color: var(--indigo-300); box-shadow: var(--ssp-shadow); transform: translateY(-2px); }
/* Ungelesenes trägt eine Kante in der Akzentfarbe. */
.ssp-msg--unread .ssp-msg-body { border-left: 3px solid var(--indigo-500); }
.ssp-msg-text {
font-size: 0.8rem; color: var(--color-text); margin: 0.1rem 0 0.15rem;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ssp-msg-icon--success { background: linear-gradient(135deg, var(--emerald-50), var(--emerald-100)); color: var(--emerald-600); }
.ssp-msg-icon--warning { background: linear-gradient(135deg, var(--amber-50), var(--amber-100)); color: var(--amber-600); }
.ssp-msg-icon--info { background: linear-gradient(135deg, var(--indigo-50), var(--indigo-100)); color: var(--indigo-600); }
.ssp-msg-del { display: flex; align-items: center; margin: 0; }