/* ============================================================
Sanssouci Consulting · Universal-Stylesheet (sanssouci.css)
v1.2 · für alle Sub-Sites der S-ITSM Advisory Platform
Einbindung:
Logo (separat als Datei auf den Server, z. B. /logo.jpg):
Schriften (auf jeder Sub-Site separat im ):
Konvention: Alle Klassen mit ssc- Präfix → keine Kollisionen
mit bestehenden Stylesheets (z. B. der Plattform).
Changelog:
v1.2 (2026-05) — .ssc-logo: img/span sauber getrennt. Vorher
verursachte display:inline-flex auf ![]()
ein Sizing-Problem (Bild wurde nicht auf
30×30 maskiert).
v1.1 (2026-05) — .ssc-logo unterstützt jetzt sowohl ![]()
als auch -Platzhalter; rund (50%)
statt rounded-square für Konsistenz mit
der Plattform-Header-Darstellung.
v1.0 (2026-05) — Initial, aus Style-Guide §8.
============================================================ */
/* ─── DESIGN TOKENS ────────────────────────────────────────── */
:root {
/* Brand */
--c-primary:#0087b4; --c-primary-dark:#006a8f; --c-primary-light:#e6f4f9;
--c-accent:#a7b838; --c-accent-dark:#8a9a2c; --c-accent-light:#f4f7e4;
--c-warn:#ed7c30; --c-warn-dark:#d66a22;
--c-danger:#e13f3f; --c-danger-dark:#b52a2a;
--c-purple:#6c399c; --c-purple-dark:#542a7a; --c-purple-light:#f0e8f7;
--c-sand:#cc9f65;
/* Neutrals */
--paper:#fafaf7; --paper-2:#ffffff; --ink:#0b2238;
--g50:#fafafa; --g100:#f3f4f6; --g200:#e5e7eb; --g300:#d1d5db;
--g400:#9ca3af; --g500:#6b7280; --g600:#4b5563; --g700:#374151;
--g800:#1f2937; --g900:#111827;
/* Type */
--font-sans:'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono:'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Radii */
--r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
/* Shadows */
--sh-sm:0 1px 2px rgba(0,0,0,.04);
--sh-md:0 2px 8px rgba(11,34,56,.06);
--sh-lg:0 8px 24px -8px rgba(11,34,56,.18);
}
/* ─── BASE ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
html, body {
margin:0; padding:0;
background:var(--paper); color:var(--g900);
font-family:var(--font-sans); font-size:15px; line-height:1.6;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
a { color:var(--c-primary); text-decoration:none; font-weight:500; }
a:hover { text-decoration:underline; }
/* ─── FOCUS-VISIBLE (WCAG 2.4.7) ───────────────────────────── */
.ssc-btn:focus-visible,
.ssc-pill:focus-visible,
.ssc-back:focus-visible,
.ssc-nav a:focus-visible,
.ssc-brand:focus-visible {
outline:2px solid var(--c-primary);
outline-offset:2px;
border-radius:var(--r-md);
}
.ssc-field input:focus-visible,
.ssc-field select:focus-visible,
.ssc-field textarea:focus-visible {
/* :focus-Ring liefert .ssc-field bereits via :focus, hier nur sicherstellen */
outline:none;
}
/* ─── TOPBAR ───────────────────────────────────────────────── */
.ssc-topbar {
position:sticky; top:0; z-index:50;
display:flex; align-items:center; gap:14px;
background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
border-bottom:1px solid var(--g200);
padding:10px 32px;
}
.ssc-brand { display:flex; align-items:center; gap:10px; color:inherit; }
.ssc-brand:hover { text-decoration:none; }
/* Logo-Container — Geometrie (Größe, Rundung) für beide Varianten gleich */
.ssc-logo {
width:30px; height:30px;
border-radius:50%;
flex-shrink:0;
overflow:hidden;
}
/* Produktive Variante: */
img.ssc-logo {
display:block;
object-fit:cover;
}
/* Fallback-Variante: S
für Skeletons, Doku, oder wenn Logo-Asset (noch) fehlt */
span.ssc-logo {
display:inline-flex;
align-items:center; justify-content:center;
background:linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
color:#fff; font-weight:700; font-size:14px;
}
.ssc-brand-text { line-height:1.2; font-size:12px; }
.ssc-brand-text b { display:block; color:var(--g900); font-weight:700; }
.ssc-brand-text span {
font-size:10px; color:var(--g500); letter-spacing:.1em;
text-transform:uppercase; font-weight:600;
}
.ssc-nav { display:flex; gap:2px; margin-left:auto; flex-wrap:wrap; }
.ssc-nav a {
font-size:11px; font-weight:600; color:var(--g600);
padding:5px 10px; border-radius:6px;
}
.ssc-nav a:hover { background:var(--g100); color:var(--g900); text-decoration:none; }
.ssc-back {
font-size:11px; font-weight:600; color:var(--c-primary);
padding:5px 10px; border-radius:6px;
}
.ssc-back:hover { background:var(--c-primary-light); text-decoration:none; }
/* ─── PAGE LAYOUT ──────────────────────────────────────────── */
.ssc-page { max-width:1080px; margin:0 auto; padding:56px 32px; }
.ssc-page--narrow { max-width:720px; }
.ssc-page-head { margin-bottom:36px; }
.ssc-eyebrow {
display:inline-flex; align-items:center; gap:8px;
font-size:11px; letter-spacing:.14em; text-transform:uppercase;
font-weight:700; color:var(--c-primary);
padding:5px 12px; background:var(--c-primary-light); border-radius:999px;
margin-bottom:14px;
}
.ssc-page-head h1 {
font-size:48px; line-height:1.05; letter-spacing:-.02em;
font-weight:700; color:var(--g900); margin:0 0 12px;
text-wrap:balance;
}
.ssc-lede {
font-size:18px; color:var(--g600); max-width:680px;
line-height:1.55; margin:0;
text-wrap:pretty;
}
.ssc-stand {
font-family:var(--font-mono); font-size:12px; color:var(--g500);
letter-spacing:.02em; margin-top:6px;
}
/* ─── PROSE (Legal etc.) ───────────────────────────────────── */
.ssc-prose h2 {
font-size:24px; font-weight:700; color:var(--g900);
margin:36px 0 10px; letter-spacing:-.005em; scroll-margin-top:72px;
}
.ssc-prose h3 { font-size:16px; font-weight:700; color:var(--g900); margin:22px 0 8px; }
.ssc-prose p, .ssc-prose li { color:var(--g700); }
.ssc-prose p { margin:0 0 14px; }
.ssc-prose ul, .ssc-prose ol { margin:0 0 18px 22px; }
.ssc-prose li { margin-bottom:6px; }
.ssc-prose a { font-weight:500; }
.ssc-prose strong { color:var(--g900); }
.ssc-prose code {
font-family:var(--font-mono); font-size:12.5px;
background:var(--g100); padding:1px 6px; border-radius:3px; color:var(--g900);
}
/* ─── BUTTONS ──────────────────────────────────────────────── */
.ssc-btn {
display:inline-flex; align-items:center; gap:6px;
padding:8px 14px; border-radius:var(--r-md);
font-size:13px; font-weight:600; font-family:inherit;
cursor:pointer; transition:all .15s; border:1px solid transparent;
letter-spacing:-.005em;
}
.ssc-btn--primary { background:var(--c-primary); color:#fff; }
.ssc-btn--primary:hover { background:var(--c-primary-dark); }
.ssc-btn--secondary { background:var(--paper-2); color:var(--g800); border-color:var(--g300); }
.ssc-btn--secondary:hover { background:var(--g50); border-color:var(--g500); }
.ssc-btn--ghost { background:transparent; color:var(--g700); }
.ssc-btn--ghost:hover { background:var(--g100); color:var(--g900); }
.ssc-btn--danger { background:var(--c-danger); color:#fff; }
.ssc-btn--danger:hover { background:var(--c-danger-dark); }
.ssc-btn:disabled,
.ssc-btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
/* ─── BADGES ───────────────────────────────────────────────── */
.ssc-badge {
display:inline-flex; align-items:center; gap:5px;
padding:2px 9px; border-radius:var(--r-pill);
font-size:10.5px; font-weight:700; letter-spacing:.04em;
text-transform:uppercase; white-space:nowrap;
}
.ssc-badge--info { background:var(--c-primary-light); color:var(--c-primary-dark); }
.ssc-badge--success { background:var(--c-accent-light); color:var(--c-accent-dark); }
.ssc-badge--warn { background:rgba(237,124,48,.15); color:var(--c-warn-dark); }
.ssc-badge--danger { background:rgba(225,63,63,.1); color:var(--c-danger-dark); }
.ssc-badge--purple { background:var(--c-purple-light); color:var(--c-purple-dark); }
.ssc-badge--neutral { background:var(--g100); color:var(--g700); }
/* ─── CALLOUT ──────────────────────────────────────────────── */
.ssc-callout {
display:grid; grid-template-columns:auto 1fr; gap:12px;
align-items:flex-start;
background:var(--c-primary-light); border-left:3px solid var(--c-primary);
padding:14px 18px; border-radius:0 var(--r-md) var(--r-md) 0;
margin:20px 0; font-size:13px; color:var(--g700); line-height:1.6;
}
.ssc-callout .ssc-callout-ico {
width:22px; height:22px; border-radius:50%;
background:var(--c-primary); color:#fff;
display:flex; align-items:center; justify-content:center;
font-weight:700; font-size:12px; flex-shrink:0; margin-top:1px;
}
.ssc-callout--warn { background:rgba(237,124,48,.1); border-left-color:var(--c-warn); }
.ssc-callout--warn .ssc-callout-ico { background:var(--c-warn); }
.ssc-callout--danger { background:rgba(225,63,63,.07); border-left-color:var(--c-danger); }
.ssc-callout--danger .ssc-callout-ico { background:var(--c-danger); }
.ssc-callout--tip { background:var(--c-accent-light); border-left-color:var(--c-accent); }
.ssc-callout--tip .ssc-callout-ico { background:var(--c-accent-dark); }
.ssc-callout b { color:var(--g900); }
/* ─── TABLE ────────────────────────────────────────────────── */
.ssc-table {
width:100%; border-collapse:collapse; font-size:13px;
background:var(--paper-2); border:1px solid var(--g200);
border-radius:var(--r-md); overflow:hidden;
}
.ssc-table th {
background:var(--g50); padding:10px 14px; text-align:left;
font-size:10px; letter-spacing:.08em; text-transform:uppercase;
color:var(--g500); font-weight:700; border-bottom:1px solid var(--g200);
}
.ssc-table td { padding:11px 14px; border-bottom:1px solid var(--g100); color:var(--g700); }
.ssc-table tr:last-child td { border-bottom:0; }
/* ─── FORM FIELDS ──────────────────────────────────────────── */
.ssc-field { display:flex; flex-direction:column; gap:4px; }
.ssc-field label {
font-size:10px; font-weight:700; color:var(--g500);
text-transform:uppercase; letter-spacing:.08em;
}
.ssc-field input, .ssc-field select, .ssc-field textarea {
padding:8px 12px; border:1px solid var(--g200); border-radius:var(--r-md);
font-size:13px; background:var(--paper-2); font-family:inherit;
outline:none; transition:border-color .15s, box-shadow .15s;
color:var(--g900);
}
.ssc-field input:focus, .ssc-field select:focus, .ssc-field textarea:focus {
border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(0,135,180,.12);
}
/* ─── PILLS / FILTER ───────────────────────────────────────── */
.ssc-filters { display:flex; gap:8px; flex-wrap:wrap; margin:24px 0; }
.ssc-pill {
padding:5px 14px; border-radius:var(--r-pill);
border:1px solid var(--g200); background:var(--paper-2);
font-size:12px; font-weight:600; color:var(--g600);
cursor:pointer; transition:all .15s; font-family:inherit;
}
.ssc-pill:hover { border-color:var(--g300); color:var(--g900); }
.ssc-pill--active {
background:var(--c-primary-light); border-color:var(--c-primary);
color:var(--c-primary-dark); font-weight:700;
}
/* ─── RELEASE BLOCK ────────────────────────────────────────── */
.ssc-release { padding:24px 0; border-bottom:1px solid var(--g200); }
.ssc-release:last-child { border-bottom:0; }
.ssc-release > header {
display:flex; align-items:baseline; gap:14px;
flex-wrap:wrap; margin-bottom:10px;
}
.ssc-release > header h2 { font-size:24px; margin:0; color:var(--g900); }
.ssc-release > header time { font-family:var(--font-mono); color:var(--g500); font-size:13px; }
.ssc-release h3 {
font-size:11px; letter-spacing:.08em; text-transform:uppercase;
font-weight:700; color:var(--g600); margin:18px 0 8px;
}
/* ─── BACKLOG CARDS ────────────────────────────────────────── */
.ssc-cards {
list-style:none; padding:0; margin:0;
display:grid; gap:14px;
grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
}
.ssc-card {
padding:18px 20px; background:var(--paper-2);
border:1px solid var(--g200); border-radius:var(--r-lg);
box-shadow:var(--sh-sm); transition:box-shadow .15s, border-color .15s;
}
.ssc-card:hover { box-shadow:var(--sh-md); border-color:var(--g300); }
.ssc-card > header {
display:flex; align-items:center; justify-content:space-between;
gap:12px; margin-bottom:8px;
}
.ssc-card > header code {
font-family:var(--font-mono); font-size:11px; color:var(--g500);
letter-spacing:.04em;
}
.ssc-card h3 { font-size:15px; font-weight:700; color:var(--g900); margin:4px 0 6px; }
.ssc-card p { font-size:13px; color:var(--g600); line-height:1.55; margin:0; }
/* ─── FOOTER ───────────────────────────────────────────────── */
.ssc-footer {
margin-top:64px; padding:28px 32px;
background:var(--ink); color:rgba(255,255,255,.75);
display:flex; flex-wrap:wrap; align-items:center;
justify-content:space-between; gap:18px;
font-size:12px; letter-spacing:.04em;
}
.ssc-footer nav { display:flex; gap:18px; flex-wrap:wrap; }
.ssc-footer a { color:rgba(255,255,255,.85); font-weight:500; }
.ssc-footer a:hover { color:#fff; text-decoration:underline; }
/* ─── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:720px) {
.ssc-topbar { padding:10px 18px; }
.ssc-nav { display:none; }
.ssc-page { padding:36px 22px; }
.ssc-page-head h1 { font-size:32px; }
.ssc-footer { padding:22px 18px; flex-direction:column; align-items:flex-start; gap:10px; }
}
/* ─── REDUCED MOTION (a11y) ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}