/* ============================================================
Cockpit V14 — Design-System (Apple-Anmutung, Jasmins Brand)
Türkis = aktiv/Links/Fokus/Karl · Navy = primär/Headings/Jasmin
Pink NIE für Pills — nur Löschen/Fehler/Alarm.
Luftig, ruhig, Hairlines, weiße Karten auf #f5f5f7, System-Font.
fonts.css wird separat im Layout verlinkt (vor dieser Datei) —
die Marken-Fonts bleiben verfügbar, das UI nutzt den System-Stack.
Kein Inline-JS (CSP) — Inline-Styles erlaubt, nutzen wir aber kaum.
============================================================ */
:root {
color-scheme: light; /* native Controls/Scrollbars hell — V10 setzt im Dunkel-Block dark */
--navy:#053A6D; --navy-deep:#062256; --tuerkis:#01A09A; --pink:#FF0068;
--gelb:#F6BC26; --grau:#5B6079;
--bg:#F5F5F7; --surface:#FFFFFF; --surface-2:#F5F5F7;
--border:rgba(0,0,0,.08); --border-strong:rgba(0,0,0,.16); --hover:rgba(0,0,0,.04);
--text:#1D1D1F; --text-muted:#6E6E73; --text-soft:#86868B;
--radius:16px; --radius-sm:10px; --radius-pill:999px;
--shadow-pop:0 4px 16px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.05);
--shadow-card:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
/* Apple-Politur: neutrale, weiche Mehrschicht-Schatten —
xs Ruhe · sm Buttons/Leisten · md Hover-Tiefe · lg schwebende Flächen. */
--shadow-xs:0 1px 2px rgba(0,0,0,.04);
--shadow-sm:0 1px 2px rgba(0,0,0,.04), 0 3px 8px rgba(0,0,0,.05);
--shadow-md:0 2px 4px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.08);
--shadow-lg:0 4px 12px rgba(0,0,0,.08), 0 16px 48px rgba(0,0,0,.14);
/* Zeilen-Hover mit hauchzarter Türkis-Tönung statt reinem Grau. */
--row-hover:#F2F9F8;
--font-head:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-body:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Pill-Paletten: weicher Grund + kräftigere Schrift desselben Tons */
--p-grau-bg:#ECECEE; --p-grau-fg:#5B6079;
--p-tuerkis-bg:#E4F4F3; --p-tuerkis-fg:#04716C;
--p-navy-bg:#E8EFF7; --p-navy-fg:#053A6D;
--p-gelb-bg:#FBF0D4; --p-gelb-fg:#8A6410;
--p-gruen-bg:#E3F4EC; --p-gruen-fg:#137A50;
--p-blau-bg:#E5EFFA; --p-blau-fg:#245B98;
--p-amber-bg:#FBEFDB; --p-amber-fg:#9C610F;
--p-rot-bg:#FCE7E8; --p-rot-fg:#B5363B;
}
/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font: 400 14px/1.5 var(--font-body);
color: var(--text);
/* Ruhiger, flacher Apple-Grund — keine Verläufe. */
background-color: var(--bg);
background-image: none;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
font-family: var(--font-head);
font-weight: 600;
color: var(--navy);
margin: 0 0 12px;
}
h1 { font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }
a { color: var(--tuerkis); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus { outline: none; }
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid rgba(1,160,154,.35);
outline: 3px solid color-mix(in srgb, var(--tuerkis) 38%, transparent);
outline-offset: 1px;
}
.muted { color: var(--text-muted); }
.soft { color: var(--text-soft); }
.mono { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
/* ---------- Formularelemente (klein, türkiser Fokusring) ---------- */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="tel"], input[type="url"],
input[type="date"], input:not([type]), select, textarea {
font-family: var(--font-body);
font-size: 13.5px;
line-height: 1.4;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
padding: 6px 10px;
height: 32px;
}
textarea { height: auto; padding: 8px 10px; resize: vertical; }
select { height: 32px; padding-right: 26px; }
input:focus, select:focus, textarea:focus {
border-color: var(--tuerkis);
box-shadow: 0 0 0 3px rgba(1,160,154,.35);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--tuerkis) 35%, transparent);
outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-soft); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 32px;
padding: 0 14px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
line-height: 1;
cursor: pointer;
text-decoration: none;
background: var(--surface);
color: var(--text);
white-space: nowrap;
transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .06s ease;
}
.btn:hover { text-decoration: none; background: var(--hover); box-shadow: var(--shadow-xs); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn--primary {
/* Flach und ruhig — Apple-CTA in Marken-Navy, voll gerundet (Pill). */
background-color: var(--navy);
background-image: none;
border-color: var(--navy);
color: #FFFFFF;
box-shadow: none;
}
.btn--primary:hover {
background-color: #09457E;
background-image: none;
border-color: #09457E;
box-shadow: var(--shadow-sm);
}
.btn--primary:active { background-color: var(--navy-deep); box-shadow: none; }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
.btn--ghost:hover { background: var(--hover); border-color: rgba(0,0,0,.22); color: var(--text); }
.btn--sm { height: 27px; padding: 0 11px; font-size: 12px; }
.btn--icon {
width: 32px; height: 32px; padding: 0;
color: var(--text-muted);
}
.btn--icon.btn--sm { width: 27px; height: 27px; }
/* Pink ausschließlich für danger/Löschen/Fehler */
.btn--danger { background: transparent; border-color: var(--pink); color: var(--pink); }
.btn--danger:hover { background: var(--p-rot-bg); color: var(--pink); }
/* V14: Onboarding-Fragebogen in der Kontaktakte — Vorher/Nachher-Skalen. */
.fb-vergleich { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.fb-kopf, .fb-zeile { display: grid; grid-template-columns: minmax(150px, 1.2fr) 1fr 1fr; gap: 12px; align-items: center; padding: 7px 0; }
.fb-zeile { border-top: 1px solid var(--border); }
.fb-kopf .fb-spalte { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); }
.fb-label { font-size: 14px; color: var(--text); }
.fb-skala { display: inline-flex; align-items: center; gap: 4px; }
.fb-skala--leer { color: var(--text-soft); }
/* V15: Jahresziel direkt in der Kachel ändern. */
.ziel-edit summary { cursor: pointer; list-style: none; }
.ziel-edit summary::-webkit-details-marker { display: none; }
.ziel-edit summary:hover { color: var(--tuerkis); }
.ziel-edit__form { display: flex; gap: 6px; margin-top: 6px; }
.ziel-edit__form .input { width: 110px; }
/* V15b: editierbare Fragebogen-Zellen — attr-Mechanik ohne attr-Grid-Layout. */
.fb-edit { display: inline-flex; padding: 2px 6px; min-height: 0; border-radius: 8px; cursor: pointer; }
.fb-edit:hover { background: var(--row-hover, rgba(1,160,154,.06)); }
.fb-antwort .fb-edit { display: block; }
/* V15: Sterne statt Punkte (Jasmins Wunsch). */
.fb-stern { font-size: 16px; line-height: 1; color: var(--text-soft); }
.fb-stern--voll.fb-stern--vorher { color: var(--grau); }
.fb-stern--voll.fb-stern--nachher { color: var(--tuerkis); }
.fb-zahl { margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fb-geld { font-weight: 600; font-variant-numeric: tabular-nums; }
.fb-geld--nachher { color: var(--tuerkis); }
.fb-antworten summary { cursor: pointer; font-weight: 600; color: var(--text-muted); padding: 6px 0; }
.fb-antwort { padding: 8px 0; border-top: 1px solid var(--border); }
.fb-antwort__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 2px; }
.fb-antwort__text { margin: 0; font-size: 14.5px; }
@media (max-width: 640px) { .fb-kopf, .fb-zeile { grid-template-columns: 1fr; gap: 4px; } .fb-kopf { display: none; } }
/* V14: Gespeicherte Filter-Ansichten (Kontakte). */
.ansichten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.ansicht-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 6px 3px 14px; font-size: 13.5px; }
.ansicht-chip a { text-decoration: none; color: var(--text); font-weight: 600; }
.ansicht-chip a:hover { color: var(--tuerkis); }
.ansicht-chip--aktiv { border-color: var(--tuerkis); }
.ansicht-chip form { display: inline-flex; }
.ansicht-chip button { border: 0; background: none; color: var(--text-soft); cursor: pointer; font-size: 15px; padding: 0 6px; border-radius: 50%; }
.ansicht-chip button:hover { color: var(--pink); }
.ansicht-speichern { display: inline-flex; gap: 6px; align-items: center; }
.ansicht-speichern .input { width: 200px; }
/* V14: Umsatz-Kachel + Dashboard-Anpassen + Fristen-Aktionen. */
.umsatz-balken { height: 10px; border-radius: 999px; background: var(--surface-2, #EDF1F5); overflow: hidden; margin: 6px 0 2px; }
.umsatz-balken__voll { height: 100%; width: var(--uz, 0%); border-radius: 999px; background: var(--tuerkis); }
.dash-anpassen__btn { margin-top: 10px; }
.dash-anpassen__panel { margin-top: 8px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.dash-anpassen__zeile { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.dash-row__done { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); font-size: 12px; line-height: 1; cursor: pointer; }
.dash-row__done:hover { border-color: var(--tuerkis); color: var(--tuerkis); }
.dash-row__done--mute:hover { border-color: var(--grau); color: var(--grau); }
/* V14: Dokumente klappbar nach Art + Jahr. */
.docs-gruppe { border-top: 1px solid var(--border); padding: 4px 0; }
.docs-gruppe summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text); padding: 7px 0; list-style-position: inside; }
.docs-gruppe__zahl { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--text-soft); background: var(--surface-2, #EDF1F5); border-radius: 999px; padding: 1px 9px; }
.docs-gruppe__jahr { margin: 6px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: var(--text-soft); }
/* V14: Papierkorb — Wiederherstellen + Endgültig nebeneinander. */
.trash-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.page-head--simple form[data-confirm] { margin-top: 10px; }
.btn--danger-ghost { background: transparent; border-color: var(--border-strong); color: var(--pink); }
.btn--danger-ghost:hover { background: var(--p-rot-bg); border-color: var(--pink); color: var(--pink); }
/* ---------- Pills (typisierte Auswahl-Chips) ---------- */
.pill {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 100%;
padding: 2px 9px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: var(--p-grau-bg);
color: var(--p-grau-fg);
/* Feiner Ton-in-Ton-Innenrand für mehr Wertigkeit. */
box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.pill--grau { background: var(--p-grau-bg); color: var(--p-grau-fg); }
.pill--tuerkis { background: var(--p-tuerkis-bg); color: var(--p-tuerkis-fg); }
.pill--navy { background: var(--p-navy-bg); color: var(--p-navy-fg); }
.pill--gelb { background: var(--p-gelb-bg); color: var(--p-gelb-fg); }
.pill--gruen { background: var(--p-gruen-bg); color: var(--p-gruen-fg); }
.pill--blau { background: var(--p-blau-bg); color: var(--p-blau-fg); }
.pill--amber { background: var(--p-amber-bg); color: var(--p-amber-fg); }
.pill--rot { background: var(--p-rot-bg); color: var(--p-rot-fg); }
.pill-more {
display: inline-block;
padding: 2px 7px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 600;
color: var(--text-soft);
background: var(--surface-2);
}
.pill-group { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* ---------- App-Layout ---------- */
body.app { display: flex; min-height: 100vh; }
/* V4: Sidebar fix — scrollt nicht mit; Footer sitzt unten (flex-col). */
.sidebar {
width: 220px;
flex-shrink: 0;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 40;
height: 100vh;
display: flex;
flex-direction: column;
padding: 16px 12px;
background: #FBFBFD;
border-right: 1px solid var(--border);
box-shadow: none;
transition: width .16s ease;
}
/* Kopfzeile der Sidebar: .sidebar__brand ist der Container (CONTRACT-v4),
.sidebar__brand-link der Markenzug — der Toggle bleibt auch collapsed sichtbar. */
.sidebar__brand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 8px 14px;
}
.sidebar__brand-link {
font-family: var(--font-head);
font-weight: 700;
font-size: 18px;
color: var(--navy);
white-space: nowrap;
overflow: hidden;
text-decoration: none;
}
a.sidebar__brand-link:hover { color: var(--navy); text-decoration: none; }
.sidebar__brand-dot { color: var(--tuerkis); }
.sidebar__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
flex-shrink: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-soft);
cursor: pointer;
}
.sidebar__toggle:hover { background: var(--hover); color: var(--text-muted); }
.sidebar__toggle svg { width: 17px; height: 17px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
.sidebar__nav--sekundaer { flex: 0 0 auto; overflow-y: visible; }
.sidebar__section {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-soft);
padding: 12px 10px 5px;
white-space: nowrap;
overflow: hidden;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 13.5px;
color: var(--text-muted);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-item__label { overflow: hidden; text-overflow: ellipsis; }
a.nav-item:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.nav-item--active,
a.nav-item--active,
a.nav-item--active:hover { background: var(--p-tuerkis-bg); color: var(--tuerkis); }
.nav-item--active svg { color: var(--tuerkis); }
.nav-item--soon { color: var(--text-soft); cursor: default; }
.soon-badge {
margin-left: auto;
font-size: 9.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
background: var(--surface-2);
color: var(--text-soft);
padding: 2px 6px;
border-radius: var(--radius-pill);
}
/* V4: Footer-Block ganz unten — Einstellungen/Papierkorb klein, Trenner, User-Zeile. */
.sidebar__footer {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 0 2px;
margin-top: auto;
border-top: 1px solid var(--border);
}
.nav-item--small { padding: 7px 10px; font-size: 13px; }
.nav-item--small svg { width: 15px; height: 15px; }
.sidebar__sep { height: 1px; margin: 7px 2px; background: var(--border); }
.sidebar__user {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 7px 10px 0;
font-weight: 600;
font-size: 12.5px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
}
/* ---------- Nav-Untermenü (Kontakte nach Typ) ---------- */
.nav-group { display: flex; flex-direction: column; }
.nav-item--parent { position: relative; padding-right: 32px; }
.nav-item__chev {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-soft);
cursor: pointer;
}
.nav-item__chev:hover { background: var(--border); color: var(--text-muted); }
.nav-item__chev::before {
content: "";
width: 6px;
height: 6px;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: rotate(-45deg); /* › zugeklappt */
transition: transform .14s ease;
}
.nav-group--open .nav-item__chev::before { transform: rotate(45deg) translate(-1px, -1px); }
.nav-sub { list-style: none; margin: 1px 0 0; padding: 0; display: none; }
.nav-group--open .nav-sub { display: block; }
.nav-sub__item {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px 5px 37px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
}
a.nav-sub__item:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.nav-sub__item--active,
a.nav-sub__item--active,
a.nav-sub__item--active:hover { background: var(--p-tuerkis-bg); color: var(--tuerkis); }
.nav-sub__label { overflow: hidden; text-overflow: ellipsis; }
.nav-sub__count {
margin-left: auto;
min-width: 18px;
padding: 0 6px;
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--text-soft);
font-size: 11px;
font-weight: 600;
line-height: 1.7;
text-align: center;
}
.nav-sub__item--active .nav-sub__count { background: rgba(255,255,255,.65); color: var(--p-tuerkis-fg); }
/* Kollabierte Sidebar → 64px, nur Icons (JS setzt Klasse auf aside UND body) */
/* V21e (Jasmin): EIN Rhythmus für die ganze Seitenleiste — gleiche Höhe
(7px Innenabstand) und gleicher Abstand (6px) für Haupt- und Fußzeile. */
.sidebar__nav > .nav-item, .sidebar__nav > .nav-group,
.sidebar__footer > .nav-item { margin-bottom: 6px; }
.sidebar__nav .nav-item, .sidebar__footer .nav-item { padding-top: 7px; padding-bottom: 7px; }
/* V19b: globale Suche in der Seitenleiste — auf jeder Seite oben. */
.sidebar__suche { margin: 2px 0 12px; }
.sidebar__suche-input { width: 100%; font-size: 13px; }
.sidebar--collapsed { width: 64px; padding: 16px 8px; }
.sidebar--collapsed .sidebar__suche,
.sidebar--collapsed .sidebar__brand-link,
.sidebar--collapsed .nav-item__label,
.sidebar--collapsed .soon-badge,
.sidebar--collapsed .sidebar__section,
.sidebar--collapsed .nav-item__chev,
.sidebar--collapsed .nav-sub,
.sidebar--collapsed .sidebar__user { display: none; }
.sidebar--collapsed .sidebar__brand { justify-content: center; padding: 4px 0 14px; }
.sidebar--collapsed .nav-item { justify-content: center; padding: 8px 0; }
.sidebar--collapsed .nav-item--parent { padding-right: 0; }
.sidebar--collapsed .sidebar__footer { align-items: center; padding-top: 12px; }
/* V4: volle Breite, weniger Weißraum — Platz für die fixe Sidebar via margin. */
.main {
position: relative;
flex: 1 1 auto;
min-width: 0;
width: auto;
max-width: none;
margin: 0 0 0 220px;
padding: 30px;
transition: margin-left .16s ease;
}
body.sidebar-collapsed .main { margin-left: 64px; }
/* Detailseiten (Kontakt/Deal/Aufgabe): volle Breite (V8, SPEC N) —
das Padding liefert .main, die Aktivitätsspalte wächst mit. */
.detail-wrap { margin: 0 auto; }
/* ---------- Seitenkopf ---------- */
.page-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.page-title { margin: 0; display: inline-flex; align-items: baseline; gap: 9px; }
.page-count {
display: inline-block;
padding: 2px 9px;
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--text-muted);
font: 600 12px/1.4 var(--font-body);
}
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ---------- Werkzeugleiste (Filter / Sort / Suche) ---------- */
.toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.toolbar__spacer { margin-left: auto; }
.result-count { font-size: 12.5px; color: var(--text-soft); }
.search {
position: relative;
display: inline-flex;
align-items: center;
}
.search__icon {
position: absolute;
left: 9px;
width: 15px; height: 15px;
color: var(--text-soft);
pointer-events: none;
}
.search__input { width: 230px; max-width: 100%; padding-left: 30px; }
/* Filter-Chips. V16 (Jasmin): Luft zwischen Chip-Zeile und der Tabelle
darunter — nur für die frei stehende Zeile, nicht in der Toolbar. */
.filter-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .filter-chips { margin-bottom: 0; }
.filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 6px 0 10px;
border-radius: var(--radius-pill);
background: var(--p-tuerkis-bg);
color: var(--p-tuerkis-fg);
font-size: 12px;
font-weight: 600;
}
.filter-chip__x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px; height: 16px;
border: none;
border-radius: 50%;
background: transparent;
color: inherit;
cursor: pointer;
font-size: 13px;
line-height: 1;
opacity: .7;
}
.filter-chip__x:hover { opacity: 1; background: rgba(4,113,108,.14); }
/* ---------- Popover / Menü ---------- */
.pop-wrap { position: relative; display: inline-flex; }
.popover {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 60;
min-width: 250px;
padding: 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.popover--right { left: auto; right: 0; }
/* Filter-Popover in der Liste: steht als Geschwister nach der Toolbar direkt
in .main (positionierter Vorfahr). top/left auf auto → an seiner statischen
Flussposition unter der Werkzeugleiste, nicht in der Viewport-Ecke. */
.popover--filter { top: auto; left: auto; margin: 2px 0 14px; }
.popover__body { display: flex; flex-direction: column; gap: 10px; }
.popover__field { display: flex; flex-direction: column; gap: 5px; }
.popover__label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.popover__field select, .popover__field input { width: 100%; }
.popover__count {
display: inline-block;
min-width: 16px;
padding: 0 5px;
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--text-muted);
font-size: 11px;
font-weight: 600;
text-align: center;
}
.popover__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
/* Werkzeugleiste: Suche + Sortier-Dropdown */
.toolbar__left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.quicksearch { position: relative; display: inline-flex; align-items: center; }
.quicksearch__input { width: 250px; max-width: 100%; }
.sortdrop { display: inline-flex; align-items: center; gap: 7px; }
.sortdrop__label { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.sortdrop__form { display: inline-flex; align-items: center; gap: 6px; }
/* Tags-Spalte + Kurzform-Pill "+n" */
.col-tags { min-width: 0; }
.tag-cell { display: inline-flex; align-items: center; gap: 5px; flex-wrap: nowrap; min-width: 0; }
.pill--more { color: var(--text-soft); background: var(--surface-2); }
.popover__row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.popover__row:last-of-type { margin-bottom: 0; }
.popover__row label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.popover__row select, .popover__row input { width: 100%; }
.popover__check { flex-direction: row; align-items: center; gap: 8px; }
.popover__check input { width: auto; height: auto; }
.popover__foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
/* Menü (…-Aktionen) */
.menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 60;
min-width: 180px;
padding: 5px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.menu__item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 7px 9px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
font-size: 13px;
font-weight: 500;
text-align: left;
cursor: pointer;
}
.menu__item:hover { background: var(--hover); }
.menu__item--danger { color: var(--pink); }
.menu__item--danger:hover { background: var(--p-rot-bg); }
.menu__item svg { width: 15px; height: 15px; color: var(--text-soft); }
.menu__item--danger svg { color: var(--pink); }
.menu__sep { height: 1px; margin: 5px 0; background: var(--border); }
/* Options-Liste im Select-/Tag-Popover */
.optlist { max-height: 240px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.optlist__item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 6px 8px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
font-size: 13px;
text-align: left;
cursor: pointer;
}
.optlist__item:hover, .optlist__item.is-active { background: var(--hover); }
.optlist__item[aria-selected="true"] { font-weight: 600; }
.optlist__check { margin-left: auto; width: 15px; height: 15px; color: var(--tuerkis); }
.optlist__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.opt-search { width: 100%; margin-bottom: 8px; }
.opt-new {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
margin-top: 6px;
padding: 7px 8px;
border: none;
border-top: 1px solid var(--border);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
background: transparent;
color: var(--tuerkis);
font-size: 12.5px;
font-weight: 600;
text-align: left;
cursor: pointer;
}
.opt-new:hover { background: var(--p-tuerkis-bg); }
/* Farbwahl-Punkte (Einstellungen / neue Option) */
.color-picker { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.color-dot {
width: 22px; height: 22px;
border: 2px solid transparent;
border-radius: 50%;
cursor: pointer;
padding: 0;
}
.color-dot.is-active { border-color: var(--navy); }
.color-dot[data-color="grau"] { background: var(--p-grau-fg); }
.color-dot[data-color="tuerkis"] { background: var(--tuerkis); }
.color-dot[data-color="navy"] { background: var(--navy); }
.color-dot[data-color="gelb"] { background: var(--gelb); }
.color-dot[data-color="gruen"] { background: #1F9D6B; }
.color-dot[data-color="blau"] { background: #2E77C2; }
.color-dot[data-color="amber"] { background: #D98A1F; }
.color-dot[data-color="rot"] { background: #E5484D; }
/* ---------- Tabelle (dicht, sticky Kopf) ---------- */
.table-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
/* V8 (SPEC D): schmale Fenster scrollen horizontal statt abzuschneiden. */
overflow-x: auto;
overflow-y: hidden;
}
/* Breite Tabellen (Kontaktliste): Mindestbreite → Scroll statt Quetschen. */
.table--breit { min-width: 900px; }
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
position: sticky;
top: 0;
z-index: 2;
text-align: left;
padding: 10px 16px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-soft);
background: var(--surface-2);
border-bottom: 1px solid var(--border);
/* Hauchzarte Schattenkante unter dem sticky Kopf (konstant, ohne JS). */
box-shadow: 0 1px 0 rgba(0,0,0,.04);
white-space: nowrap;
}
.table th[data-sort] a {
display: inline-flex;
align-items: center;
gap: 4px;
color: inherit;
text-transform: inherit;
letter-spacing: inherit;
font: inherit;
}
.table th[data-sort] a:hover { color: var(--text-muted); text-decoration: none; }
.sort-ind {
display: inline-block;
width: 0; height: 0;
opacity: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 5px solid var(--tuerkis);
transition: transform .12s ease;
}
.table th.is-sorted { color: var(--text-muted); }
.table th.is-sorted .sort-ind { opacity: 1; }
.table th.is-sorted[data-dir="desc"] .sort-ind { transform: rotate(180deg); }
.table td {
padding: 0 16px;
height: 44px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
color: var(--text);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr.row { transition: background .12s ease; }
.table tbody tr.row:hover { background: var(--row-hover); }
.table tr.row[data-href] { cursor: pointer; }
.td-muted { color: var(--text-muted); }
.cell-muted { color: var(--text-muted); }
.cell-empty { color: var(--text-soft); }
/* Nächster Schritt (Liste) — Datum + Kurztext, rot wenn überfällig */
.next-step { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.next-step small { font-size: 12px; color: var(--text-soft); }
.next-step--overdue,
.next-step--overdue time,
.next-step--overdue small { color: var(--pink); font-weight: 600; }
/* Datum (Detail / AJAX) — rot wenn überfällig, amber wenn bald (≤ 14 Tage) */
.date--overdue { color: var(--pink); font-weight: 600; }
.date--soon { color: var(--p-amber-fg); font-weight: 600; }
/* ---------- Kontakt-Zelle & Avatare ---------- */
.contact-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.contact-cell__text { display: flex; flex-direction: column; min-width: 0; }
.contact-cell__text strong,
.contact-cell__name { font-weight: 600; color: var(--text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-cell__text small,
.contact-cell__sub { font-size: 12px; color: var(--text-soft); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font: 600 12px/1 var(--font-body);
letter-spacing: .02em;
/* Feiner heller Ring + weicher Ansatzschatten. */
box-shadow: 0 0 0 2px #FFFFFF, 0 1px 3px rgba(0,0,0,.12);
}
/* V10: einheitlich Grau — alte id%4-Klassen bleiben als Alias erhalten. */
.avatar--grau,
.avatar--0, .avatar--1, .avatar--2, .avatar--3 { background: var(--grau); }
.avatar--lg { width: 52px; height: 52px; font-size: 19px; }
/* ---------- Karten ---------- */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
padding: 20px 22px;
transition: box-shadow .18s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.card__head h2 { margin: 0; }
.card + .card { margin-top: 18px; }
/* ---------- Detailseite ---------- */
.back {
display: inline-flex;
align-items: center;
gap: 5px;
margin-bottom: 14px;
font-size: 13px;
color: var(--text-muted);
}
.back:hover { color: var(--tuerkis); text-decoration: none; }
.back svg { width: 14px; height: 14px; }
.detail-head {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.detail-head__main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.detail-head h1 { margin: 0; font-size: 21px; }
.detail-head__title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.detail-head__meta { display: flex; align-items: center; gap: 8px; }
.detail-head .page-actions { margin-left: auto; }
/* Kopf-Identität: großer inline-editierbarer Name + Typ-Pill darunter.
V4: Namen in EINER Zeile — kein Umbruch mitten im Wort, ellipsis bei Überlänge. */
.detail-head__main { flex: 1 1 auto; min-width: 0; }
.detail-head__ident { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.detail-head__names {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: nowrap;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.detail-head__names .attr--head { flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* .attr.attr--head: schlägt die spätere .attr-Grid-Regel (Spezifität) —
sonst quetscht die 118px-Labelspalte den Namen zusammen. */
.attr.attr--head {
display: block;
min-height: 0;
padding: 2px 6px;
border-radius: var(--radius-sm);
cursor: text;
}
.attr.attr--head:hover { background: var(--hover); }
.attr--head .attr__value--name {
display: block;
font-family: var(--font-head);
font-weight: 600;
font-size: 21px;
letter-spacing: -.01em;
line-height: 1.2;
color: var(--navy);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.attr.attr--head-pill {
display: inline-flex;
align-items: center;
min-height: 0;
padding: 2px 6px;
border-radius: var(--radius-sm);
width: max-content;
max-width: 100%;
cursor: pointer;
}
.attr.attr--head-pill:hover { background: var(--hover); }
.attr--head-pill .attr__value { display: inline-flex; }
/* V4.2: Attribute links (~60 %), Aktivität rechts (~40 %). */
.detail-grid {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: 22px;
align-items: start;
}
/* ---------- Attribut-Panel (Attio-Inline-Editing) ---------- */
.detail-attrs { min-width: 0; }
.attr-group { margin-bottom: 6px; }
.attr-group + .attr-group { margin-top: 14px; }
/* V4: Abschnitte als Karten in zwei Spalten — weniger vertikales Gestapel. */
.detail-attrs--grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
align-items: start;
}
.detail-attrs--grid .attr-group,
.detail-attrs--grid .attr-group + .attr-group {
margin: 0;
padding: 14px 14px 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
}
.attr-group__title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-soft);
padding: 0 8px 4px;
margin: 0;
}
.attr--static:hover { background: transparent; cursor: default; }
.attr {
display: grid;
grid-template-columns: minmax(118px, max-content) minmax(0, 1fr);
align-items: center;
column-gap: 12px;
min-height: 34px;
padding: 3px 8px;
border-radius: var(--radius-sm);
position: relative;
}
.attr[data-edit] { cursor: text; }
.attr[data-edit]:hover { background: var(--hover); }
.attr__label {
font-size: 12.5px;
color: var(--text-muted);
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.attr__value {
font-size: 13.5px;
color: var(--text);
min-width: 0;
overflow-wrap: anywhere;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.attr__value[data-tags] { gap: 5px; }
.attr__value a { color: var(--tuerkis); }
.attr__empty { color: var(--text-soft); font-style: normal; }
.attr[data-edit]:hover .attr__empty::after {
content: "";
}
.attr--readonly:hover { background: transparent; cursor: default; }
/* Inline-Editor (vom JS eingesetzt) */
.attr-editor { display: flex; align-items: center; gap: 6px; width: 100%; }
.attr-editor input, .attr-editor textarea, .attr-editor select { width: 100%; }
.attr-editor textarea { min-height: 60px; }
.attr.is-editing { background: transparent; }
.attr.is-saving { opacity: .55; }
/* ---------- Aktivität: Composer, Tabs, Timeline ---------- */
.composer { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.composer__input { width: 100%; min-height: 66px; }
.composer__foot { display: flex; align-items: center; justify-content: flex-end; }
.tabs {
display: inline-flex;
gap: 2px;
margin: 14px 0 4px;
padding: 3px;
background: var(--surface-2);
border-radius: var(--radius-sm);
}
.tabs button {
padding: 5px 12px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.tabs button:hover { color: var(--text); }
.tabs button.is-active { background: var(--surface); color: var(--navy); box-shadow: var(--shadow-card); }
.timeline { list-style: none; margin: 10px 0 0; padding: 0; }
.timeline__item {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 12px 0;
border-top: 1px solid var(--border);
font-size: 13.5px;
overflow-wrap: anywhere;
}
.timeline__item:first-child { border-top: none; }
.timeline__body { min-width: 0; flex: 1; }
.timeline__meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 5px;
font-size: 12px;
color: var(--text-soft);
}
.timeline__meta time { color: var(--text-soft); }
.timeline__system { color: var(--text-muted); }
.timeline__system strong { color: var(--text); font-weight: 600; }
.note__text { color: var(--text); line-height: 1.55; }
.note__edited { color: var(--text-soft); }
.note__actions { display: inline-flex; gap: 8px; margin-left: 4px; opacity: 0; transition: opacity .12s ease; }
.timeline__item:hover .note__actions { opacity: 1; }
.note__actions button {
border: none;
background: transparent;
color: var(--text-muted);
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 0;
}
.note__actions button:hover { color: var(--tuerkis); }
.note__actions button[data-note-delete]:hover { color: var(--pink); }
.note-edit { display: flex; flex-direction: column; gap: 8px; }
.note-edit textarea { width: 100%; min-height: 60px; }
.note-edit__foot { display: flex; align-items: center; gap: 8px; }
.actor-chip {
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font: 600 12px/1 var(--font-body);
box-shadow: 0 0 0 2px #FFFFFF, 0 1px 2px rgba(0,0,0,.10);
}
.actor-chip--jasmin { background: var(--navy); }
.actor-chip--karl { background: var(--tuerkis); }
/* ---------- Einstellungen — Auswahllisten ---------- */
.settings-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: start;
}
/* V19b: Anker-Menü über den Einstellungen — jeder Bereich direkt anspringbar;
scroll-margin sorgt für Luft beim Anspringen. */
.einst-anker { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 18px; }
.einst-anker__chip {
font-size: 12.5px; padding: 4px 12px; border: 1px solid var(--border);
border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--text-muted);
}
.einst-anker__chip:hover { border-color: var(--tuerkis); color: var(--text); }
.settings-card { scroll-margin-top: 14px; }
/* V19b (Jasmin): die generische .card+.card-Abstandsregel schob im Grid jede
Karte außer der ersten 18px nach unten — im Grid macht das gap den Abstand. */
.settings-grid > .card + .card { margin-top: 0; }
.settings-card__head { margin-bottom: 12px; }
.settings-card__title { margin: 0 0 3px; }
.settings-card__hint { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.option-list { list-style: none; margin: 0 0 14px; padding: 0; }
.option-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 8px 4px;
border-bottom: 1px solid var(--border);
}
.option-row:last-child { border-bottom: none; }
.option-row--inactive { opacity: .5; }
.option-row--empty { justify-content: center; }
.option-edit {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.option-preview { flex-shrink: 0; }
.option-edit__label { flex: 1; min-width: 90px; }
.option-toggle { flex-shrink: 0; }
.option-del { display:inline-flex; }
.option-del__btn { min-width: 34px; }
.option-toggle__btn { min-width: 62px; }
.option-add {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding-top: 6px;
border-top: 1px solid var(--border);
}
.option-add__label { flex: 1; min-width: 120px; }
/* Farbwahl-Radios (Einstellungen): echte Farb-Punkte statt roher Radios */
.colorpick { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.colorpick__item { display: inline-flex; cursor: pointer; line-height: 0; }
.colorpick__item input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.colorpick__dot {
width: 20px; height: 20px;
border: 2px solid transparent;
border-radius: 50%;
box-sizing: border-box;
}
.colorpick__item input:checked + .colorpick__dot { border-color: var(--navy); }
.colorpick__item input:focus-visible + .colorpick__dot { outline: 2px solid var(--tuerkis); outline-offset: 2px; }
/* Kräftiger Farb-Punkt (nicht der weiche Pill-Grund) */
.colorpick__dot.pill--grau { background: var(--p-grau-fg); }
.colorpick__dot.pill--tuerkis { background: var(--tuerkis); }
.colorpick__dot.pill--navy { background: var(--navy); }
.colorpick__dot.pill--gelb { background: var(--gelb); }
.colorpick__dot.pill--gruen { background: #1F9D6B; }
.colorpick__dot.pill--blau { background: #2E77C2; }
.colorpick__dot.pill--amber { background: #D98A1F; }
.colorpick__dot.pill--rot { background: #E5484D; }
/* ---------- Neuer-Kontakt-Panel / Formular ---------- */
.panel-wrap { max-width: 640px; }
.card--form { margin-top: 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label {
display: block;
margin-bottom: 5px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
.field input, .field select { width: 100%; }
.form-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.form-narrow { max-width: 560px; }
/* ---------- Pagination ---------- */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 18px;
font-size: 13px;
color: var(--text-muted);
}
/* ---------- Leerer Zustand ---------- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 52px 24px;
text-align: center;
color: var(--text-muted);
}
.empty-state h2 { color: var(--text); }
/* ---------- Cmd-K Schnellsuche-Modal ---------- */
.cmdk-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
background: rgba(0,0,0,.30);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.cmdk {
width: 560px;
max-width: calc(100vw - 32px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.cmdk__head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
}
.cmdk__head svg { width: 17px; height: 17px; color: var(--text-soft); flex-shrink: 0; }
.cmdk__input {
flex: 1;
border: none;
height: auto;
padding: 0;
font-size: 15px;
background: transparent;
}
.cmdk__input:focus { box-shadow: none; outline: none; }
.cmdk__hint { font-size: 11px; color: var(--text-soft); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.cmdk__results { max-height: 340px; overflow-y: auto; padding: 6px; }
.cmdk__item {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 8px 10px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
text-align: left;
cursor: pointer;
}
.cmdk__item:hover, .cmdk__item.is-active { background: var(--hover); }
.cmdk__item-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.cmdk__item-sub { font-size: 12px; color: var(--text-soft); }
.cmdk__empty { padding: 24px; text-align: center; color: var(--text-soft); font-size: 13px; }
/* ---------- Toasts ---------- */
#toast-host {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 300;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: 9px;
min-width: 200px;
max-width: 360px;
padding: 10px 14px;
border-radius: var(--radius-sm);
background: var(--navy-deep);
color: #FFFFFF;
font-size: 13px;
font-weight: 500;
/* Tiefer Schatten + feiner türkiser Akzentbalken links. */
box-shadow: var(--shadow-lg), inset 3px 0 0 0 var(--tuerkis);
pointer-events: auto;
opacity: 0;
transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease;
}
.toast.is-in { opacity: 1; transform: translateY(0); }
.toast--ok { background: var(--navy-deep); }
.toast--fehler { background: var(--pink); box-shadow: var(--shadow-lg), inset 3px 0 0 0 rgba(255,255,255,.85); }
.toast__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tuerkis); flex-shrink: 0; }
.toast--fehler .toast__dot { background: #FFFFFF; }
/* ---------- Login ---------- */
body.login-page {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
/* Ruhige, flache Apple-Bühne. */
background: var(--bg);
}
.login-card {
width: 380px;
max-width: 100%;
padding: 36px 34px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
/* V11: Jasmins Logo über dem Titel — im Dunkelmodus auf weißer Platte (Logo-Farben sind dunkel). */
.login-card__logo { display: block; width: 220px; height: auto; margin: 0 auto 14px; }
.login-card h1 { font-size: 28px; margin-bottom: 6px; }
.login-card h1 span { color: var(--tuerkis); }
.login-card p { margin: 0 0 18px; color: var(--text-muted); }
.login-card form { display: flex; flex-direction: column; gap: 13px; }
.login-card input { width: 100%; height: 38px; }
.login-card .btn { width: 100%; height: 38px; }
/* ---------- Flash (serverseitig, POST→Redirect) ---------- */
.flash {
padding: 11px 15px;
margin-bottom: 16px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-size: 13.5px;
transition: opacity .5s ease;
}
.flash--ok { background: var(--p-tuerkis-bg); border-color: #C6E7E5; color: #04605C; }
.flash--fehler { background: var(--p-rot-bg); border-color: #F4C9CB; color: #B5363B; }
.flash--hide { opacity: 0; }
/* ============================================================
V3 — Pipeline (Kanban), Aktivitäts-Arten, Dokumente
Attio-Ruhe: feine Linien, weiche Grundtöne, farbige Stage-Pills.
Pink ausschließlich für Verloren / Löschen / Fehler.
Kanban-Motor generisch (später für Aufgaben wiederverwendbar).
============================================================ */
/* ---------- Pipeline-Kopf: Summenzeile ---------- */
.pipeline-summary {
display: flex;
align-items: stretch;
gap: 0;
flex-wrap: wrap;
margin-bottom: 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.pipeline-summary__item {
display: flex;
flex-direction: column;
gap: 3px;
padding: 12px 20px;
min-width: 150px;
border-right: 1px solid var(--border);
}
.pipeline-summary__item:last-child { border-right: none; }
.pipeline-summary__label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-soft);
}
.pipeline-summary__value {
font-family: var(--font-head);
font-weight: 700;
font-size: 19px;
line-height: 1.2;
color: var(--navy);
font-variant-numeric: tabular-nums;
}
.pipeline-summary__value--gruen { color: var(--p-gruen-fg); }
/* ---------- Kanban-Board ---------- */
/* V4/V8.3: Grid über die volle Breite — ALLE Stages nebeneinander. Passt es
nicht (z. B. 1280px-Laptop mit ausgeklappter Sidebar), scrollt das Board
horizontal statt in zwei Zeilen umzubrechen (auto-flow column). */
.kanban {
display: grid;
grid-auto-flow: column;
/* V21f (Jasmin, 16-Zoll-Check): Spalten quetschen sich nicht mehr unter
260px — das Board scrollt stattdessen horizontal (wie bei den Aufgaben). */
grid-auto-columns: minmax(260px, 1fr);
gap: 12px;
width: 100%;
align-items: start;
padding-bottom: 12px;
overflow-x: auto;
}
.kanban-col {
display: flex;
flex-direction: column;
min-width: 0;
max-height: calc(100vh - 190px);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.kanban-col__head {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 11px 13px;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
border-radius: var(--radius) var(--radius) 0 0;
/* V23: Spalte am Kopf greifen und verschieben. */
cursor: grab;
touch-action: pan-y;
}
.kanban-col__head:active { cursor: grabbing; }
.kanban-col__title { cursor: grab; }
/* V23: Geist am Zeiger + Platzhalter (Muster Dashboard-Kacheln). */
.kanban-col--dragging {
box-shadow: 0 16px 40px rgba(20, 30, 50, .22);
opacity: .96;
transform: rotate(1deg);
}
.kanban-col-platz {
border: 2px dashed var(--border);
border-radius: var(--radius);
background: var(--surface-2);
opacity: .5;
}
.kanban-col__meta {
font-size: 12px;
font-weight: 600;
color: var(--text-soft);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.kanban-col__body {
display: flex;
flex-direction: column;
gap: 9px;
min-height: 64px;
padding: 11px;
overflow-y: auto;
flex: 1 1 auto;
transition: background .14s ease;
}
/* Dropzone-Highlight beim Ziehen (türkis, ruhig) — weicher Innenschein
statt harter Kante. */
.kanban-col--over .kanban-col__body {
background: var(--p-tuerkis-bg);
box-shadow: inset 0 0 0 1px rgba(1,160,154,.26), inset 0 0 22px rgba(1,160,154,.14);
}
/* Leere Spalte: dezente Dropzone-Hinweisfläche */
.kanban-col__body:empty::after {
content: "Deals hierher ziehen";
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
border: 1px dashed var(--border-strong);
border-radius: var(--radius-sm);
color: var(--text-soft);
font-size: 12px;
text-align: center;
padding: 8px;
}
.kanban-col__add {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 9px 13px;
border: none;
border-top: 1px solid var(--border);
border-radius: 0 0 var(--radius) var(--radius);
background: transparent;
color: var(--text-soft);
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: background .14s ease, color .14s ease;
}
.kanban-col__add:hover { background: var(--hover); color: var(--tuerkis); }
/* ---------- Kanban-Karte ---------- */
.kanban-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 11px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-card);
cursor: grab;
user-select: none;
transition: border-color .14s ease, box-shadow .14s ease, transform .12s ease;
overflow-wrap: break-word;
}
.kanban-card:hover { border-color: var(--border-strong); }
.kanban-card:hover:not(.kanban-card--dragging) { box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* V16: Erledigte Aufgaben treten optisch zurück — heller statt durchgestrichen,
beim Überfahren wieder voll lesbar. Wirkt in beiden Themes (Opacity).
V17 (Jasmin): dasselbe für abgeschlossene Deals (Gewonnen/Verloren). */
.kanban-col[data-status="erledigt"] .kanban-card,
.kanban-col[data-stage="gewonnen"] .kanban-card,
.kanban-col[data-stage="verloren"] .kanban-card { opacity: .5; }
.kanban-col[data-status="erledigt"] .kanban-card:hover,
.kanban-col[data-stage="gewonnen"] .kanban-card:hover,
.kanban-col[data-stage="verloren"] .kanban-card:hover,
.kanban--select .kanban-col .kanban-card.is-selected { opacity: 1; }
.kanban-card:active { cursor: grabbing; }
.kanban-card__title {
font-family: var(--font-head);
font-weight: 600;
font-size: 13.5px;
line-height: 1.3;
color: var(--navy);
overflow-wrap: anywhere;
}
.kanban-card__contact {
font-size: 12.5px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kanban-card__foot {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 1px;
}
.kanban-card__value {
font-weight: 700;
font-size: 13px;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.kanban-card__due {
font-size: 12px;
color: var(--text-soft);
font-variant-numeric: tabular-nums;
}
.kanban-card__due.date--overdue { color: var(--pink); font-weight: 600; }
/* Drag-Zustände */
.kanban-card--dragging {
opacity: .55;
transform: rotate(1.5deg);
box-shadow: var(--shadow-lg);
}
/* ---------- Aktivitäts-Arten: Composer-Umschalter ---------- */
.composer__arten {
display: inline-flex;
gap: 2px;
padding: 3px;
background: var(--surface-2);
border-radius: var(--radius-sm);
width: max-content;
max-width: 100%;
flex-wrap: wrap;
}
.art-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background .12s ease, color .12s ease;
}
.art-btn:hover { color: var(--text); }
.art-btn.is-active { background: var(--surface); color: var(--navy); box-shadow: var(--shadow-card); }
.art-btn .art-icon { color: currentColor; }
/* ---------- Aktivitäts-Icons (Timeline + Composer) ---------- */
.art-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
flex-shrink: 0;
color: var(--text-soft);
}
.art-icon svg { width: 15px; height: 15px; display: block; }
/* Timeline-Marker: runder Grund je Art, ruhige Brand-Töne */
.timeline__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
background: var(--surface-2);
color: var(--text-muted);
}
.timeline__icon svg { width: 14px; height: 14px; display: block; }
.timeline__icon--call { background: var(--p-tuerkis-bg); color: var(--p-tuerkis-fg); }
.timeline__icon--meeting { background: var(--p-navy-bg); color: var(--p-navy-fg); }
.timeline__icon--email { background: var(--p-blau-bg); color: var(--p-blau-fg); }
.timeline__icon--notiz { background: var(--surface-2); color: var(--text-muted); }
/* ---------- Dokumente-Abschnitt ---------- */
.docs { display: flex; flex-direction: column; gap: 10px; }
.docs__list { list-style: none; margin: 0; padding: 0; }
.doc {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 4px;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.doc:last-child { border-bottom: none; }
.doc__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--text-muted);
}
.doc__icon svg { width: 14px; height: 14px; display: block; }
.doc__icon--lexoffice { background: var(--p-navy-bg); color: var(--p-navy-fg); }
.doc__icon--google { background: var(--p-gelb-bg); color: var(--p-gelb-fg); }
.doc__icon--sonstige { background: var(--surface-2); color: var(--text-muted); }
.doc__link {
flex: 1;
min-width: 0;
color: var(--tuerkis);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.doc__del {
flex-shrink: 0;
width: 22px;
height: 22px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-soft);
font-size: 15px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.doc:hover .doc__del { opacity: 1; }
.doc__del:hover { background: var(--p-rot-bg); color: var(--pink); }
.doc-add {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding-top: 4px;
}
.doc-add input[name="label"] { flex: 1 1 130px; min-width: 0; }
.doc-add input[name="url"] { flex: 2 1 180px; min-width: 0; }
.doc-add select { flex: 0 0 auto; }
/* ============================================================
V4 — Feinschliff: Spalten-Toggle, Bulk-Leiste, Typeahead
============================================================ */
/* ---------- Spalten ein-/ausblenden (Kontaktliste) ---------- */
.col-hidden { display: none !important; }
.popover--cols { min-width: 200px; padding: 8px; }
.cols-item {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 8px;
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--text);
cursor: pointer;
user-select: none;
}
.cols-item:hover { background: var(--hover); }
.cols-item input {
width: 15px;
height: 15px;
margin: 0;
flex-shrink: 0;
accent-color: var(--tuerkis);
}
/* ---------- Bulk-Auswahl: Checkbox-Spalte + Leiste ---------- */
.table th.col-check,
.table td.col-check { width: 36px; padding: 0 2px 0 12px; }
.col-check input {
width: 15px;
height: 15px;
margin: 0;
display: block;
cursor: pointer;
accent-color: var(--tuerkis);
}
.bulkbar {
position: sticky;
bottom: 14px;
z-index: 50;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.bulkbar__count {
font-size: 13px;
font-weight: 700;
color: var(--navy);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.bulkbar select { max-width: 180px; }
.bulkbar__label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
/* V22: gewählte Labels der Massenänderung als Pillen neben dem Wähler. */
.bulkbar__tags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* V16: Auswahl-Modus auf den Kanban-Boards — Kreis oben rechts je Karte,
ausgewählte Karten bekommen Haken + Türkis-Ring. */
.kanban--select .kanban-card { cursor: pointer; position: relative; }
.kanban--select .kanban-card::after {
content: '';
position: absolute; top: 8px; right: 8px;
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid var(--border-strong);
background: var(--surface);
font-size: 12px; line-height: 15px; text-align: center; font-weight: 700;
}
.kanban--select .kanban-card.is-selected { outline: 2px solid var(--tuerkis); outline-offset: 1px; }
/* V22: im Auswahl-Modus zählt „alle wählen" — die Ausblenden-Werkzeuge des
Spaltenkopfs weichen so lange (die Bulk-Leiste kann das ohnehin). */
.kanban--select .kanban-col__tool[data-hide-done],
.kanban--select .kanban-col__tool[data-show-done] { display: none; }
.kanban--select .kanban-card.is-selected::after {
content: '✓';
color: #fff; background: var(--tuerkis); border-color: var(--tuerkis);
}
.bulkbar__note {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 260px;
min-width: 200px;
}
.bulkbar__note input,
.bulkbar__note textarea { flex: 1; min-width: 0; }
/* V17: zweite Untergruppe in einer Karten-Spalte (Adresse → Firma). */
.subsection--folgend { margin-top: 18px; }
/* V17: Erledigte aus-/einblenden — Auge auf der Karte, Werkzeuge im Spaltenkopf. */
.task-hide {
margin-left: auto;
border: 0; background: transparent; padding: 2px;
color: var(--text-soft); cursor: pointer; line-height: 0; border-radius: 6px;
}
.task-hide:hover { color: var(--text); background: var(--hover); }
.kanban-card--verborgen { border-style: dashed; }
.kanban-col__tool {
border: 0; background: transparent; padding: 0 2px;
font-size: 11.5px; color: var(--text-soft); cursor: pointer; text-decoration: none;
}
.kanban-col__tool:hover { color: var(--text); text-decoration: underline; }
/* V18: Spalte zuklappen — Chevron im Kopf; zugeklappt bleiben Kopf +
Hinweiszeile, Karten und Quick-Add verschwinden. */
.kanban-col__zu {
border: 0; background: transparent; padding: 2px;
color: var(--text-soft); cursor: pointer; line-height: 0; border-radius: 6px;
}
.kanban-col__zu:hover { color: var(--text); background: var(--hover); }
.kanban-col__zu svg { transition: transform .15s ease; }
.kanban-col--zu .kanban-col__zu svg { transform: rotate(-90deg); }
.kanban-col--zu .kanban-col__body,
.kanban-col--zu .kanban-col__add,
.kanban-col--zu .kanban-quickadd { display: none; }
.kanban-col--zu { cursor: pointer; max-height: none; }
.kanban-col--zu::after {
content: attr(data-zu-info);
display: block;
padding: 10px 12px 12px;
font-size: 12px;
color: var(--text-soft);
text-align: center;
}
/* ---------- V16: Automatisierungen-Seite ---------- */
.automatik-intro { margin: -6px 0 18px; font-size: 13.5px; max-width: 720px; }
.auto-liste { display: grid; gap: 14px; }
.auto-zeile { border-top: 1px solid var(--border); padding-top: 12px; }
.auto-zeile:first-child { border-top: 0; padding-top: 0; }
.auto-zeile__kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.auto-zeile__text { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); max-width: 720px; }
.auto-zeile__meta { margin: 4px 0 0; font-size: 12.5px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
/* V17: Schalter + Fristen-Eingaben + Technik-Erklärung. */
.auto-schalter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.auto-fristen { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.auto-fristen label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.auto-frist { width: 64px; text-align: right; }
.auto-inline { display: inline-flex; align-items: center; gap: 6px; }
.auto-zeile--aktionen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* V18: Wächter — Anstoß-Knopf in der Status-Zeile + Dashboard-Warnung. */
.auto-zeile__meta--status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auto-anstoss { height: 24px; padding: 0 10px; font-size: 12px; }
.auto-warnung {
margin: 0 0 16px;
padding: 10px 14px;
background: var(--p-rot-bg, rgba(255,0,104,.08));
border: 1px solid var(--pink);
border-radius: var(--radius);
font-size: 13.5px;
}
.auto-warnung a { font-weight: 600; }
.auto-warnung__hinweis { color: var(--text-muted); }
.automatik-technik { margin-bottom: 16px; }
.automatik-technik__summary { cursor: pointer; margin-bottom: 0; }
.automatik-technik__text { max-width: 760px; }
.automatik-technik__text p { margin: 8px 0 0; }
/* ---------- V19b: Automatik-Status-Kachel (Übersicht) ---------- */
.auto-status { display: grid; gap: 7px; }
.auto-status__zeile { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; }
.auto-status__punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--text-soft); flex-shrink: 0; align-self: flex-start; margin-top: 5px; }
.auto-status__zeile--gelaufen .auto-status__punkt { background: var(--gruen, #34c759); }
.auto-status__zeile--ausstehend .auto-status__punkt { background: var(--gelb, #f6bc26); }
.auto-status__zeile--verpasst .auto-status__punkt,
.auto-status__zeile--fehler .auto-status__punkt { background: var(--pink); }
.auto-status__label { font-weight: 600; white-space: nowrap; }
.auto-status__text { color: var(--text-muted); font-size: 12.5px; }
.auto-status__zeile--verpasst .auto-status__text,
.auto-status__zeile--fehler .auto-status__text { color: var(--pink); }
.auto-status__zeile--aus { opacity: .55; }
/* V20c: Anstoß direkt aus der Kachel — Knopf rechtsbündig, dezent. */
.auto-status__anstoss { margin-left: auto; flex-shrink: 0; }
.auto-status__wartet { margin-left: auto; flex-shrink: 0; font-size: 11.5px; color: var(--gruen, #34c759); white-space: nowrap; }
.auto-zeile__anstoss-hinweis { color: var(--text-soft); font-size: 12px; }
/* V20c/V21: heutige Kalender-Termine rechts neben dem Gruß (Jasmin). */
.dash-greet__termine { margin: 4px 0 0; font-size: 13px; color: var(--text); text-align: right; max-width: 460px; }
.dash-greet__termine .dash-termin { display: block; line-height: 1.6; }
.dash-termin__zeit { font-weight: 600; color: var(--tuerkis, #01a09a); font-variant-numeric: tabular-nums; }
.dash-termin--mehr, .dash-termin--leer { color: var(--text-muted); }
.dash-termine__label { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.dash-greet__termine .dash-termine__label:first-child { margin-top: 0; }
@media (max-width: 900px) { .dash-greet__termine { text-align: left; max-width: none; } }
/* ---------- V19: Meetings-Übersicht (meetlist-Ersatz) ---------- */
.meet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .meet-grid { grid-template-columns: 1fr; } }
.meet-monate { display: flex; align-items: flex-end; gap: 10px; padding: 6px 2px 0; overflow-x: auto; }
.meet-monat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 34px; }
.meet-monat__wert { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.meet-monat__balken { width: 22px; background: var(--tuerkis); border-radius: 6px 6px 2px 2px; }
.meet-monat__label { font-size: 11px; color: var(--text-soft); white-space: nowrap; }
.meet-ranking { display: grid; gap: 5px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
/* V20b (Jasmin): kompakt und einzeilig — Name | dünner Balken | 28× · 29 % | Datum. */
.meet-rang { display: grid; grid-template-columns: minmax(120px, 170px) 1fr 92px 78px; align-items: center; gap: 10px; }
.meet-gruppe { margin: 10px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft); }
.meet-gruppe:first-of-type { margin-top: 0; }
.meet-gruppe__anzahl { font-weight: 600; color: var(--text-soft); }
.meet-rang__name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meet-rang__balken { height: 6px; background: var(--hover); border-radius: 999px; overflow: hidden; }
.meet-rang__balken span { display: block; height: 100%; background: var(--tuerkis); border-radius: 999px; }
.meet-rang__zahl { font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meet-rang__letzte { font-size: 12px; color: var(--text-soft); text-align: right; font-variant-numeric: tabular-nums; }
.meet-rang__letzte--weg { color: var(--pink); font-weight: 600; }
.meet-liste { display: grid; gap: 0; }
/* V20 (Jasmin): feste Spalten — Datum | 👤n | Art | Titel | Dauer | Teilnehmer,
alles auf einer sauberen Linie. */
.meet-zeile {
display: grid;
grid-template-columns: 80px 44px 132px minmax(180px, 1.2fr) 70px 2fr;
align-items: baseline;
gap: 10px;
padding: 9px 0;
border-top: 1px solid var(--border);
}
.meet-zeile:first-child { border-top: 0; }
@media (max-width: 1100px) { .meet-zeile { grid-template-columns: 80px 44px 1fr 70px; } .meet-zeile__pill, .meet-zeile__leute { display: none; } }
.meet-zeile__datum { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.meet-zeile__titel { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meet-zeile__anzahl { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.meet-zeile__dauer { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.meet-zeile__leute { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.meet-chip { font-size: 12px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); text-decoration: none; }
.meet-chip:hover { border-color: var(--border-strong); }
/* ---------- V16: Aufgaben-Leiste über der Kontakt-Kartei ---------- */
.task-strip { margin-bottom: 16px; padding-top: 14px; padding-bottom: 12px; }
.task-strip__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.task-strip__titel { margin-bottom: 4px; display: flex; align-items: baseline; gap: 10px; }
.task-strip__anzahl { font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--hover); border-radius: 999px; padding: 1px 8px; }
.task-strip__kopf .vorlage-form { margin-top: 0; }
.task-strip__leer { margin: 2px 0 0; font-size: 13px; }
/* Aufgaben fließen platzsparend in Spalten, statt eine lange Liste zu bilden. */
.task-mini-list--strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2px 28px; }
/* ---------- Kontakt-Typeahead ---------- */
.typeahead { position: relative; width: 100%; min-width: 0; }
.typeahead__input { width: 100%; padding-right: 30px; }
.typeahead__clear {
position: absolute;
top: 6px;
right: 5px;
display: none;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--text-soft);
font-size: 14px;
line-height: 1;
cursor: pointer;
}
.typeahead--filled .typeahead__clear { display: inline-flex; }
.typeahead__clear:hover { background: var(--p-rot-bg); color: var(--pink); }
.typeahead__list {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 70;
margin: 0;
padding: 5px;
list-style: none;
max-height: 260px;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.typeahead__item {
display: flex;
flex-direction: column;
gap: 1px;
padding: 7px 9px;
border-radius: var(--radius-sm);
font-size: 13.5px;
color: var(--text);
cursor: pointer;
}
.typeahead__item small { font-size: 12px; color: var(--text-soft); }
.typeahead__item:hover,
.typeahead__item.is-active { background: var(--hover); }
/* ---------- Responsive ---------- */
/* < 1200px: Attribut-Karten wieder einspaltig */
@media (max-width: 1199px) {
.detail-attrs--grid { grid-template-columns: minmax(0, 1fr); }
}
/* < 1200px: Kanban horizontal scrollbar mit fester Spaltenbreite — beide
Boards (V8.3: vorher <1000px/230px; verhindert den Spalten-Umbruch in
zwei Zeilen bei Tablet-Landscape mit Sidebar). Das auto-fit-Grid gilt
erst ab 1200px Viewport. */
@media (max-width: 1199px) {
.kanban {
display: flex;
align-items: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.kanban-col { flex: 0 0 260px; width: 260px; min-width: 260px; }
}
/* < 1100px: optionale Spalten ausblenden
(V4.2: .detail-grid stapelt erst unter 900px — siehe unten) */
@media (max-width: 1099px) {
.col-optional { display: none; }
.main { padding: 22px 22px 56px; }
.settings-grid { grid-template-columns: 1fr; }
}
/* < 760px: Sidebar → Topbar mit Burger-Overlay (V8.2 — löst die frühere
Row-Nav ab); Tabellen bleiben Tabellen und scrollen horizontal in ihren
Karten (V8.2 — der frühere Karten-Stapel ohne Labels entfällt). */
@media (max-width: 759px) {
body.app { flex-direction: column; }
/* Topbar: Brand links, Burger rechts — Nav + Footer erst im Overlay.
Die .sidebar--collapsed-Varianten neutralisieren den Desktop-Zustand
aus localStorage (spätere Regel gleicher Spezifität gewinnt). */
.sidebar, .sidebar--collapsed {
position: static;
width: 100%;
height: auto;
flex-direction: column;
gap: 0;
padding: 6px 14px;
border-right: none;
border-bottom: 1px solid var(--border);
}
.sidebar .sidebar__brand {
width: 100%;
justify-content: space-between;
align-items: center;
padding: 0;
}
.sidebar .sidebar__brand-link { display: block; }
.sidebar .sidebar__toggle { display: inline-flex; width: 40px; height: 40px; }
.sidebar__section, .sidebar__sep { display: none; }
.sidebar .sidebar__nav, .sidebar .sidebar__footer { display: none; }
/* Offenes Overlay (JS toggelt body.mobilenav-open): komplette Nav als
Liste, Untermenüs aufgeklappt, Einstellungen/Papierkorb/Abmelden unten,
Body-Scroll gesperrt. Schließen via Burger, Link-Klick oder Escape. */
body.mobilenav-open { overflow: hidden; }
body.mobilenav-open .sidebar {
position: fixed;
inset: 0;
z-index: 120;
height: 100vh;
overflow-y: auto;
border-bottom: none;
padding: 6px 14px 16px;
}
body.mobilenav-open .sidebar .sidebar__nav {
display: flex;
flex-direction: column;
overflow: visible;
padding: 8px 0 0;
/* V14-Fix: flex-shrink 0 statt 1 — sonst schrumpft die Nav bei kleiner
Viewport-Höhe und ihre Einträge überlappen den Footer. Mit 0 wächst
der Inhalt nach unten und das Overlay scrollt (overflow-y: auto oben). */
flex: 1 0 auto;
}
body.mobilenav-open .sidebar .sidebar__footer {
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
padding: 10px 0 2px;
margin-top: auto;
}
body.mobilenav-open .sidebar .sidebar__user { display: flex; }
body.mobilenav-open .sidebar .nav-sub { display: block; }
.sidebar .nav-item__chev { display: none; } /* Untermenüs sind immer offen */
.sidebar .nav-item--parent { padding-right: 10px; }
.sidebar .nav-item { justify-content: flex-start; padding: 10px; white-space: nowrap; }
.sidebar .nav-item__label { display: inline; }
.sidebar .nav-sub__item { padding: 10px 10px 10px 37px; }
.main, body.sidebar-collapsed .main { margin-left: 0; padding: 16px 14px 48px; }
.form-grid { grid-template-columns: 1fr; }
.cmdk { width: calc(100vw - 24px); }
/* Kanban bleibt horizontal scrollbar — feste 260px-Spalten (SPEC v8.2:
statt 82vw), die nächste Spalte lugt als Scroll-Hinweis herein. */
.kanban-col { flex: 0 0 260px; width: 260px; min-width: 260px; max-height: none; }
.kanban-col__body { max-height: 62vh; }
.pipeline-summary__item { flex: 1 1 45%; min-width: 130px; }
.doc-add input[name="label"], .doc-add input[name="url"] { flex-basis: 100%; }
}
/* ============================================================
V4.1 — Pipeline-Politur + Kundentyp-Farbpunkte
Spalten zart getönt statt bunter Pills; Quelle neutral;
Motivkompass als kräftige Punkte mit hauchdünner Kontur.
============================================================ */
/* ---------- Kanban-Spalten: zarter Flächenton + 2px-Oberkante ----------
Tint = Soft-Pill-Grund, zusätzlich ~45 % Richtung Weiß aufgehellt.
Karten bleiben weiß; deal_move/DOM unverändert (nur Spaltenklasse). */
.kanban-col--grau { --col-tint: #F6F7F8; --col-strong: #5B6079; }
.kanban-col--blau { --col-tint: #F1F6FC; --col-strong: #2E77C2; }
.kanban-col--gelb { --col-tint: #FDF7E7; --col-strong: #F6BC26; }
.kanban-col--navy { --col-tint: #F2F6FB; --col-strong: #053A6D; }
.kanban-col--gruen { --col-tint: #F0F9F5; --col-strong: #1F9D6B; }
.kanban-col--rot { --col-tint: #FDF2F2; --col-strong: #E5484D; }
/* Auch tuerkis/amber sind als Options-Farbe wählbar (Einstellungen). */
.kanban-col--tuerkis { --col-tint: #F0F9F8; --col-strong: #01A09A; }
.kanban-col--amber { --col-tint: #FCF6EC; --col-strong: #C77E16; }
.kanban-col--grau, .kanban-col--blau, .kanban-col--gelb,
.kanban-col--navy, .kanban-col--gruen, .kanban-col--rot,
.kanban-col--tuerkis, .kanban-col--amber {
/* Zarter Verlauf: Tint oben, Richtung unten minimal ausklingend. */
background: linear-gradient(180deg, var(--col-tint) 0%, #FFFFFF 170%);
border-top: 2px solid var(--col-strong);
}
.kanban-col--grau .kanban-col__head,
.kanban-col--blau .kanban-col__head,
.kanban-col--gelb .kanban-col__head,
.kanban-col--navy .kanban-col__head,
.kanban-col--gruen .kanban-col__head,
.kanban-col--rot .kanban-col__head,
.kanban-col--tuerkis .kanban-col__head,
.kanban-col--amber .kanban-col__head {
background: var(--col-tint);
}
/* Stage-Name im Spaltenkopf: keine Pill mehr — neutraler, fetter Text. */
.kanban-col__title {
font-size: 13px;
font-weight: 700;
color: var(--text);
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---------- Neutrale Pill (Quelle auf Deal-Karten) ---------- */
.pill--neutral {
background: var(--surface);
border: 1px solid var(--border-strong);
color: var(--text-muted);
padding: 1px 8px; /* 1px Rahmen → Gesamthöhe wie die farbigen Pills */
}
/* ---------- Kundentyp-Farbpunkte (Motivkompass) ----------
Kräftige Töne mit hauchdünner dunkler Kontur — lesbar auf Weiß. */
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.dot--rot { background: #E5484D; }
.dot--gelb { background: #F6BC26; }
.dot--gruen { background: #1F9D6B; }
.dot--blau { background: #2E77C2; }
.motiv {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 0;
vertical-align: middle;
}
.motiv__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Punkte im Auswahl-Popover: gleiche Optik, Abstand zum Label über gap. */
.optlist__item .dot { flex-shrink: 0; }
/* ---------- Pipeline-Filterzeile (Quelle) ----------
Gleiche Anmutung wie die Kontakte-Toolbar: Select + entfernbarer Chip.
.toolbar / .filter-chip / .filter-chip__x kommen aus V2 und gelten mit.
Der Chip ist hier ein (funktioniert auch ohne JS). */
.pipeline-filter { display: inline-flex; align-items: center; gap: 7px; }
.pipeline-filter__label {
font-size: 12px;
font-weight: 600;
color: var(--text-soft);
}
.pipeline-filter select { max-width: 220px; }
.input--sm { height: 28px; font-size: 12.5px; padding: 4px 9px; }
select.input--sm { padding-right: 24px; }
a.filter-chip, a.filter-chip:hover { text-decoration: none; }
/* ============================================================
V4.2 — Kontaktakte: zwei große Karten statt Einzelkästchen
Die kleinen .attr-group-Karten (.detail-attrs--grid) bleiben
für den Deal-Detail bestehen — hier nur die neuen Blöcke.
============================================================ */
.big-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
padding: 20px 22px;
min-width: 0;
transition: box-shadow .18s ease;
}
.big-card:hover { box-shadow: var(--shadow-md); }
.big-card + .big-card { margin-top: 18px; }
.big-card__title {
font-family: var(--font-head);
font-weight: 600;
font-size: 15px;
color: var(--navy);
margin: 0 0 14px;
}
/* Innenraster: Karte 1 dreispaltig (--3), Karte 2 zweispaltig (Default).
Trennlinien hauchzart zwischen den Spalten, großzügiger Abstand. */
.big-card__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 0;
align-items: start;
}
.big-card__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.big-card__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.big-card__cols > * {
min-width: 0;
padding: 0 18px;
}
.big-card__cols > *:first-child { padding-left: 0; }
.big-card__cols > * + * { border-left: 1px solid var(--border); }
.big-card__cols + .big-card__cols {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.big-card__col { min-width: 0; }
/* Schmalere Label-Spalte in den großen Karten — die Werte brauchen
in den Innen-Spalten den Platz (Basis-.attr hat 118px). */
/* V14: Labels wie „Umsatz gesamt (brutto)" nicht mehr abschneiden. */
.big-card .attr { grid-template-columns: minmax(104px, max-content) minmax(0, 1fr); }
.subsection { min-width: 0; }
.subsection__empty { font-size: 13px; padding: 0 8px; }
.subsection__title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-soft);
margin: 0 0 6px;
padding: 0 8px;
}
/* Fußzeile unter den Karten: eine dezente Textzeile, KEINE Karte. */
.detail-meta,
.detail-meta-footer {
margin: 14px 0 0;
padding: 0 4px;
font-size: 12.5px;
color: var(--text-soft);
}
/* ---------- Responsive V4.1/V4.2 ---------- */
/* < 1600px: drei Innen-Spalten werden zu eng → 2 Spalten,
die dritte Sektion rückt in voller Breite darunter. */
@media (max-width: 1599px) {
.big-card__cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.big-card__cols--3 > *:nth-child(3) {
grid-column: 1 / -1;
border-left: none;
border-top: 1px solid var(--border);
padding: 14px 0 0;
}
}
/* < 1200px: interne Spalten der großen Karten stapeln.
V8.3 (4): Karte 1 (dreispaltig, .big-card__cols--3) bleibt bis 900px
zweispaltig (Regel <1600 oben greift weiter) — erst darunter stapelt
auch sie (eigener Block unten). */
@media (max-width: 1199px) {
.big-card__cols:not(.big-card__cols--3) { grid-template-columns: minmax(0, 1fr); }
.big-card__cols:not(.big-card__cols--3) > * { padding: 0; }
.big-card__cols:not(.big-card__cols--3) > * + * {
border-left: none;
border-top: 1px solid var(--border);
padding-top: 14px;
}
}
/* < 900px: Kontakt-/Deal-Detail komplett einspaltig — jetzt auch die
dreispaltige Karte 1 (V8.3: oberhalb bleibt sie zweispaltig). */
@media (max-width: 899px) {
.detail-grid { grid-template-columns: minmax(0, 1fr); }
.big-card__cols--3 { grid-template-columns: minmax(0, 1fr); }
.big-card__cols--3 > * { padding: 0; }
.big-card__cols--3 > * + *,
.big-card__cols--3 > *:nth-child(3) {
border-left: none;
border-top: 1px solid var(--border);
padding-top: 14px;
}
}
/* ============================================================
V5 — Aufgaben: Listen-Tabs, Task-Karten, Quick-Add, Checkliste,
Abhängigkeiten, Links, Timer, Board-Filter, Kontakt-Aufgaben.
MeisterTask-Ruhe: Farbe nur mit Bedeutung, Pink nur Gefahr.
============================================================ */
/* ---------- Listen-Tabs (Board-Kopf, statt