/* ============================================================
IMM IT — Basis-Styles (Owner: Loki, Layer-Owner)
Gemeinsamer Unterbau für ALLE Seiten. Bindet nach tokens.css ein:
(bzw. ../_shared/... aus Unterordnern wie tickets/ oder wissen/)
Regel: KEINE hartkodierten Farben in Seiten — alles über var(--…).
Klassen-Doku + Nav-Snippet: siehe mockups/_shared/README.md
============================================================ */
/* ---------- Reset & Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh);
color: var(--c-text);
background: var(--c-bg);
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--sp-3); }
p { margin: 0 0 var(--sp-4); }
a { color: var(--c-primary); }
img, svg { max-width: 100%; }
ul, ol { padding-left: 1.2em; }
:focus-visible {
outline: 2px solid var(--c-primary);
outline-offset: 2px;
border-radius: 2px;
}
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }
/* Seiten-Grundgerüst: → .site-header, , .site-footer */
body { display: flex; flex-direction: column; min-height: 100vh; }
.main { flex: 1 0 auto; padding: var(--sp-7) 0; }
.section { margin: 0 0 var(--sp-7); }
.section:last-child { margin-bottom: 0; }
.section--tight { margin-bottom: var(--sp-5); }
/* ---------- Header / Navigation ---------- */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background: var(--c-surface);
border-bottom: 1px solid var(--c-border);
}
.site-header__inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--sp-5);
min-height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
}
.brand {
display: flex;
flex-direction: column;
gap: 2px;
text-decoration: none;
color: var(--c-text);
padding: var(--sp-2) 0;
}
.brand__mark { font-weight: 700; font-size: var(--fs-lg); color: var(--c-text); }
.brand__mark span { color: var(--c-primary); }
.brand__sub { font-size: var(--fs-sm); color: var(--c-muted); }
.nav { display: flex; flex-wrap: wrap; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.nav__link {
display: inline-block;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius);
color: var(--c-text);
text-decoration: none;
font-size: var(--fs-base);
transition: background var(--transition), color var(--transition);
}
.nav__link:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent); color: var(--c-primary); }
.nav__link.is-active { color: var(--c-primary); font-weight: 600; background: color-mix(in srgb, var(--c-primary) 10%, transparent); }
/* ---------- Footer ---------- */
.site-footer {
flex-shrink: 0;
border-top: 1px solid var(--c-border);
background: var(--c-surface);
padding: var(--sp-6) 0;
margin-top: var(--sp-7);
}
.site-footer__inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--sp-5);
display: flex;
flex-wrap: wrap;
gap: var(--sp-3) var(--sp-6);
justify-content: space-between;
align-items: baseline;
color: var(--c-muted);
font-size: var(--fs-sm);
}
.site-footer__note {
width: 100%;
padding-top: var(--sp-4);
margin-top: var(--sp-4);
border-top: 1px dashed var(--c-border);
font-size: var(--fs-sm);
color: var(--c-muted);
}
/* ---------- Seiten-Intro / Hero ---------- */
.page-hero { text-align: center; padding: var(--sp-6) 0 var(--sp-7); }
.page-hero h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.page-hero p { font-size: var(--fs-lg); color: var(--c-muted); max-width: 640px; margin: 0 auto var(--sp-4); }
.page-hero--compact { padding: var(--sp-5) 0 var(--sp-6); }
.page-hero--compact h1 { font-size: var(--fs-xl); }
.eyebrow {
display: inline-block;
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: .03em;
/* Accent als TEXT braucht die abgedunkelte Variante (Henry: sonst unter AA) */
color: color-mix(in srgb, var(--c-accent) 70%, black);
text-transform: uppercase;
margin-bottom: var(--sp-2);
}
/* ---------- Cards ---------- */
.card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-1);
padding: var(--sp-5);
}
.card--interactive { transition: transform var(--transition), box-shadow var(--transition); }
.card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
/* Grosse Einstiegs-Kacheln (z.B. Startseite: "Ich habe ein Problem" …) */
.entry-card {
display: flex;
flex-direction: column;
gap: var(--sp-3);
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-1);
padding: var(--sp-6);
text-decoration: none;
color: var(--c-text);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.entry-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-2);
border-color: var(--c-primary);
}
.entry-card__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: color-mix(in srgb, var(--c-primary) 12%, transparent);
color: var(--c-primary);
}
.entry-card__icon svg { width: 26px; height: 26px; }
.entry-card h3 { font-size: var(--fs-lg); margin: 0; }
.entry-card p { color: var(--c-muted); margin: 0; font-size: var(--fs-sm); }
.entry-card__arrow { margin-top: auto; font-weight: 600; color: var(--c-primary); }
/* Kleinere Teaser-Kacheln (z.B. Startseite: Verweise auf alle Bausteine) */
.teaser-card {
display: flex;
flex-direction: column;
gap: var(--sp-2);
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: var(--sp-4);
text-decoration: none;
color: var(--c-text);
transition: border-color var(--transition), box-shadow var(--transition);
}
.teaser-card:hover { border-color: var(--c-primary); box-shadow: var(--shadow-1); }
.teaser-card__title { font-weight: 600; font-size: var(--fs-base); }
.teaser-card__title span { color: var(--c-primary); }
.teaser-card p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-5);
border-radius: var(--radius);
border: 1px solid transparent;
background: var(--c-primary);
color: var(--c-primary-ink);
font-size: var(--fs-base);
font-family: inherit;
text-decoration: none;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), opacity var(--transition);
}
.btn:hover { background: color-mix(in srgb, var(--c-primary) 85%, black); }
.btn:active { background: color-mix(in srgb, var(--c-primary) 75%, black); }
.btn[disabled], .btn--disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn--ghost { background: transparent; color: var(--c-primary); border-color: var(--c-border); }
.btn--ghost:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent); border-color: var(--c-primary); }
/* Accent bewusst NUR als Fläche/Tint, nicht als satte Vollfarbe (Henry: Akzent-Flächen,
nicht Grossflächen) — Text abgedunkelt für AA, sonst wie .btn--ghost aufgebaut. */
.btn--accent {
background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface));
color: color-mix(in srgb, var(--c-accent) 70%, black);
border-color: color-mix(in srgb, var(--c-accent) 30%, var(--c-border));
}
.btn--accent:hover { background: color-mix(in srgb, var(--c-accent) 22%, var(--c-surface)); }
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-lg); }
.btn--block { display: flex; width: 100%; }
/* ---------- Badges / Status-Chips ---------- */
.badge {
display: inline-block;
padding: 2px var(--sp-2);
border-radius: 999px;
font-size: var(--fs-sm);
background: var(--c-border);
color: var(--c-text);
}
.badge--ok { background: color-mix(in srgb, var(--c-ok) 15%, var(--c-surface)); color: var(--c-ok); }
.badge--warn { background: color-mix(in srgb, var(--c-warn) 15%, var(--c-surface)); color: var(--c-warn); }
.badge--err { background: color-mix(in srgb, var(--c-err) 15%, var(--c-surface)); color: var(--c-err); }
.badge--info { background: color-mix(in srgb, var(--c-info) 15%, var(--c-surface)); color: var(--c-info); }
.badge--neutral { background: var(--c-border); color: var(--c-muted); }
/* Statuspunkt (kleiner Kreis vor Badges/Listen, z.B. Systemstatus) */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--sp-2); vertical-align: middle; }
.dot--ok { background: var(--c-ok); }
.dot--warn { background: var(--c-warn); }
.dot--err { background: var(--c-err); }
/* ---------- Status-Banner (Startseite, Status-Seite) ---------- */
.status-banner {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
border-radius: var(--radius);
border: 1px solid var(--c-border);
background: var(--c-surface);
font-size: var(--fs-base);
}
.status-banner strong { font-weight: 600; }
.status-banner--ok { border-color: color-mix(in srgb, var(--c-ok) 35%, var(--c-border)); background: color-mix(in srgb, var(--c-ok) 8%, var(--c-surface)); }
.status-banner--warn { border-color: color-mix(in srgb, var(--c-warn) 35%, var(--c-border)); background: color-mix(in srgb, var(--c-warn) 8%, var(--c-surface)); }
.status-banner--err { border-color: color-mix(in srgb, var(--c-err) 35%, var(--c-border)); background: color-mix(in srgb, var(--c-err) 8%, var(--c-surface)); }
.status-banner a { color: inherit; text-decoration: underline; }
/* ---------- Kennzahlen-Band (z.B. "heute automatisch gelöst") ---------- */
.stat-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4);
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-1);
padding: var(--sp-5);
}
.stat { text-align: center; padding: var(--sp-2); }
.stat__value { display: block; font-size: var(--fs-2xl); font-weight: 700; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.stat__label { display: block; font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--sp-1); }
/* ---------- Formulare ---------- */
.field { margin-bottom: var(--sp-4); }
.field label, .field legend {
display: block;
font-size: var(--fs-sm);
font-weight: 600;
margin-bottom: var(--sp-2);
}
.field__hint { font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--sp-1); }
.field__error { font-size: var(--fs-sm); color: var(--c-err); margin-top: var(--sp-1); }
.input, .select, .textarea,
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="search"], .field select, .field textarea {
width: 100%;
font-family: inherit;
font-size: var(--fs-base);
color: var(--c-text);
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: var(--sp-3);
transition: border-color var(--transition);
}
.textarea, .field textarea { resize: vertical; min-height: 8em; }
.input:focus, .select:focus, .textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent);
}
.choice { display: flex; align-items: center; gap: var(--sp-2); font-weight: 400; margin-bottom: var(--sp-2); }
.choice input { width: auto; }
fieldset { border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-4); margin: 0 0 var(--sp-4); }
.form-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
/* Prominente Suche (Startseite) */
.search { position: relative; display: flex; gap: var(--sp-2); max-width: 560px; margin: 0 auto; }
.search input {
flex: 1;
font-family: inherit;
font-size: var(--fs-lg);
padding: var(--sp-4) var(--sp-5);
border: 1px solid var(--c-border);
border-radius: 999px;
background: var(--c-surface);
}
.search input:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent);
}
.search button {
border-radius: 999px;
padding-left: var(--sp-6);
padding-right: var(--sp-6);
}
.search__hint { text-align: center; font-size: var(--fs-sm); color: var(--c-muted); margin-top: var(--sp-2); }
/* ---------- KI-Autosuggest (Henry → Loki, Portal-Suche index.html) ----------
Dropdown-Anker ist .search (position:relative, siehe oben). Rein Token-basiert,
kein Hardcoding — recolored automatisch mit jedem Token-Swap. */
.ai-ac { position: absolute; left: 0; right: 0; top: calc(100% + var(--sp-2)); z-index: 50; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: var(--sp-2); display: none; text-align: left; }
.ai-ac.is-open { display: block; }
.ai-ac__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.ai-ac__spark { color: var(--c-accent); display: inline-flex; }
.ai-ac__label { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.ai-ac__triage-tag { margin-left: auto; font-size: .7rem; font-weight: 700; color: var(--c-ok); background: color-mix(in srgb, var(--c-ok) 12%, var(--c-surface)); border-radius: 999px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 6px; }
.ai-ac__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ok); animation: ai-ac-pulse 1.8s infinite; }
@keyframes ai-ac-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-ok) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ai-ac__item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-decoration: none; padding: var(--sp-3); border-radius: var(--radius); color: var(--c-text); border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.ai-ac__item:hover, .ai-ac__item:focus-visible { background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface)); outline: none; }
.ai-ac__ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface)); color: var(--c-primary); }
.ai-ac__item--triage .ai-ac__ic { background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface)); color: color-mix(in srgb, var(--c-accent) 72%, black); }
.ai-ac__t { display: flex; flex-direction: column; line-height: 1.3; }
.ai-ac__t b { font-weight: 600; }
.ai-ac__t small { color: var(--c-muted); font-size: var(--fs-sm); }
@media (prefers-reduced-motion: reduce) { .ai-ac__pulse { animation: none; } }
/* ---------- Tabellen ---------- */
.table-scroll { width: 100%; overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
table.table th, table.table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); }
table.table th { font-size: var(--fs-sm); color: var(--c-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
table.table tbody tr:hover { background: color-mix(in srgb, var(--c-bg) 55%, var(--c-surface)); }
/* ---------- Board / Kanban-Grundstile (z.B. Ticket-Board) ---------- */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); align-items: start; }
.board__col { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.board__col-head { display: flex; align-items: center; justify-content: space-between; }
.board__col-title { font-weight: 600; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .02em; color: var(--c-muted); }
.board__cards { display: flex; flex-direction: column; gap: var(--sp-3); }
/* ---------- Balken-Visualisierung (Pain-Point-Radar) ---------- */
.bars { display: flex; flex-direction: column; gap: var(--sp-4); }
.bars__row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; align-items: center; gap: var(--sp-3); }
.bars__label { font-size: var(--fs-sm); }
.bars__track { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 999px; height: 14px; overflow: hidden; }
.bars__fill { height: 100%; border-radius: 999px; background: var(--c-primary); }
.bars__value { font-size: var(--fs-sm); color: var(--c-muted); font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }
/* ---------- Grids & Utilities ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
/* Wie grid-3/4, aber bricht selbständig um — für Listen mit wechselnder Anzahl (z.B. Bausteine-Teaser) */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.text-muted { color: var(--c-muted); }
.text-center { text-align: center; }
.text-sm { font-size: var(--fs-sm); }
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.container { padding: 0 var(--sp-4); }
.site-header__inner { padding: var(--sp-2) var(--sp-4); }
.grid-2, .grid-3, .grid-4, .stat-strip { grid-template-columns: 1fr; }
.page-hero h1 { font-size: var(--fs-xl); }
.bars__row { grid-template-columns: 1fr; gap: var(--sp-1); }
.bars__value { text-align: left; }
.search { flex-direction: column; }
.search button { width: 100%; }
}