ist. */
color: inherit;
text-decoration: none;
/* Karten haben FIXE Hoehe (siehe height-Regelwerk ab Zeile ~106). In
flex-Container-Listen (z.B. .app-kanban-column-list, display:flex column)
wuerde flex-shrink:1 (default) die Karten quetschen sobald die Liste
mehr Karten enthaelt als die Lane vertikal aufnimmt — speziell auf
Mobile, wo die Lane eine harte Hoehe hat und in den Liste-Container
reinscrollt statt extern. flex-shrink:0 erzwingt die fixe Hoehe; der
Container scrollt sauber ueber overflow-y. */
flex-shrink: 0;
}
.card-v2:hover {
border-color: var(--lod-darkblue-300);
box-shadow: 0 4px 10px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
}
.card-v2:focus-visible {
outline: none;
box-shadow: var(--lod-shadow-focus, 0 0 0 3px rgba(32, 193, 201, 0.25));
}
.card-v2--active {
border-color: var(--lod-darkblue);
background: var(--lod-gray-50);
}
.card-v2--draggable { cursor: grab; }
.card-v2--draggable:active { cursor: grabbing; }
/* Pending-State: Karte ist gerade in einer laufenden Aktion (API-Write, offenes
Popover mit anstehendem Write). Klicks werden blockiert, optisch leicht
abgeblendet. Wird per Card.setPending(el, true|false) gesteuert. */
.card-v2--pending {
pointer-events: none;
opacity: 0.65;
cursor: wait;
}
.card-v2--pending::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
45deg,
transparent 0 10px,
color-mix(in srgb, var(--lod-darkblue-900) 3%, transparent) 10px 20px
);
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
/* Active-State signalisiert "dieser Datensatz ist gerade
im Drawer offen". Visuell aehnlich zu pending (gleiches Streifen-
Pattern) damit's konsistent zur Quick-Action-Lade-UX ist, aber:
- KEIN Locking (pointer-events bleibt aktiv)
- KEIN Dimming der Karte (opacity bleibt 1)
- dezenteres Pattern (geringere Stripe-Deckkraft), damit's nicht mit
einer aktiv-laufenden API-Aktion verwechselt wird. */
.card-v2--active::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
45deg,
transparent 0 10px,
color-mix(in srgb, var(--lod-darkblue-900) 3%, transparent) 10px 20px
);
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
/* Falls beide States gleichzeitig auftreten (z.B. Quick-Action waehrend
Drawer offen): pending hat Vorrang (Locking + Dimming), das aktive
Stripe-Pattern wird durch das pending-Pattern ueberlagert. */
/* ──────────────────────────────────────────────────────────────────── */
/* Size-Varianten */
/* ──────────────────────────────────────────────────────────────────── */
/*
* Karten-Hoehen-Regelwerk:
* - Pro Ansicht-Variante FIXE Hoehe (height, nicht min-height) — alle
* Karten in der gleichen Liste sind gleich hoch. Kein Wachsen/Schrumpfen.
* - Body-Inhalte mit klaren Truncation-Regeln (Title 2 Zeilen line-clamp,
* Subtitle 1 Zeile ellipsis). Was nicht passt, wird abgeschnitten —
* keine wachsenden Karten.
* - Auf Mobile wird die Hoehe reduziert (siehe Mobile-Block am Ende),
* bleibt aber innerhalb der Breakpoint-Schwelle einheitlich.
*
* Default (Workspace, Mein-Tag, generische Listen): 180px fix.
* Compact (Kanban-Lanes): 148px fix.
*/
/* .card-v2-Default-Hoehe ist mit dem Container-Block oben konsolidiert. */
/* compact — Kanban-Style, 148px fix, gruene Fluent-Kanten (8px), border-left
wird ueber --card-app-accent-color (fallback --kanban-column-accent) gesteuert.
--kanban-column-accent wird von KanbanColumn an der Spalte gesetzt; wenn keine
explizite Farbe am Element, greift die Spalten-Farbe. */
.card-v2--compact {
height: 148px;
padding: var(--space-2-5) var(--space-3) var(--space-2-5) var(--space-3-5);
border-radius: var(--radius-lg);
border-left: 4px solid var(--card-app-accent-color, var(--kanban-column-accent, var(--lod-gray-300)));
gap: var(--space-1-5);
}
.card-v2--compact.card-v2:hover {
box-shadow: var(--lod-shadow-md, 0 4px 10px rgba(15,46,72,.12));
transform: translateY(-1px);
}
/* compact hat eigene Actions-Position (6px statt 8px) + kleiner. */
.card-v2--compact .card-app-actions {
top: 6px; right: 6px;
padding: var(--space-xxs);
border: 1px solid var(--lod-gray-200);
box-shadow: 0 2px 6px color-mix(in srgb, var(--lod-darkblue-900) 8%, transparent);
background: var(--color-surface);
border-radius: var(--radius-lg);
gap: 0;
}
.card-v2--compact .card-app-action { width: 24px; height: 24px; border-radius: 5px; }
.card-v2--compact .card-app-action:hover { background: var(--lod-gray-50); }
.card-v2--compact .card-app-action:focus-visible {
outline: none; background: var(--lod-darkblue-100);
}
.card-v2--compact .card-app-action img { opacity: 0.6; }
.card-v2--compact .card-app-action:hover img { opacity: 0.9; }
.card-v2--compact .card-app-action--danger:hover {
background: color-mix(in srgb, var(--lod-danger) 12%, #fff);
}
.card-v2--compact .card-app-action--danger:hover img {
filter: brightness(0) saturate(100%) invert(28%) sepia(89%) saturate(2200%) hue-rotate(342deg) brightness(95%) contrast(95%);
opacity: 1;
}
/* Erste @media (max-width:999px)-Block entfernt — Inhalte
konsolidiert in den finalen Mobile-Block am Ende dieser Datei. */
/* ──────────────────────────────────────────────────────────────────── */
/* compact Sub-Elemente (ehem. .app-kanban-card-*). */
/* Generische Namen — nutzbar auch fuer andere kompakte Karten. */
/* ──────────────────────────────────────────────────────────────────── */
/* ID-Pill im Header (Aufgaben-Nr, Ticket-Nr, ...): Mono-Font, klein, grau.
white-space: nowrap weil die Aufgaben-Nr ("A-1006598") sonst in schmalen
Kanban-Lanes umbricht. */
.card-app-id {
font-family: var(--lod-font-mono, monospace);
font-size: var(--fs-badge);
color: var(--lod-gray-500);
font-weight: var(--fw-medium);
white-space: nowrap;
flex-shrink: 0;
}
/* Klickbare ID-Pille — kopiert Deep-Link.
Klick + Hover-Effekt. button-Element zuruecksetzen, aber Schrift-Eigenschaften
der .card-app-id explizit erzwingen (sonst wuerde font:inherit den 11px-mono-
Stil ueberschreiben → ID waere groesser/serif). */
button.card-app-id {
appearance: none;
background: transparent;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
/* Schrift wie span.card-app-id (NICHT inherit von Karte). */
font-family: var(--lod-font-mono, monospace);
font-size: var(--fs-badge);
font-weight: var(--fw-medium);
color: var(--lod-gray-500);
line-height: inherit;
}
button.card-app-id.is-clickable:hover {
color: var(--lod-darkblue);
text-decoration: underline;
text-underline-offset: 2px;
}
button.card-app-id.is-clickable:focus-visible {
outline: 2px solid var(--brand-default, var(--lod-turquoise));
outline-offset: 2px;
border-radius: var(--radius-xxs);
}
/* Optionaler Prio-Dot vor dem ID-Text (genutzt bei
AnfrageCard-Compact im Mein Tag — Anfragen haben den SLA-Akzent links,
daher braucht die Prio einen sekundaeren Indikator inline). */
.card-app-id.has-prio-dot {
display: inline-flex;
align-items: center;
gap: 5px;
}
.card-app-id .prio-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.card-app-id.prio-dot-hoch .prio-dot { background: var(--status-danger-fg); }
.card-app-id.prio-dot-niedrig .prio-dot { background: var(--lod-gray-400); }
/* Typ-Icon vor der ID (Anfrage-Typ: Frage/Problem/Anforderung).
Icon statt Glyph-Char fuer klare visuelle Trennung. */
.card-app-id.has-typ-icon {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.card-app-id .typ-icon {
flex-shrink: 0;
opacity: 0.7;
/* Icon ist 12px, leicht gedaempft, Farbe per Hue-Filter pro Typ. */
}
.card-app-id.typ-frage .typ-icon { /* neutral, default-grau */ }
.card-app-id.typ-problem .typ-icon {
/* leicht roeter Hue, damit Problem visuell als "Achtung" erkennbar ist */
filter: brightness(0) saturate(100%) invert(28%) sepia(89%) saturate(2200%) hue-rotate(342deg) brightness(95%) contrast(95%);
opacity: 0.85;
}
.card-app-id.typ-anforderung .typ-icon {
/* leicht goldener Hue fuer "Idee/Anforderung" */
filter: brightness(0) saturate(100%) invert(56%) sepia(67%) saturate(454%) hue-rotate(7deg) brightness(94%) contrast(89%);
opacity: 0.9;
}
/* Fakturierbar-Pille im Header (Mein-Tag-only — opts.
showFakturierbar in AufgabeCard). Subtiler tuerkiser Indikator links neben
der Status-Pille, dass die Aufgabe fakturierbar ist. €-Glyph statt Wort,
um wenig Platz zu fressen. */
/* .card-app-fakt erbt Hoehe + Padding aus der
* gemeinsamen Header-Pill-Spec (s. unten "Default Header" / "Compact
* Header"). Hier nur noch Farbe, Border-Radius und Layout. min-width
* wird aus der Pill-Spec (height) implizit klein gehalten — wir setzen
* nur einen Mindest-Tap-Wert, damit das €-Glyph nicht enger als die
* Status-Pille wird. */
.card-app-fakt {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: var(--fw-semibold);
background: var(--lod-turquoise-100);
color: var(--lod-turquoise-900);
border-radius: var(--radius-sm);
flex-shrink: 0;
}
/* Inline-Heute-Buchung als gruener Suffix am Zeit-Stat
(Mein-Tag-only — opts.heuteGebuchtInline in AufgabeCard). Ersetzt die
separate "X heute gebucht"-Zeile im 120px-Compact-Layout. */
.card-app-heute-inline {
margin-left: var(--space-1);
color: var(--color-success-strong);
font-weight: var(--fw-semibold);
}
/* ─────────────────────────────────────────────────────────────────
Entity-Differentation
Eindeutige Farb-Identifier pro Entitaets-Typ (Anfragen und Aufgaben waren
zu nah beieinander, beide blaeulich). Neue Palette:
- Aufgaben (.mt-aufg-card): Violet (kuehl) — in mein-tag.css
- Anfragen (.anfr-card-app): Orange/Akzent (warm-Aktion)
- VK (.vk-card-app): Turquoise (frisch-gruenlich)
- Leads (.vt-card-lead): Pink/Koral (warm, Leadgenerierung)
- Projekte (.pj-card-app): DarkBlue (Kern-System)
- Kontingente (.kont-card-app): Gray (neutral, Buchungen)
- Wissen (.wissen-card-app): Gold (Wissen=Wert)
Akzent-Stripe links bleibt durch die Karte selbst gesetzt (Prio /
SLA / Phase) — der Background-Tint ist nur ein subtiler Identifier.
Hochwertigkeits-Pattern: zweischichtiger Hintergrund —
diagonal Gradient (135deg) als Basis + dezenter radialer Lichteinfall
oben rechts. Wirkt edler als ein flacher rechts-Verlauf.
───────────────────────────────────────────────────────────────── */
/* Anfragen: Akzent-Orange (warm) — klar abgegrenzt von Aufgaben (Violet)
und VK (Turquoise). 8% Tint plus radial-Highlight. */
.card-v2.anfr-card-app {
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--lod-accent) 14%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
color-mix(in srgb, var(--lod-accent) 10%, #fff) 0%,
color-mix(in srgb, var(--lod-accent) 4%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
/* VK: Turquoise — frisch, gruenlich, signalisiert "Chance/Pipeline". */
.card-v2.vk-card-app {
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--lod-turquoise-100) 80%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
var(--lod-turquoise-100) 0%,
color-mix(in srgb, var(--lod-turquoise-100) 30%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
/* Leads (.vt-card-lead): warmes Koral/Pink — abgegrenzt von VK-Turquoise
damit Lead-Status (Pre-VK) auf einen Blick erkennbar ist. */
.card-v2.vt-card-lead {
/* Lead-Karten haben eine Content-Zeile mehr als VK-Karten (Person-Subtitle
+ Quelle/Branche-Detail-Row zusaetzlich zu Titel + Firma + Footer).
Default-Hoehe 180px schneidet den Footer ab → eigene Hoehe. */
height: 220px;
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--sla-warn) 14%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
color-mix(in srgb, var(--sla-warn) 9%, var(--color-surface)) 0%,
color-mix(in srgb, var(--sla-warn) 3%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
/* Projekte: DarkBlue (Kern-System-Farbe) — Projekt ist die Hierarchie-
Spitze, Aufgaben/Anfragen/VK gehoeren hinein. */
.card-v2.pj-card-app {
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--lod-darkblue-100) 70%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
var(--lod-darkblue-50) 0%,
color-mix(in srgb, var(--lod-darkblue-50) 35%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
/* Kontingente: Gray-Tint (neutral, Buchungen sind nicht emotional). */
.card-v2.kont-card-app {
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--lod-gray-100) 80%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
var(--lod-gray-50) 0%,
color-mix(in srgb, var(--lod-gray-50) 30%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
/* Abrechnung: Darkblue-Tint (Core-/Finanz-Feel, wie Projekt). Projekt-Monats-
Aggregation — gleiche Tonalität wie pj-card-app, etwas dezenter. */
.card-v2.abr-card-app {
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--lod-darkblue-100) 60%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
color-mix(in srgb, var(--lod-darkblue-50) 50%, var(--color-surface)) 0%,
color-mix(in srgb, var(--lod-darkblue-50) 25%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
/* Wissen: Gold/Yellow-Hauch — Wissen ist Wert. Nutzt --lod-warning
(#C98A1A) mit dezentem Mix, plus radialer Highlight.
Mix-Prozente reduziert von 12/9/3 auf 6/4/2 —
das Goldbraun wirkte zu dominant. Akzent bleibt erkennbar, aber
subtiler. */
.card-v2.wissen-card-app {
background:
radial-gradient(circle at 95% 0%,
color-mix(in srgb, var(--lod-warning) 6%, transparent) 0%,
transparent 45%),
linear-gradient(135deg,
color-mix(in srgb, var(--lod-warning) 4%, #fff) 0%,
color-mix(in srgb, var(--lod-warning) 2%, var(--color-surface)) 40%,
var(--color-surface) 100%);
}
/* Titel-Variante fuer compact: 2-Zeilen-Clamp, min-height reservieren */
.card-v2--compact .card-app-title {
font-size: var(--font-size-base);
font-weight: var(--fw-medium);
color: var(--lod-gray-900);
line-height: 1.35;
-webkit-line-clamp: 2;
min-height: calc(1.35em * 2);
word-break: break-word;
}
/* compact Header: inline-row mit Pills + Spacer.
Badge-Groessen vereinheitlicht — Aufgabe nutzte
.pill/.pill-tag (10px), Anfrage+VK nutzten .aufgabe-status-badge/.badge/
.fk-datum-badge (11px aus base.css). Jetzt alle gleich.
NAMING-NOTIZ:
- .pill / .pill-tag / .badge / .card-app-badge — neue Konvention via
CardHeader.build SSOT.
- .aufgabe-status-badge — Legacy-Klasse, noch genutzt in anfragen.js
(statusBadgeShortHtml, Workspace-Counter) und mein-bereich.js (Antraege).
Wird hier weiter unterstuetzt, sodass Karten konsistent aussehen
wenn diese Konsumenten ohne Migration bleiben. Migrationsziel ist
`pill status-*`.
- .fk-datum-badge — kommt aus base.css (Datum-Pille mit kind:rot/heute),
wird von CardHeader.datumBadge gerendert. Bleibt eigene Klasse, weil
sie auch ausserhalb von Karten genutzt wird (z.B. Drawer-Header). */
/*
* - Vertikales Beschneiden behoben durch +2px Hoehe und +1px Padding.
* - Compact 18→20px, Default 22→24px. Header min-height entsprechend
* mitgezogen (siehe weiter unten).
* - line-height bleibt 1.4 (laesst genug Atemraum fuer Akzent-Buchstaben).
* - .card-app-fakt + .card-app-badge.ext-sichtbar-badge sind explizit mit
* in der Spec, damit Header-Pillen wirklich GLEICH HOCH sind (vorher hatte
* .card-app-fakt fixe 18px → wirkte sichtbar kleiner als Status/Extern).
* - border-radius einheitlich 6px (Fluent-2-Standard fuer Tags/Badges).
* Vorher: .pill-tag 3px (eckig), .card-app-fakt 4px, .card-app-badge 10px,
* .pill / .fk-datum-badge 999px (vollstaendig rund) — drei Stile auf
* einer Karte. Jetzt SSOT 6px ueber alle Header-Badges. */
.card-v2--compact .card-app-header { gap: var(--space-1-5); }
.card-v2--compact .card-app-header .pill,
.card-v2--compact .card-app-header .pill-tag,
.card-v2--compact .card-app-header .badge,
.card-v2--compact .card-app-header .aufgabe-status-badge,
.card-v2--compact .card-app-header .fk-datum-badge,
.card-v2--compact .card-app-header .card-app-fakt,
.card-v2--compact .card-app-header .card-app-badge {
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
padding: var(--space-xxs) var(--space-1-5);
line-height: 1.4;
height: 20px;
border-radius: var(--radius-md);
box-sizing: border-box;
}
/* Card-app-id auf gleiche Hoehe alignieren (Mono bleibt 11px lesbar). */
.card-v2--compact .card-app-header .card-app-id {
height: 20px;
display: inline-flex;
align-items: center;
}
/* Default-Size (Workspace) Header: Badges leicht groesser, aber ebenfalls
einheitlich. Anfragen-Workspace + Vertrieb-Workspace
sahen mit aufgabe-status-badge (11px) + pill-tag (10.5px) vorher
ungleichmaessig aus. */
.card-v2:not(.card-v2--compact) .card-app-header .pill,
.card-v2:not(.card-v2--compact) .card-app-header .pill-tag,
.card-v2:not(.card-v2--compact) .card-app-header .badge,
.card-v2:not(.card-v2--compact) .card-app-header .aufgabe-status-badge,
.card-v2:not(.card-v2--compact) .card-app-header .fk-datum-badge,
.card-v2:not(.card-v2--compact) .card-app-header .card-app-fakt,
.card-v2:not(.card-v2--compact) .card-app-header .card-app-badge {
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
padding: 3px var(--space-2);
line-height: 1.4;
height: 24px;
border-radius: var(--radius-md);
box-sizing: border-box;
}
/* Meta-Zeile mit Kontext-Pill (Phase, Anfrage, Opportunity, Projekt...) */
.card-app-meta {
display: flex;
min-width: 0;
margin-top: var(--space-1);
}
.card-app-meta-pill {
max-width: 100%;
display: inline-flex;
align-items: center;
gap: var(--space-1);
overflow: hidden;
white-space: nowrap;
min-width: 0;
font-size: var(--fs-badge);
padding: var(--space-px) var(--space-1-5);
border-radius: var(--radius-pill-sm);
background: var(--lod-gray-100);
color: var(--lod-gray-700);
/* Pille ist
wenn clickable.
UA-Default-Anchor-Underline neutralisieren. */
text-decoration: none;
}
/* einheitliche Icon-Geometrie pro Wrapper-Klasse.
* Vorher: jede Stelle setzte eigene width/height-HTML-Attribute (10/11/12),
* was visuell als unterschiedliche Icon-Groessen auffiel. Jetzt zentral in
* CSS — !important damit veraltete inline width/height-Attrs ueberschrieben
* werden. Ziel-Spec:
* - Header-Pillen (.card-app-badge-ico): 12×12 (passt zur 24px-Pille)
* - Body Pillen + Stats (.card-app-*-ico): 12×12 (lesbar im Body)
* - Quick-Actions (.card-app-action img): 14×14 (groessere Klick-Ziele)
*/
.card-app-meta-pill-ico {
flex: 0 0 auto;
opacity: 0.7;
width: 12px;
height: 12px;
}
.card-app-meta-pill-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* Tone-Varianten — semantisch: opportunity (gruenlich), request (darkblue) */
.card-app-meta-pill--opportunity {
background: var(--lod-turquoise-100);
color: var(--lod-turquoise-900);
}
.card-app-meta-pill--request {
background: var(--lod-darkblue-50);
color: var(--lod-darkblue);
}
.card-app-meta-pill.is-clickable { cursor: pointer; }
/* Hover: nur den Text unterstreichen, dezent abdunkeln. */
.card-app-meta-pill.is-clickable:hover { filter: brightness(0.95); }
.card-app-meta-pill.is-clickable:hover .card-app-meta-pill-text { text-decoration: underline; }
.card-app-meta-pill.is-clickable:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }
/* Footer (split-Layout): links Avatar+Name, rechts Badge-Gruppe.
* flex-shrink:0 — Footer darf nie weichen, auch
* wenn Body-Inhalte ueberlaufen wuerden. Bei strikter Card-Hoehe schneidet
* stattdessen der Body ab. */
.card-app-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
font-size: 11.5px;
color: var(--lod-gray-500);
margin-top: auto; /* klebt am Kartenboden auch bei kurzer Karte */
padding-top: var(--space-1);
flex-shrink: 0;
/* min-height schuetzt den Avatar (22px) +
Padding-Top (4px) + Line-Height-Reserve. Ohne diese Garantie konnte
der Footer bei zu volligem Body durch `overflow:hidden` der Card
teilweise abgeschnitten werden. */
min-height: 28px;
}
.card-app-footer-left {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
min-width: 0;
flex: 1;
}
.card-app-footer-left .avatar { width: 22px; height: 22px; font-size: var(--font-size-xs); flex-shrink: 0; }
.card-app-assignee {
font-size: 11.5px;
color: var(--lod-gray-700);
font-weight: var(--fw-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.card-app-assignee.muted { color: var(--lod-gray-500); font-style: italic; font-weight: var(--fw-regular); }
/* Team-Mitglieder-Avatar-Stack rechts neben dem Haupt-
Bearbeiter (Mein-Tag-only — opts.teamMembers in AufgabeCard). Ueberlappende
Mini-Avatare (18px) mit weisser Border, +N-Pille fuer Restmitglieder. */
.card-app-team-stack {
display: inline-flex;
align-items: center;
margin-left: var(--space-1, 4px);
flex-shrink: 0;
}
.card-app-team-mini {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--color-surface);
margin-left: -6px;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--lod-gray-100);
flex-shrink: 0;
}
.card-app-team-mini:first-child { margin-left: 0; }
.card-app-team-mini img,
.card-app-team-mini .avatar {
width: 100%;
height: 100%;
font-size: 8px;
border-radius: 50%;
}
.card-app-team-more {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 5px;
margin-left: 3px;
background: var(--lod-gray-100);
border-radius: var(--radius-grouped-count);
font-size: var(--font-size-xs);
font-weight: var(--fw-semibold);
color: var(--lod-gray-700);
flex-shrink: 0;
}
.card-app-footer-right {
display: inline-flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
/* Sub-Item im Footer (Icon+Zahl: Anhaenge, Kommentare, Checklisten, Zeit) */
.card-app-sub {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--lod-gray-500);
font-weight: var(--fw-medium);
}
.card-app-sub.has-progress { color: var(--lod-turquoise-900); }
/* einheitliche Footer-Icon-Groesse 12×12. */
.card-app-sub img {
opacity: 0.6;
width: 12px;
height: 12px;
flex-shrink: 0;
}
/* Date-Badge im Footer, overdue-Variante mit roter Schrift */
.card-app-date {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: 11.5px;
color: var(--lod-gray-700);
}
.card-app-date img {
opacity: 0.6;
width: 12px;
height: 12px;
flex-shrink: 0;
}
.card-app-date.overdue {
color: var(--lod-danger);
font-weight: var(--fw-medium);
}
.card-app-date.overdue img { opacity: 0.9; }
/* Progress-Strip am Kartenboden (Kanban: Checklist-Fortschritt) */
.card-app-progress-strip {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: var(--lod-gray-100);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
overflow: hidden;
}
.card-app-progress-strip > span {
display: block;
height: 100%;
background: var(--lod-turquoise);
transition: width var(--duration-normal);
}
/* SortableJS Drag-Ghost — ehem. .app-kanban-card-ghost */
.card-app-ghost {
opacity: 0.4;
background: var(--lod-darkblue-50);
border-style: dashed;
}
/* Mobile-Clamp fuer Meta-Pille im compact-Header (Header-Pillen werden ueber
container-queries oben behandelt, nicht mehr per ellipsis am Mobile-
Breakpoint). */
@media (max-width: 599px) {
.card-v2--compact .card-app-id {
flex-shrink: 0;
white-space: nowrap;
}
.card-v2--compact .card-app-meta .card-app-meta-pill-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* wide — breite List-Row (Mein Tag, Verkaufschancen inline, evtl Startseite) */
.card-v2--wide {
min-height: 88px;
flex-direction: row;
align-items: center;
gap: var(--space-3-5);
padding: var(--space-3) var(--space-4);
}
.card-v2--wide .card-app-title { font-size: var(--font-size-base); }
.card-v2--wide .card-app-meta-row { flex: 1; }
/* tile — quadratisch, Navigation-Tile (Gast-Home, Startseiten-Dashboard) */
.card-v2--tile {
min-height: 140px;
text-align: center;
padding: var(--space-5) var(--space-4);
align-items: center;
justify-content: center;
}
/* ──────────────────────────────────────────────────────────────────── */
/* Accent (Border links oder oben) */
/* ──────────────────────────────────────────────────────────────────── */
.card-v2--accent-left {
border-left: var(--card-app-accent-width, 3px) solid var(--card-app-accent-color, var(--lod-gray-200));
}
.card-v2--accent-left.card-v2--accent-w4 { border-left-width: 4px; }
.card-v2--accent-left.card-v2--accent-w6 { border-left-width: 6px; }
.card-v2--accent-top {
border-top: var(--card-app-accent-width, 3px) solid var(--card-app-accent-color, var(--lod-gray-200));
}
.card-v2--accent-top.card-v2--accent-w4 { border-top-width: 4px; }
/* Accent-Presets — setzen --card-app-accent-color */
.card-v2--accent-prio-hoch { --card-app-accent-color: var(--lod-danger); }
.card-v2--accent-prio-normal { --card-app-accent-color: var(--lod-gray-300); }
.card-v2--accent-prio-niedrig { --card-app-accent-color: var(--lod-gray-200); }
.card-v2--accent-sla-fail { --card-app-accent-color: var(--lod-danger); }
.card-v2--accent-sla-warn { --card-app-accent-color: var(--lod-amber-500); }
.card-v2--accent-sla-ok { --card-app-accent-color: var(--lod-turquoise); }
.card-v2--accent-sla-paused { --card-app-accent-color: var(--color-text-muted); } /* auf Eis: neutral, Timer ruht */
/* Eskaliert: zusaetzlich zur fail-Farbe ein Glow + breiterer Akzent fuer Sichtbarkeit. */
.card-v2--accent-sla-escalated {
--card-app-accent-color: var(--lod-danger);
--card-app-accent-width: 6px;
box-shadow: 0 0 0 1px var(--lod-danger), 0 4px 12px rgba(193, 55, 92, 0.18);
background: color-mix(in srgb, var(--lod-danger) 4%, #fff);
}
.card-v2--accent-ampel-rot { --card-app-accent-color: var(--lod-danger); }
.card-v2--accent-ampel-orange { --card-app-accent-color: var(--lod-amber-500); }
.card-v2--accent-ampel-gruen { --card-app-accent-color: var(--lod-turquoise); }
/* ampel-blau von --lod-darkblue-300 (#8aa6bc, sehr blass) auf
--lod-darkblue (#0f2e48, voll) hochgesetzt — als 4px-Akzent-Border war die
blasse Variante praktisch unsichtbar, neutral-blau soll aber genauso
ankommen wie rot/orange/gruen. */
.card-v2--accent-ampel-blau { --card-app-accent-color: var(--lod-darkblue); }
.card-v2--accent-status-review { --card-app-accent-color: var(--status-review-fg); }
.card-v2--accent-status-approved { --card-app-accent-color: var(--status-info-fg); }
.card-v2--accent-status-archived { --card-app-accent-color: var(--lod-gray-400); }
/* Background-Tints */
.card-v2--bg-subtle { background: var(--lod-gray-50); }
.card-v2--bg-brand { background: color-mix(in srgb, var(--lod-turquoise) 6%, #fff); }
/* ──────────────────────────────────────────────────────────────────── */
/* Header — Badge-Leiste oben */
/* ──────────────────────────────────────────────────────────────────── */
.card-app-header {
display: flex;
align-items: center;
gap: var(--space-1-5);
flex-wrap: nowrap;
overflow: hidden;
min-width: 0;
/* Anti-Squeeze: Karten mit fixer Hoehe (z.B. Kontingente .kont-card-app
180px) + viel Body-Inhalt ueberlaufen leicht den Container. flex-shrink:1
als Default wuerde den Header dann auf height:0 quetschen. Header soll
immer ankerfest oben sichtbar bleiben — Body/Footer cutten lieber unten. */
flex-shrink: 0;
/* min-height 22→26px, passt zur neuen Badge-Hoehe
24px (Default). Compact-Header bekommt seinen eigenen min-height-Override
unten weil Badges dort 20px sind. Vorher: knappe 22px verursachten
vertikales Beschneiden bei Akzent-/Umlaut-Glyphen. */
min-height: 26px;
}
.card-v2--compact .card-app-header {
min-height: 22px;
}
.card-app-badges {
display: inline-flex;
align-items: center;
gap: var(--space-1-5);
min-width: 0;
}
.card-app-badges--left { justify-content: flex-start; }
.card-app-badges--right { justify-content: flex-end; flex-shrink: 0; }
.card-app-badges-spacer { flex: 1 1 auto; min-width: 4px; }
/* ──────────────────────────────────────────────────────────────────── */
/* Schrumpf-Prioritaet pro Slot. */
/* */
/* Default: kein Slot schrumpft — alle behalten ihre intrinsische Breite. */
/* Wenn der Header zu eng wird, schrumpfen Slots nach Prio in dieser */
/* Reihenfolge (1 = bleibt am laengsten sichtbar): */
/* */
/* 1. Extern (data-card-slot="extern") — NIE schrumpfen, nie weg */
/* 2. Herkunft (data-card-slot="herkunft")— NIE schrumpfen */
/* 3. ID (data-card-slot="id") — NIE schrumpfen */
/* 4. Status (data-card-slot="status") — schrumpft ab ~400px, dann weg */
/* 5. Geld (data-card-slot="geld") — schrumpft mittel */
/* 6. Flag (data-card-slot="flag") — schrumpft am meisten zuerst */
/* */
/* Umgesetzt mit `flex-shrink: N` (hoeher = schrumpft frueher) und */
/* media-queries fuer harte Hide-Stops auf Mobile. */
/* ──────────────────────────────────────────────────────────────────── */
/* Drei-Schichten-Strategie fuer robusten Header:
─────────────────────────────────────────────────────────────────────
Schicht 1 — flex-shrink:
Anker (Herkunft, ID, krit. Flags, EXTERN) = flex-shrink:0 (nie schrumpfen)
Schrumpfbare Pillen = flex-shrink:1 (geben Platz frei)
Pille-Inhalte mit min-width:0 + ellipsis (kuerzen Text statt zu ueberlaufen)
Schicht 2 — Container-Queries:
Bei sehr engen Karten (Kanban) werden Pillen komplett ausgeblendet,
bevor sie ge-ellipsed werden — kuerzer Text in winzigen Pillen liest sich
schlechter als gar keine Pille.
Schicht 3 — Order:
Extern bekommt order:99 → ist immer DOM-letztes-Element. Damit clipped
overflow:hidden des Headers nicht Extern, weil zwischen Spacer und Extern
die schrumpfbaren Slots zuerst kollabiert werden.
───────────────────────────────────────────────────────────────────── */
/* Default: alle Slots starr. Werden unten differenziert ueberschrieben. */
.card-app-header > [data-card-slot] { flex-shrink: 0; white-space: nowrap; }
/* ─────────────────────────────────────────────────────────────────────────
Einheitliche Pillen-Spec
Alle Header-Pillen (.pill, .pill-tag, .badge, .fk-datum-badge,
.card-app-badge) sollen IDENTISCH aussehen. Nur die Farben/Variant-
Klassen differenzieren — Geometrie, Icon-Groesse, Text-Verhalten sind
global gleich.
Icon-Wrapper: .card-app-badge-ico (12x12 px, opacity 0.75, no shrink)
Text-Wrapper: .card-app-badge-text (flex shrink, ellipsis bei Overflow)
KEIN globales display:inline-flex/align-items auf
[data-card-slot] mehr — das hat Slots wie .pill-tag (default inline) auf
inline-flex umgestellt und die Vertikalmetriken minimal verschoben →
Badges wirkten oben/unten abgeschnitten. Die einzelnen Pillen-Klassen
haben ihre Layout-Eigenschaften bereits selber, wir nutzen sie. Nur
Pillen, die durch CardHeader-Renderer einen Icon+Text-Wrapper bekommen
und vorher KEIN gap hatten (.fk-datum-badge, .badge-umsatz), kriegen
gezielt ein gap. */
.card-app-header > [data-card-slot] .card-app-badge-ico {
flex: 0 0 auto;
width: 12px;
height: 12px;
opacity: 0.75;
}
.card-app-header > [data-card-slot] .card-app-badge-text {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* Gap zwischen Icon und Text — gezielt fuer die Pillen, die intrinsisch
keinen gap hatten und nun (durch die einheitliche Renderer-Spec)
Icon+Text enthalten. */
.card-app-header > .fk-datum-badge,
.card-app-header > .badge.badge-umsatz {
gap: var(--space-1);
}
/* Schicht 1 — flex-shrink ungleich 0 fuer Pillen, die schrumpfen DUERFEN.
Hoehere Zahl = schrumpft frueher. Mit min-width:0 koennen sie unter ihre
Inhaltsbreite gedrueckt werden; Text ge-ellipsed innen. */
/* Custom-Flag-Keys (kind:'custom' mit eigenem dataKey): saldo (kt-card),
ohne-kontingent / abr-gebucht / abr-separat / abr-freigegeben (abr-card).
Nicht-kritische Info-Flags — gleiche Behandlung wie abrechnungsart
(Text → Icon → aus). Wer einen neuen custom-dataKey einfuehrt, traegt ihn
hier UND in den COMPACT-/HIDE-Gruppen unten nach. */
.card-app-header > [data-card-slot="flag"][data-card-badge="datum"],
.card-app-header > [data-card-slot="flag"][data-card-badge="rating"],
.card-app-header > [data-card-slot="flag"][data-card-badge="ansichten"],
.card-app-header > [data-card-slot="flag"][data-card-badge="mehrdeutig"],
.card-app-header > [data-card-slot="flag"][data-card-badge="abrechnungsart"],
.card-app-header > [data-card-slot="flag"][data-card-badge="custom"],
.card-app-header > [data-card-slot="flag"][data-card-badge="saldo"],
.card-app-header > [data-card-slot="flag"][data-card-badge="ohne-kontingent"],
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-gebucht"],
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-separat"],
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-freigegeben"] {
flex-shrink: 8;
min-width: 0;
overflow: hidden;
}
/* Eis (Auf Eis / wartet) ist wichtig, aber darf zugunsten Extern weichen. */
.card-app-header > [data-card-slot="flag"][data-card-badge="eis"] {
flex-shrink: 4;
min-width: 0;
overflow: hidden;
}
.card-app-header > [data-card-slot="geld"].badge-umsatz {
flex-shrink: 5;
min-width: 0;
overflow: hidden;
}
/* Verkaufschance: der voraussichtliche Umsatz ist der Nordstern der Pipeline-Karte
— größer, fett, in der VK-Entity-Farbe (Türkis) und NIE schrumpfend, damit er aus
der Pillen-Reihe als Held heraussticht (statt gleichrangig unter fünf Signalen).
Nur VK-Karten (.vk-card-app); die anderen Entities behalten die neutrale Geld-Pille. */
.card-v2.vk-card-app .card-app-header > [data-card-slot="geld"].badge-umsatz {
flex-shrink: 0;
background: var(--lod-turquoise-50);
color: var(--lod-turquoise-900);
border: 1px solid color-mix(in srgb, var(--lod-turquoise) 32%, transparent);
font-weight: var(--fw-bold, 700);
}
.card-v2.vk-card-app .card-app-header > [data-card-slot="geld"].badge-umsatz .card-app-badge-text {
font-size: var(--font-size-md, 15px);
}
.card-v2.vk-card-app .card-app-header > [data-card-slot="geld"].badge-umsatz .card-app-badge-ico { opacity: 0.9; }
.card-app-header > [data-card-slot="status"] {
flex-shrink: 3;
min-width: 0;
overflow: hidden;
}
/* Pille-Texte schrumpfen via ellipsis. Die Pille selbst hat overflow:hidden;
min-width:0 (siehe oben), text-overflow:ellipsis hier. Pillen ohne
.card-app-badge-text-Wrapper (datumBadge, rating, status) bekommen ellipsis
direkt am Container; Pillen mit Wrapper am Wrapper. */
.card-app-header > [data-card-slot="flag"][data-card-badge="datum"],
.card-app-header > [data-card-slot="flag"][data-card-badge="rating"],
.card-app-header > [data-card-slot="geld"].badge-umsatz,
.card-app-header > [data-card-slot="status"] {
text-overflow: ellipsis;
}
.card-app-header > [data-card-slot="flag"][data-card-badge="abrechnungsart"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="ansichten"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="mehrdeutig"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="eis"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="saldo"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="ohne-kontingent"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-gebucht"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-separat"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-freigegeben"] .card-app-badge-text {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* Anker: Extern + Herkunft + ID + kritische Flags bleiben flex-shrink:0
(default). Extern zusaetzlich mit order:99, damit es DOM-letztes Element
ist und beim overflow:hidden nicht clipped wird. */
.card-app-header > [data-card-slot="extern"] {
flex-shrink: 0;
order: 99;
}
/* ────────────────────────────────────────────────────────────────────────
* Container-Query Display-Modi.
*
* Grundsatz: "alle Karten pro Ansicht gleich hoch / gleich
* dargestellt — kein dynamisches Wachsen oder Schrumpfen pro Karte". Display-
* Modi greifen daher rein an der CONTAINER-Breite, NICHT an der Inhaltsmenge
* der Karte. Alle Karten in einer Liste haben identische Breite und damit
* identischen Modus.
*
* Drei Modi pro Slot (kontainer-breit ↓):
*
* FULL (≥700px) Icon + voller Text + alle Slots sichtbar
* COMPACT (340-699px) Status: nur Icon (title bleibt) | Datum: nur Icon |
* Rating: nur Icon | Ansichten: nur Icon |
* Mehrdeutig: nur Icon | Abrechnungsart: nur Icon |
* Eis: nur Icon | Geld: nur Icon |
* Eskaliert + Ueberfaellig + Beteiligung: bleiben mit Text
* (sind die wichtigsten kritischen Flags).
* ICON (300-339px) Auch Eskaliert/Ueberfaellig/Beteiligung verlieren Text
* (nur Icon + Tooltip).
* HIDE (<300px) Status, Datum, Rating, Ansichten, Mehrdeutig, Abrechnungs-
* art, Eis, Geld komplett aus. Eskaliert + Ueberfaellig
* bleiben (Icon + Tooltip).
*
* Anker (NIE versteckt, NIE icon-only): Herkunft (.pill-tag), ID (.card-app-id),
* Extern (.ext-sichtbar-badge wird ab COMPACT icon-only — Globus reicht).
*
* Schwellen-Anhebung 419 → 699: Mein-Tag-Mobile rendert die
* Karten als 1-Spalten-Layout (volle Container-Breite), bei 720px-Browser
* also ~660px-Cards. Tier-1 mit 419px greift dort nicht — VK-Karten zeigten
* "Sehr aussichtsreich"/"1 - Interesse"-Pillen mit Volltext und text-overflow-
* Clipping (Halbtext). Mit 699 greift Tier-1 fuer alle Cards die unter 700px
* sind, also Mobile + Tablet-Schmalseite. Cards >=700px (Mein-Tag-Desktop,
* Workspace-Wide) bleiben mit Volltext — bei der Breite ist genug Platz.
* ──────────────────────────────────────────────────────────────────────── */
/* .card-v2 container-type/-name ist mit dem Container-Block oben konsolidiert. */
/* COMPACT-Modus (≤699px): Slots mit langem Text werden auf Icon-only gesetzt.
* Der Text-Wrapper wird ausgeblendet, das Icon bleibt; title-Tooltip am Badge
* traegt die volle Information. */
@container card (max-width: 699px) {
/* Status: Text raus, Icon bleibt */
.card-app-header > [data-card-slot="status"] .card-app-badge-text { display: none; }
/* Extern: Text raus, Globus-Icon bleibt */
.card-app-header > [data-card-slot="extern"] .card-app-badge-text { display: none; }
/* Datum-/Rating-/Ansichten-/Mehrdeutig-/Abrechnungsart-/Eis-/Custom-Flags:
Text raus (Custom-Keys: saldo + abr-* — siehe Kommentar an der
Schrumpf-Gruppe oben) */
.card-app-header > [data-card-slot="flag"][data-card-badge="datum"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="rating"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="ansichten"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="mehrdeutig"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="abrechnungsart"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="eis"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="saldo"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="ohne-kontingent"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-gebucht"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-separat"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-freigegeben"] .card-app-badge-text,
/* Beteiligung ("Beteiligt" / "Über Sub-Aufgabe")
verschoben von ICON-Tier (≤339px) nach COMPACT-Tier (≤699px). Die langen
Texte schoben auf Mobile (~370px Card-Breite) andere Pills (Datum,
Counter) nach rechts ueber den Card-Rand. Mit Icon-only ist Platz da. */
.card-app-header > [data-card-slot="flag"][data-card-badge="beteiligung"] .card-app-badge-text,
.card-app-header > [data-card-slot="geld"] .card-app-badge-text {
display: none;
}
/* Padding-Anpassung wenn nur Icon — Pille wird quadratisch-aehnlich. */
.card-app-header > [data-card-slot="status"],
.card-app-header > [data-card-slot="extern"],
.card-app-header > [data-card-slot="flag"][data-card-badge="datum"],
.card-app-header > [data-card-slot="flag"][data-card-badge="rating"],
.card-app-header > [data-card-slot="flag"][data-card-badge="ansichten"],
.card-app-header > [data-card-slot="flag"][data-card-badge="mehrdeutig"],
.card-app-header > [data-card-slot="flag"][data-card-badge="abrechnungsart"],
.card-app-header > [data-card-slot="flag"][data-card-badge="eis"],
.card-app-header > [data-card-slot="flag"][data-card-badge="saldo"],
.card-app-header > [data-card-slot="flag"][data-card-badge="ohne-kontingent"],
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-gebucht"],
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-separat"],
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-freigegeben"],
.card-app-header > [data-card-slot="flag"][data-card-badge="beteiligung"],
.card-app-header > [data-card-slot="geld"] {
padding-left: 5px;
padding-right: 5px;
}
}
/* ICON-Modus (≤339px): kritische Flags (Eskaliert, Ueberfaellig) verlieren
* ihren Text. Icon + Tooltip reichen. Beteiligung ist bereits im
* COMPACT-Tier (≤699px) icon-only. */
@container card (max-width: 339px) {
.card-app-header > [data-card-slot="flag"][data-card-badge="eskaliert"] .card-app-badge-text,
.card-app-header > [data-card-slot="flag"][data-card-badge="ueberfaellig"] .card-app-badge-text {
display: none;
}
.card-app-header > [data-card-slot="flag"][data-card-badge="eskaliert"],
.card-app-header > [data-card-slot="flag"][data-card-badge="ueberfaellig"] {
padding-left: 5px;
padding-right: 5px;
}
}
/* HIDE-Modus (≤299px): dekorative Slots ganz raus, damit die wichtigsten
* Anker (Herkunft, ID, Eskaliert, Ueberfaellig, Extern) noch Platz haben.
* Status faellt ebenfalls weg, weil der Akzent-Streifen links die Status-
* Indikation traegt. */
@container card (max-width: 299px) {
.card-app-header > [data-card-slot="status"],
.card-app-header > [data-card-slot="flag"][data-card-badge="datum"],
.card-app-header > [data-card-slot="flag"][data-card-badge="rating"],
.card-app-header > [data-card-slot="flag"][data-card-badge="ansichten"],
.card-app-header > [data-card-slot="flag"][data-card-badge="mehrdeutig"],
.card-app-header > [data-card-slot="flag"][data-card-badge="abrechnungsart"],
.card-app-header > [data-card-slot="flag"][data-card-badge="eis"],
.card-app-header > [data-card-slot="flag"][data-card-badge="saldo"],
.card-app-header > [data-card-slot="flag"][data-card-badge="ohne-kontingent"],
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-gebucht"],
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-separat"],
.card-app-header > [data-card-slot="flag"][data-card-badge="abr-freigegeben"],
.card-app-header > [data-card-slot="geld"] {
display: none;
}
}
/* Herkunft, ID, Eskaliert, Ueberfaellig, Extern bleiben IMMER sichtbar —
* das sind die geschaeftskritischen Anker. Bei HIDE-Modus werden sie
* automatisch icon-only durch die ICON-Modus-Regel oben. */
.card-app-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-xxs) var(--space-2);
border-radius: var(--radius-pill-sm);
font-size: var(--fs-badge);
font-weight: var(--fw-medium);
line-height: 1.3;
background: var(--lod-gray-100);
color: var(--lod-gray-700);
border: 0;
cursor: default;
white-space: nowrap;
}
.card-app-badge.is-clickable { cursor: pointer; }
.card-app-badge.is-clickable:hover { filter: brightness(0.95); }
.card-app-badge-ico { opacity: 0.75; flex-shrink: 0; }
.card-app-badge-sep { width: 1px; height: 12px; background: var(--lod-gray-200); display: inline-block; }
/* separater Count-Wrapper bei Flags wie Ueberfaellig.
* Bleibt im Icon-Mode sichtbar (siehe Container-Queries weiter unten). */
.card-app-badge-count {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
font-weight: var(--fw-semibold);
}
/* Variant-Farben */
.card-app-badge--neutral { background: var(--lod-gray-100); color: var(--lod-gray-700); }
.card-app-badge--success { background: color-mix(in srgb, var(--lod-turquoise) 15%, #fff); color: var(--lod-turquoise-900); }
.card-app-badge--danger { background: color-mix(in srgb, var(--lod-danger) 15%, #fff); color: var(--lod-danger); }
.card-app-badge--warn { background: color-mix(in srgb, var(--lod-amber-500) 20%, #fff); color: var(--lod-amber-700); }
.card-app-badge--brand { background: color-mix(in srgb, var(--lod-darkblue) 10%, #fff); color: var(--lod-darkblue); }
/* muted = dezente graue Pille. Vorher transparent —
das wirkte wie kein Badge ueberhaupt. */
.card-app-badge--muted { background: var(--lod-gray-100); color: var(--lod-gray-600); }
.card-app-badge--info { background: color-mix(in srgb, var(--lod-darkblue-300) 20%, #fff); color: var(--lod-darkblue); }
/* ExternSichtbar-Badge — globaler Look fuer
Karten in Projekten/Wissen und ggf. Phasen. Tone: success = Gastzugriff
aktiv, dezent gruener Pill. */
.card-app-badge.ext-sichtbar-badge {
background: color-mix(in srgb, var(--lod-turquoise) 15%, #fff);
color: var(--lod-turquoise-900);
border: 1px solid color-mix(in srgb, var(--lod-turquoise) 35%, transparent);
}
.card-app-badge.ext-sichtbar-badge .card-app-badge-ico { opacity: 0.95; }
/* ──────────────────────────────────────────────────────────────────── */
/* Titel / Subtitle */
/* ──────────────────────────────────────────────────────────────────── */
.card-app-title {
font-size: var(--font-size-base);
font-weight: var(--fw-semibold);
line-height: 1.35;
color: var(--lod-darkblue);
/* Line-clamp default 2 — ueberschreibbar via inline-style (titleClamp) */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
/* explizite max-height berechnet aus 2 Zeilen
line-height — verhindert dass der Browser bei -webkit-box gelegentlich
die Hoehe falsch berechnet und Title 3 Zeilen wird (passiert v.a. bei
Akzent-Glyphen mit hoeheren Ascendern). */
max-height: calc(1.35em * 2);
}
/* Title-Row: Title links + Activity-Dot rechts.
Z-1: Aktualitaets-Indikator. */
.card-app-title-row {
display: flex;
align-items: flex-start;
gap: var(--space-1-5);
min-width: 0;
}
.card-app-title-row .card-app-title { flex: 1 1 auto; min-width: 0; }
.card-app-activity-dot {
flex-shrink: 0;
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 7px;
/* Default verbergen wenn kein Modifier — sollte nie passieren weil Builder
den Dot nur mit Modifier rendert; Schutz fuer den Fall. */
background: transparent;
}
.card-app-activity-dot--fresh { background: var(--color-success-strong); }
.card-app-activity-dot--recent { background: var(--lod-amber-500); }
/* Body-Subtitle: Status-Information unter Title.
Ersetzt die bestehenden card-app-heute-row + card-app-sla-row Sonderformen
durch eine generische Klasse mit Tone-Modifiern. Alte Klassen bleiben fuer
Kompatibilitaet bestehen (nicht mehr aktiv genutzt). */
.card-app-body-subtitle {
display: inline-flex;
align-items: center;
gap: var(--space-1, 4px);
font-size: var(--fs-meta, 12px);
font-weight: var(--fw-medium, 500);
color: var(--lod-gray-600);
margin-top: var(--space-1);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-app-body-subtitle-ico {
opacity: 0.6;
flex-shrink: 0;
width: 12px;
height: 12px;
}
.card-app-body-subtitle-text { overflow: hidden; text-overflow: ellipsis; }
.card-app-body-subtitle--success { color: var(--color-success-strong); }
.card-app-body-subtitle--success .card-app-body-subtitle-ico { opacity: 0.85; }
.card-app-body-subtitle--warn { color: var(--color-warning-strong); }
.card-app-body-subtitle--warn .card-app-body-subtitle-ico { opacity: 0.85; }
.card-app-body-subtitle--danger { color: var(--color-danger-strong); }
.card-app-body-subtitle--danger .card-app-body-subtitle-ico { opacity: 0.95; }
.card-app-body-subtitle--muted { color: var(--lod-gray-500); }
/* Body-Detail: Karten-spezifischer Detail-Block (Lead-Meta, Kontingent-Tiles).
Sitzt unter der Kontext-Pille, ueber dem Footer. */
.card-app-body-detail {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2-5);
margin-top: var(--space-1-5);
font-size: 11.5px;
color: var(--lod-gray-600);
}
.card-app-body-detail-item {
display: inline-flex;
align-items: center;
gap: var(--space-1);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Body-Icon-Spec 12×12 (analog .card-app-badge-ico) — zentral in CSS, damit
veraltete width/height-HTML-Attribute nicht als abweichende Groessen rendern. */
.card-app-body-detail-item img { opacity: 0.6; flex-shrink: 0; width: 12px; height: 12px; }
/* Tone-Modifier (CardBody.leadDetailHtml items[].tone) — analog zu den
Kontingent-Tiles; Projekt-Stats nutzen warn/success (Aufgaben-/Zeit-Budget). */
.card-app-body-detail-item--success { color: var(--color-success-strong); }
.card-app-body-detail-item--success img { opacity: 0.85; }
.card-app-body-detail-item--warn { color: var(--color-warning-strong); }
.card-app-body-detail-item--warn img { opacity: 0.85; }
.card-app-body-detail-item--danger { color: var(--color-danger-strong); }
.card-app-body-detail-item--danger img { opacity: 0.95; }
/* Kontingent-Tiles: feinkoerniges 4-Tile-Grid */
.card-app-body-detail--kontingent {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-1-5) 12px;
margin-top: var(--space-2);
}
.card-app-body-detail-tile {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--font-size-sm);
color: var(--lod-gray-700);
font-variant-numeric: tabular-nums;
}
.card-app-body-detail-tile img { opacity: 0.6; flex-shrink: 0; width: 12px; height: 12px; }
.card-app-body-detail-tile--success { color: var(--color-success-strong); }
.card-app-body-detail-tile--success img { opacity: 0.85; }
.card-app-body-detail-tile--warn { color: var(--color-warning-strong); }
.card-app-body-detail-tile--danger { color: var(--color-danger-strong); }
/* card-app-heute-row entfernt — Heute-Buchung wird
jetzt entweder als card-app-body-subtitle (CardBody.subtitle mit
tone:success) oder als card-app-heute-inline (gruener Suffix am Zeit-Stat
im Footer) gerendert. */
/* card-app-sla-row entfernt — SLA-Info wird jetzt
ueber CardBody.build({subtitle}) als card-app-body-subtitle gerendert. */
/* card-app-subtitle: Card-Core-Fallback (Card.buildHtml mit subtitle:-String).
Aktuell nur noch von WissenCard.buildExternHtml (Microsoft-Docs-Treffer)
verwendet. Andere Karten nutzen CardBody.build mit card-app-body-subtitle. */
.card-app-subtitle {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--font-size-sm);
color: var(--lod-gray-600);
line-height: 1.3;
}
.card-app-subtitle-ico {
opacity: 0.6;
flex-shrink: 0;
width: 12px;
height: 12px;
}
.card-app-content {
font-size: 12.5px;
color: var(--lod-gray-700);
line-height: 1.45;
}
/* ──────────────────────────────────────────────────────────────────── */
/* Meta-Zeilen */
/* ──────────────────────────────────────────────────────────────────── */
.card-app-meta-row {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
font-size: 11.5px;
color: var(--lod-gray-600);
}
.card-app-meta-row--split {
flex-wrap: nowrap;
justify-content: space-between;
}
/* Meta-Row ans Karten-Ende ankern (margin-top:auto). Neutrale Card-Utility —
Konsumenten: Wissen-Karten (wn-card/wn-card-render/wn-extern-search) +
Anfragen-Karten (anfr-card-helpers). Ehemals section-lokal als .pj-meta-anchor. */
.app-scope .card-v2 .card-app-meta-row.card-meta-anchor {
margin-top: auto;
}
.card-app-meta-row--split .card-app-meta-left,
.card-app-meta-row--split .card-app-meta-right {
display: inline-flex;
align-items: center;
gap: var(--space-2-5);
min-width: 0;
}
.card-app-meta-row--split .card-app-meta-right { flex-shrink: 0; }
.card-app-meta-item {
display: inline-flex;
align-items: center;
gap: var(--space-1);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.card-app-meta-ico { opacity: 0.6; flex-shrink: 0; }
.card-app-meta-item--warn { color: var(--lod-amber-700); }
.card-app-meta-item--danger { color: var(--lod-danger); }
.card-app-meta-item--success{ color: var(--lod-turquoise-900); }
.card-app-meta-item--muted { color: var(--lod-gray-500); }
/* ──────────────────────────────────────────────────────────────────── */
/* Avatar */
/* ──────────────────────────────────────────────────────────────────── */
.card-app-avatar {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.card-app-avatar-name {
font-size: 11.5px;
color: var(--lod-gray-700);
margin-left: 5px;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-app-avatar-tr {
position: absolute;
top: 10px;
right: 12px;
}
/* ──────────────────────────────────────────────────────────────────── */
/* Actions (Hover-Buttons) */
/* ──────────────────────────────────────────────────────────────────── */
.card-app-actions {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
gap: var(--space-xxs);
padding: 3px;
background: rgba(255, 255, 255, 0.95);
border-radius: var(--radius-lg);
box-shadow: 0 2px 6px color-mix(in srgb, var(--lod-darkblue-900) 12%, transparent);
opacity: 0;
pointer-events: none;
transform: translateY(-2px);
transition: opacity var(--duration-snappy), transform var(--duration-snappy);
z-index: 2;
}
/* Hover-Reveal: bei Hover/Focus der Karte werden Desktop-Actions und
explizite --hover-Varianten eingeblendet. --always bleibt sichtbar,
--mobile hat eigene Regeln weiter unten. */
.card-v2:hover .card-app-actions--desktop,
.card-v2:hover .card-app-actions--hover,
.card-v2:focus-within .card-app-actions--desktop,
.card-v2:focus-within .card-app-actions--hover {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.card-app-actions--always { opacity: 1; pointer-events: auto; transform: none; }
.card-app-actions--mobile { display: none; }
.card-app-action {
width: 28px;
height: 28px;
border: 0;
background: transparent;
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--lod-gray-700);
transition: background var(--duration-quick), color var(--duration-quick);
}
.card-app-action:hover { background: var(--lod-gray-100); }
/* einheitliche Quick-Action-Icon-Groesse 14×14
* (groesser als Body-Icons 12×12, weil Klick-Ziele). */
.card-app-action img {
opacity: 0.7;
width: 14px;
height: 14px;
flex-shrink: 0;
}
.card-app-action:hover img { opacity: 1; }
/* Optical-Sizing-Korrektur fuer dichte Fluent-Icons.
* Manche Icons (Play, Pause, etc.) sind technisch gleich gross wie Globe/Euro,
* wirken aber visuell groesser, weil ihr SVG-Pfad mehr "Tinte" im viewBox-
* Quadrat hat. Die Klasse .icon-optical-shrink skaliert das Icon visuell
* auf 85% — Container-Box bleibt gleich (kein Layout-Shift), nur das Icon
* selbst wirkt im optischen Gleichgewicht mit nicht-dichten Icons.
* Liste der betroffenen Icons: OPTICAL_DENSE_ICONS in _card-actions.js. */
.icon-optical-shrink {
transform: scale(0.85);
transform-origin: center center;
}
.card-app-action--danger:hover { background: color-mix(in srgb, var(--lod-danger) 12%, #fff); color: var(--lod-danger); }
.card-app-action--primary { background: var(--lod-darkblue); }
.card-app-action--primary img { filter: brightness(0) invert(1); opacity: 0.9; }
.card-app-action--primary:hover { background: var(--lod-turquoise); }
.card-app-actions-sep { width: 1px; height: 16px; background: var(--lod-gray-200); margin: 0 var(--space-xxs); align-self: center; }
/* Mittlerer @media (max-width:999px)-Block entfernt —
Inhalte konsolidiert in den finalen Mobile-Block am Ende dieser Datei. */
/* ──────────────────────────────────────────────────────────────────── */
/* Progress (Fortschritt) */
/* ──────────────────────────────────────────────────────────────────── */
.card-app-progress--bottom-strip {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: var(--lod-gray-100);
overflow: hidden;
}
.card-app-progress--bottom-strip .card-app-progress-fill {
display: block;
height: 100%;
transition: width var(--duration-normal) var(--ease-soft);
}
.card-app-progress--inline {
display: flex;
align-items: center;
gap: var(--space-2);
}
.card-app-progress-track {
flex: 1;
background: var(--lod-gray-100);
border-radius: var(--radius-circular);
overflow: hidden;
min-width: 40px;
}
.card-app-progress--inline .card-app-progress-fill {
display: block;
height: 100%;
border-radius: var(--radius-circular);
transition: width var(--duration-normal) var(--ease-soft);
}
.card-app-progress-label {
font-size: var(--fs-badge);
font-weight: var(--fw-semibold);
color: var(--lod-gray-700);
font-variant-numeric: tabular-nums;
min-width: 32px;
text-align: right;
}
/* ──────────────────────────────────────────────────────────────────── */
/* Responsive */
/* ──────────────────────────────────────────────────────────────────── */
/* Konsolidierter Mobile-Block. Hoehen bleiben strikt (height statt min-height)
— pro Breakpoint einheitlich, kein Wachsen. Auf Tablet/Mobile (≤999px):
- Karten leicht kleiner (height/padding/font)
- Hover-Actions ausblenden, nur Mobile-Overflow ("..."-Button) zeigen
- Header-Padding rechts reservieren fuer den Overflow-Button */
@media (max-width: 999px) {
/* Hoehe bleibt 180px wie Desktop. Frueher
168px (vermeintliche "Tablet ist enger"-Optimierung), aber der Inhalt
ist auf allen Breakpoints identisch — nur die Pill-Texte werden Icon-
only (das macht die Card SCHMALER, nicht kuerzer). 168px schnitt den
Footer-Avatar ab, sichtbar bei Projekt + Kontingent-Cards. */
.card-v2 { height: 180px; padding: var(--space-2-5) var(--space-3); }
.card-v2--compact { height: 140px; }
.card-app-title { font-size: 13.5px; }
/* Header-Padding nur reservieren wenn die Karte einen
Mobile-Overflow-Button hat. Karten ohne Quick-Actions (z.B. Kontingent)
rendern keinen .card-app-actions--mobile — dort wird der 32px-Slot
ausgespart, sodass die rechten Badges (Status, Datum, Mehrdeutig) bis
zum Card-Rand fluchten statt einen Geist-Slot fuer einen nicht
existierenden Button zu lassen. card.js _renderActions returnt '' bei
leerem actions-Array, also ist der :has-Check eine 1:1-Spiegelung des
tatsaechlichen DOM-Zustands. */
.card-v2:has(.card-app-actions--mobile) .card-app-header { padding-right: var(--space-8); }
.card-v2 .card-app-actions--desktop { display: none; }
.card-v2 .card-app-actions--mobile {
display: inline-flex;
position: absolute; top: 6px; right: 6px;
padding: 0; background: transparent; border: none; box-shadow: none;
opacity: 1; pointer-events: auto; transform: none;
}
}
@media (max-width: 599px) {
/* Hoehe bleibt 180px wie Desktop + Tablet —
der Inhalt der Card ist auf allen Breakpoints identisch (Header + Title
+ Subtitle + Context-Pille + Stats + Footer). Mobile-Spezifika reduzieren
nur die BREITE (Pills Icon-only via Container-Queries), nicht die HOEHE.
Vorher 156px → der Footer-Avatar wurde durch `overflow:hidden` der Card
abgeschnitten, weil die Sections rechnerisch ~180px brauchen. */
.card-v2 { height: 180px; gap: var(--space-1-5); }
.card-app-title { font-size: 13px; -webkit-line-clamp: 2; }
.card-app-meta-row { gap: var(--space-2); font-size: 11px; }
.card-app-meta-row--split { flex-wrap: wrap; }
.card-v2--wide { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}
/* Tastatur-Fokus auf Kanban-Karten (Karten-Fokus-Navigation, Pfeiltasten).
Outline statt border/box-shadow → keine Layout-Verschiebung, responsive-sicher. */
[data-kanban-card]:focus-visible,
[data-kanban-card].is-kbd-focus {
outline: 2px solid var(--lod-darkblue, #2f6be4);
outline-offset: 2px;
border-radius: var(--surface-radius);
}
[data-kanban-card] { outline-color: transparent; }