.card-preview { position: fixed; z-index: 30; width: min(360px, calc(100vw - 28px)); max-height: min(70vh, 520px); overflow: auto; padding: 16px; background: #fffef9; border: 2px solid #5277b4; box-shadow: 0 12px 35px #17234244; color: #172342; }.card-preview.class-preview { padding: 0; border: 1px solid #141414; border-radius: 0; box-shadow: 0 8px 24px #17234233; }.card-preview.object-preview { border-radius: 10px; }
.card-preview h2 { margin: 0 0 10px; color: #235a9c; font-size: 1.2rem; }.card-preview h3 { margin: 14px 0 5px; font-size: .95rem; color: #3b5e8b; }.card-preview ul { margin: 0; padding: 0; list-style: none; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }.card-preview li { padding: 3px 0; border-top: 1px solid #dce4f1; }.card-preview dl { margin: 0; }.card-preview dt { font-weight: 700; display: inline; }.card-preview dd { display: inline; margin: 0; }.card-preview dd::after { content: ""; display: block; height: 5px; }

/* UML-Klassenkarte: Name | Attribute | Operationen. Die Trennlinien
   ersetzen die zuvor verwendeten Bereichsüberschriften. */
.class-preview h2 { margin: 0; padding: 4px 10px; border-bottom: 1px solid #141414; background: #f0dcc4; color: #111; font-size: 1rem; text-align: center; }
.class-preview .uml-compartment { min-height: 1.6em; border-bottom: 1px solid #141414; }
.class-preview .uml-compartment:last-child { border-bottom: 0; }
.class-preview ul { padding: 3px 7px; font-size: 13px; line-height: 1.45; }
.class-preview li { padding: 0; border: 0; white-space: nowrap; }
.uml-visibility { display: inline-block; width: 1ch; margin-right: 2px; font-weight: 800; }
.uml-private { color: #d10000; }
.uml-public { color: #078418; }
.uml-protected { color: #ba7100; }
.uml-package { color: #596579; }