-Dropdowns (User-Menü, Benachrichtigungen) — Default-Marker entfernen,
Dropdown nur sichtbar wenn offen. */
.user-menu-details[b-0ljt6dmfbq],
.notif-details[b-0ljt6dmfbq] {
position: relative;
}
.user-menu-details > summary[b-0ljt6dmfbq],
.notif-details > summary[b-0ljt6dmfbq] {
list-style: none;
cursor: pointer;
}
.user-menu-details > summary[b-0ljt6dmfbq]::-webkit-details-marker,
.notif-details > summary[b-0ljt6dmfbq]::-webkit-details-marker {
display: none;
}
.user-menu-details[open] > .dropdown-menu[b-0ljt6dmfbq],
.notif-details[open] > .dropdown-menu[b-0ljt6dmfbq] {
display: block;
}
.user-menu-details:not([open]) > .dropdown-menu[b-0ljt6dmfbq],
.notif-details:not([open]) > .dropdown-menu[b-0ljt6dmfbq] {
display: none;
}
/* Avatar button */
.avatar[b-0ljt6dmfbq] {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
display: grid;
place-items: center;
font-size: 12px;
font-weight: 600;
border: 1px solid var(--color-border);
cursor: pointer;
transition: border-color 0.1s;
font-family: inherit;
}
.avatar:hover[b-0ljt6dmfbq] {
border-color: var(--color-border-strong);
}
/* Dropdown */
.dropdown[b-0ljt6dmfbq] {
position: relative;
}
.dropdown-menu[b-0ljt6dmfbq] {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 240px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
box-shadow: var(--shadow-lg);
padding: 6px;
z-index: 50;
animation: dd-in-b-0ljt6dmfbq 0.12s ease-out;
}
@keyframes dd-in-b-0ljt6dmfbq {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.dropdown-item[b-0ljt6dmfbq] {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
font-size: 13px;
color: var(--color-text-primary);
cursor: pointer;
user-select: none;
}
.dropdown-item:hover[b-0ljt6dmfbq] {
background: var(--color-surface-hover);
}
.dropdown-separator[b-0ljt6dmfbq] {
height: 1px;
background: var(--color-border);
margin: 6px 4px;
}
/* Benachrichtigungen: Badge auf der Glocke + Listeneinträge */
.notif-badge[b-0ljt6dmfbq] {
position: absolute;
top: 2px;
right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--color-danger);
color: #fff; /* bewusst weiß: liegt auf Solid-Statusfarbe, themenunabhängig */
font-size: 10px;
font-weight: 700;
line-height: 16px;
text-align: center;
box-shadow: 0 0 0 2px var(--color-surface);
}
.notif-markall[b-0ljt6dmfbq] {
background: transparent;
border: 0;
color: var(--color-accent);
font-size: 11.5px;
cursor: pointer;
padding: 2px 4px;
border-radius: 4px;
font-family: inherit;
}
.notif-markall:hover[b-0ljt6dmfbq] {
background: var(--color-surface-hover);
}
.notif-item[b-0ljt6dmfbq] {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: 0;
border-radius: 6px;
padding: 8px 10px;
cursor: pointer;
font-family: inherit;
}
.notif-item:hover[b-0ljt6dmfbq] {
background: var(--color-surface-hover);
}
.notif-item.is-unread[b-0ljt6dmfbq] {
background: var(--color-bg-subtle);
}
.notif-item.is-unread .notif-item-title[b-0ljt6dmfbq] {
font-weight: 600;
}
.notif-item-title[b-0ljt6dmfbq] {
font-size: 12.5px;
color: var(--color-text-primary);
}
.notif-item-msg[b-0ljt6dmfbq] {
font-size: 11.5px;
color: var(--color-text-secondary);
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.notif-item-time[b-0ljt6dmfbq] {
font-size: 10.5px;
color: var(--color-text-muted);
margin-top: 3px;
}
/* /Components/Pages/Admin/InvoiceRecipientBcLinkCard.razor.rz.scp.css */
/* Abstand zur Karte darüber wie bei den übrigen Karten auf /tenant-management (Muster TenantQuotaCard.razor.css). */
.card-spaced[b-8ue0c1gj2z] {
margin-top: 16px;
}
.bc-link-intro[b-8ue0c1gj2z] {
margin: 0 0 14px;
}
.bc-link-toggle[b-8ue0c1gj2z] {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
margin-bottom: 14px;
cursor: pointer;
}
.bc-link-empty[b-8ue0c1gj2z] {
text-align: center;
padding: 24px;
color: var(--color-text-muted);
font-size: 13px;
}
.bc-link-input[b-8ue0c1gj2z] {
width: 150px;
}
.bc-link-hints[b-8ue0c1gj2z] {
font-size: 12px;
max-width: 320px;
}
/* /Components/Pages/Admin/InvoiceRecipientBcTakeoverDialog.razor.rz.scp.css */
/* Dialog „Aus Business Central übernehmen" — ausschließlich Design-Tokens, damit das dunkle Theme ohne
zweite Regelmenge trägt (docs/concepts/theming.md). Maße wie im Dialog „Benutzer aus winsolvenz
übernehmen": es ist dieselbe Such- und Auswahlgeste. */
.bc-takeover-intro[b-kl6jr1z1i0] {
margin: 0 0 12px;
}
.bc-takeover-banner[b-kl6jr1z1i0] {
margin-bottom: 12px;
}
.bc-takeover-search[b-kl6jr1z1i0] {
display: flex;
align-items: center;
gap: 8px;
}
.bc-takeover-query[b-kl6jr1z1i0] {
flex: 1 1 auto;
min-width: 0;
}
.bc-takeover-search-hint[b-kl6jr1z1i0] {
margin: 6px 0 12px;
}
.bc-takeover-state[b-kl6jr1z1i0] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 8px;
font-size: 12.5px;
color: var(--color-text-secondary);
}
/* Feste Obergrenze statt mitwachsendem Dialog: bei 50 Treffern bliebe die Fußzeile sonst unerreichbar. */
.bc-takeover-hits[b-kl6jr1z1i0] {
max-height: min(48vh, 380px);
overflow: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
}
.bc-takeover-flags[b-kl6jr1z1i0] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.bc-takeover-flags .ds-badge[b-kl6jr1z1i0] {
font-size: 10.5px;
}
.bc-takeover-holder[b-kl6jr1z1i0] {
margin-top: 4px;
font-size: 11.5px;
color: var(--color-text-muted);
}
.bc-takeover-pick[b-kl6jr1z1i0] {
text-align: right;
white-space: nowrap;
}
.bc-takeover-selected[b-kl6jr1z1i0] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
font-size: 13px;
color: var(--color-text-primary);
}
/* Die Anschrift ist mehrzeilig (addressLine1/addressLine2) — die Zeilenumbrüche des Werts bleiben stehen. */
.bc-takeover-value[b-kl6jr1z1i0] {
white-space: pre-line;
word-break: break-word;
}
.bc-takeover-current[b-kl6jr1z1i0] {
color: var(--color-text-muted);
}
.bc-takeover-note[b-kl6jr1z1i0] {
max-width: 260px;
font-size: 12px;
color: var(--color-text-muted);
}
.bc-takeover-footnote[b-kl6jr1z1i0] {
margin: 10px 0 0;
}
/* /Components/Pages/Admin/MailDomainDialog.razor.rz.scp.css */
/* ── Layout und Felder ──
.col-full/.w-full/.field-hint stehen auch im SFTP-Dialog: Scoped CSS gilt nur für das Markup
der eigenen Komponente, und die beiden Formulare dürfen sich unabhängig entwickeln. */
.mail-grid[b-ne9b6appzc] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
}
.col-full[b-ne9b6appzc] {
grid-column: 1 / -1;
}
.w-full[b-ne9b6appzc] {
width: 100%;
}
.resize-v[b-ne9b6appzc] {
resize: vertical;
}
.field-hint[b-ne9b6appzc] {
font-size: 11.5px;
color: var(--color-text-muted);
margin-top: 6px;
}
.sender-value[b-ne9b6appzc] {
color: var(--color-text-primary);
}
/* ── Webhook-Infobox ── */
.info-box[b-ne9b6appzc] {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 12px 14px;
margin-top: 10px;
}
.uri-row[b-ne9b6appzc] {
display: flex;
gap: 8px;
align-items: center;
margin-top: 4px;
}
.uri-input[b-ne9b6appzc] {
width: 100%;
font-size: 12px;
}
.webhook-note[b-ne9b6appzc] {
font-size: 11.5px;
color: var(--color-text-muted);
margin-top: 8px;
line-height: 1.6;
}
.regen-btn[b-ne9b6appzc] {
margin-top: 10px;
}
/* /Components/Pages/Admin/MailProviderSection.razor.rz.scp.css */
.card-spaced[b-0dd9ei081v] {
margin-top: 16px;
}
.empty-hint[b-0dd9ei081v] {
font-size: 12.5px;
color: var(--color-text-muted);
}
/* ── Tabelle ── */
.ta-right[b-0dd9ei081v] {
text-align: right;
}
.td-name[b-0dd9ei081v] {
font-weight: 500;
}
.badge-sm[b-0dd9ei081v] {
font-size: 10.5px;
}
.td-detail[b-0dd9ei081v] {
font-size: 12px;
color: var(--color-text-muted);
}
.td-updated[b-0dd9ei081v] {
font-size: 11.5px;
color: var(--color-text-muted);
}
.td-actions[b-0dd9ei081v] {
text-align: right;
white-space: nowrap;
}
/* ── Typ-Wähler-Dialog ── */
.kind-intro[b-0dd9ei081v] {
font-size: 13px;
color: var(--color-text-muted);
margin: 0 0 14px;
}
.kind-list[b-0dd9ei081v] {
display: flex;
flex-direction: column;
gap: 10px;
}
.kind-btn[b-0dd9ei081v] {
justify-content: flex-start;
text-align: left;
height: auto;
padding: 12px 14px;
}
.kind-btn-title[b-0dd9ei081v] {
font-weight: 600;
font-size: 13.5px;
}
.kind-btn-desc[b-0dd9ei081v] {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 2px;
}
/* /Components/Pages/Admin/OnPremConnectorPairing.razor.rz.scp.css */
/* API-Adresse-Karte: Abstand analog zu den benachbarten ds-card-Blöcken der Seite (dort per
Inline-Style gesetzt — hier als Klasse, siehe GUIDELINES.md „kein Inline-style für neue
Elemente"). */
.api-host-card[b-72vyzjimtx] {
margin-bottom: 16px;
}
.api-host-hint[b-72vyzjimtx] {
margin: 0 0 12px;
font-size: 13px;
color: var(--color-text-muted);
}
.api-host-row[b-72vyzjimtx] {
display: flex;
gap: 8px;
align-items: center;
}
.api-host-input[b-72vyzjimtx] {
width: 100%;
max-width: 420px;
}
/* /Components/Pages/Admin/SftpTargetDialog.razor.rz.scp.css */
/* ── Layout und Felder ──
.col-full/.w-full/.field-hint stehen auch im Mail-Domain-Dialog: Scoped CSS gilt nur für das
Markup der eigenen Komponente, und die beiden Formulare dürfen sich unabhängig entwickeln. */
.sftp-grid[b-955x8htc00] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 18px;
}
.col-full[b-955x8htc00] {
grid-column: 1 / -1;
}
.w-full[b-955x8htc00] {
width: 100%;
}
.field-hint[b-955x8htc00] {
font-size: 11.5px;
color: var(--color-text-muted);
margin-top: 6px;
}
/* ── Sektion „Konfiguration des Druckdienstleisters" ── */
.bt-section[b-955x8htc00] {
border-top: 1px solid var(--color-border);
margin-top: 4px;
padding-top: 14px;
}
.bt-title[b-955x8htc00] {
font-size: 13px;
font-weight: 600;
margin: 0 0 2px;
}
/* /Components/Pages/Admin/ShippingTariffDetailCard.razor.rz.scp.css */
/* Kopfzeile darf bei schmalen Breiten umbrechen (Titel + Header-Buttons). */
.header-wrap[b-u5apbqw1ai] {
flex-wrap: wrap;
}
/* /Components/Pages/Admin/TenantAiAssistantCard.razor.rz.scp.css */
.card-spaced[b-3x877ol4j4] {
margin-top: 16px;
}
.intro[b-3x877ol4j4] {
font-size: 12px;
color: var(--color-text-muted);
margin: 0;
}
.toggle-row[b-3x877ol4j4] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.toggle-title[b-3x877ol4j4] {
font-size: 13px;
font-weight: 500;
}
.toggle-desc[b-3x877ol4j4] {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 2px;
}
.divider[b-3x877ol4j4] {
height: 1px;
background: var(--color-border);
margin: 16px 0;
}
/* /Components/Pages/Admin/TenantAssistantModelsCard.razor.rz.scp.css */
/* Spiegelt TenantAiAssistantCard.razor.css — scoped CSS gilt nur für die eigene Komponente,
die Klassen müssen hier also eigenständig stehen. */
.card-spaced[b-urjbh1f91x] {
margin-top: 16px;
}
.intro[b-urjbh1f91x] {
font-size: 12px;
color: var(--color-text-muted);
margin: 0;
}
.divider[b-urjbh1f91x] {
height: 1px;
background: var(--color-border);
margin: 16px 0;
}
.model-section[b-urjbh1f91x] {
max-width: 440px;
}
/* Kopfzeile je Abschnitt: benennt, für welchen Assistenten das darunter gewählte Modell gilt. */
.model-section-head[b-urjbh1f91x] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.model-section-title[b-urjbh1f91x] {
font-size: 13px;
font-weight: 600;
margin: 0;
}
/* Hinweis, dass der zugehörige Assistent gerade aus ist — gedämpft, weil die Modellwahl
trotzdem gültig bleibt. */
.section-note[b-urjbh1f91x] {
margin-bottom: 8px;
}
.actions[b-urjbh1f91x] {
margin-top: 14px;
}
.w-full[b-urjbh1f91x] {
width: 100%;
}
/* /Components/Pages/Admin/TenantBrandingSection.razor.rz.scp.css */
/* Zwei feste Spalten: helle und dunkle Fassung desselben Motivs stehen nebeneinander (Zeile 1
das breite Logo, Zeile 2 die Bildmarke). Die Breite ist gedeckelt, damit die Kacheln auf
großen Bildschirmen nicht auseinanderlaufen. */
.branding-grid[b-8rvxlsk9ao] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 4px;
max-width: 880px;
}
@media (max-width: 720px) {
.branding-grid[b-8rvxlsk9ao] {
grid-template-columns: minmax(0, 1fr);
}
}
/* Regler für die Logo-Größe: nutzbare Innenbreite der Vorschau-Kachel (208 px, 210 px Kachel minus
1px Rahmen beidseitig) entspricht der Sidebar-Geometrie (240 px minus 2x16 px Padding), das
Basis-Logo ist bei 100 % 160×40 px groß (TenantBranding.LogoReferenceWidthPx/-HeightPx, hier
notgedrungen als Literal) — so deckelt die Kachel sichtbar, sobald die Vergrößerung
breiter würde, als die Sidebar tatsächlich Platz bietet. Die 64 px Höhe lassen auch bei 140 %
(56 px Logo-Höhe) noch etwas Luft. */
.logo-scale-row[b-8rvxlsk9ao] {
display: flex;
align-items: center;
gap: 10px;
}
.logo-scale-label[b-8rvxlsk9ao] {
font-size: 11.5px;
color: var(--color-text-muted);
flex: 0 0 auto;
}
.logo-scale-slider[b-8rvxlsk9ao] {
flex: 1 1 auto;
min-width: 0;
accent-color: var(--color-primary);
}
.logo-scale-value[b-8rvxlsk9ao] {
font-size: 12px;
color: var(--color-text-secondary);
min-width: 3.5em;
text-align: right;
}
.logo-scale-reset[b-8rvxlsk9ao] {
flex: 0 0 auto;
}
/* /Components/Pages/Admin/TenantFeaturesCard.razor.rz.scp.css */
/* Spiegelt die Karten daneben (TenantSecurityCard, TenantAiAssistantCard) — scoped CSS gilt nur für
die eigene Komponente, die Klassen müssen hier also eigenständig stehen. */
.card-spaced[b-m73gbxfvfo] {
margin-top: 16px;
}
.intro[b-m73gbxfvfo] {
font-size: 12px;
color: var(--color-text-muted);
margin: 0;
}
.toggle-row[b-m73gbxfvfo] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.toggle-title[b-m73gbxfvfo] {
font-size: 13px;
font-weight: 500;
}
.toggle-desc[b-m73gbxfvfo] {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 2px;
}
.divider[b-m73gbxfvfo] {
height: 1px;
background: var(--color-border);
margin: 16px 0;
}
/* Abhängige Einträge stehen eingerückt an einer Führungslinie unter ihrem Elternteil. Bewusst nur
EINE Stufe, auch bei mehrstufiger Abhängigkeit — eine Treppe würde die Karte nur breit machen.
Das Padding sitzt an der Zeile selbst (nicht als Abstand zwischen den Zeilen), damit die Linie
über aufeinanderfolgende abhängige Zeilen durchläuft. */
.toggle-row.dependent[b-m73gbxfvfo] {
margin-left: 4px;
padding: 8px 0 8px 16px;
border-left: 2px solid var(--color-border);
}
/* Grund der Sperre, wenn der sperrende Schalter in einer anderen Karte steht (Betreiber-Freigabe).
Hebt sich von der Beschreibung ab, ohne wie eine Fehlermeldung zu wirken — es ist ein Zustand,
kein Fehler. */
.toggle-hint[b-m73gbxfvfo] {
font-size: 12px;
color: var(--color-text-muted);
font-style: italic;
margin-top: 4px;
}
/* Elternteil aus: die Zeile tritt zurück, bleibt aber lesbar — der Schalter ist gesperrt und bringt
seine eigene Dämpfung mit. Gedämpft wird deshalb nur die Überschrift, und zwar auf die Farbe der
Beschreibung: opacity oder --color-text-faint träfen den 12-Pixel-Text mit und blieben im
Dark-Theme unter einem brauchbaren Kontrast. */
.toggle-row.inactive .toggle-title[b-m73gbxfvfo] {
color: var(--color-text-muted);
font-weight: 400;
}
/* /Components/Pages/Admin/TenantInvoiceRecipientNameCard.razor.rz.scp.css */
.card-spaced[b-l21hj71ivv] {
margin-top: 16px;
}
.intro[b-l21hj71ivv] {
margin: 0 0 14px;
font-size: 13px;
color: var(--color-text-secondary);
line-height: 1.5;
}
.w-full[b-l21hj71ivv] {
width: 100%;
}
.chip-groups[b-l21hj71ivv] {
display: flex;
flex-direction: column;
gap: 10px;
margin: 14px 0;
}
.chip-group-title[b-l21hj71ivv] {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
margin-bottom: 4px;
}
.chips[b-l21hj71ivv] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.preview[b-l21hj71ivv] {
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 10px 12px;
font-size: 13px;
}
.preview-label[b-l21hj71ivv] {
color: var(--color-text-muted);
font-size: 12px;
margin-bottom: 4px;
}
.preview-value[b-l21hj71ivv] {
color: var(--color-text-primary);
font-weight: 600;
}
.preview-empty[b-l21hj71ivv] {
color: var(--color-text-muted);
}
.preview-alert[b-l21hj71ivv] {
margin: 0 0 4px;
}
.actions[b-l21hj71ivv] {
margin-top: 14px;
display: flex;
gap: 8px;
}
/* /Components/Pages/Admin/TenantLimitsCard.razor.rz.scp.css */
.card-spaced[b-ehd55rq9pq] {
margin-top: 16px;
}
.intro[b-ehd55rq9pq] {
font-size: 12px;
color: var(--color-text-muted);
margin: 0 0 14px;
}
.limits-grid[b-ehd55rq9pq] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
max-width: 440px;
}
.actions[b-ehd55rq9pq] {
margin-top: 14px;
}
.w-full[b-ehd55rq9pq] {
width: 100%;
}
/* /Components/Pages/Admin/TenantLogoSlotTile.razor.rz.scp.css */
.branding-block[b-gdk911an9n] {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-surface-hover);
}
.logo-preview[b-gdk911an9n] {
border: 1px solid var(--color-border);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-surface);
overflow: hidden;
}
.logo-preview-wide[b-gdk911an9n] {
width: 210px;
height: 64px;
}
.logo-preview-mark[b-gdk911an9n] {
width: 48px;
height: 48px;
}
.logo-preview-empty[b-gdk911an9n] {
border-style: dashed;
background: transparent;
}
/* Dunkle Vorschau: feste dunkle Fläche unabhängig vom App-Theme (siehe app.css), damit sichtbar
bleibt, wie das Logo im Dark Mode wirkt — nie mit .logo-preview-empty kombiniert (Kachel bleibt
im leeren Zustand gestrichelt/transparent, siehe TenantLogoSlotTile.razor). */
.logo-preview-dark[b-gdk911an9n] {
background: var(--color-surface-inverse);
}
.logo-img[b-gdk911an9n] {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Kanzlei-Logos sind typischerweise dunkel auf transparent und wären auf dunklen Flächen
unlesbar. invert+hue-rotate flippt die Helligkeit und erhält den Farbton näherungsweise — nur
auf der hellen Vorschau OHNE eigene Dark-Fassung (siehe ShowInvert in TenantLogoSlotTile.razor).
Die dunkle Vorschau (.logo-preview-dark) bekommt diesen Filter nie. */
html[data-theme="dark"] .logo-img-invert[b-gdk911an9n] {
filter: invert(1) hue-rotate(180deg);
}
.logo-empty[b-gdk911an9n] {
font-size: 11.5px;
color: var(--color-text-muted);
}
.logo-empty-mark[b-gdk911an9n] {
font-size: 10.5px;
text-align: center;
}
/* Umbruch ist Pflicht: der dunkle Slot trägt bis zu drei Buttons (Ersetzen / Übernehmen /
Entfernen), die nebeneinander breiter werden als die Kachel. */
.branding-actions[b-gdk911an9n] {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.upload-label[b-gdk911an9n] {
cursor: pointer;
margin: 0;
}
/* rendert sein als Kind-Komponente — das CSS-Isolation-Attribut der
umschließenden Datei wird darauf nicht gestempelt. Ohne ::deep bliebe der native
„Datei auswählen"-Button neben dem Upload-Label sichtbar (siehe FileExplorer.razor.css). */
.upload-label[b-gdk911an9n] .hidden-input {
display: none;
}
.logo-hint[b-gdk911an9n] {
font-size: 11.5px;
color: var(--color-text-muted);
width: 100%;
}
.logo-hint-disabled[b-gdk911an9n] {
color: var(--color-text-secondary);
}
/* /Components/Pages/Admin/TenantMasterDataCard.razor.rz.scp.css */
.stammdaten-grid[b-m183bmin46] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
}
.name-row[b-m183bmin46] {
display: flex;
align-items: center;
gap: 10px;
}
.value-text[b-m183bmin46] {
font-size: 13.5px;
}
.created-value[b-m183bmin46] {
font-size: 12.5px;
color: var(--color-text-muted);
}
.col-full[b-m183bmin46] {
grid-column: 1 / -1;
}
.w-full[b-m183bmin46] {
width: 100%;
}
/* /Components/Pages/Admin/TenantQuotaCard.razor.rz.scp.css */
/* Abstand zur Karte darüber wie bei den übrigen Karten auf /tenant-management. */
.card-spaced[b-heoy86xmfl] {
margin-top: 16px;
}
/* Dialog-Feinschliff wie bei TenantSepteoDataCard.razor.css — scoped CSS gilt nur für die eigene
Komponente, die Klassen müssen hier also eigenständig stehen. */
.dialog-intro[b-heoy86xmfl] {
margin: 0 0 12px;
}
.w-full[b-heoy86xmfl] {
width: 100%;
}
/* /Components/Pages/Admin/TenantRecipeReseedCard.razor.rz.scp.css */
.card-spaced[b-wpxvojm7uw] {
margin-top: 16px;
}
/* /Components/Pages/Admin/TenantRetentionCard.razor.rz.scp.css */
.card-spaced[b-0jbcmscd2f] {
margin-top: 16px;
}
.intro[b-0jbcmscd2f] {
font-size: 12px;
color: var(--color-text-muted);
margin: 0 0 14px;
}
.retention-grid[b-0jbcmscd2f] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
max-width: 440px;
}
.actions[b-0jbcmscd2f] {
margin-top: 14px;
}
.w-full[b-0jbcmscd2f] {
width: 100%;
}
/* /Components/Pages/Admin/TenantSalesAssignmentCard.razor.rz.scp.css */
.card-spaced[b-kl4bu9md00] {
margin-top: 16px;
}
.intro[b-kl4bu9md00] {
font-size: 12px;
color: var(--color-text-muted);
margin: 0 0 14px;
}
.actions[b-kl4bu9md00] {
margin-top: 14px;
}
.w-full[b-kl4bu9md00] {
width: 100%;
max-width: 440px;
}
/* /Components/Pages/Admin/TenantSecurityCard.razor.rz.scp.css */
.card-spaced[b-w70opzrw0r] {
margin-top: 16px;
}
.toggle-row[b-w70opzrw0r] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.toggle-title[b-w70opzrw0r] {
font-size: 13px;
font-weight: 500;
}
.toggle-desc[b-w70opzrw0r] {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 2px;
}
.divider[b-w70opzrw0r] {
height: 1px;
background: var(--color-border);
margin: 16px 0;
}
/* /Components/Pages/Admin/TenantSepteoDataCard.razor.rz.scp.css */
/* Zweispaltig wie die Stammdaten-Karte (TenantMasterDataCard.razor.css) — scoped CSS gilt nur
für die eigene Komponente, die Klassen müssen hier also eigenständig stehen. */
.septeo-grid[b-2tnsomgmki] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
}
.name-row[b-2tnsomgmki] {
display: flex;
align-items: center;
gap: 10px;
}
.value-text[b-2tnsomgmki] {
font-size: 13.5px;
}
.value-loading[b-2tnsomgmki] {
color: var(--color-text-muted);
}
/* Pflichtfeld-Markierung seit AP5 (E7) — Muster der übrigen Warnfarben im Design-System. */
.required-marker[b-2tnsomgmki] {
color: var(--color-danger);
}
.hint-warning[b-2tnsomgmki] {
color: var(--color-warning-text);
}
.dialog-intro[b-2tnsomgmki] {
margin: 0 0 12px;
}
.w-full[b-2tnsomgmki] {
width: 100%;
}
/* /Components/Pages/Admin/TenantSsoSection.razor.rz.scp.css */
.card-spaced[b-l3ypy4evsh] {
margin-top: 16px;
}
.empty-hint[b-l3ypy4evsh] {
font-size: 12.5px;
color: var(--color-text-muted);
}
.meta-grid[b-l3ypy4evsh] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
}
.value-text[b-l3ypy4evsh] {
font-size: 13.5px;
}
.domains-value[b-l3ypy4evsh] {
font-size: 12px;
color: var(--color-text-muted);
}
.summary-row[b-l3ypy4evsh] {
grid-column: 1 / -1;
/* padding kam bisher aus der (entfernten) globalen .summary-row in app.css */
padding: 10px 0;
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 12px;
color: var(--color-text-muted);
}
.card-actions[b-l3ypy4evsh] {
margin-top: 14px;
display: flex;
gap: 8px;
}
/* ── OIDC-Dialog ── */
.form-grid[b-l3ypy4evsh] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 18px;
}
.col-full[b-l3ypy4evsh] {
grid-column: 1 / -1;
}
.w-full[b-l3ypy4evsh] {
width: 100%;
}
.info-box[b-l3ypy4evsh] {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 12px 14px;
}
.uri-row[b-l3ypy4evsh] {
display: flex;
gap: 8px;
align-items: center;
margin-top: 4px;
}
.uri-input[b-l3ypy4evsh] {
width: 100%;
font-size: 12px;
}
.steps-list[b-l3ypy4evsh] {
margin: 10px 0 0;
padding-left: 18px;
font-size: 11.5px;
color: var(--color-text-muted);
line-height: 1.7;
}
.adv-summary[b-l3ypy4evsh] {
cursor: pointer;
font-size: 12.5px;
color: var(--color-text-muted);
}
.adv-grid[b-l3ypy4evsh] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 18px;
margin-top: 12px;
}
.divider-full[b-l3ypy4evsh] {
grid-column: 1 / -1;
height: 1px;
background: var(--color-border);
}
.check-label[b-l3ypy4evsh] {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
cursor: pointer;
}
.check-box[b-l3ypy4evsh] {
margin-top: 2px;
}
.field-hint[b-l3ypy4evsh] {
font-size: 11.5px;
color: var(--color-text-muted);
margin-top: 6px;
}
.rm-header[b-l3ypy4evsh] {
display: flex;
align-items: center;
justify-content: space-between;
}
.label-flush[b-l3ypy4evsh] {
margin: 0;
}
.rm-desc[b-l3ypy4evsh] {
font-size: 11.5px;
color: var(--color-text-muted);
margin: 4px 0 10px;
}
.rm-claim-row[b-l3ypy4evsh] {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
max-width: 320px;
}
.rm-claim-label[b-l3ypy4evsh] {
margin: 0;
white-space: nowrap;
}
.rm-empty[b-l3ypy4evsh] {
font-size: 12px;
color: var(--color-text-faint);
}
.rm-rows[b-l3ypy4evsh] {
display: flex;
flex-direction: column;
gap: 8px;
}
.rm-row[b-l3ypy4evsh] {
display: flex;
gap: 8px;
align-items: center;
}
.rm-value[b-l3ypy4evsh] {
flex: 1;
}
.rm-arrow[b-l3ypy4evsh] {
color: var(--color-text-muted);
}
.rm-select[b-l3ypy4evsh] {
width: 170px;
}
/* /Components/Pages/Admin/WinsolvenzUserImportDialog.razor.rz.scp.css */
/* Benutzerliste des Dialogs „Benutzer aus winsolvenz übernehmen" — Maße und Töne wie die
Dokumentliste der Anlagen-Dialoge (WebDocumentDialog): es ist dieselbe Auswahlgeste.
Ausschließlich Design-Tokens — damit trägt das dunkle Theme ohne eine zweite Regelmenge
(siehe docs/concepts/theming.md). */
.wz-banner[b-cfqxby5dwi] {
margin-bottom: 12px;
}
/* Zeile über der Liste: Suchfeld und der Schalter für die in winsolvenz inaktiven Benutzer. */
.wz-toolbar[b-cfqxby5dwi] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.wz-search[b-cfqxby5dwi] {
flex: 1 1 auto;
min-width: 0;
}
.wz-inactive[b-cfqxby5dwi] {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
font-size: 11.5px;
color: var(--color-text-muted);
white-space: nowrap;
}
.wz-users[b-cfqxby5dwi] {
/* Feste Höhe statt max-height: der Dialog springt beim Anhaken nicht in der Größe. */
height: min(52vh, 420px);
overflow: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-surface);
padding: 6px;
}
.wz-user[b-cfqxby5dwi] {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 8px;
border-radius: var(--radius-input);
cursor: pointer;
}
.wz-user:hover[b-cfqxby5dwi] {
background: var(--color-surface-hover);
}
/* Zeilen ohne Adresse, ohne vollständigen Namen und bereits bekannte Personen bleiben sichtbar
(der Admin soll den Bestand vollständig sehen), sind aber erkennbar nicht wählbar. Die
Begründung steht als title am Element. */
.wz-user-locked[b-cfqxby5dwi] {
cursor: default;
opacity: 0.55;
}
.wz-user-body[b-cfqxby5dwi] {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.wz-user-name[b-cfqxby5dwi] {
font-size: 12.5px;
color: var(--color-text-primary);
word-break: break-word;
}
.wz-user-meta[b-cfqxby5dwi] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 11px;
color: var(--color-text-muted);
}
.wz-flag[b-cfqxby5dwi] {
font-size: 10.5px;
}
.wz-state[b-cfqxby5dwi] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 8px;
font-size: 12.5px;
color: var(--color-text-secondary);
}
.wz-hint[b-cfqxby5dwi] {
padding: 10px 8px;
font-size: 12.5px;
color: var(--color-text-muted);
}
/* Ergebnis des letzten Laufs über der Liste: Summenzeile plus die Zeilen, die nicht eingeladen
wurden. Bewusst kein Alert — auch ein Lauf mit Übersprungenen ist ein normaler Ausgang. */
.wz-result[b-cfqxby5dwi] {
margin-bottom: 12px;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-bg-app);
}
.wz-result-summary[b-cfqxby5dwi] {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 500;
color: var(--color-text-primary);
}
.wz-result-row[b-cfqxby5dwi] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
font-size: 11.5px;
color: var(--color-text-secondary);
}
.wz-result-label[b-cfqxby5dwi] {
color: var(--color-text-primary);
}
.wz-result-detail[b-cfqxby5dwi] {
color: var(--color-text-muted);
}
/* Der Zähler steht links, die Schaltflächen bleiben rechts (ds-dialog-footer richtet rechtsbündig aus). */
.wz-count[b-cfqxby5dwi] {
margin-right: auto;
font-size: 12px;
color: var(--color-text-muted);
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
.login-brand[b-tjl8std86x] {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
/* .ds-card hat selbst kein Padding → Abstand oben wie unten hier setzen. */
margin-top: 24px;
margin-bottom: 24px;
}
.login-brand-text[b-tjl8std86x] {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.login-brand-lockup[b-tjl8std86x] {
height: 26px;
width: auto;
max-width: 240px;
/* Ohne object-fit staucht max-width das Logo, weil die Hoehe fest bleibt - in der
240px-Sidebar sind das rund 9% Verzerrung. So skaliert es stattdessen mit. */
object-fit: contain;
}
/* Nur eine der beiden Varianten ist sichtbar — welche, hängt vom Theme ab (siehe
html[data-theme="dark"] weiter unten). Ein ![]()
lässt sich nicht per CSS umschalten. */
.login-brand-lockup-dark[b-tjl8std86x] {
display: none;
}
html[data-theme="dark"] .login-brand-lockup-light[b-tjl8std86x] {
display: none;
}
html[data-theme="dark"] .login-brand-lockup-dark[b-tjl8std86x] {
display: block;
}
/* Whitelabel-Logo des Tenants im Passwort-Schritt. */
.login-tenant-logo[b-tjl8std86x],
.login-tenant-logo-light[b-tjl8std86x],
.login-tenant-logo-dark[b-tjl8std86x] {
max-width: 240px;
max-height: 56px;
object-fit: contain;
}
/* Gleiche Begründung wie Sidebar (siehe Sidebar.razor.css .tenant-logo) — nur ohne eigene
Dark-Fassung (.login-tenant-logo). */
html[data-theme="dark"] .login-tenant-logo[b-tjl8std86x] {
filter: invert(1) hue-rotate(180deg);
}
/* Tenant hat eine eigene Dark-Fassung hinterlegt: beide Varianten rendern, hier nur umschalten —
kein Invert-Filter auf beiden (siehe Login.razor). */
.login-tenant-logo-dark[b-tjl8std86x] {
display: none;
}
html[data-theme="dark"] .login-tenant-logo-light[b-tjl8std86x] {
display: none;
}
html[data-theme="dark"] .login-tenant-logo-dark[b-tjl8std86x] {
display: block;
}
/* Hersteller-Hinweis unter dem Brand-Block. */
.login-septeo[b-tjl8std86x] {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0 0 22px;
font-size: 11px;
color: var(--color-text-faint);
}
.login-septeo > svg[b-tjl8std86x] {
flex-shrink: 0;
}
/* Impressum/Datenschutz unter der Karte — ständig verfügbar, aber optisch zurückgenommen. */
.login-legal[b-tjl8std86x] {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 14px 20px 4px;
font-size: 11.5px;
color: var(--color-text-faint);
}
.login-legal a:hover[b-tjl8std86x] {
color: var(--color-text-primary);
}
/* Read-only-Anzeige der in Schritt 1 eingegebenen Email. */
.login-identity[b-tjl8std86x] {
padding: 9px 12px;
margin-bottom: 14px;
border-radius: var(--radius-input);
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
color: var(--color-text-primary);
font-size: 14px;
}
/* /Components/Pages/Connections/Connections.razor.rz.scp.css */
h3[b-lgpaqvbqg3] {
font-size: 13.5px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 8px;
}
.integration-steps[b-lgpaqvbqg3] {
margin: 8px 0 0;
padding-left: 20px;
color: var(--color-text-secondary);
font-size: 13.5px;
line-height: 1.6;
}
.integration-steps li[b-lgpaqvbqg3] {
margin-bottom: 6px;
}
.integration-steps li:last-child[b-lgpaqvbqg3] {
margin-bottom: 0;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* ─── Vertikaler Seitenrhythmus ───────────────────────────────
Ersetzt die früheren `style="margin-top:16px"` an jeder einzelnen Karte: ein Abstand, eine
Stelle. */
.dash-stack[b-5kisbjhlmr] {
display: flex;
flex-direction: column;
gap: 16px;
}
/* ─── Aktions-Chips (direkt unter dem Seitenkopf, kein eigener Block) ─── */
.dash-chips[b-5kisbjhlmr] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
/* Zieht die Zeile an den Seitenkopf heran (dessen margin-bottom ist 24px) und hält den
Abstand zum ersten Kartenblock. */
margin: -10px 0 18px;
}
.dash-chip[b-5kisbjhlmr] {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: var(--radius-pill);
font-size: 12.5px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
border: 1px solid transparent;
background: var(--color-neutral-bg);
color: var(--color-neutral-text);
transition: border-color 0.12s;
}
.dash-chip:hover[b-5kisbjhlmr] {
border-color: currentColor;
}
.dash-chip:focus-visible[b-5kisbjhlmr] {
outline: 2px solid var(--color-primary-ring);
outline-offset: 2px;
}
.dash-chip--warning[b-5kisbjhlmr] {
background: var(--color-warning-bg);
color: var(--color-warning-text);
}
.dash-chip--danger[b-5kisbjhlmr] {
background: var(--color-danger-bg);
color: var(--color-danger-text);
}
.dash-chip--neutral[b-5kisbjhlmr] {
background: var(--color-neutral-bg);
color: var(--color-neutral-text);
}
.dash-chips-empty[b-5kisbjhlmr] {
font-size: 12.5px;
color: var(--color-text-muted);
}
.dash-chip-skeleton[b-5kisbjhlmr] {
height: 30px;
width: 160px;
border-radius: var(--radius-pill);
}
/* ─── Kennzahlen-Kacheln ──────────────────────────────────────
BEWUSSTE ABWEICHUNG von .kpi-card (app.css), die SystemStatus, PlatformDashboard und
OperationsRadar nutzen: dort trägt eine farbige Icon-Fläche links die Kategorie. Hier ist die
Kategorie ein farbiger OBERRAND — die Kachel trägt Zahl, Delta und Sparkline untereinander, ein
40px-Icon links würde diesen Stapel zusammendrücken. Das ist kein Versehen und soll nicht auf
.kpi-card „zurückrepariert" werden; .kpi-card bleibt für die anderen Seiten unangetastet. Das
Raster (.kpi-grid) wird dagegen unverändert wiederverwendet. */
.dash-kpi[b-5kisbjhlmr] {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-top: 3px solid var(--color-border);
border-radius: var(--radius-card);
padding: 14px 18px 16px;
box-shadow: var(--shadow-xs);
}
.dash-kpi--primary[b-5kisbjhlmr] { border-top-color: var(--color-primary); }
.dash-kpi--success[b-5kisbjhlmr] { border-top-color: var(--color-success); }
.dash-kpi--info[b-5kisbjhlmr] { border-top-color: var(--color-info); }
.dash-kpi--warning[b-5kisbjhlmr] { border-top-color: var(--color-warning); }
.dash-kpi-label[b-5kisbjhlmr] {
font-size: 12px;
font-weight: 500;
color: var(--color-text-muted);
}
.dash-kpi-value[b-5kisbjhlmr] {
margin-top: 2px;
font-size: 28px;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
.dash-kpi-hint[b-5kisbjhlmr] {
margin-top: 7px;
font-size: 11.5px;
color: var(--color-text-muted);
}
/* Der Außenabstand steckt bereits in .sparkline (Sparkline.razor.css) — hier nur der
Schrumpf-Schutz für die Grid-Spalte. */
.dash-kpi-spark[b-5kisbjhlmr] {
min-width: 0;
}
/* Delta: Farbe ist NUR einer von drei Kanälen (Glyphe + Vorzeichen + Verdikt-Satz tragen dieselbe
Aussage), deshalb reicht der reine Farbwert ohne Fläche. */
.dash-delta[b-5kisbjhlmr] {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 7px;
font-size: 12.5px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.dash-delta--good[b-5kisbjhlmr] { color: var(--color-success); }
.dash-delta--bad[b-5kisbjhlmr] { color: var(--color-danger); }
.dash-delta--neutral[b-5kisbjhlmr] { color: var(--color-text-muted); }
/* ─── Laufende Aussendungen ───────────────────────────────── */
/* Die Spalten liegen am Container, nicht an der Zeile: die dritte Spalte ist inhaltsbreit
(„500 versendet" vs. „7 Fehler/Rücklauf · 6 unterwegs"), und mit einem Grid pro Zeile
bekäme jede Zeile eigene Spaltenbreiten — die Balken wären unterschiedlich lang und
gegeneinander verschoben. Die Zeilen übernehmen die Spuren des Containers per subgrid;
die ausgeschriebene Variante davor bleibt als Fallback für Browser ohne subgrid. */
.dash-run-rows[b-5kisbjhlmr] {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, auto) 16px;
/* Spaltenabstand gehört an den Container: in der subgrid-Achse ignoriert die Zeile ihr
eigenes `gap` und übernimmt die Abstände des Containers. */
column-gap: 14px;
row-gap: 2px;
}
.dash-run-rows > .ds-label-hint[b-5kisbjhlmr],
.dash-run-more[b-5kisbjhlmr] {
grid-column: 1 / -1;
}
.dash-run-row[b-5kisbjhlmr] {
display: grid;
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, auto) 16px;
grid-template-columns: subgrid;
align-items: center;
gap: 14px;
padding: 10px 12px;
margin: 0 -12px;
border-radius: var(--radius-input);
color: var(--color-text-secondary);
text-decoration: none;
}
.dash-run-row:hover[b-5kisbjhlmr] {
background: var(--color-surface-hover);
}
.dash-run-row:focus-visible[b-5kisbjhlmr] {
outline: 2px solid var(--color-primary-ring);
outline-offset: -2px;
}
.dash-run-main[b-5kisbjhlmr] {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.dash-run-title[b-5kisbjhlmr] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
color: var(--color-text-primary);
}
.dash-run-bar[b-5kisbjhlmr] {
display: flex;
height: 10px;
min-width: 0;
border-radius: var(--radius-pill);
overflow: hidden;
}
.dash-seg[b-5kisbjhlmr] {
height: 100%;
}
.dash-seg--success[b-5kisbjhlmr] { background: var(--color-success); }
.dash-seg--info[b-5kisbjhlmr] { background: var(--color-info); }
.dash-seg--warning[b-5kisbjhlmr] { background: var(--color-warning); }
.dash-seg--danger[b-5kisbjhlmr] { background: var(--color-danger); }
/* „ausgeschlossen": --color-text-muted statt --color-text-faint (das invertiert zwischen den
Themes falsch herum) und statt --color-border-strong (im Dark-Theme fast unsichtbar). */
.dash-seg--muted[b-5kisbjhlmr] { background: var(--color-text-muted); }
/* Noch nicht erzeugter Rest bis zum Soll — bewusst KEINE Ampelfarbe, sondern eine leere,
umrandete Fläche: „hier fehlt noch etwas", nicht „hier ist etwas schiefgegangen". */
.dash-seg--rest[b-5kisbjhlmr] {
background: var(--color-bg-subtle);
box-shadow: inset 0 0 0 1px var(--color-border);
}
.dash-run-top[b-5kisbjhlmr] {
font-size: 12px;
color: var(--color-text-muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.dash-run-empty[b-5kisbjhlmr] {
grid-column: 2 / 4;
font-size: 12px;
color: var(--color-text-faint);
}
.dash-run-more[b-5kisbjhlmr] {
padding-top: 8px;
font-size: 12px;
color: var(--color-text-muted);
}
/* ─── Onboarding / Fehler ─────────────────────────────────── */
.dash-onboarding .ds-card-body[b-5kisbjhlmr] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 40px;
}
.dash-onboarding h2[b-5kisbjhlmr] {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary);
}
.dash-onboarding p[b-5kisbjhlmr] {
margin: 0;
max-width: 62ch;
font-size: 13.5px;
color: var(--color-text-muted);
}
.dash-onboarding-actions[b-5kisbjhlmr] {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.dash-error-actions[b-5kisbjhlmr] {
margin-top: 10px;
}
/* ─── Schmale Viewports ───────────────────────────────────── */
@media (max-width: 760px) {
.dash-run-rows[b-5kisbjhlmr] {
grid-template-columns: minmax(0, 1fr) 16px;
}
.dash-run-row[b-5kisbjhlmr] {
grid-template-columns: minmax(0, 1fr) 16px;
grid-template-columns: subgrid;
row-gap: 8px;
}
.dash-run-main[b-5kisbjhlmr],
.dash-run-bar[b-5kisbjhlmr] {
grid-column: 1 / 2;
}
.dash-run-top[b-5kisbjhlmr],
.dash-run-empty[b-5kisbjhlmr] {
grid-column: 1 / 3;
}
}
/* /Components/Pages/DashboardHistory.razor.rz.scp.css */
/* ─── Zeitraum-Umschalter (3/6/12 Monate) ────────────────────
Segmentierte Schaltergruppe statt eines Selects: drei Optionen sind auf einen Blick sichtbar
und mit einem Klick erreichbar. Den aktuellen Zustand trägt nicht nur die Fläche, sondern auch
aria-pressed (siehe Markup). */
.dash-range[b-jh9namum3c] {
display: inline-flex;
border: 1px solid var(--color-border);
border-radius: var(--radius-btn);
overflow: hidden;
}
.dash-range-btn[b-jh9namum3c] {
height: 28px;
padding: 0 11px;
font-size: 12px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
border: 0;
border-left: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-muted);
cursor: pointer;
}
.dash-range-btn:first-child[b-jh9namum3c] {
border-left: 0;
}
.dash-range-btn:hover:not(:disabled)[b-jh9namum3c] {
background: var(--color-surface-hover);
color: var(--color-text-primary);
}
.dash-range-btn.is-active[b-jh9namum3c] {
background: var(--color-primary-soft);
color: var(--color-primary);
}
/* Im Dark-Theme ist --color-primary nur mittelhell (trägt dort Links/Icons) und reicht auf der
halbtransparenten --color-primary-soft-Fläche nicht für AA (effektiv ~3.3:1 gegen die
Kartenfläche darunter) — zudem wirkte der aktive Zustand dadurch blasser als die inaktiven
Knöpfe. --color-text-primary ist im Dark-Theme ohnehin die hellste Textfarbe: auf der getönten
Fläche klar lesbar und optisch eindeutig als Auswahl erkennbar. Im Light-Theme bleibt
--color-primary (dunkle Navy-Farbe auf sehr heller Fläche), das war nie das Problem. */
html[data-theme="dark"] .dash-range-btn.is-active[b-jh9namum3c] {
color: var(--color-text-primary);
}
.dash-range-btn:disabled[b-jh9namum3c] {
opacity: 0.5;
cursor: not-allowed;
}
.dash-range-btn:focus-visible[b-jh9namum3c] {
outline: 2px solid var(--color-primary-ring);
outline-offset: -2px;
}
/* ─── Raster: Chart links (2fr), Donut und Ursachen rechts (1fr) ───
minmax(0, …) durchgängig, sonst sprengen ein langer Befund-Text bzw. das Apex-SVG (das seine
Breite selbst misst und dabei gern wächst) ihre Spalte. */
.dash-history-grid[b-jh9namum3c] {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
grid-template-areas:
"combo donut"
"combo causes";
gap: 18px 20px;
}
.dash-panel[b-jh9namum3c] {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.dash-panel--combo[b-jh9namum3c] { grid-area: combo; }
.dash-panel--donut[b-jh9namum3c] { grid-area: donut; }
.dash-panel--causes[b-jh9namum3c] { grid-area: causes; }
.dash-panel-title[b-jh9namum3c] {
margin: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.dash-chart[b-jh9namum3c] {
min-width: 0;
}
/* ─── „Werte als Tabelle" ─────────────────────────────────── */
.dash-values > summary[b-jh9namum3c] {
padding: 4px 0;
font-size: 12px;
color: var(--color-text-muted);
cursor: pointer;
}
.dash-values > summary:focus-visible[b-jh9namum3c] {
outline: 2px solid var(--color-primary-ring);
outline-offset: 2px;
border-radius: var(--radius-input);
}
/* ─── Balkenliste „Häufigste Beanstandungen" ──────────────── */
/* Ein Raster für alle Zeilen (subgrid): die Label-Spalte wird so breit wie das längste Label,
gekürzt wird erst, wenn neben ihm nur noch der Mindestbalken Platz hat. Vorher teilte jede
Zeile ihre Breite fest im Verhältnis 1 : 0,9 zwischen Label und Balken. Dann stand
„Adresse unvollstä…" abgeschnitten, obwohl der Balken daneben Platz abgeben konnte. Die Balken beginnen
weiterhin in allen Zeilen an derselben Kante. */
.dash-bars[b-jh9namum3c] {
display: grid;
grid-template-columns: minmax(0, max-content) minmax(48px, 1fr) auto;
gap: 9px 10px;
margin: 0;
padding: 0;
list-style: none;
}
.dash-bar-row[b-jh9namum3c] {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
}
.dash-bar-label[b-jh9namum3c] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12.5px;
color: var(--color-text-secondary);
}
.dash-bar-track[b-jh9namum3c] {
height: 8px;
border-radius: var(--radius-pill);
background: var(--color-bg-subtle);
overflow: hidden;
}
/* Einfarbig: die Balken vergleichen Häufigkeiten EINER Sache (Beanstandungen) — acht Farben
würden eine Kategorien-Bedeutung behaupten, die es hier nicht gibt. */
.dash-bar-fill[b-jh9namum3c] {
display: block;
height: 100%;
border-radius: var(--radius-pill);
background: var(--color-danger);
}
.dash-bar-fill--others[b-jh9namum3c] {
background: var(--color-text-muted);
}
.dash-bar-value[b-jh9namum3c] {
min-width: 34px;
text-align: right;
font-size: 12px;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
/* ─── Schmale Viewports ───────────────────────────────────── */
@media (max-width: 1100px) {
.dash-history-grid[b-jh9namum3c] {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas:
"combo combo"
"donut causes";
}
}
@media (max-width: 760px) {
.dash-history-grid[b-jh9namum3c] {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"combo"
"donut"
"causes";
}
}
/* /Components/Pages/Help/HelpChatPanel.razor.rz.scp.css */
/* ─── KI-Assistent-Panel (rechte Spalte von /help) ───
Der äußere Kasten ist eine .ds-card (Fläche/Rahmen/Radius/Schatten kommen von dort), damit die
rechte Spalte optisch identisch zum Baum links sitzt. Hier stehen nur Layout-Eigenschaften. */
.help-chat[b-68cqzqn4zp] {
display: flex;
flex-direction: column;
/* Keine eigene Höhe: als Grid-Item auf die (definite) Zeilenhöhe gestreckt — siehe .help-toc
in HelpToc.razor.css. Die Nachrichtenliste scrollt intern (.help-chat-messages),
Kopf/Eingabe/Hinweis bleiben fest. min-height:0 ist dabei Pflicht, sonst verweigert die
Karte das Schrumpfen unter ihre Inhaltshöhe und wächst über die Zeile hinaus. */
min-height: 0;
min-width: 0;
}
@media (max-width: 900px) {
/* Einspaltig (siehe HelpIndex.razor.css) gibt es keine Zeilenhöhe mehr, an der sich das Panel
ausrichten könnte — hier bleibt es bei den früheren festen Grenzen. */
.help-chat[b-68cqzqn4zp] {
min-height: 460px;
max-height: 620px;
}
}
/* Der Karten-Körper trägt das interne Stapel-Layout; die Nachrichtenliste darf schrumpfen, damit
Eingabe und Hinweiszeile immer sichtbar bleiben (min-height:0 gegen die Flex-Default-Größe). */
.help-chat-body[b-68cqzqn4zp] {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
flex: 1 1 auto;
}
/* „Neuer Chat" und — nur im AssistantDialog — der Schließen-Knopf. */
.help-chat-actions[b-68cqzqn4zp] {
display: inline-flex;
align-items: center;
gap: 4px;
}
.help-chat-unavailable[b-68cqzqn4zp] {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
font-size: 13px;
}
.help-chat-unavailable p[b-68cqzqn4zp] { margin: 0; }
.help-chat-messages[b-68cqzqn4zp] {
flex: 1;
/* min-height:0 ist hier der eigentliche Kern: ohne sie verweigert sich ein Flex-Kind dem
Schrumpfen unter seine Inhaltsgröße und "flex:1" liefe ins Leere — die Liste würde den
Container sprengen statt intern zu scrollen. */
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 4px 4px 4px 0;
}
.help-chat-hint-empty[b-68cqzqn4zp] {
margin: 0;
padding: 16px;
font-size: 12.5px;
color: var(--color-text-muted);
}
.help-chat-msg[b-68cqzqn4zp] { max-width: 92%; }
.help-chat-msg--user[b-68cqzqn4zp] {
align-self: flex-end;
}
.help-chat-msg--user .help-chat-msg-text[b-68cqzqn4zp] {
background: var(--color-primary);
/* Bewusst weiß statt eines Tokens (Vorbild .ds-btn-primary in app.css): liegt auf
--color-primary, das selbst schon themenangepasst ist, und ist damit themenunabhängig. */
color: #ffffff;
border-radius: var(--radius-card);
padding: 10px 14px;
font-size: 13.5px;
line-height: 1.5;
white-space: pre-wrap;
}
.help-chat-msg--assistant[b-68cqzqn4zp] {
align-self: flex-start;
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 10px 14px;
}
/* ::deep, weil .help-article vom Kind HelpArticleBody erzeugt wird (siehe dessen eigenes .razor.css). */
.help-chat-msg--assistant[b-68cqzqn4zp] .help-article { font-size: inherit; }
.help-chat-msg--assistant[b-68cqzqn4zp] .help-article p:last-child { margin-bottom: 0; }
.help-chat-msg--error[b-68cqzqn4zp] {
display: flex;
gap: 8px;
align-items: flex-start;
color: var(--color-danger-text);
background: var(--color-danger-bg);
border-color: transparent;
font-size: 13px;
}
.help-chat-msg-live[b-68cqzqn4zp] {
white-space: pre-wrap;
font-size: 13.5px;
line-height: 1.5;
color: var(--color-text-primary);
}
/* Gedämpfte Statuszeile: Werkzeugnutzung ODER ein verworfener Zwischenkommentar (siehe
HelpChatTranscript.DiscardRound) — bewusst NICHT einfach entfernt, sondern als Kontext belassen. */
.help-chat-status[b-68cqzqn4zp] {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--color-text-muted);
font-style: italic;
}
.help-chat-status + .help-chat-status[b-68cqzqn4zp] { margin-top: 4px; }
.help-chat-msg-live + .help-chat-status[b-68cqzqn4zp],
.help-chat-status + .help-chat-msg-live[b-68cqzqn4zp] { margin-top: 6px; }
/* ─── Aktions-Vorschlag unter einer Antwort ───
Liegt auf .help-chat-msg--assistant (gleiche Breite und Ecken wie die Antwort darüber) und hebt
sich nur durch den Warn-Rahmen ab: hier wartet eine Entscheidung, die etwas verändert. Farben
ausschließlich über die --color-warning-*-Tokens, die in Light und Dark definiert sind. */
.help-chat-proposal[b-68cqzqn4zp] {
border-color: var(--color-warning);
background: var(--color-warning-bg);
display: flex;
flex-direction: column;
gap: 8px;
}
.help-chat-proposal-summary[b-68cqzqn4zp],
.help-chat-proposal-outcome[b-68cqzqn4zp] {
display: flex;
gap: 8px;
align-items: flex-start;
margin: 0;
font-size: 13px;
line-height: 1.5;
}
.help-chat-proposal-summary[b-68cqzqn4zp] { color: var(--color-warning-text); }
/* Das Ergebnis ist keine Warnung mehr, sondern eine Feststellung — ruhiger als der Vorschlag. */
.help-chat-proposal-outcome[b-68cqzqn4zp] { color: var(--color-text-secondary); }
.help-chat-proposal-actions[b-68cqzqn4zp] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.help-chat-input[b-68cqzqn4zp] {
display: flex;
gap: 8px;
align-items: flex-end;
}
.help-chat-textarea[b-68cqzqn4zp] { flex: 1; min-height: 60px; }
.help-chat-disclaimer[b-68cqzqn4zp] {
margin: 0;
font-size: 11px;
color: var(--color-text-faint);
}
/* /Components/Pages/Help/HelpIndex.razor.rz.scp.css */
/* ─── Zwei-Spalten-Layout: Inhaltsverzeichnis links, KI-Assistent rechts ───
Struktur wie .blob-explorer in FileExplorer.razor.css (Baum links, Inhalt rechts). */
.help-layout[b-s9ijxq2rxt] {
display: grid;
/* 360px statt 320: zusammen mit dem zweizeiligen Umbruch der Titel (HelpToc.razor.css) ergibt
das 282px Textbreite je Zeile, also rund 564px effektiv — genug auch für den längsten Titel.
Breiter soll die Spalte nicht werden, sonst kippt sie vom Verzeichnis zur zweiten Hauptspalte. */
grid-template-columns: minmax(280px, 360px) 1fr;
/* Zeile exakt auf die Resthöhe zwingen (minmax(0,1fr) statt auto, Vorbild
.letter-detail-grid): bei auto wüchse sie auf Inhaltshöhe, und die internen Scroller
von Baum und Chat blieben wirkungslos — die kennen nur eine definite Höhenkette.
Die Seite selbst liefert die Höhe über .page-fill (app.css). */
grid-template-rows: minmax(0, 1fr);
gap: 16px;
flex: 1;
min-height: 0;
}
/* Assistent nicht konfiguriert/für den Mandanten deaktiviert: HelpChatPanel zeigt dann nur seine
schmale Hinweiskarte (siehe dessen Klassenkommentar) — keine gleichwertige Spalte dafür
reservieren. Der Baum bekommt die volle Breite, die Hinweiskarte rutscht darunter
(Vorbild .no-tree in FileExplorer.razor.css). */
.help-layout.no-chat[b-s9ijxq2rxt] {
grid-template-columns: 1fr;
}
@media (max-width: 900px) {
/* Einspaltig darf die Seite wieder mitwachsen und im .app-content scrollen — untereinander
gestapelt würden sich Baum und Chat sonst die Bildschirmhöhe teilen und beide zu flach.
Ihre eigenen Höhen-Deckel für diesen Fall stehen in HelpToc/HelpChatPanel.razor.css.
Gleiche Bruchstellen-Logik wie in .letter-detail-page bei 1100px. */
.help-page[b-s9ijxq2rxt] {
height: auto;
display: block;
}
.help-layout[b-s9ijxq2rxt] {
grid-template-columns: 1fr;
grid-template-rows: none;
flex: none;
}
}
/* Ladezustand der Hülle: sie lädt Gliederung, Verfügbarkeit und Verlauf nacheinander, bevor die
Kindkomponenten überhaupt gerendert werden (siehe LoadAsync in HelpIndex.razor). .spinner ist
global in app.css definiert. */
.help-loading[b-s9ijxq2rxt] {
display: flex;
align-items: center;
gap: 8px;
padding: 24px;
color: var(--color-text-muted);
font-size: 13px;
}
/* /Components/Pages/Help/HelpToc.razor.rz.scp.css */
/* ─── Inhaltsverzeichnis-Baum (linke Spalte von /help) ───
Struktur/Optik angelehnt an .blob-tree in FileExplorer.razor.css (Baum links, Inhalt rechts). */
/* Der äußere Kasten ist eine .ds-card — Fläche, Rahmen, Radius und Schatten kommen von dort, damit
Baum und Assistent daneben dieselbe Karte sind. Hier bleiben nur Höhe, Scrollen und Innenabstand. */
.help-toc[b-y1qnipd6mc] {
/* Keine eigene Höhe: als Grid-Item wird der Baum auf die Zeilenhöhe gestreckt (align-items
default stretch), und die Zeile ist dank .help-layout/grid-template-rows:minmax(0,1fr) über
.page-fill definit hoch. Damit füllt der Baum die Bildschirmhöhe und scrollt intern.
Früher stand hier max-height:620px mit der Begründung, eine Prozent-Höhe wäre zirkulär —
das galt nur, solange .page keine definite Höhe hatte. */
min-height: 0;
overflow-y: auto;
padding: 8px;
}
@media (max-width: 900px) {
/* Einspaltig (siehe HelpIndex.razor.css): die Seite wächst wieder mit, also braucht der Baum
hier doch eine Obergrenze — sonst schöbe eine lange Gliederung den Assistenten darunter
außer Sicht. */
.help-toc[b-y1qnipd6mc] {
max-height: 420px;
}
}
.help-toc-empty[b-y1qnipd6mc] {
padding: 16px;
font-size: 12.5px;
color: var(--color-text-muted);
}
/* ─── Suchzeile über dem Baum ───
Sticky, damit sie beim internen Scrollen des Baums stehen bleibt; der Hintergrund der Karte muss
dafür explizit gesetzt sein, sonst scrollen Baumeinträge sichtbar darunter durch. */
.help-toc-search[b-y1qnipd6mc] {
position: sticky;
top: -8px; /* hebt den 8px-Innenabstand der Karte auf */
z-index: 1;
display: flex;
gap: 6px;
padding: 8px 4px;
margin: -8px -4px 4px;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.help-toc-search-input[b-y1qnipd6mc] {
flex: 1 1 auto;
min-width: 0;
font-size: 12.5px;
}
/* ─── Trefferliste (ersetzt den Baum, solange eine Suche aktiv ist) ─── */
.help-toc-results[b-y1qnipd6mc] {
list-style: none;
margin: 4px 0 0;
padding: 0;
}
.help-toc-results li + li[b-y1qnipd6mc] { margin-top: 2px; }
.help-toc-results a[b-y1qnipd6mc] {
display: flex;
flex-direction: column;
gap: 1px;
padding: 6px 8px;
border-radius: 6px;
}
.help-toc-results a:hover[b-y1qnipd6mc] { background: var(--color-surface-hover); }
.help-toc-result-title[b-y1qnipd6mc] {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 12.5px;
font-weight: 500;
color: var(--color-text-primary);
}
.help-toc-result-cat[b-y1qnipd6mc] {
font-size: 11px;
color: var(--color-text-muted);
}
.help-toc-category + .help-toc-category[b-y1qnipd6mc] {
margin-top: 2px;
}
.help-toc-cat-btn[b-y1qnipd6mc] {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 7px 8px;
background: none;
border: none;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
text-align: left;
cursor: pointer;
}
.help-toc-cat-btn:hover[b-y1qnipd6mc] { background: var(--color-surface-hover); }
.help-toc-cat-btn:focus-visible[b-y1qnipd6mc] { outline: 2px solid var(--color-primary-ring); outline-offset: 1px; }
.help-toc-chev[b-y1qnipd6mc] { color: var(--color-text-muted); transition: transform 0.12s; flex-shrink: 0; }
.help-toc-chev.expanded[b-y1qnipd6mc] { transform: rotate(90deg); }
/* Umbrechen statt kürzen — siehe Kommentar bei .help-toc-articles a span:first-child. */
.help-toc-cat-title[b-y1qnipd6mc] { min-width: 0; }
.help-toc-articles[b-y1qnipd6mc] {
list-style: none;
margin: 2px 0 6px;
padding-left: 20px;
border-left: 1px dashed var(--color-border);
margin-left: 14px;
}
.help-toc-articles li[b-y1qnipd6mc] { margin: 0; }
.help-toc-articles a[b-y1qnipd6mc] {
display: flex;
align-items: baseline;
gap: 6px;
padding: 5px 8px;
border-radius: 6px;
font-size: 12.5px;
color: var(--color-text-secondary);
}
.help-toc-articles a:hover[b-y1qnipd6mc] { background: var(--color-surface-hover); color: var(--color-text-primary); }
/* Titel umbrechen, nicht kürzen. Einzeilig mit Ellipsis endeten 34 der Einträge auf „…" — und zwar
bei JEDER Fensterbreite gleich, weil die Spalte gedeckelt ist und nicht mitwächst. Ein
Inhaltsverzeichnis, dessen Einträge man nicht lesen kann, verfehlt seinen Zweck. Ein breiterer
Deckel allein reicht nicht: der längste Titel bräuchte 433px Textbreite, also eine Spalte von
rund 510px — das wäre keine Navigationsspalte mehr, sondern eine zweite Hauptspalte.
Höhe ist kein Gegenargument, der Baum scrollt ohnehin intern (siehe .help-toc). */
.help-toc-articles a span:first-child[b-y1qnipd6mc] { min-width: 0; }
.help-toc-draft[b-y1qnipd6mc] { font-size: 10px; flex-shrink: 0; }
/* /Components/Pages/InvoiceRecipients/InvoiceRecipientList.razor.rz.scp.css */
/* Herkunfts- und Zustands-Marker in der Namensspalte. Eine gemeinsame Zeile statt drei einzeln
positionierter Badges, damit „Default", „aus Verfahren" und „ungeprüft" nebeneinander umbrechen
können statt die Spalte zu sprengen. */
.ir-row-badges[b-3zji8cjgjm] {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
margin-left: 6px;
vertical-align: middle;
}
.ir-row-badges .ds-badge[b-3zji8cjgjm] {
font-size: 10.5px;
}
/* Freitext-Anschrift im Stammdaten-Dialog (etwa aus Business Central übernommen): sie ersetzt Straße und
Hausnummer und läuft deshalb über beide Spalten. */
.ir-address-text[b-3zji8cjgjm] {
grid-column: 1 / -1;
}
.ir-address-text .ds-textarea[b-3zji8cjgjm] {
width: 100%;
}
.ir-address-text-hint[b-3zji8cjgjm] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 6px;
}
/* /Components/Pages/InvoiceRecipients/InvoiceRecipientListFilterBar.razor.rz.scp.css */
/* Filterleiste über der Tabelle. Aufbau wie die Leiste der Entwurfsliste
(SuperAdmin/BillingDraftFilterBar.razor), hier als Klassen statt Inline-Styles. */
.ir-filterbar[b-nyxhzu4v0l] {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-end;
margin-bottom: 12px;
}
.ir-filterbar-search[b-nyxhzu4v0l] {
flex: 1 1 260px;
min-width: 0;
}
.ir-filterbar-search .ds-input[b-nyxhzu4v0l] {
width: 100%;
}
.ir-filterbar-check[b-nyxhzu4v0l] {
display: flex;
align-items: center;
gap: 6px;
padding-bottom: 8px;
font-size: 13px;
cursor: pointer;
}
.ir-filterbar-reset[b-nyxhzu4v0l] {
margin-bottom: 4px;
}
/* /Components/Pages/Mailings/AnlagenEditor.razor.rz.scp.css */
/* Anlagenliste der Anlagen-Karte: Anschreiben (fest) und die Anlagen des Eingaben-Registers. */
.part-list[b-bbqw0dhpc4] {
display: flex;
flex-direction: column;
gap: 6px;
}
.part-row[b-bbqw0dhpc4] {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
min-height: 44px; /* gleiche Höhe für Anschreiben-Zeile und Anlage-Zeile */
box-sizing: border-box;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-surface);
transition: border-color 120ms, background-color 120ms;
}
.part-row[draggable="true"][b-bbqw0dhpc4] { cursor: grab; }
.part-row[draggable="true"]:active[b-bbqw0dhpc4] { cursor: grabbing; }
.part-row.drag-over[b-bbqw0dhpc4] {
border-color: var(--color-primary);
background: var(--color-primary-soft);
}
.part-row-drag[b-bbqw0dhpc4] {
color: var(--color-text-faint);
display: inline-grid;
place-items: center;
cursor: grab;
}
.part-row-drag:hover[b-bbqw0dhpc4] { color: var(--color-text-primary); }
/* Die kanonische Anschreiben-Zeile: visuell als Pflicht-Eintrag markiert. */
.part-row.is-letter[b-bbqw0dhpc4] {
background: var(--color-primary-soft);
border-color: var(--color-primary);
}
.part-row-letter[b-bbqw0dhpc4] {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 0 4px;
font-size: 12.5px;
color: var(--color-primary);
font-weight: 500;
}
/* Dateiname einer Anlage. */
.part-row-file[b-bbqw0dhpc4] {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
padding: 0 4px;
font-size: 12.5px;
color: var(--color-text-primary);
overflow: hidden;
}
.part-row-file > span[b-bbqw0dhpc4] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* „Neues Blatt"-Schalter der Zeile: Wort plus DsSwitch, wie die Versandoptionen in der
Lieferkarte. Das Wort bleibt stehen — ein Schalter ohne Beschriftung wäre in einer Zeile voller
Icon-Buttons nicht zu deuten. Die erste Zeile rendert den Schalter gar nicht (sie beginnt per
Definition auf einem neuen Blatt), es braucht hier also keinen Sonderzustand. */
.part-row-sheet[b-bbqw0dhpc4] {
display: inline-flex;
align-items: center;
gap: 8px;
flex: none;
font-size: 12.5px;
color: var(--color-text-muted);
white-space: nowrap;
}
/* Herkunfts-Badge und Pfeil-Knöpfe schrumpfen nicht — der Dateiname kürzt sich zuerst. */
.part-row-badge[b-bbqw0dhpc4] {
flex: none;
}
.part-row-move[b-bbqw0dhpc4] {
display: inline-flex;
flex: none;
gap: 2px;
}
/* /Components/Pages/Mailings/ApproveInvoiceRecipientBlock.razor.rz.scp.css */
/* Rechnungsempfänger-Block im Freigabe-Popup.
Aus ApproveDialog.razor.css hierher gezogen, nachdem das Markup in diese Komponente ausgelagert
wurde (CSS-Isolation folgt dem Markup, nicht dem Feature). Die Versandkosten-Tabelle bleibt im
Dialog und nutzt weiter die globalen .preview-cost-*-Klassen aus app.css. */
.approve-invoicerecipient[b-jzj7lvyv2q] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-input, 8px);
background: var(--color-bg-subtle);
font-size: 11.5px;
}
.approve-invoicerecipient-label[b-jzj7lvyv2q] {
font-size: 11.5px;
color: var(--color-text-muted);
}
.approve-invoicerecipient-value[b-jzj7lvyv2q] {
font-weight: 600;
color: var(--color-text-primary);
}
.approve-invoicerecipient-head[b-jzj7lvyv2q] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.approve-invoicerecipient-select[b-jzj7lvyv2q] {
flex: 1;
min-width: 0;
}
.approve-invoicerecipient-unverified[b-jzj7lvyv2q] {
display: flex;
align-items: flex-start;
gap: 8px;
padding-top: 8px;
border-top: 1px solid var(--color-border);
color: var(--color-text-secondary);
line-height: 1.45;
}
.approve-invoicerecipient-details[b-jzj7lvyv2q] {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 12px;
margin: 0;
padding-top: 8px;
border-top: 1px solid var(--color-border);
font-size: 11.5px;
}
.approve-invoicerecipient-details dt[b-jzj7lvyv2q] {
color: var(--color-text-muted);
}
.approve-invoicerecipient-details dd[b-jzj7lvyv2q] {
margin: 0;
color: var(--color-text-secondary);
text-align: left;
}
.approve-invoicerecipient-actions[b-jzj7lvyv2q] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.approve-invoicerecipient-error[b-jzj7lvyv2q] {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: 0;
color: var(--color-danger, var(--color-text-secondary));
font-size: 11px;
}
/* /Components/Pages/Mailings/DmsAttachmentDialog.razor.rz.scp.css */
/* Zweispaltiger Auswahlbereich des Dialogs „Aus DMS-Akte anhängen": links das Aktenregister,
rechts die Dokumente. Ausschließlich Design-Tokens — damit trägt das dunkle Theme ohne eine
zweite Regelmenge (siehe docs/concepts/theming.md). */
.dms-banner[b-hrgr910uaq] {
margin-bottom: 12px;
}
.dms-split[b-hrgr910uaq] {
display: grid;
grid-template-columns: 260px 1fr;
gap: 14px;
/* Feste Höhe statt max-height: beide Spalten scrollen unabhängig, und der Dialog springt beim
Registerwechsel nicht in der Größe. */
height: min(52vh, 420px);
}
.dms-registers[b-hrgr910uaq],
.dms-documents[b-hrgr910uaq] {
overflow: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-surface);
}
.dms-registers[b-hrgr910uaq] {
padding: 6px;
}
/* Rechte Spalte: Suchfeld fest oben, die Tabelle darunter scrollt allein. min-height: 0, sonst
wächst das Flex-Kind über die feste Höhe des Rasters hinaus statt zu scrollen. */
.dms-docs-pane[b-hrgr910uaq] {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
}
.dms-search[b-hrgr910uaq] {
flex: none;
}
.dms-documents[b-hrgr910uaq] {
flex: 1;
/* Kein Innenabstand: die Kopfzeile der Tabelle klebt am oberen Rand des Scrollbereichs
(position: sticky), ein Polster darüber würde beim Scrollen durchscheinen. */
padding: 0;
}
.dms-register[b-hrgr910uaq] {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
/* padding-left kommt berechnet aus dem Markup (Einrücktiefe des Registers). */
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: 0;
border-radius: var(--radius-input);
background: transparent;
color: var(--color-text-secondary);
font-family: inherit;
font-size: 12.5px;
text-align: left;
cursor: pointer;
}
.dms-register:hover:not(:disabled)[b-hrgr910uaq] {
background: var(--color-surface-hover);
}
.dms-register:disabled[b-hrgr910uaq] {
cursor: default;
opacity: 0.6;
}
.dms-register-active[b-hrgr910uaq] {
background: var(--color-primary-soft);
color: var(--color-primary);
font-weight: 600;
}
.dms-register-name[b-hrgr910uaq] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Die Dokumentanzahl hinter dem Registernamen. Sie weicht dem Namen NICHT (flex: none): lange
Registernamen kürzen per Ellipse, die Zahl bleibt stehen — sie ist der Grund, warum man das
Register überhaupt ansieht. Tabellenziffern, damit die Zahlen untereinander nicht zappeln. */
.dms-register-count[b-hrgr910uaq] {
flex: none;
margin-left: auto;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* Dokumenttabelle auf .ds-table aufgesetzt: nur enger (der Dialog zeigt viele Zeilen auf wenig
Höhe) und mit stehender Kopfzeile. */
.dms-doc-table thead th[b-hrgr910uaq] {
position: sticky;
top: 0;
/* Über den Zeilen, die beim Scrollen darunter durchlaufen. */
z-index: 1;
padding: 7px 10px;
}
.dms-doc-table tbody td[b-hrgr910uaq] {
padding: 6px 10px;
font-size: 12.5px;
vertical-align: top;
}
/* Mit .dms-doc-table qualifiziert, sonst gewinnt das padding der Regel darüber. */
.dms-doc-table .dms-col-pick[b-hrgr910uaq] {
width: 32px;
padding-right: 0;
}
.dms-col-date[b-hrgr910uaq] {
width: 92px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.dms-col-participant[b-hrgr910uaq] {
width: 26%;
}
/* Nicht-PDFs und bereits angehängte Dokumente bleiben sichtbar (der Anwender soll die Akte
vollständig sehen), sind aber erkennbar nicht wählbar. Die Begründung steht als title an der
Zeile. */
.dms-doc-locked[b-hrgr910uaq] {
opacity: 0.55;
}
/* Titelzelle: Titel, Endung und Kennzeichen laufen in einer Zeile und brechen zusammen um. */
.dms-doc-cell[b-hrgr910uaq] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
}
.dms-doc-title[b-hrgr910uaq] {
color: var(--color-text-primary);
word-break: break-word;
cursor: pointer;
}
.dms-doc-locked .dms-doc-title[b-hrgr910uaq] {
cursor: default;
}
.dms-doc-ext[b-hrgr910uaq] {
font-size: 11px;
color: var(--color-text-muted);
}
.dms-doc-flag[b-hrgr910uaq] {
font-size: 10.5px;
}
.dms-more[b-hrgr910uaq] {
margin: 6px 0 2px 8px;
}
.dms-state[b-hrgr910uaq] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 8px;
font-size: 12.5px;
color: var(--color-text-secondary);
}
.dms-hint[b-hrgr910uaq] {
padding: 10px 8px;
font-size: 12.5px;
color: var(--color-text-muted);
}
/* Der Zähler steht links, die Schaltflächen bleiben rechts (ds-dialog-footer richtet rechtsbündig aus). */
.dms-count[b-hrgr910uaq] {
margin-right: auto;
font-size: 12px;
color: var(--color-text-muted);
}
/* Zeile über dem Registerbaum: dezenter Hinweis zur winsolvenz-Markierung (kein Alert — sie ist
eine Zusatzinformation, kein Fehler). */
.dms-toolbar[b-hrgr910uaq] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
font-size: 12.5px;
color: var(--color-text-secondary);
}
.dms-toolbar-hint[b-hrgr910uaq] {
font-size: 11.5px;
color: var(--color-text-muted);
}
/* /Components/Pages/Mailings/EditLetterDataDialog.razor.rz.scp.css */
/* ─── Korrigieren-Dialog: PDF-Vorschau links, strukturiertes Formular rechts ───
Aus MailingDetail.razor.css hierher gezogen, nachdem das Markup in diese Komponente
ausgelagert wurde — Blazor vergibt das Scope-Attribut nur an Markup der eigenen .razor-Datei. */
.elc-grid[b-p5fu9eg0vy] {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 16px;
align-items: stretch;
}
.elc-pdf-wrap[b-p5fu9eg0vy] {
display: flex;
min-height: 0;
height: min(70vh, 640px);
/* Der PdfViewer ist rahmenlos-neutral (Height="100%" füllt diesen Container) —
das Card-Chrome (Rahmen/Radius) kommt von hier, auch für den Fallback-Text. */
border: 1px solid var(--color-border);
border-radius: var(--radius-card, 12px);
overflow: hidden;
}
.elc-pdf-empty[b-p5fu9eg0vy] {
background: var(--color-bg-subtle);
flex: 1;
display: grid;
place-items: center;
text-align: center;
padding: 32px;
color: var(--color-text-muted);
font-size: 12.5px;
}
.elc-form[b-p5fu9eg0vy] {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
max-height: min(70vh, 640px);
overflow-y: auto;
padding-right: 4px;
}
.elc-field[b-p5fu9eg0vy] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.elc-row[b-p5fu9eg0vy] { display: flex; gap: 10px; }
.elc-req[b-p5fu9eg0vy] { color: var(--color-danger); }
.elc-hint[b-p5fu9eg0vy] { color: var(--color-text-muted); font-weight: 400; font-size: 11.5px; }
.elc-field-error[b-p5fu9eg0vy] { color: var(--color-danger-text, var(--color-danger)); font-size: 11.5px; }
.elc-advanced > summary[b-p5fu9eg0vy] {
cursor: pointer;
font-size: 12.5px;
color: var(--color-text-secondary);
margin-bottom: 6px;
}
/* JSON-Editor (nur im Erweitert-Modus) füllt die rechte Spalte. */
.elc-json-editor[b-p5fu9eg0vy] {
flex: 1;
min-height: 300px;
width: 100%;
}
@media (max-width: 860px) {
.elc-grid[b-p5fu9eg0vy] { grid-template-columns: 1fr; }
.elc-pdf-wrap[b-p5fu9eg0vy] { height: 320px; }
.elc-form[b-p5fu9eg0vy] { max-height: none; overflow: visible; }
}
/* /Components/Pages/Mailings/LetterDetail.razor.rz.scp.css */
/* ─── Letter-Detail-Layout: PDF 2/3 links, Stammdaten + Variablen 1/3 rechts ─── */
/* Durchgehende, definite Höhenkette statt calc(100vh − Schätzwert): .app-content hat dank des
100vh-Grids im MainLayout eine definite Höhe, also übernimmt die Seite sie zu 100 % und gibt
die Resthöhe unter dem Seiten-Header an das Grid weiter. Vorher wurde die Chrome-Höhe mit
240px geraten — lag der Viewport darunter, griff min-height und der Kartenboden (samt der
horizontalen Scrollleiste des PDF-Viewers) rutschte unter die Falz. */
.letter-detail-page[b-smot64p0j6] {
height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
.letter-detail-grid[b-smot64p0j6] {
display: grid;
grid-template-columns: 2fr 1fr;
/* Zeile exakt auf Grid-Höhe zwingen (minmax(0,1fr) statt auto), sonst wächst sie
auf Content-Höhe: pdf.js-Seitenstapel links und Monacos automaticLayout rechts
ziehen die Seite dann viewport-sprengend lang — interne Scroller greifen nur
bei definiter Höhenkette. */
grid-template-rows: minmax(0, 1fr);
gap: 16px;
flex: 1;
min-height: 0;
}
@media (max-width: 1100px) {
/* Einspaltig darf die Seite wieder mitwachsen und im .app-content scrollen. */
.letter-detail-page[b-smot64p0j6] {
height: auto;
display: block;
}
.letter-detail-grid[b-smot64p0j6] {
grid-template-columns: 1fr;
grid-template-rows: none;
flex: none;
}
}
/* PDF-Karte: der PdfViewer füllt die Karte (eigener Rahmen/Radius → etwas Innenabstand). */
.letter-pdf-card[b-smot64p0j6] {
display: flex;
flex-direction: column;
min-height: 0;
}
.letter-pdf-body[b-smot64p0j6] {
padding: 0 12px 12px;
flex: 1;
display: flex;
min-height: 0;
}
/* PdfViewer (Kind-Komponente) im Flex-Body auf volle Breite ziehen — scoped CSS
erreicht Kind-Komponenten nur über ::deep. */
.letter-pdf-body[b-smot64p0j6] .os-pdfviewer {
flex: 1;
min-width: 0;
}
.letter-pdf-placeholder[b-smot64p0j6] {
padding: 32px;
text-align: center;
color: var(--color-text-muted);
font-size: 12.5px;
margin: auto;
}
/* Rechte Seitenleiste: zwei Karten gestapelt; Variablen-Editor füllt Rest-Höhe. */
.letter-detail-side[b-smot64p0j6] {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
min-height: 0;
/* Fallback bei sehr flachem Viewport: Sidebar scrollt selbst statt die Zeile zu sprengen. */
overflow-y: auto;
}
.letter-detail-side > .ds-card:last-child[b-smot64p0j6] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.letter-detail-side > .ds-card:last-child .ds-card-body[b-smot64p0j6] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.letter-fields[b-smot64p0j6] {
display: flex;
flex-direction: column;
gap: 12px;
}
.letter-postal[b-smot64p0j6] {
font-size: 12.5px;
color: var(--color-text-primary);
margin: 4px 0 0;
white-space: pre-wrap;
background: var(--color-bg-subtle);
padding: 10px;
border-radius: var(--radius-input);
}
.letter-vars-body[b-smot64p0j6] {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1;
}
/* Monaco-Host: füllt die Rest-Höhe der Karte; Monaco vermisst sich via automaticLayout. */
.letter-vars-editor[b-smot64p0j6] {
flex: 1;
min-height: 240px;
width: 100%;
box-sizing: border-box;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
overflow: hidden;
}
/* Hinweis anstelle des Speichern-Buttons, sobald die Daten nicht mehr korrigierbar sind. */
.letter-vars-readonly[b-smot64p0j6] {
display: flex;
align-items: center;
gap: 6px;
margin: 10px 0 0;
font-size: 11.5px;
color: var(--color-text-muted);
}
/* /Components/Pages/Mailings/LetterPreviewPane.razor.rz.scp.css */
/* Rechtes Pane der Schreiben-Sektion: Inline-PDF-Vorschau des ausgewählten Schreibens.
Aus MailingLettersView.razor.css hierher gezogen, nachdem das Markup in diese Komponente
ausgelagert wurde — Blazor vergibt das Scope-Attribut nur an Markup der eigenen .razor-Datei. */
/* ─── Toggle „Schablone" im Vorschau-Header (Optik wie der Erweitert-Toggle in MailingDetail;
Kopie nötig, weil scoped CSS nicht komponentenübergreifend greift) ─── */
.schablone-toggle[b-9532kvvo9t] {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
font-size: 12.5px;
color: var(--color-text-muted);
}
/* Native Checkbox unsichtbar, aber bedienbar (Tastatur/Screenreader) — der Track ist die Optik. */
.schablone-toggle input[b-9532kvvo9t] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.schablone-toggle-track[b-9532kvvo9t] {
position: relative;
width: 32px;
height: 18px;
border-radius: 9px;
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
transition: background-color 120ms, border-color 120ms;
flex: none;
}
.schablone-toggle-knob[b-9532kvvo9t] {
position: absolute;
top: 1px;
left: 1px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-text-faint);
transition: transform 120ms, background-color 120ms;
}
.schablone-toggle input:checked + .schablone-toggle-track[b-9532kvvo9t] {
background: var(--color-primary-soft);
border-color: var(--color-primary);
}
.schablone-toggle input:checked + .schablone-toggle-track .schablone-toggle-knob[b-9532kvvo9t] {
transform: translateX(14px);
background: var(--color-primary);
}
.schablone-toggle input:focus-visible + .schablone-toggle-track[b-9532kvvo9t] {
box-shadow: 0 0 0 2px var(--color-primary-soft);
}
.schablone-toggle input:checked ~ .schablone-toggle-text[b-9532kvvo9t] {
color: var(--color-text-primary);
}
/* ─── Die Vorschau-Karte selbst (Flex-Item des .letters-split in MailingLettersView) ─── */
.letters-split-preview[b-9532kvvo9t] {
/* Als flex-basis ist diese Zahl zugleich die Umbruchgrenze: reicht der Platz neben der Liste
nicht mehr für sie, rutscht die Karte unter die Liste (siehe .letters-split dort).
350px statt der früher geforderten 450px — bewusst. Auf einem 4K-Notebook mit
250%-Skalierung (1536 CSS-px) bleiben neben der Liste nur 372px übrig; mit 450px stand die
Vorschau dort dauerhaft unter der Liste, und genau das war der Befund. Die 350px sind die
Untergrenze, nicht der Normalfall: vom freien Platz bekommt die Vorschau den größeren
Anteil (Faktor 1.3 gegen 1 der Liste, siehe .letters-split-list dort), bei 1920px Viewport
sind es wieder rund 580px.
min-width:0 statt 350px, damit die Karte umgebrochen auch in sehr schmale Fenster passt,
ohne überzulaufen. */
flex: 1.3 1 350px;
min-width: 0;
display: flex;
flex-direction: column;
/* Umgebrochen (allein auf der Flex-Zeile) hat sticky keinen Spielraum und bleibt wirkungslos
— es braucht dafür keine eigene Abschaltung. */
position: sticky;
top: 12px;
/* Scroll-Container ist .app-content (unter der fixen Topbar), nicht das Fenster; die
Wizard-Leiste ist position:fixed am unteren Rand. Das Pane wird gepinnt (sticky) und
soll im gepinnten Zustand bis knapp über die Wizard-Leiste reichen. Abzug =
--topbar-h (Topbar) + --wizard-nav-h (Leiste) + 24px (12px sticky top + 12px Abstand
darunter — dieselben 12px wie die Kartenabstände der dichten Detailseite). Die Leistenhöhe kommt bewusst aus dem Token und nicht als abgeschriebene
Zahl: sie wird in MailingWizardNav.razor.css per min-height auch zugesagt, sonst
driftet diese Rechnung beim nächsten Umbau der Leiste still auseinander.
dvh statt vh, damit dynamische Browser-Leisten (mobil) die Rechnung nicht verfälschen. */
height: calc(100dvh - var(--topbar-h) - var(--wizard-nav-h) - 24px);
min-height: 420px;
overflow: hidden;
}
.letters-split-pdf-wrap[b-9532kvvo9t] {
flex: 1;
min-height: 0;
display: flex;
overflow: hidden;
padding: 0 12px 12px;
}
/* PdfViewer (Kind-Komponente) im Flex-Wrap auf volle Breite ziehen — scoped CSS
erreicht Kind-Komponenten nur über ::deep. */
.letters-split-pdf-wrap[b-9532kvvo9t] .os-pdfviewer {
flex: 1;
min-width: 0;
}
/* Werkzeugleiste des PdfViewers in dieser (oft schmalen) Vorschau: EINE Zeile statt des globalen
Umbruchs (app.css .os-pdf-toolbar), der ab rund 540px Breite eine zweite Zeile nur für den
Zoom aufmachte. Dafür geben die elastischen Teile nach: das Suchfeld schrumpft bis 40px, der
Zoom-Auswahl bis 56px (der Browser kürzt ihren Text), die Trefferanzeige per Ellipsis; die
Icon-Buttons werden quadratisch. So passt die Leiste auch bei der Mindestbreite der Karte
(350px, siehe unten). Nur hier per ::deep — der PdfViewer ist geteilt (LetterDetail,
PdfDialog, Vorlagen-Assistent) und behält dort sein Verhalten. */
.letters-split-pdf-wrap[b-9532kvvo9t] .os-pdf-toolbar {
flex-wrap: nowrap;
gap: 4px;
}
.letters-split-pdf-wrap[b-9532kvvo9t] .os-pdf-search-input {
flex: 1 1 60px;
min-width: 40px;
}
.letters-split-pdf-wrap[b-9532kvvo9t] .os-pdf-toolbar .ds-btn {
flex: none;
width: 28px;
padding: 0;
}
.letters-split-pdf-wrap[b-9532kvvo9t] .os-pdf-match-count {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.letters-split-pdf-wrap[b-9532kvvo9t] .os-pdf-zoom-select {
flex: 0 1 132px;
min-width: 56px;
}
.letters-split-empty[b-9532kvvo9t] {
flex: 1;
display: grid;
place-items: center;
text-align: center;
padding: 32px;
color: var(--color-text-muted);
font-size: 12.5px;
}
/* ─── Befund-Panel des ausgewählten Schreibens (in der Vorschau-Karte) ─── */
.letter-findings-panel[b-9532kvvo9t] {
margin: 0 12px 10px;
padding: 10px 12px;
border-radius: var(--radius-input);
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: 8px;
flex: none;
}
.letter-findings-title[b-9532kvvo9t] {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.letter-finding-row[b-9532kvvo9t] {
display: flex;
align-items: flex-start;
gap: 10px;
}
.letter-finding-text[b-9532kvvo9t] { min-width: 0; }
.letter-finding-message[b-9532kvvo9t] {
font-size: 12.5px;
color: var(--color-text-primary);
line-height: 1.4;
}
.letter-finding-remedy[b-9532kvvo9t] {
font-size: 11.5px;
color: var(--color-text-muted);
margin-top: 2px;
}
.letter-findings-empty[b-9532kvvo9t] {
flex-direction: row;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--color-text-muted);
}
/* /Components/Pages/Mailings/MailingAttachmentsCard.razor.rz.scp.css */
/* Quellen-Streifen der Anlagen-Karte: drei gleichwertige Spalten (Hochladen · Aus DMS-Akte ·
Web-Dokument) unter der einen gemeinsamen Anlagenliste — ohne die Freigabe der Anbindung an
winsolvenz und DMS bleibt davon allein die Dropzone übrig (.attach-sources-single). Ausschließlich Design-Tokens — damit
trägt das dunkle Theme ohne eine zweite Regelmenge (siehe docs/concepts/theming.md).
Container Query statt Media Query: die Karte sitzt selbst in einem Grid
(MailingSimpleConfig.razor.css), ihre Breite ist also NICHT die Fensterbreite — und sie wächst
auch nicht mit ihr. Unter 1100 px fällt das äußere Grid auf eine Spalte zurück, wodurch die
Karte BREITER wird als bei 1300 px. Eine an das Fenster gebundene Grenze träfe damit
regelmäßig das Falsche; gemessen wird deshalb der Platz, der wirklich da ist.
Und bewusst drei ODER eine Spalte, nicht auto-fit: ein zweispaltiger Zwischenstand stellt eine
der drei gleichrangigen Quellen allein in eine zweite Zeile — das liest sich wie eine
Rangfolge, die es nicht gibt. 420 px sind die Grenze: jede Kachel trägt eine einzeilige
Beschriftung („Datei hochladen", „Aus DMS-Akte", „Web-Dokument") und kommt damit bei rund
130 px Spaltenbreite noch ohne Umbruch aus. */
.ds-card-body[b-op3wsa12gu] {
container-type: inline-size;
}
/* Zwei feste Zeilen — Kachel und Sperrgrund — und jede Spalte klinkt sich per subgrid in genau
diese Zeilen ein. Dadurch sind die drei Kacheln exakt gleich hoch, ohne dass irgendwo eine
Pixelhöhe steht: die Zeile richtet sich nach der höchsten von ihnen, und wenn ein Text bei
schmaler Karte umbricht, wachsen alle drei zusammen. Eine feste Höhe wäre genau dort falsch.
Fällt subgrid aus (sehr alter Browser), stapeln die Spalten wie vorher — nur eben nicht mehr
auf einer Höhe.
Die Zeilenabstände stehen deshalb HIER und nicht an .attach-source: ein eigenes gap am Subgrid
überschreibt das der Elterngrid nur für die Spalte, und die Zeilen stünden dann um die Differenz
versetzt. Ein Wert für beide — 7 px zwischen Fläche und Grund, 12 px zwischen den Spalten. */
.attach-sources[b-op3wsa12gu] {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
column-gap: 12px;
row-gap: 7px;
}
@container (min-width: 420px) {
.attach-sources[b-op3wsa12gu] {
grid-template-columns: repeat(3, 1fr);
}
}
/* Bleibt die Dropzone als einzige Quelle übrig, nimmt sie die volle Breite ein statt als schmale
Kachel am linken Rand zu stehen — eine einzelne Kachel in einem Drittel-Raster sieht aus, als
fehlte daneben etwas. Die Doppelklasse gewinnt gegen die Container-Query über die höhere
Spezifität, unabhängig von der Reihenfolge der Regeln. */
.attach-sources.attach-sources-single[b-op3wsa12gu] {
grid-template-columns: 1fr;
}
.attach-source[b-op3wsa12gu] {
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
min-width: 0;
}
/* Die Kachel-Geometrie der drei Quellen steht als .ds-tile in app.css: die beiden
Connector-Schaltflächen tragen sie zusammen mit .ds-btn (Schwebe-, Fokus- und Sperr-Verhalten
aus dem Design-System), die Dropzone zusammen mit ihrem gestrichelten Rahmen. Scoped CSS könnte
sie zwischen den beiden Komponenten nicht teilen. */
/* Der Grund, aus dem eine Quelle nicht zur Verfügung steht — dezenter Text, kein Alert: für den
Anwender ist „keine DMS-Akte" keine Störung, sondern eine Auskunft. */
.attach-source-reason[b-op3wsa12gu] {
font-size: 11.5px;
line-height: 1.35;
color: var(--color-text-muted);
}
/* /Components/Pages/Mailings/MailingCompletionCards.razor.rz.scp.css */
/* ─── Completed-Abschluss-Karten (Status · Kosten · Zustellnachweis) ───
Aus MailingDetail.razor.css hierher gezogen, nachdem das Markup in diese Komponente
ausgelagert wurde. Die Kosten-Auflistung nutzt die globalen .preview-cost-*-Klassen
(auch von ApproveDialog verwendet) und bleibt deshalb in app.css. */
.mailing-completion-cards[b-83ozl7we67] {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
gap: 12px;
margin-bottom: 12px;
align-items: stretch;
}
.completion-card[b-83ozl7we67] {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px;
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
border-radius: var(--radius-card, 12px);
min-width: 0;
}
.completion-card-title[b-83ozl7we67] {
font-size: 13px;
font-weight: 600;
color: var(--color-text-muted);
}
.completion-empty[b-83ozl7we67] {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
color: var(--color-text-muted);
font-size: 12px;
}
/* Status-Kuchendiagramm — Chart.js (maintainAspectRatio:false) braucht eine definite
Container-Höhe, sonst kollabiert das Canvas auf 0 und nichts wird gezeichnet. */
.completion-chart[b-83ozl7we67] {
position: relative;
height: 240px;
}
/* Kosten-Auflistung (nutzt die preview-cost-Zeilenklassen) */
.completion-cost[b-83ozl7we67] {
font-size: 11.5px;
}
/* Rechnungsempfänger-Block unter der Kostenauflistung */
.completion-invoicerecipient[b-83ozl7we67] {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid var(--color-border);
font-size: 11.5px;
}
.completion-invoicerecipient-label[b-83ozl7we67] {
color: var(--color-text-muted);
}
.completion-invoicerecipient-name[b-83ozl7we67] {
font-weight: 600;
color: var(--color-text-primary);
}
.completion-invoicerecipient-addr[b-83ozl7we67] {
color: var(--color-text-secondary);
}
/* Zustellnachweis-/Paket-Downloads */
.completion-proof-btn[b-83ozl7we67] {
width: 100%;
justify-content: center;
}
@media (max-width: 900px) {
.mailing-completion-cards[b-83ozl7we67] { grid-template-columns: 1fr; }
.completion-chart[b-83ozl7we67] { height: 220px; }
}
/* /Components/Pages/Mailings/MailingDeliveryCard.razor.rz.scp.css */
/* Scoped CSS der Versandoptionen-Karte (MailingDeliveryCard.razor). Die Regeln lagen bis zur
Aufteilung der Einfach-Ansicht in Karten-Komponenten in MailingSimpleConfig.razor.css — Blazor-
Scoped-CSS gilt aber nur für das Markup der eigenen Komponente, deshalb griffen sie dort nach dem
Umzug des Markups ins Leere (Checkbox über dem Label, Preis ohne Abstand). */
/* ─── Versandoptionen (Duplex · Farbdruck · Einschreiben Einwurf): Karten mit Preis + Erklärung
und DsSwitch rechts. Die Karte selbst ist kein Klickziel — deshalb kein cursor: pointer und
keine Hover-Kante, die eine Bedienbarkeit vorgeben würden, die sie nicht hat. ─── */
.delivery-options[b-ntlztjkyli] {
display: flex;
flex-direction: column;
gap: 10px;
}
.delivery-option[b-ntlztjkyli] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-surface);
}
.delivery-option.is-disabled[b-ntlztjkyli] {
opacity: 0.6;
}
.delivery-option-body[b-ntlztjkyli] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.delivery-option-head[b-ntlztjkyli] {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.delivery-option-name[b-ntlztjkyli] {
font-weight: 600;
font-size: 13px;
color: var(--color-text-primary);
}
.delivery-option-price[b-ntlztjkyli] {
font-size: 11.5px;
font-weight: 600;
color: var(--color-primary);
font-variant-numeric: tabular-nums;
}
.delivery-option-desc[b-ntlztjkyli] {
font-size: 11.5px;
line-height: 1.4;
color: var(--color-text-muted);
}
/* /Components/Pages/Mailings/MailingDetail.razor.rz.scp.css */
/* ─── Dichte: nur diese Seite, nicht global ───
Die Detailseite trägt Liste, Vorschau und die fixe Wizard-Leiste auf einmal; jeder Pixel
Chrome fehlt der Schreiben-Liste. Deshalb engere Seiten- und Kartenpolster als der
App-Standard (.page 28px 32px, .ds-card-header 16px 20px, .ds-card-body 20px) und 12px
statt 16px zwischen den Karten (.detail-top hier, MailingSimpleConfig, MailingLettersView).
::deep, weil die Karten größtenteils aus Kind-Komponenten kommen. Dialoge stehen außerhalb
von .mailing-detail und bleiben unberührt. */
.mailing-detail[b-fqbav0vzje] {
padding: 16px 24px;
}
/* Unten weiterhin Platz für die fixe Wizard-Leiste (ersetzt die +24px von .page-wizard). */
.mailing-detail.page-wizard[b-fqbav0vzje] {
padding-bottom: calc(var(--wizard-nav-h) + 12px);
}
.mailing-detail[b-fqbav0vzje] .ds-card-header {
padding: 10px 16px;
}
.mailing-detail[b-fqbav0vzje] .ds-card-body {
padding: 16px;
}
/* ─── Handlungs-Hinweise über dem Inhalt ───
Ein Stapel statt einzelner margin-bottom: Abstand nur zwischen den Hinweisen und einmal
darunter. Liegt nichts an, blendet :empty den Wrapper samt Abstand aus. Kompakteres Polster
als .ds-alert; das Fehler-Banner des letzten Laufs kommt aus einer Kind-Komponente (::deep). */
.mailing-notices[b-fqbav0vzje] {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.mailing-notices:empty[b-fqbav0vzje] {
display: none;
}
.mailing-notices[b-fqbav0vzje] .ds-alert,
.mailing-notices .mailing-rejection-note[b-fqbav0vzje] {
padding: 8px 12px;
}
/* „Nur diese anzeigen" im Aufmerksamkeits-Hinweis: sieht aus wie ein Link im Fließtext. */
.mailing-notice-link[b-fqbav0vzje] {
background: none;
border: none;
padding: 0;
margin-left: 4px;
color: inherit;
font: inherit;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
/* DMS-Ablage-Hinweis: Text links, „Erneut versuchen" rechts, bricht auf schmalen Breiten um. */
.mailing-notice-row[b-fqbav0vzje] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
width: 100%;
}
.mailing-notice-text[b-fqbav0vzje] {
flex: 1;
min-width: 280px;
}
/* ─── Seiten-Aktionen in der Topbar (SectionContent → TopbarSections.Actions) ───
Das Markup gehört dieser Komponente, darum greift ihr scoped CSS auch in der Topbar. */
/* Gruppenname kürzt per Ellipsis, der volle Name steht im title. inline-block statt des
inline-flex von .ds-badge, weil text-overflow in einem Flex-Container nicht greift. */
.mailing-group-badge[b-fqbav0vzje] {
display: inline-block;
max-width: 200px;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 1399.98px) {
.mailing-group-badge[b-fqbav0vzje] {
max-width: 140px;
}
}
/* ─── Toggle „Erweiterter Modus" in der Topbar ─── */
.adv-toggle[b-fqbav0vzje] {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
padding-left: 12px;
margin-left: 2px;
border-left: 1px solid var(--color-border);
font-size: 12.5px;
color: var(--color-text-muted);
}
/* Native Checkbox unsichtbar, aber bedienbar (Tastatur/Screenreader) — der Track ist die Optik. */
.adv-toggle input[b-fqbav0vzje] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.adv-toggle-track[b-fqbav0vzje] {
position: relative;
width: 32px;
height: 18px;
border-radius: 9px;
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
transition: background-color 120ms, border-color 120ms;
flex: none;
}
.adv-toggle-knob[b-fqbav0vzje] {
position: absolute;
top: 1px;
left: 1px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-text-faint);
transition: transform 120ms, background-color 120ms;
}
.adv-toggle input:checked + .adv-toggle-track[b-fqbav0vzje] {
background: var(--color-primary-soft);
border-color: var(--color-primary);
}
.adv-toggle input:checked + .adv-toggle-track .adv-toggle-knob[b-fqbav0vzje] {
transform: translateX(14px);
background: var(--color-primary);
}
.adv-toggle input:focus-visible + .adv-toggle-track[b-fqbav0vzje] {
box-shadow: 0 0 0 2px var(--color-primary-soft);
}
.adv-toggle input:checked ~ .adv-toggle-text[b-fqbav0vzje] {
color: var(--color-text-primary);
}
/* Unter 1400px wird die Topbar eng (Brotkrumen + Seiten-Aktionen + globale Icons): der Text
entfällt, der Schalter bleibt. Der Name kommt dann aus dem aria-label der Checkbox, die
Erklärung aus dem title am Label. */
@media (max-width: 1399.98px) {
.adv-toggle-text[b-fqbav0vzje] {
display: none;
}
}
/* Hinweis: .skeleton-block (samt Shimmer-Animation) liegt jetzt global in app.css — seit dem
Dashboard-Umbau nutzen es zwei Seiten. */
/* ─── Top-Section: zweispaltig, Stammdaten links, Steps rechts ─── */
.detail-top[b-fqbav0vzje] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
margin-bottom: 12px;
}
@media (max-width: 1100px) {
.detail-top[b-fqbav0vzje] {
grid-template-columns: 1fr;
}
}
/* Hinweis: Das Einfach-Ansicht-Karten-Grid (.simple-config-grid/-col) lebt scoped in
MailingSimpleConfig.razor.css, die Versandoptionen (.delivery-option*) in
MailingDeliveryCard.razor.css und die Sammeldokument-Slots (.doc-slot*) in
MailingDocumentsCard.razor.css — Scoped-CSS gilt nur für das Markup der eigenen Komponente. */
.delivery-plex-note[b-fqbav0vzje] {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 11.5px;
line-height: 1.4;
color: var(--color-text-muted);
padding: 2px 2px 0;
}
.delivery-plex-note strong[b-fqbav0vzje] {
color: var(--color-text-secondary);
font-weight: 600;
}
/* ─── Aktions-Leiste unter Schreiben (öffnet die Dialog-Modale) ───
Hinweis: aktuell ungenutzt (kein Markup verwendet .advanced-actions mehr) — als
bestehendes totes CSS belassen, nicht im Rahmen dieses Fixes entfernt. */
.advanced-actions[b-fqbav0vzje] {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 14px 18px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
margin-top: 16px;
}
.advanced-actions-label[b-fqbav0vzje] {
flex: 1 1 100%;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-faint);
margin-bottom: 2px;
}
/* /Components/Pages/Mailings/MailingDocumentsCard.razor.rz.scp.css */
/* Scoped CSS der Dokument(e)-Karte (MailingDocumentsCard.razor) — Sammeldokument-Slot: aktuelles
Dokument + Upload-Dropzone. Bis zur Karten-Aufteilung in MailingSimpleConfig.razor.css, dort seit
dem Umzug des Markups wirkungslos (Scoped-CSS gilt nur für die eigene Komponente). */
/* Sammeldokument-Slot: aktuelles Dokument + Upload-Dropzone. */
.doc-slot[b-dvv5gzzqpw] {
display: flex;
flex-direction: column;
gap: 8px;
}
.doc-slot-label[b-dvv5gzzqpw] {
font-size: 12.5px;
font-weight: 600;
color: var(--color-text-primary);
}
.doc-current[b-dvv5gzzqpw] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-bg-subtle);
}
.doc-current-name[b-dvv5gzzqpw] {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12.5px;
color: var(--color-text-primary);
}
/* Schalter „Enthält bereits Einzelbriefe" einer Sammel-PDF: Wort plus DsSwitch, wie „Neues Blatt"
in der Anlagen-Karte. Das Wort bleibt stehen — ein Schalter ohne Beschriftung wäre neben den
Icon-Buttons der Zeile nicht zu deuten. */
.doc-switch[b-dvv5gzzqpw] {
display: inline-flex;
align-items: center;
gap: 8px;
flex: none;
font-size: 12.5px;
color: var(--color-text-muted);
white-space: nowrap;
}
.doc-current .ds-badge[b-dvv5gzzqpw] {
flex: none;
}
/* /Components/Pages/Mailings/MailingFindingSummaryCard.razor.rz.scp.css */
/* ─── Befund-Zusammenfassung der Aussendung (Karte über der Schreiben-Liste) ───
Aus MailingLettersView.razor.css hierher gezogen, nachdem das Markup in diese Komponente
ausgelagert wurde — Blazor vergibt das Scope-Attribut nur an Markup der eigenen .razor-Datei. */
.finding-summary-card[b-j0q2cj5fcr] { margin-bottom: 12px; }
.finding-summary-body[b-j0q2cj5fcr] {
padding: 10px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.finding-summary-row[b-j0q2cj5fcr] {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 4px;
border-bottom: 1px solid var(--color-border);
flex-wrap: wrap;
}
.finding-summary-row:last-child[b-j0q2cj5fcr] { border-bottom: none; }
.finding-summary-row.is-active[b-j0q2cj5fcr] { background: var(--color-primary-soft, var(--color-bg-subtle)); border-radius: var(--radius-input); }
.finding-summary-trigger[b-j0q2cj5fcr] {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: inherit;
font: inherit;
text-align: left;
}
.finding-summary-trigger:hover .finding-summary-label[b-j0q2cj5fcr] { text-decoration: underline; }
.finding-summary-label[b-j0q2cj5fcr] {
font-size: 12.5px;
font-weight: 500;
color: var(--color-text-primary);
}
.finding-summary-remedy[b-j0q2cj5fcr] {
font-size: 11.5px;
color: var(--color-text-muted);
flex: 1;
min-width: 160px;
}
/* /Components/Pages/Mailings/MailingInvoiceRecipientCard.razor.rz.scp.css */
/* Karte „Rechnungsempfänger" (Prüf-Status, automatisch aus einem Insolvenzverfahren ermittelter
Empfänger). Schriftgrößen/Detail-Grid bewusst an den Rechnungsempfänger-Block des
Freigabe-Dialogs angelehnt (ApproveDialog.razor.css) — gleiche Daten, gleiche Anmutung. */
/* Abstand zur Karte darunter (Befunde bzw. Schreiben-Liste) — fehlte vorher, die Karten stießen
aneinander. 12px wie die übrigen Kartenabstände der Detailseite. */
.invoicerecipient-review-card[b-xmfwaq0qe2] {
margin-bottom: 12px;
}
.invoicerecipient-review-card .ds-card-body[b-xmfwaq0qe2] {
display: flex;
flex-direction: column;
gap: 12px;
}
.invoicerecipient-review-hint[b-xmfwaq0qe2] {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0;
font-size: 12.5px;
color: var(--color-text-secondary);
line-height: 1.45;
}
.invoicerecipient-review-details[b-xmfwaq0qe2] {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 12px;
margin: 0;
padding: 10px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-input, 8px);
background: var(--color-bg-subtle);
font-size: 12px;
}
.invoicerecipient-review-details dt[b-xmfwaq0qe2] {
color: var(--color-text-muted);
}
.invoicerecipient-review-details dd[b-xmfwaq0qe2] {
margin: 0;
color: var(--color-text-secondary);
}
.invoicerecipient-review-name[b-xmfwaq0qe2] {
font-weight: 600;
color: var(--color-text-primary);
}
.invoicerecipient-review-switch[b-xmfwaq0qe2] {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--color-text-muted);
}
.invoicerecipient-review-switch .ds-select[b-xmfwaq0qe2] {
flex: 1;
min-width: 0;
max-width: 420px;
}
.invoicerecipient-review-error[b-xmfwaq0qe2] {
display: flex;
align-items: flex-start;
gap: 6px;
color: var(--color-danger, var(--color-text-secondary));
font-size: 11.5px;
}
.invoicerecipient-review-actions[b-xmfwaq0qe2] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* /Components/Pages/Mailings/MailingLettersView.razor.rz.scp.css */
/* Schreiben-Sektion: der Split-Rahmen und die Liste (links). Die Vorschau (rechts) und die
Befund-Zusammenfassung sind eigene Komponenten und bringen ihre Regeln selbst mit —
Blazor vergibt das Scope-Attribut nur an Markup der eigenen .razor-Datei. */
/* Schreiben-Tabelle: ganze Zeile klickbar + kompakter zweizeiliger Empfänger */
.letter-table .letter-row[b-bsl4fxapii] { cursor: pointer; }
.letter-table .letter-row:hover[b-bsl4fxapii] {
background: var(--color-surface-hover);
}
.letter-recipient-name[b-bsl4fxapii] {
font-weight: 600;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.letter-recipient-address[b-bsl4fxapii] {
font-size: 11px;
color: var(--color-text-muted);
margin-top: 1px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Aktions-Buttons je Schreiben-Zeile: eine rechtsbündige Zeile mit klarer Hierarchie —
Korrigieren primär (gefüllt), Ausschließen sekundär (Ghost), Öffnen als kompakter Icon-Button. */
.letter-actions[b-bsl4fxapii] {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
flex-wrap: wrap;
}
.letter-actions .icon-btn[b-bsl4fxapii] {
width: 30px;
padding: 0;
flex: none;
}
.letter-actions .icon-btn svg[b-bsl4fxapii] {
width: 15px;
height: 15px;
}
/* Kompakte Variante: schmalere Zeilen → mehr Schreiben pro Bildschirm. 4px: die Zeile misst dann
Empfänger zweizeilig (34px) bzw. Icon-Buttons (30px) + 8px + 1px Linie = 43px. */
.letter-table-compact thead th[b-bsl4fxapii] { padding-top: 7px; padding-bottom: 7px; }
.letter-table-compact tbody td[b-bsl4fxapii] {
padding-top: 4px;
padding-bottom: 4px;
font-size: 12.5px;
}
/* Ausgewählte Zeile (Inline-PDF-Vorschau) hervorheben. */
.letter-table .letter-row.is-selected[b-bsl4fxapii],
.letter-table .letter-row.is-selected:hover[b-bsl4fxapii] {
background: var(--color-primary-soft, var(--color-bg-subtle));
box-shadow: inset 3px 0 0 var(--color-primary);
}
/* Filter-Zeile im Tabellenkopf (Suche + Status-Dropdown). */
.letter-table .letter-filter-row th[b-bsl4fxapii] {
padding-top: 4px;
padding-bottom: 8px;
font-weight: 400;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
}
/* Feste Breiten der Nebenspalten (an th UND td, statt Inline-Style — siehe app.css ~Zeile 586,
"Ad-hoc-Breiten per Inline-Style sind ein Befund"). Summe 460px, mit der optionalen Spalte
Versand 564px; die einzige flexible Spalte ist Empfänger, die den Rest bekommt (siehe
den --letters-list-min-Kommentar an .letters-split).
Jede Zahl hier ist der im Browser gemessene Bedarf plus kleine Reserve, nicht mehr: jeder Pixel
zu viel schiebt die Liste über ihre Mindestbreite und damit die Vorschau unter sie (siehe
.letters-split). */
/* 80px: „SEITEN" im Kopf plus 2×16px Zellpolster sind 77px; der Inhalt („12 / 6") ist schmaler. */
.letter-table .col-pages[b-bsl4fxapii] { width: 80px; }
.letter-table .col-cost[b-bsl4fxapii] { width: 90px; }
/* 150px statt 130px — das längste Status-Label „Ausgeschlossen" (MailingFormat.StatusLabel) ist
als Badge 108px breit, plus 2×16px Zellpolster = 140px; bei 130px schnitt overflow:hidden das
Badge rechts um 17px ab, unabhängig von der Viewport-Breite (.ds-badge ist nowrap). */
.letter-table .col-status[b-bsl4fxapii] { width: 150px; }
/* 104px: Die Spalte war 140px breit, weil ihr Kopftext „Versanddatum" 134px braucht und
table-layout:fixed ihn sonst abschneidet — der Kopf war also breiter als sein eigener Inhalt
(„21.09.2026" braucht 94px). Der Kopf heißt deshalb nur noch „Versand" (101px); das volle Wort
und was es bedeutet stehen im title der Spalte. */
.letter-table .col-shipdate[b-bsl4fxapii] { width: 104px; }
/* 140px: drei Icon-Buttons (3×30 + 2×6 Abstand + 2×16px Zellpolster = 134px) sind das Maximum an
Schaltflächen. Die Spalte stand zwischenzeitlich auf 180px, weil das Badge bei
fehlgeschlagenen/unzustellbaren Schreiben „Wird nicht versendet" hieß und damit 164px brauchte;
es heißt jetzt „Nicht versendet" (137px) und passt wieder. Der Status daneben nennt ohnehin den
Grund („Fehler", „Unzustellbar"), das Badge wiederholt nur die Konsequenz. */
.letter-table .col-actions[b-bsl4fxapii] { width: 140px; text-align: right; }
/* Untergrenze der Tabelle selbst — dieselbe Zahl, mit der die Liste im Split ihren Platz
beansprucht (siehe .letters-split). Ohne diese Grenze schrumpft die table-layout:fixed-Tabelle
(siehe .ds-table weiter unten) im gestapelten Layout mit ihrem Container immer weiter und zieht
die komplette Differenz von der Empfänger-Spalte ab, bis Name und Adresse komplett abgeschnitten
sind. Erst mit dieser Grenze greift auch overflow-x:auto an .letters-split-list wirklich als
Sicherheitsnetz (siehe dort). */
.letter-table[b-bsl4fxapii] { min-width: var(--letters-list-min); }
/* ─── Schreiben-Split: Liste links, PDF-Vorschau rechts ─── */
.letters-split[b-bsl4fxapii] {
/* Flex mit Umbruch statt Grid + Viewport-Breakpoint: ob Liste und Vorschau nebeneinander
passen, ist eine Frage des verfügbaren Platzes, nicht der Fensterbreite. Eine
@media-Grenze musste Sidebar (240px bzw. 64px eingeklappt) und Seiten-Padding fest
einrechnen und stapelte deshalb auch dann, wenn der Platz längst reichte — auf einem
4K-Laptop mit 250%-Skalierung (1536 CSS-px) war die Vorschau dauerhaft unter der Liste.
Mit flex-wrap entscheidet der Container: passen die beiden Mindestbreiten plus gap nicht
mehr nebeneinander, bricht die Vorschau von selbst um — und eine eingeklappte Sidebar
bringt den Split ohne weiteres Zutun zurück. */
display: flex;
flex-wrap: wrap;
/* 12px wie die übrigen Kartenabstände der Detailseite (.mailing-detail). */
gap: 12px;
align-items: flex-start;
/* Mindestbreite der Liste = feste Nebenspalten (siehe .col-* oben) + 270px garantierte
Empfängerbreite. 270px, weil ein realistischer Datensatz („Walentina van der Dussen" fett
12.5px über „Leopoldine-Etzler-Platz 138 · 37627 Deensen" in 11px) im Browser gemessen
269px braucht; längere Namen kürzt die Zelle per Ellipsis, der volle Text steht im title.
Darunter ist die Liste unlesbar, egal wie viel Platz die Vorschau abgibt.
Ohne Versand-Spalte: 460 + 270 = 730px. Die Zahl ist die einzige Wahrheitsquelle —
.letter-table (min-width) und der flex-basis der Liste lesen beide sie, bei einer Änderung
der Nebenspalten-Summe also nur hier anfassen. */
--letters-list-min: 730px;
}
/* Mit der optionalen Spalte Versand (ShowAzpColumn, ab dem Versand-Zustand): 564 + 270. Auch
dieser Fall muss auf einem 4K-Notebook mit 250%-Skalierung nebeneinander passen: 1536 CSS-px
ergeben 1248px Inhaltsbreite (Sidebar 240, Seitenpolster 2×24), nötig sind 834 + 12 + 350 = 1196. */
.letters-split-azp[b-bsl4fxapii] { --letters-list-min: 834px; }
.letters-split-list[b-bsl4fxapii] {
/* Freier Platz über die Mindestbreiten hinaus geht im Verhältnis 1 : 1.3 an Liste und
Vorschau — die Vorschau bekommt den größeren Anteil, weil die Liste ab ihrer Mindestbreite
vor allem längere Empfängernamen gewinnt, die Vorschau dagegen Lesbarkeit. Das hält die
Breiten dort, wo sie das frühere Grid hatte (1920px: 1004/586 gegen vorher 970/630).
min-width:0 statt der Mindestbreite: die garantiert schon .letter-table, und so bleibt der
Karte im gestapelten Layout auf sehr schmalen Fenstern der horizontale Scroll als Ausweg
(unten). */
flex: 1 1 var(--letters-list-min);
min-width: 0;
/* Sicherheitsnetz: abgeschnittener Inhalt (z. B. bei Browser-Zoom oder einer künftigen
Spalte) bleibt per horizontalem Scroll erreichbar statt mit overflow:hidden unsichtbar
und unerreichbar zu werden. overflow-y bleibt explizit hidden — sonst kippt der
CSS-Overflow-Quirk (x ungleich visible ⇒ y wird ebenfalls zu auto) die vertikale Achse
ungewollt auf auto und die Karte bekäme eine zweite, vertikale Scrollbar. Greift erst seit
dem min-width an .letter-table (siehe oben): vorher schrumpfte die width:100%-Tabelle
(siehe .ds-table unten) immer auf Containerbreite, der Scroll wurde nie erreicht. */
overflow-x: auto;
overflow-y: hidden;
}
/* Tabelle darf die Liste nicht aufweiten (lange E-Mails/Adressen). */
.letters-split-list .ds-table[b-bsl4fxapii] {
width: 100%;
table-layout: fixed;
}
.letters-split-list .ds-table td[b-bsl4fxapii],
.letters-split-list .ds-table th[b-bsl4fxapii] {
overflow: hidden;
text-overflow: ellipsis;
}
.letter-pager[b-bsl4fxapii] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 16px;
border-top: 1px solid var(--color-border);
flex-wrap: wrap;
}
.letter-pager-range[b-bsl4fxapii] {
font-size: 11.5px;
color: var(--color-text-muted);
}
.letter-pager-controls[b-bsl4fxapii] {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* /Components/Pages/Mailings/MailingProgressDialog.razor.rz.scp.css */
/* ─── Recipe-Lauf-Fortschritts-Dialog ───
Aus MailingDetail.razor.css hierher gezogen, nachdem das Markup in diese Komponente
ausgelagert wurde. Die Live-Log-Liste (.live-log-*) nutzt die globalen Log-Viewer-Klassen
(auch vom Worker-Log-Panel verwendet) und bleibt deshalb in app.css. */
.progress-dialog .ds-dialog-body.progress-dialog-body[b-e2i2nieybq] {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 20px;
max-height: 70vh;
overflow: hidden;
}
.progress-summary[b-e2i2nieybq] {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 13px;
}
.progress-summary-headline[b-e2i2nieybq] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.progress-summary-line .mono[b-e2i2nieybq] {
font-weight: 600;
}
.progress-summary-running[b-e2i2nieybq] {
color: var(--color-primary);
}
.progress-summary-fail[b-e2i2nieybq] {
color: var(--color-danger);
font-weight: 600;
}
.progress-summary-percent[b-e2i2nieybq] {
font-size: 16px;
font-weight: 700;
color: var(--color-text-primary);
letter-spacing: -0.01em;
}
.progress-overall-bar[b-e2i2nieybq] {
width: 100%;
height: 8px;
border-radius: 999px;
background: var(--color-surface-hover);
overflow: hidden;
}
.progress-overall-bar-fill[b-e2i2nieybq] {
height: 100%;
background: linear-gradient(90deg, var(--color-info), var(--color-success));
border-radius: 999px;
transition: width 0.4s ease;
}
.progress-overall-bar-fill.is-failed[b-e2i2nieybq] {
background: linear-gradient(90deg, var(--color-accent), var(--color-danger));
}
/* Indeterminate: laufender Balken, solange die finale Brief-Zahl unbekannt ist (Producer streamt). */
.progress-overall-bar-fill.is-indeterminate[b-e2i2nieybq],
.progress-step-bar-fill.is-indeterminate[b-e2i2nieybq] {
width: 35%;
transition: none;
animation: progress-indeterminate-b-e2i2nieybq 1.15s ease-in-out infinite;
}
.progress-step-bar-fill.is-indeterminate[b-e2i2nieybq] {
background: var(--color-primary);
}
@keyframes progress-indeterminate-b-e2i2nieybq {
0% { margin-left: -35%; }
100% { margin-left: 100%; }
}
.progress-summary-eta[b-e2i2nieybq] {
color: var(--color-text-secondary);
}
/* Einfacher Modus: schlanke „X von N erzeugt"-Zeile statt Step-Strip. */
.progress-simple-count[b-e2i2nieybq] {
font-size: 13px;
color: var(--color-text-secondary);
margin-top: 2px;
}
.progress-summary-counts[b-e2i2nieybq] {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.progress-pill[b-e2i2nieybq] {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
background: var(--color-surface-hover);
border: 1px solid var(--color-border);
font-size: 11.5px;
color: var(--color-text-muted);
}
.progress-pill.is-ok[b-e2i2nieybq] {
background: var(--color-success-soft);
border-color: var(--color-success-border);
color: var(--color-success);
font-weight: 600;
}
.progress-pill.is-err[b-e2i2nieybq] {
background: var(--color-danger-soft);
border-color: var(--color-danger-border);
color: var(--color-danger);
font-weight: 600;
}
/* ─── Step-Strip: Pile-Kacheln ─── */
.progress-step-strip[b-e2i2nieybq] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
padding: 8px 2px 12px;
border-bottom: 1px solid var(--color-border);
}
.progress-step[b-e2i2nieybq] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--color-border);
background: var(--color-surface);
font-size: 12px;
position: relative;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.progress-step-head[b-e2i2nieybq] {
display: flex;
align-items: flex-start;
gap: 10px;
}
.progress-step-num[b-e2i2nieybq] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-surface-hover);
font-size: 12px;
font-weight: 700;
color: var(--color-text-muted);
flex: 0 0 auto;
}
.progress-step-title[b-e2i2nieybq] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.progress-step-label[b-e2i2nieybq] {
color: var(--color-text-primary);
font-weight: 600;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
}
.progress-step-sub[b-e2i2nieybq] {
font-size: 10.5px;
color: var(--color-text-muted);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.progress-step-meta[b-e2i2nieybq] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
font-size: 11px;
}
.progress-step-count[b-e2i2nieybq] {
font-weight: 700;
color: var(--color-text-primary);
font-size: 13px;
}
.progress-step-count-label[b-e2i2nieybq] {
color: var(--color-text-muted);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.progress-step-bar[b-e2i2nieybq] {
width: 100%;
height: 6px;
border-radius: 999px;
background: var(--color-surface-hover);
overflow: hidden;
}
.progress-step-bar-fill[b-e2i2nieybq] {
height: 100%;
background: var(--color-primary);
border-radius: 999px;
transition: width 0.4s ease;
}
/* States */
.progress-step.is-pending[b-e2i2nieybq] {
opacity: 0.7;
}
.progress-step.is-running[b-e2i2nieybq] {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-info-soft);
background: var(--color-info-soft);
}
.progress-step.is-running .progress-step-num[b-e2i2nieybq] {
background: var(--color-primary);
color: #fff;
}
.progress-step.is-running .progress-step-bar-fill[b-e2i2nieybq] {
background: var(--color-primary);
}
.progress-step.is-done[b-e2i2nieybq] {
border-color: var(--color-success-border);
background: var(--color-success-soft);
}
.progress-step.is-done .progress-step-num[b-e2i2nieybq] {
background: var(--color-success);
color: #fff;
}
.progress-step.is-done .progress-step-bar-fill[b-e2i2nieybq] {
background: var(--color-success);
}
.progress-step.is-failed[b-e2i2nieybq] {
border-color: var(--color-danger-border);
background: var(--color-danger-soft);
}
.progress-step.is-failed .progress-step-num[b-e2i2nieybq] {
background: var(--color-danger);
color: #fff;
}
.progress-step.is-failed .progress-step-bar-fill[b-e2i2nieybq] {
background: var(--color-danger);
}
/* ─── Recipe-Children unter Fan-Out-Parent ─── */
.progress-step-children-header[b-e2i2nieybq] {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
margin-top: 4px;
padding-top: 8px;
border-top: 1px dashed var(--color-border);
}
.progress-step-children[b-e2i2nieybq] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
margin-top: 2px;
}
.progress-step-child[b-e2i2nieybq] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: 999px;
background: var(--color-surface-hover);
border: 1px solid var(--color-border);
font-size: 10.5px;
color: var(--color-text-primary);
white-space: nowrap;
}
.progress-step-child-num[b-e2i2nieybq] {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-surface);
border: 1px solid var(--color-border);
font-size: 9px;
font-weight: 700;
color: var(--color-text-muted);
}
.progress-step-child-label[b-e2i2nieybq] {
line-height: 1.2;
}
.progress-step-child-arrow[b-e2i2nieybq] {
color: var(--color-text-muted);
font-size: 10px;
}
.progress-step-child.is-running[b-e2i2nieybq] {
border-color: var(--color-info-border);
background: var(--color-info-soft);
}
.progress-step-child.is-running .progress-step-child-num[b-e2i2nieybq] {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.progress-step-child.is-done[b-e2i2nieybq] {
border-color: var(--color-success-border);
background: var(--color-success-soft);
}
.progress-step-child.is-done .progress-step-child-num[b-e2i2nieybq] {
background: var(--color-success);
color: #fff;
border-color: var(--color-success);
}
.progress-step-child.is-failed[b-e2i2nieybq] {
border-color: var(--color-danger-border);
background: var(--color-danger-soft);
}
.progress-step-child.is-failed .progress-step-child-num[b-e2i2nieybq] {
background: var(--color-danger);
color: #fff;
border-color: var(--color-danger);
}
/* Spinner-Punkt im Num-Kreis (Running-State) */
/* bewusst weiß: Spinner und progress-step(-child)-num liegen in den Solid-States
(is-running/is-done/is-failed) auf einer Solid-Statusfarbe — themenunabhängig. */
.progress-step-spinner[b-e2i2nieybq] {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
animation: progress-step-spin-b-e2i2nieybq 0.9s linear infinite;
display: inline-block;
}
@keyframes progress-step-spin-b-e2i2nieybq {
to { transform: rotate(360deg); }
}
.progress-log-header[b-e2i2nieybq] {
margin-top: 4px;
}
.progress-log-body[b-e2i2nieybq] {
flex: 1 1 auto;
min-height: 200px;
max-height: 360px;
overflow-y: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-input, 6px);
padding: 8px;
background: var(--color-bg-subtle);
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
font-size: 11.5px;
line-height: 1.5;
}
/* /Components/Pages/Mailings/MailingSimpleConfig.razor.rz.scp.css */
/* ─── Einfach-Ansicht: horizontales Karten-Grid (Sammeldokument · Anlagen · Versand ODER Mailinhalt) ───
Feste Spaltenzahl je Stufe statt repeat(auto-fit, minmax(320px, 1fr)). auto-fit bestimmt die
Spaltenzahl allein aus der Breite und wüsste nichts davon, dass es hier immer genau drei Karten
sind: es setzte bei genügend Platz auch vier Spalten an und ließe die vierte leer stehen, und
dieselbe Karte fiele je nach Fensterbreite mal in die erste, mal in die zweite Zeile.
Die Zahl der Karten ist fest: Dokument, Anlagen und — je nach Versandart — entweder
Versandoptionen ODER Mailinhalt (MailingSimpleConfig rendert nie beide). Drei gleich breite
Karten sind deshalb die volle Aufteilung; darunter halbiert die zweispaltige Stufe, und ganz
schmal steht jede Karte für sich.
Die 1800 px sind nicht gegriffen, sondern die Breite, ab der die Anlagen-Karte ihre drei
Quellen-Kacheln nebeneinander stellen kann. Gerechnet wird nicht gegen das Fenster: davon gehen
die Sidebar (--sidebar-w, 240 px) und das Seitenpolster der Detailseite (2×24 px, .mailing-detail
in MailingDetail.razor.css) ab. Bei 1800 px bleiben 1512 px Inhalt, je Karte (1512−2×12)/3 =
496 px, abzüglich des Kartenpolsters (2×16 px) 464 px im Kartenkörper — und erst ab 420 px
stellt MailingAttachmentsCard.razor.css die drei Kacheln
nebeneinander. Eine niedrigere Stufe (etwa 1500 px) ergäbe rechnerisch drei Karten, in denen der
Quellen-Streifen wieder untereinander stünde: dieselbe Karte, nur höher und schmaler. */
/* 12px statt der üblichen 16px: dichtere Detailseite (siehe .mailing-detail in MailingDetail.razor.css). */
.simple-config-grid[b-bx1khei54e] {
display: grid;
gap: 12px;
align-items: start;
grid-template-columns: 1fr;
margin-bottom: 12px;
}
@media (min-width: 1100px) {
.simple-config-grid[b-bx1khei54e] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1800px) {
.simple-config-grid[b-bx1khei54e] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Versandoptionen bündeln mehrere Karten (Versandart + Kosten) in EINER Grid-Spalte. */
.simple-config-col[b-bx1khei54e] {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
/* /Components/Pages/Mailings/MailingWizardNav.razor.rz.scp.css */
/* ─── Wizard-Navigation: sticky Leiste am unteren Seitenrand ───
Aus MailingDetail.razor.css hierher gezogen, nachdem das Markup in diese Komponente
ausgelagert wurde. Sekundäre/Zurück-Aktion links, primäre „Weiter"-Aktion rechts. Klebt
unten am Viewport und steht durch Hintergrund + oberen Border lesbar über der Liste. */
.mailing-wizard-nav[b-ne5gw1sjr5] {
/* Fest am unteren Viewport-Rand — immer sichtbar, auch auf kurzen Seiten (sticky
würde die Leiste auf kurzem Inhalt nur mittig stehen lassen). Linker Versatz =
aktuelle Sidebar-Breite (erbt --sidebar-w-current von .app-shell, folgt dem
Ein-/Ausklappen). Die Seite trägt .page-wizard → deren padding-bottom hält den
Inhalt frei von der Leiste.
min-height hält die Leiste nur nach unten auf --wizard-nav-h — nach oben wächst sie
mit ihrem Inhalt. Der Stepper in der Mitte ist einzeilig (Kreis + Label daneben) und
mit Hinweiszeile ~30px hoch, also niedriger als die Buttons (36px): 36 + 2×8px Padding
+ 1px Border = 53px, der Token in app.css rundet auf 56px. Damit bestimmt keine
Beschriftung mehr die Höhe, und .page-wizard/LetterPreviewPane rechnen richtig. Wer
Stepper, Buttons oder Padding ändert, misst den Token neu. Nur wenn die Leiste selbst
umbricht (flex-wrap, sehr schmale Fenster), wird sie höher — dort stimmt die Zusage nicht. */
position: fixed;
left: var(--sidebar-w-current, var(--sidebar-w));
right: 0;
bottom: 0;
z-index: 20;
min-height: var(--wizard-nav-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin: 0;
padding: 8px 24px;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
box-shadow: var(--shadow-md, 0 -2px 8px rgba(0, 0, 0, 0.06));
transition: left 0.16s ease-out;
}
.mailing-wizard-nav-left[b-ne5gw1sjr5],
.mailing-wizard-nav-right[b-ne5gw1sjr5] {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
flex: 0 0 auto;
}
.mailing-wizard-nav-right[b-ne5gw1sjr5] {
justify-content: flex-end;
}
/* Sekundäre Aktionen links (Löschen/Zurück/Freigabe zurückziehen) brauchen gegen die weiße
Leiste einen grauen Fill, damit sie als Buttons lesbar sind statt als reiner Text. */
.mailing-wizard-nav-left .ds-btn[b-ne5gw1sjr5] {
--btn-bg: var(--color-bg-subtle);
}
.mailing-wizard-nav-left .ds-btn:hover:not(:disabled)[b-ne5gw1sjr5] {
background: var(--color-border);
}
/* Steht anstelle der primären Aktion, wenn es keine gibt (Testprofil ohne Versandschritt): erklärt
die Endstation, statt einen Button anzubieten, den das Backend abweisen müsste. */
.mailing-wizard-nav-note[b-ne5gw1sjr5] {
display: inline-flex;
align-items: flex-start;
gap: 6px;
/* Höchstens zwei Zeilen (2 × 12px × 1.3 ≈ 31px) — mehr, und der Hinweis wäre höher als
die Buttons und sprengte --wizard-nav-h. Deshalb breiter und kleiner als früher. */
max-width: 48ch;
color: var(--color-text-muted);
font-size: 12px;
line-height: 1.3;
text-align: left;
}
/* Prozess-Stepper sitzt mittig zwischen den Button-Gruppen und füllt den freien Raum.
flex-basis 0 + Container: der Stepper beansprucht keine Breite aus seinem Inhalt (sonst
bräche er bei langen Beschriftungen als eigene Zeile unter die Buttons um und verdoppelte die
Leistenhöhe), sondern nimmt, was die Buttons übrig lassen — und entscheidet per Container
Query selbst, ob die Beschriftungen hineinpassen (siehe unten). Erst unter 240px bricht die
Leiste um. */
.mailing-wizard-nav-stepper[b-ne5gw1sjr5] {
flex: 1 1 0;
min-width: 240px;
container: wizard-stepper / inline-size;
}
/* ─── Prozess-Stepper: Konfigurieren → … → Abgeschlossen ───
Horizontal und einzeilig: Kreis, Label rechts daneben, Verbindungslinie zum nächsten Schritt.
Die Höhe (Kreis 24px bzw. Label + Hinweiszeile des aktiven Schritts, ~30px) bleibt unter
der Button-Höhe der Leiste — sie bestimmt damit nicht --wizard-nav-h. Wer Kreis oder Zeilen
vergrößert, misst den Token neu. Lag früher global in app.css, obwohl diese Komponente die
einzige Nutzerin ist. */
.mailing-stepper[b-ne5gw1sjr5] {
display: flex;
align-items: center;
min-width: 0;
padding: 0 8px;
}
.mailing-step[b-ne5gw1sjr5] {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.mailing-step:last-child[b-ne5gw1sjr5] {
flex: 0 1 auto;
}
/* Verbindungslinie zum nächsten Schritt: füllt den freien Platz hinter Kreis und Label. Grün,
sobald der Schritt davor erledigt ist (dann ist der nächste erledigt oder aktiv). */
.mailing-step:not(:last-child)[b-ne5gw1sjr5]::after {
content: "";
flex: 1 1 16px;
min-width: 12px;
height: 2px;
margin-right: 8px;
background: var(--color-border);
}
.mailing-step.is-done[b-ne5gw1sjr5]::after {
background: color-mix(in srgb, var(--color-success) 55%, var(--color-border));
}
.mailing-step-circle[b-ne5gw1sjr5] {
position: relative;
z-index: 1;
flex: none;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11.5px;
font-weight: 600;
background: var(--color-bg-subtle);
border: 2px solid var(--color-border);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.mailing-step-text[b-ne5gw1sjr5] {
display: flex;
flex-direction: column;
min-width: 0;
}
.mailing-step-label[b-ne5gw1sjr5] {
font-size: 12px;
line-height: 1.3;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Kurzhinweis unter dem aktiven Schritt (MailingStatusFormat.ActiveStepHint), der volle Satz
steht im title. Einzeilig — die Leiste darf dadurch nicht höher werden. */
.mailing-step-hint[b-ne5gw1sjr5] {
max-width: 240px;
font-size: 11px;
line-height: 1.3;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* bewusst weiß: Kreis-Text/Spinner liegen auf einer Solid-Statusfarbe, themenunabhängig. */
/* Erledigt (success). */
.mailing-step.is-done .mailing-step-circle[b-ne5gw1sjr5] {
background: var(--color-success);
border-color: var(--color-success);
color: #fff;
}
.mailing-step.is-done .mailing-step-label[b-ne5gw1sjr5] {
color: var(--color-text-secondary);
}
/* Aktiv (info, fett). */
.mailing-step.is-active .mailing-step-circle[b-ne5gw1sjr5] {
background: var(--color-info);
border-color: var(--color-info);
color: #fff;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-info) 18%, transparent);
}
.mailing-step.is-active .mailing-step-label[b-ne5gw1sjr5] {
color: var(--color-text-primary);
font-weight: 600;
}
/* Laufender, transienter Schritt — Lade-Spinner statt Nummer/Häkchen. */
.mailing-step-spinner[b-ne5gw1sjr5] {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid color-mix(in srgb, #fff 45%, transparent);
border-top-color: #fff;
animation: mailing-step-spin-b-ne5gw1sjr5 0.8s linear infinite;
}
@keyframes mailing-step-spin-b-ne5gw1sjr5 {
to { transform: rotate(360deg); }
}
/* Wird es eng, behalten nur der aktive und der nächste Schritt ihr Label (siehe
MailingWizardNav.KeepsLabelWhenNarrow); die übrigen tragen .is-collapsible. Ihre Labels
bleiben für Screenreader lesbar (wie .sr-only, nicht display:none) und stehen als title am
Schritt. Gemessen am Platz des Steppers, nicht am Fenster — wie viel übrig bleibt, hängt
auch von den Buttons des jeweiligen Status ab. 1160px: der breiteste Fall (7 Schritte, aktiver
Schritt mit voller Hinweiszeile) braucht im Browser gemessen 1155px. */
@container wizard-stepper (max-width: 1160px) {
.mailing-step-text.is-collapsible[b-ne5gw1sjr5] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
}
/* Markierung am Schritt „Prüfen": der Rechnungsempfänger wurde automatisch aus dem
Insolvenzverfahren ermittelt und will mitgeprüft werden (Karte oben auf der Seite; Tooltip am
Punkt). Bewusst nur ein Punkt — kein eigener Schritt, kein Gate. Sitzt oben rechts am
24px-Kreis (.mailing-step-circle, linker Rand von .mailing-step). */
.mailing-step-flag[b-ne5gw1sjr5] {
position: absolute;
top: -3px;
left: 15px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-info);
border: 2px solid var(--color-surface);
z-index: 2;
}
/* /Components/Pages/Mailings/MailingWorkerLogPanel.razor.rz.scp.css */
/* Live-Worker-Log-Panel (AdvancedMode).
Aus MailingDetail.razor.css hierher gezogen, nachdem das Markup in diese Komponente
ausgelagert wurde. Die eigentliche Log-Zeilen-Optik (.live-log-row/-time/-level/-msg/-ex/
-step-btn/-lid-btn) teilt sich diese Komponente mit dem Fortschritts-Dialog und liegt deshalb
global in app.css — hier nur die panel-spezifische Hülle (Card-Body, Filter-Chips). */
.live-log-card[b-gynyfaonoo] {
margin-top: 12px;
}
.live-log-body[b-gynyfaonoo] {
padding: 0;
max-height: 320px;
overflow-y: auto;
background: var(--color-bg-subtle);
border-radius: 0 0 var(--radius-card) var(--radius-card);
font-family: var(--font-mono);
font-size: 11.5px;
line-height: 1.45;
}
/* Aktive Filter-Chips über der Log-Liste */
.log-filter-chips[b-gynyfaonoo] {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 6px 14px;
background: var(--color-bg-subtle);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.log-chip[b-gynyfaonoo] {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--color-primary-soft);
color: var(--color-primary);
font-size: 11px;
padding: 2px 4px 2px 8px;
border-radius: var(--radius-pill);
}
.log-chip button[b-gynyfaonoo] {
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
font-size: 13px;
line-height: 1;
padding: 0 4px;
}
.log-chip button:hover[b-gynyfaonoo] { color: var(--color-danger); }
/* /Components/Pages/Mailings/StepPipelineEditor.razor.rz.scp.css */
/* ─── Step-Cards (Recipe-Visualisierung) ─── */
.steps-phase[b-h8tyxbuare] {
display: flex;
flex-direction: column;
}
.steps-phase + .steps-phase[b-h8tyxbuare] {
margin-top: 14px;
}
.steps-phase-label[b-h8tyxbuare] {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-faint);
padding-bottom: 4px;
}
.step-card[b-h8tyxbuare] {
display: grid;
grid-template-columns: auto auto 1fr auto auto;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-surface);
align-items: center;
transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.step-card:hover[b-h8tyxbuare] {
border-color: var(--color-primary);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
/* Live-Step-Status (vom Polling-Loop gesetzt) */
.step-card.is-done[b-h8tyxbuare] {
border-color: var(--color-success);
background: linear-gradient(0deg, var(--color-success-soft), transparent);
}
.step-card.is-done .step-card-icon[b-h8tyxbuare] {
background: var(--color-success-soft);
color: var(--color-success);
}
.step-card.is-failed[b-h8tyxbuare] {
border-color: var(--color-danger);
background: linear-gradient(0deg, var(--color-danger-soft), transparent);
}
.step-card.is-failed .step-card-icon[b-h8tyxbuare] {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.step-card.is-running[b-h8tyxbuare] {
border-color: var(--color-primary);
background: linear-gradient(0deg, var(--color-info-soft), transparent);
}
.step-card.is-running .step-card-icon[b-h8tyxbuare] {
background: var(--color-primary-soft);
color: var(--color-primary);
}
.step-card-status-badge[b-h8tyxbuare] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
font-weight: 500;
padding: 1px 7px;
border-radius: var(--radius-pill);
margin-left: 8px;
letter-spacing: 0.01em;
vertical-align: middle;
}
.step-card-status-badge.is-done[b-h8tyxbuare] {
background: var(--color-success-soft);
color: var(--color-success);
}
.step-card-status-badge.is-failed[b-h8tyxbuare] {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.step-card-status-badge.is-running[b-h8tyxbuare] {
background: var(--color-primary-soft);
color: var(--color-primary);
}
.step-card-pulse[b-h8tyxbuare] {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
animation: step-pulse-b-h8tyxbuare 1s ease-in-out infinite;
}
@keyframes step-pulse-b-h8tyxbuare {
0%, 100% { opacity: 0.35; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.1); }
}
.step-card-error[b-h8tyxbuare] {
font-size: 11px;
color: var(--color-danger);
background: var(--color-danger-soft);
padding: 6px 8px;
border-radius: var(--radius-input);
margin-top: 6px;
word-break: break-word;
}
.step-card[draggable="true"][b-h8tyxbuare] {
cursor: grab;
}
.step-card[draggable="true"]:active[b-h8tyxbuare] {
cursor: grabbing;
opacity: 0.6;
}
.step-card-drag[b-h8tyxbuare] {
color: var(--color-text-faint);
display: grid;
place-items: center;
cursor: grab;
width: 18px;
}
.step-card-drag:hover[b-h8tyxbuare] {
color: var(--color-text-primary);
}
.step-card-icon[b-h8tyxbuare] {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--color-primary-soft);
color: var(--color-primary);
display: grid;
place-items: center;
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
}
.step-card-body[b-h8tyxbuare] {
min-width: 0;
}
.step-card-label[b-h8tyxbuare] {
font-size: 13px;
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: 2px;
}
.step-card-meta[b-h8tyxbuare] {
font-size: 11px;
color: var(--color-text-muted);
word-break: break-all;
}
.step-card-meta .mono[b-h8tyxbuare] {
font-family: var(--font-mono);
}
.step-card-type[b-h8tyxbuare] {
font-size: 10px;
font-weight: 500;
color: var(--color-text-secondary);
background: var(--color-bg-subtle);
padding: 2px 8px;
border-radius: var(--radius-pill);
flex-shrink: 0;
letter-spacing: 0.02em;
}
.step-card-actions[b-h8tyxbuare] {
display: flex;
gap: 2px;
opacity: 0;
transition: opacity 120ms;
}
.step-card:hover .step-card-actions[b-h8tyxbuare] {
opacity: 1;
}
/* Drop-Zonen zwischen / um die Tiles */
.step-dropzone[b-h8tyxbuare] {
height: 8px;
margin: 2px 0;
border-radius: var(--radius-input);
display: grid;
place-items: center;
cursor: pointer;
transition: height 120ms, background-color 120ms, border-color 120ms;
border: 1px dashed transparent;
color: transparent;
user-select: none;
}
.step-dropzone:hover[b-h8tyxbuare],
.step-dropzone.drag-over[b-h8tyxbuare] {
height: 36px;
background: var(--color-primary-soft);
border-color: var(--color-primary);
color: var(--color-primary);
}
.step-dropzone-plus[b-h8tyxbuare] {
font-size: 11.5px;
font-weight: 500;
pointer-events: none;
letter-spacing: 0.01em;
}
.steps-empty-hint[b-h8tyxbuare] {
font-size: 11.5px;
color: var(--color-text-muted);
padding: 6px 4px 0;
font-style: italic;
}
/* Eingerückter „Pro Schreiben"-Block für aufeinanderfolgende perLetter-Steps. */
.step-substeps[b-h8tyxbuare] {
margin: 2px 0 2px 28px;
padding: 6px 10px 8px;
border-left: 2px solid var(--color-primary-soft);
background: linear-gradient(180deg, var(--color-bg-subtle) 0%, transparent 24px);
border-radius: 0 var(--radius-input) var(--radius-input) 0;
}
.step-substeps-label[b-h8tyxbuare] {
font-size: 10.5px;
font-weight: 600;
color: var(--color-primary);
letter-spacing: 0.04em;
padding: 2px 0 4px;
text-transform: uppercase;
}
/* /Components/Pages/Mailings/VerfahrenInvoiceRecipientDialog.razor.rz.scp.css */
/* Formular-Raster des Dialogs „Rechnungsempfänger ändern". Spaltenbreiten wie im
Bearbeiten-Dialog der Verwaltung (InvoiceRecipientList.razor), nur ohne die dort
zusätzlichen Stammdaten-Felder. */
.verfahren-ir-alert[b-2hb3ccmnrt] {
margin-bottom: 16px;
}
.verfahren-ir-hint[b-2hb3ccmnrt] {
margin: 0 0 16px;
font-size: 12.5px;
line-height: 1.45;
color: var(--color-text-secondary);
}
.verfahren-ir-grid[b-2hb3ccmnrt] {
display: grid;
grid-template-columns: 1fr 140px;
gap: 14px 18px;
}
.verfahren-ir-full[b-2hb3ccmnrt] {
grid-column: 1 / -1;
}
.verfahren-ir-city-row[b-2hb3ccmnrt] {
display: grid;
grid-template-columns: 120px 1fr 140px;
gap: 14px;
}
.verfahren-ir-input[b-2hb3ccmnrt] {
width: 100%;
}
.verfahren-ir-upper[b-2hb3ccmnrt] {
text-transform: uppercase;
}
/* /Components/Pages/Mailings/WebDocumentDialog.razor.rz.scp.css */
/* Flache Dokumentliste des Dialogs „Web-Dokument anhängen" — ohne Registerspalte, sonst
absichtlich in Maßen und Tönen wie die Dokumentspalte des Akten-Dialogs: es ist dieselbe
Auswahlgeste. Ausschließlich Design-Tokens — damit trägt das dunkle Theme ohne eine zweite
Regelmenge (siehe docs/concepts/theming.md). */
.web-banner[b-ol369zkthf] {
margin-bottom: 12px;
}
.web-documents[b-ol369zkthf] {
/* Feste Höhe statt max-height: der Dialog springt beim Anhaken nicht in der Größe. */
height: min(52vh, 420px);
overflow: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-surface);
padding: 6px;
}
.web-doc[b-ol369zkthf] {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 8px;
border-radius: var(--radius-input);
cursor: pointer;
}
.web-doc:hover[b-ol369zkthf] {
background: var(--color-surface-hover);
}
/* Nicht-PDFs, Dokumente ohne Inhalt und bereits angehängte bleiben sichtbar (der Anwender soll den
Bestand vollständig sehen), sind aber erkennbar nicht wählbar. Die Begründung steht als title am
Element. */
.web-doc-locked[b-ol369zkthf] {
cursor: default;
opacity: 0.55;
}
.web-doc-body[b-ol369zkthf] {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.web-doc-title[b-ol369zkthf] {
font-size: 12.5px;
color: var(--color-text-primary);
word-break: break-word;
}
.web-doc-meta[b-ol369zkthf] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 11px;
color: var(--color-text-muted);
}
.web-doc-flag[b-ol369zkthf] {
font-size: 10.5px;
}
.web-state[b-ol369zkthf] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 8px;
font-size: 12.5px;
color: var(--color-text-secondary);
}
.web-hint[b-ol369zkthf] {
padding: 10px 8px;
font-size: 12.5px;
color: var(--color-text-muted);
}
/* Zeile über der Liste: dezenter Hinweis auf Dokumente ohne Inhalt (kein Alert — sie sind ein
Datenbefund beim Kunden, kein Fehler der Anwendung). */
.web-toolbar[b-ol369zkthf] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.web-toolbar-hint[b-ol369zkthf] {
font-size: 11.5px;
color: var(--color-text-muted);
}
/* Der Zähler steht links, die Schaltflächen bleiben rechts (ds-dialog-footer richtet rechtsbündig aus). */
.web-count[b-ol369zkthf] {
margin-right: auto;
font-size: 12px;
color: var(--color-text-muted);
}
/* /Components/Pages/Onboarding/OnboardingCard.razor.rz.scp.css */
.onboarding-card[b-5i69kf79n0] {
margin-bottom: 20px;
}
/* Kopf als Raster statt Flex: Titel/Einleitung links, Fortschritt daneben, Schließen ganz rechts.
In schmalen Fenstern rutscht nur der Fortschritt in eine eigene Zeile — der Schließen-Knopf
bleibt oben rechts, wo er auf jeder anderen Karte auch sitzt. */
.onboarding-header[b-5i69kf79n0] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
column-gap: 16px;
row-gap: 12px;
}
.onboarding-headline[b-5i69kf79n0] {
grid-column: 1;
grid-row: 1;
min-width: 0;
}
.onboarding-intro[b-5i69kf79n0] {
margin: 4px 0 0;
max-width: 62ch;
font-size: 12.5px;
color: var(--color-text-secondary);
}
.onboarding-intro a[b-5i69kf79n0] {
color: var(--color-primary);
font-weight: 500;
text-decoration: none;
}
.onboarding-intro a:hover[b-5i69kf79n0] {
text-decoration: underline;
}
.onboarding-progress[b-5i69kf79n0] {
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
gap: 10px;
}
.onboarding-progress .progress[b-5i69kf79n0] {
width: 88px;
height: 6px;
}
.onboarding-progress-text[b-5i69kf79n0] {
font-size: 12px;
font-weight: 500;
color: var(--color-text-muted);
white-space: nowrap;
}
.onboarding-header-close[b-5i69kf79n0] {
grid-column: 3;
grid-row: 1;
align-self: start;
}
@media (max-width: 720px) {
.onboarding-header[b-5i69kf79n0] {
grid-template-columns: minmax(0, 1fr) auto;
}
.onboarding-progress[b-5i69kf79n0] {
grid-column: 1 / -1;
grid-row: 2;
}
.onboarding-header-close[b-5i69kf79n0] {
grid-column: 2;
grid-row: 1;
}
}
/* Schritte: keine Trennlinien (die ließen die Karte wie eine Tabelle wirken), stattdessen Luft
zwischen den Zeilen und eine Hover-Fläche je Schritt. Der negative Rand hebt das Innenpolster
der Zeilen wieder auf, damit Kontrollkästchen und Titel bündig unter dem Kartenkopf stehen. */
.onboarding-steps[b-5i69kf79n0] {
list-style: none;
margin: 0 -10px;
padding: 0;
}
.onboarding-step[b-5i69kf79n0] {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 9px 10px;
border-radius: var(--radius-input);
cursor: pointer;
}
.onboarding-step:hover[b-5i69kf79n0] {
background: var(--color-surface-hover);
}
.onboarding-check[b-5i69kf79n0] {
margin-top: 1px;
flex: 0 0 auto;
width: 16px;
height: 16px;
accent-color: var(--color-primary);
cursor: pointer;
}
.onboarding-step-main[b-5i69kf79n0] {
min-width: 0;
}
.onboarding-step-title[b-5i69kf79n0] {
font-size: 13.5px;
font-weight: 500;
line-height: 1.35;
color: var(--color-text-primary);
}
.onboarding-step-title a[b-5i69kf79n0] {
color: inherit;
text-decoration: none;
}
.onboarding-step-title a:hover[b-5i69kf79n0] {
color: var(--color-primary);
text-decoration: underline;
}
.onboarding-step-title a:focus-visible[b-5i69kf79n0] {
outline: 2px solid var(--color-primary-ring);
outline-offset: 2px;
border-radius: 4px;
}
/* Zweite Ebene: kleiner, gedämpft und in begrenzter Lesebreite — der Satz läuft nicht über die
ganze Dashboard-Breite. */
.onboarding-step-text[b-5i69kf79n0] {
margin: 2px 0 0;
max-width: 68ch;
font-size: 12.5px;
line-height: 1.5;
color: var(--color-text-muted);
}
.onboarding-step-link[b-5i69kf79n0] {
display: inline-flex;
align-items: center;
gap: 4px;
font: inherit;
font-weight: 500;
color: var(--color-primary);
text-decoration: none;
white-space: nowrap;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.onboarding-step-link:hover[b-5i69kf79n0] {
text-decoration: underline;
}
.onboarding-step-link:focus-visible[b-5i69kf79n0] {
outline: 2px solid var(--color-primary-ring);
outline-offset: 2px;
border-radius: 4px;
}
/* Erledigt: das gefüllte Kästchen plus durchgestrichener Titel genügen als Unterschied. Der
Erklärsatz behält seine Farbe — noch blasser wäre er im Dunkelmodus kaum noch lesbar. */
.onboarding-step.is-done .onboarding-step-title[b-5i69kf79n0] {
color: var(--color-text-muted);
text-decoration: line-through;
text-decoration-color: var(--color-text-faint);
}
/* Automatisch erkannt: nicht abwählbar, also auch nicht als klickbar anbieten. */
.onboarding-step.is-detected[b-5i69kf79n0],
.onboarding-step.is-detected .onboarding-check[b-5i69kf79n0] {
cursor: default;
}
.onboarding-step.is-detected:hover[b-5i69kf79n0] {
background: none;
}
.onboarding-step-auto[b-5i69kf79n0] {
display: flex;
align-items: center;
gap: 4px;
margin: 2px 0 0;
font-size: 12px;
line-height: 1.5;
color: var(--color-success-text);
}
/* Aufklapp-Zeile für die Empfehlungen. */
.onboarding-more[b-5i69kf79n0] {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--color-border);
}
.onboarding-more-btn[b-5i69kf79n0] {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: -8px;
padding: 5px 8px;
border: 0;
border-radius: var(--radius-btn);
background: none;
font-family: inherit;
font-size: 12.5px;
font-weight: 500;
color: var(--color-text-secondary);
cursor: pointer;
}
.onboarding-more-btn:hover[b-5i69kf79n0] {
background: var(--color-surface-hover);
color: var(--color-text-primary);
}
.onboarding-more-btn:focus-visible[b-5i69kf79n0] {
outline: 2px solid var(--color-primary-ring);
outline-offset: 2px;
}
.onboarding-steps-more[b-5i69kf79n0] {
margin-top: 4px;
}
/* /Components/Pages/Profile/Profile.razor.rz.scp.css */
/* Zeitzone über beide Spalten des Stammdaten-Rasters: in einer halben Spalte (~300 px bei
.page-narrow) schnitt der Select „(MESZ, UTC+02:00)" ab. Select und Übernehmen-Knopf teilen
sich die Zeile; wird es enger, rutscht der Knopf unter den Select statt ihn zu stauchen. */
.profile-tz-field[b-prfn0fycmb] {
grid-column: 1 / -1;
}
.profile-tz-row[b-prfn0fycmb] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.profile-tz-row .ds-select[b-prfn0fycmb] {
flex: 1 1 320px;
width: auto;
min-width: 0;
}
/* /Components/Pages/Public/Landing.razor.rz.scp.css */
/* ============================================================
Landingpage — öffentliche Produktübersicht
Nur CSS-Variablen für Farben → Light/Dark automatisch korrekt.
============================================================ */
.landing[b-5g4ery34b7] {
color: var(--color-text-primary);
}
.landing-container[b-5g4ery34b7] {
max-width: 1080px;
margin: 0 auto;
padding: 0 24px;
}
/* ---------- Header ---------- */
.landing-header[b-5g4ery34b7] {
position: sticky;
top: 0;
z-index: 10;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.landing-header-inner[b-5g4ery34b7] {
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.landing-brand[b-5g4ery34b7] {
display: flex;
align-items: center;
gap: 10px;
}
.landing-brand-lockup[b-5g4ery34b7] {
height: 22px;
width: auto;
max-width: 100%;
/* Ohne object-fit staucht max-width das Logo, weil die Hoehe fest bleibt - in der
240px-Sidebar sind das rund 9% Verzerrung. So skaliert es stattdessen mit. */
object-fit: contain;
}
/* Nur eine der beiden Varianten ist sichtbar — welche, hängt vom Theme ab (siehe
html[data-theme="dark"] weiter unten). Ein ![]()
lässt sich nicht per CSS umschalten. */
.landing-brand-lockup-dark[b-5g4ery34b7] {
display: none;
}
html[data-theme="dark"] .landing-brand-lockup-light[b-5g4ery34b7] {
display: none;
}
html[data-theme="dark"] .landing-brand-lockup-dark[b-5g4ery34b7] {
display: block;
}
/* ---------- Hero ---------- */
.landing-hero[b-5g4ery34b7] {
padding: 88px 0 72px;
text-align: center;
background:
radial-gradient(ellipse 70% 60% at 50% -10%, var(--color-primary-soft), transparent);
}
.landing-eyebrow[b-5g4ery34b7] {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-accent);
background: var(--color-accent-soft);
border-radius: var(--radius-pill);
padding: 5px 14px;
margin-bottom: 20px;
}
.landing-hero h1[b-5g4ery34b7] {
margin: 0 auto 18px;
max-width: 760px;
font-size: 40px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
}
.landing-hero-sub[b-5g4ery34b7] {
margin: 0 auto 28px;
max-width: 640px;
font-size: 16px;
line-height: 1.6;
color: var(--color-text-secondary);
}
.landing-hero-ctas[b-5g4ery34b7] {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
/* ---------- Sektionen ---------- */
.landing-section[b-5g4ery34b7] {
padding: 64px 0;
}
.landing-section-alt[b-5g4ery34b7] {
background: var(--color-surface);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.landing-section h2[b-5g4ery34b7] {
margin: 0 0 32px;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.015em;
text-align: center;
}
.landing-grid[b-5g4ery34b7] {
display: grid;
gap: 20px;
}
.landing-grid-3[b-5g4ery34b7] {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* ---------- Problem → Lösung ---------- */
.landing-pain[b-5g4ery34b7] {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-xs);
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.landing-pain-problem[b-5g4ery34b7] {
font-size: 13.5px;
font-weight: 500;
color: var(--color-text-muted);
text-decoration: line-through;
text-decoration-color: var(--color-danger);
text-decoration-thickness: 1.5px;
}
.landing-pain-solution[b-5g4ery34b7] {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 13.5px;
line-height: 1.5;
color: var(--color-text-primary);
}
.landing-pain-solution[b-5g4ery34b7] svg {
color: var(--color-success);
flex-shrink: 0;
margin-top: 3px;
}
/* ---------- Workflow-Schritte ---------- */
.landing-step[b-5g4ery34b7] {
text-align: center;
padding: 8px 12px;
}
.landing-step-num[b-5g4ery34b7] {
width: 40px;
height: 40px;
margin: 0 auto 14px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 700;
color: #ffffff; /* bewusst weiß: liegt auf Solid-Primary-Gradient, themenunabhängig */
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
}
.landing-step h3[b-5g4ery34b7] {
margin: 0 0 8px;
font-size: 16px;
font-weight: 600;
}
.landing-step p[b-5g4ery34b7] {
margin: 0;
font-size: 13.5px;
line-height: 1.6;
color: var(--color-text-secondary);
}
.landing-step code[b-5g4ery34b7] {
font-family: var(--font-mono);
font-size: 12px;
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
border-radius: 5px;
padding: 1px 5px;
}
/* ---------- Feature- & Trust-Karten ---------- */
.landing-feature[b-5g4ery34b7],
.landing-trust[b-5g4ery34b7] {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-xs);
padding: 22px;
}
.landing-trust[b-5g4ery34b7] {
background: var(--color-bg-app);
}
.landing-feature-icon[b-5g4ery34b7] {
width: 40px;
height: 40px;
margin-bottom: 14px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
background: var(--color-primary-soft);
}
.landing-feature h3[b-5g4ery34b7],
.landing-trust h3[b-5g4ery34b7] {
margin: 0 0 8px;
font-size: 15px;
font-weight: 600;
}
.landing-feature p[b-5g4ery34b7],
.landing-trust p[b-5g4ery34b7] {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: var(--color-text-secondary);
}
/* ---------- Abschluss-CTA ---------- */
.landing-cta[b-5g4ery34b7] {
text-align: center;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.landing-cta h2[b-5g4ery34b7] {
margin-bottom: 24px;
}
.landing-cta-secondary[b-5g4ery34b7] {
font-size: 13px;
color: var(--color-text-secondary);
text-decoration: underline;
text-underline-offset: 3px;
}
.landing-cta-secondary:hover[b-5g4ery34b7] {
color: var(--color-text-primary);
}
/* ---------- Interessenten-Formular ---------- */
.landing-contact[b-5g4ery34b7] {
max-width: 620px;
}
.landing-contact-sub[b-5g4ery34b7] {
margin: -16px 0 28px;
text-align: center;
font-size: 15px;
line-height: 1.6;
color: var(--color-text-secondary);
}
.landing-contact-form[b-5g4ery34b7] {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-xs);
padding: 24px;
}
.landing-contact-row[b-5g4ery34b7] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
/* Honeypot: für Menschen unsichtbar, aber im DOM vorhanden (display:none reicht hier). */
.landing-hp[b-5g4ery34b7] {
display: none;
}
.landing-contact-note[b-5g4ery34b7] {
display: flex;
align-items: center;
gap: 8px;
border-radius: var(--radius-card);
padding: 14px 16px;
margin-bottom: 18px;
font-size: 14px;
line-height: 1.5;
}
.landing-contact-ok[b-5g4ery34b7] {
color: var(--color-success);
background: var(--color-success-soft);
border: 1px solid var(--color-success);
}
.landing-contact-err[b-5g4ery34b7] {
color: var(--color-danger);
background: var(--color-danger-soft);
border: 1px solid var(--color-danger);
}
@media (max-width: 720px) {
.landing-contact-row[b-5g4ery34b7] {
grid-template-columns: 1fr;
}
}
/* ---------- Footer ---------- */
.landing-footer[b-5g4ery34b7] {
border-top: 1px solid var(--color-border);
padding: 20px 0;
font-size: 12.5px;
color: var(--color-text-muted);
}
.landing-footer-inner[b-5g4ery34b7] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.landing-footer-copy[b-5g4ery34b7] {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.landing-footer-septeo[b-5g4ery34b7] {
display: flex;
align-items: center;
gap: 5px;
color: var(--color-text-faint);
}
.landing-footer-septeo > svg[b-5g4ery34b7] {
flex-shrink: 0;
}
.landing-footer-links[b-5g4ery34b7] {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.landing-footer a:hover[b-5g4ery34b7] {
color: var(--color-text-primary);
}
/* ---------- Responsive ---------- */
@media (max-width: 720px) {
.landing-hero[b-5g4ery34b7] {
padding: 56px 0 48px;
}
.landing-hero h1[b-5g4ery34b7] {
font-size: 28px;
}
.landing-section[b-5g4ery34b7] {
padding: 44px 0;
}
.landing-section h2[b-5g4ery34b7] {
font-size: 21px;
}
}
/* /Components/Pages/Sales/SalesPortfolio.razor.rz.scp.css */
.section-title[b-tdifm2i3np] {
margin: 22px 0 10px;
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.005em;
}
.sales-tile-grid[b-tdifm2i3np] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
}
.sales-delta-hint[b-tdifm2i3np] {
margin-top: 4px;
font-size: 12px;
color: var(--color-text-muted);
}
/* Zeitraumfilter im page-header: Korn-Segmente + Scheiben-Select in einer Zeile. */
.sales-period-filter[b-tdifm2i3np] {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
/* Trennt die Zeitraum-/Kanzlei-Auswahl vom Provisions-Toggle: beide sind Anzeigefilter und gehören
in denselben Streifen, beantworten aber verschiedene Fragen. */
.sales-filter-divider[b-tdifm2i3np] {
align-self: stretch;
width: 1px;
margin: 0 4px;
background: var(--color-border);
}
/* Kanzlei-Filter: natives als Dropdown. Das Panel liegt absolut über dem Inhalt, damit
das Öffnen den page-header nicht auseinanderschiebt. */
.sales-tenant-filter[b-tdifm2i3np] {
position: relative;
}
.sales-tenant-filter > summary[b-tdifm2i3np] {
list-style: none;
cursor: pointer;
}
.sales-tenant-filter > summary[b-tdifm2i3np]::-webkit-details-marker {
display: none;
}
.sales-tenant-filter-panel[b-tdifm2i3np] {
position: absolute;
z-index: 20;
right: 0;
margin-top: 6px;
min-width: 240px;
max-height: 320px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-surface);
box-shadow: var(--shadow-md);
}
.sales-tenant-filter-item[b-tdifm2i3np] {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
border-radius: 6px;
font-size: 12.5px;
font-weight: 400;
cursor: pointer;
}
.sales-tenant-filter-item:hover[b-tdifm2i3np] {
background: var(--color-surface-hover);
}
.sales-status-badges[b-tdifm2i3np] {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* Die Kennzahlen-Tabelle trägt mit den Provisionsspalten über zwanzig Spalten. Sie darf deshalb
in ihrer Karte waagerecht scrollen — die Seite selbst soll es nicht. */
.sales-table-scroll[b-tdifm2i3np] {
overflow-x: auto;
}
/* Nicht (mehr) provisionsrelevante Kanzlei: bewusst nur eine Textfarbe und kein Hintergrund — der
Zeilen-Hover der globalen Tabellenregel färbt den Hintergrund bereits und würde sich sonst mit
der Markierung schlagen. */
tbody tr.sales-row-noncommission td[b-tdifm2i3np],
tbody tr.sales-row-noncommission td.num[b-tdifm2i3np] {
color: var(--color-danger);
}
/* Ampel der Spalte „Sendungen lfd. Monat": farbiger Punkt plus Wert in derselben Farbe. */
.sales-pace[b-tdifm2i3np] {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
}
.sales-pace[b-tdifm2i3np]::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.sales-pace-ok[b-tdifm2i3np] { color: var(--color-success); }
.sales-pace-warn[b-tdifm2i3np] { color: var(--color-warning); }
.sales-pace-behind[b-tdifm2i3np] { color: var(--color-danger); }
/* Summenzeile: optisch abgesetzt vom Datenkörper, aber im selben Raster. */
tfoot tr.sales-total-row td[b-tdifm2i3np] {
padding: 12px 16px;
border-top: 2px solid var(--color-border);
background: var(--color-bg-subtle);
color: var(--color-text-primary);
font-weight: 600;
white-space: nowrap;
}
/* /Components/Pages/Sales/SalesTenantDetailPage.razor.rz.scp.css */
.section-title[b-zv1r04pk6e] {
margin: 22px 0 10px;
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.005em;
}
/* Zweiter Abschnitt innerhalb derselben Karte (Kontakt-Karte: Admins, dann Rechnungsempfänger).
Ohne die Trennlinie stößt die Überschrift ohne Abgrenzung an die Tabelle darüber. */
.sales-subsection[b-zv1r04pk6e] {
border-top: 1px solid var(--color-border);
}
.sales-tile-grid[b-zv1r04pk6e] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
}
.sales-delta-hint[b-zv1r04pk6e] {
margin-top: 4px;
font-size: 12px;
color: var(--color-text-muted);
}
/* Zeitraumfilter im page-header: Korn-Segmente + Scheiben-Select in einer Zeile. */
.sales-period-filter[b-zv1r04pk6e] {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.sales-status-badges[b-zv1r04pk6e] {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* ── Zeitreihe: reines CSS/HTML-Balkendiagramm (kein ApexCharts) ─────────────
Zwei unabhängig skalierte Spuren je Monat (Umsatz oben, Sendungen unten) — Muster wie ein
Kurs-/Volumen-Chart. Unvollständige Monate bekommen eine Schraffur ÜBER der Flächenfarbe statt
einer zweiten, hartkodierten Farbe — funktioniert dadurch in beiden Themes, weil die Schraffur
selbst aus einem Theme-Token gemischt wird (color-mix, kein Hex-Literal). */
.sales-month-chart[b-zv1r04pk6e] {
display: flex;
align-items: flex-end;
gap: 6px;
overflow-x: auto;
padding-bottom: 4px;
}
/* Spalten mindestens so breit wie das nowrap-Monatslabel ("Mär 26" ≈ 36px bei 10px Schrift),
sonst überlappen die zentrierten Labels ihre Nachbarn zu einem unlesbaren Streifen. Nach oben
gedeckelt gestreckt, damit 12 Monate die Kartenbreite nutzen statt links zu kleben; bei
24 Monaten auf schmalen Fenstern greift weiter das overflow-x der Chart-Zeile. */
.sales-month-col[b-zv1r04pk6e] {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 0;
min-width: 38px;
max-width: 64px;
}
.sales-month-revenue-track[b-zv1r04pk6e] {
height: 90px;
width: 14px;
display: flex;
align-items: flex-end;
}
.sales-month-letters-track[b-zv1r04pk6e] {
height: 30px;
width: 14px;
display: flex;
align-items: flex-end;
margin-top: 3px;
}
.sales-month-bar[b-zv1r04pk6e] {
width: 100%;
height: 0;
border-radius: 2px 2px 0 0;
}
.sales-month-bar--revenue[b-zv1r04pk6e] { background-color: var(--color-primary); }
.sales-month-bar--letters[b-zv1r04pk6e] { background-color: var(--color-info); }
.sales-month-bar.is-incomplete[b-zv1r04pk6e] {
background-image: repeating-linear-gradient(
45deg,
color-mix(in srgb, var(--color-surface) 55%, transparent) 0 4px,
transparent 4px 8px
);
}
.sales-month-label[b-zv1r04pk6e] {
margin-top: 4px;
font-size: 10px;
color: var(--color-text-muted);
white-space: nowrap;
}
.sales-month-legend[b-zv1r04pk6e] {
margin-top: 10px;
display: flex;
gap: 16px;
font-size: 11.5px;
color: var(--color-text-muted);
}
.sales-legend-dot[b-zv1r04pk6e] {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 4px;
}
.sales-legend-dot--revenue[b-zv1r04pk6e] { background-color: var(--color-primary); }
.sales-legend-dot--letters[b-zv1r04pk6e] { background-color: var(--color-info); }
/* /Components/Pages/SuperAdmin/BillingIssuedSection.razor.rz.scp.css */
/* Rechnungsliste der Abrechnung — breit als Tabelle, schmal gestapelt. Ausschließlich Design-Tokens,
damit trägt das dunkle Theme ohne eine zweite Regelmenge (docs/concepts/theming.md).
Warum gestapelt und nicht gescrollt: neun Spalten mit je 32 px Innenabstand, Kopftitel in
Großbuchstaben, das Status-Etikett und die PDF-Knöpfe brauchen zusammen rund 1050 px (gemessen
25.09.2026 mit dem App-CSS an der breitesten Zeile: drei PDF-Knöpfe, zwei Aktionen im Status).
Bei halbem Bildschirm stehen 615 bis 935 px zur Verfügung — die Tabelle ragte über den
Kartenrand. Ein Scroll-Container ist laut app.css (.ds-table) keine Alternative, er schneidet
das Zeilenmenü ab.
Container Query statt Media Query: gemessen wird die Breite der Liste selbst, nicht die des
Fensters — die Seitenleiste lässt sich einklappen, und dieselbe Fensterbreite ergibt damit zwei
verschiedene Listenbreiten. Tabelle erst ab 1200 px: 1050 px gemessene Mindestbreite plus Reserve,
denn jede weitere Aktion im Status verbreitert die Spalte um ihren breitesten Knopf. */
.bill-issued-list[b-4j0d8nc5c7] {
container: billing-issued / inline-size;
}
.bill-right[b-4j0d8nc5c7] {
text-align: right;
}
/* Ein Datum bricht nie in sich um (sonst stand „18.09.20 / 26-" untereinander), der Zeitraum nur
nach dem Strich. Nötig, weil .ds-table-Zellen überall umbrechen dürfen (overflow-wrap: anywhere). */
.bill-period-part[b-4j0d8nc5c7] {
white-space: nowrap;
}
/* PDF-Knöpfe und die Aktionen im Status stehen nebeneinander, solange Platz ist, und brechen sonst
untereinander um — die Mindestbreite der Zelle ist dann der breiteste Knopf, nicht ihre Summe. */
.bill-pdf-actions[b-4j0d8nc5c7] {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.bill-status-actions[b-4j0d8nc5c7] .row-actions-inline {
flex-wrap: wrap;
justify-content: flex-start;
}
/* Gestapelt: jede Rechnung ein Block, jeder Wert mit seiner Spaltenbeschriftung (data-label, Texte
aus BillingIssuedFormat). Die kurzen Werte teilen sich ein Raster, Status und PDF bekommen die
volle Breite. Die role-Attribute im Markup halten die Tabellensemantik, die display: block/grid
Screenreadern sonst nimmt. Der Kopf bleibt für sie lesbar, nur unsichtbar. */
@container billing-issued (max-width: 1199px) {
.bill-table[b-4j0d8nc5c7],
.bill-table tbody[b-4j0d8nc5c7] {
display: block;
}
.bill-table thead[b-4j0d8nc5c7] {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.bill-table tbody[b-4j0d8nc5c7] {
border-top: 1px solid var(--color-border);
}
.bill-table tbody tr[b-4j0d8nc5c7] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px 20px;
padding: 14px 4px;
border-bottom: 1px solid var(--color-border);
}
.bill-table tbody tr:last-child[b-4j0d8nc5c7] {
border-bottom: 0;
}
.bill-table tbody td[b-4j0d8nc5c7] {
display: block;
padding: 0;
border: 0;
min-width: 0;
}
.bill-table tbody td[b-4j0d8nc5c7]::before {
content: attr(data-label);
display: block;
margin-bottom: 3px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted-on-subtle);
}
.bill-table .bill-wide[b-4j0d8nc5c7] {
grid-column: 1 / -1;
}
.bill-table .bill-right[b-4j0d8nc5c7] {
text-align: left;
}
.bill-pdf-actions[b-4j0d8nc5c7] {
justify-content: flex-start;
}
}
/* /Components/Pages/SuperAdmin/BillingSettings.razor.rz.scp.css */
.grid-2[b-2padfyjc0a] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
}
.grid-3[b-2padfyjc0a] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px 24px;
}
.col-full[b-2padfyjc0a] {
grid-column: 1 / -1;
}
.w-full[b-2padfyjc0a] {
width: 100%;
}
.upload-label[b-2padfyjc0a] {
cursor: pointer;
margin: 0;
}
/* rendert sein als Kind-Komponente — das CSS-Isolation-Attribut der
umschließenden Datei wird darauf nicht gestempelt (siehe TenantMasterDataCard.razor.css). */
.upload-label[b-2padfyjc0a] .hidden-input {
display: none;
}
/* /Components/Pages/SuperAdmin/HealthCheckCard.razor.rz.scp.css */
/* Karten mit Instanz-Unterkarten über die ganze Breite des Karten-Grids der Systemstatus-Seite:
in einer 280px-Spalte stünden die Unterkarten (Balken plus Fußzeile) einspaltig untereinander
und die Karte würde beliebig lang. Die Eigenschaft sitzt am ds-card-Div, weil nur das direktes
Kind des Grids ist. Alle anderen Karten bleiben im Raster. */
.health-check-card-wide[b-nwmr9fo1b1] {
grid-column: 1 / -1;
}
/* /Components/Pages/SuperAdmin/HelpArticleEdit.razor.rz.scp.css */
/* ─── Bilder-Karte der Hilfe-Redaktion (/admin/help/{id}) ───
Kein ::deep nötig: dieses Markup erzeugt der Razor-Compiler selbst, die CSS-Isolation stempelt
ihr Scope-Attribut also auf jedes Element hier. (Anders als HelpArticleBody, das seinen Inhalt
als MarkupString einfügt — dort ist ::deep zwingend.) */
.help-images-upload[b-11tvnre0v9] {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.help-images-hint[b-11tvnre0v9] {
margin: 0;
font-size: 12px;
color: var(--color-text-muted);
line-height: 1.5;
}
/* Feste Kachelgröße statt Originalmaße: die Liste soll eine ruhige Spalte bleiben, auch wenn
Screenshots in ganz unterschiedlichen Seitenverhältnissen hochgeladen werden. `contain` statt
`cover`, damit nichts abgeschnitten wird — man soll erkennen, welches Bild man vor sich hat. */
.help-images-thumb[b-11tvnre0v9] {
display: block;
width: 48px;
height: 48px;
object-fit: contain;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-bg-subtle);
}
/* /Components/Pages/SuperAdmin/HelpArticles.razor.rz.scp.css */
/* ─── Redaktions-Baum Kategorie → Artikel (/admin/help) ───
Optik bewusst identisch zum Lese-Inhaltsverzeichnis (HelpToc.razor.css): der Redakteur soll die
Gliederung wiedererkennen, die der Leser sieht. Zusätzlich trägt jede Artikelzeile hier ihre
Redaktions-Metadaten (SortOrder, Status, Rollen, Änderungszeit, Aktionen).
Kein ::deep nötig — anders als HelpArticleBody rendert diese Seite ihr Markup selbst, die
CSS-Isolation stempelt ihr Scope-Attribut also auf jedes Element hier. */
.help-admin-tree[b-ygum3ff2qa] {
padding: 8px;
}
.help-admin-cat + .help-admin-cat[b-ygum3ff2qa] {
margin-top: 2px;
}
.help-admin-cat-btn[b-ygum3ff2qa] {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 7px 8px;
background: none;
border: none;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
text-align: left;
cursor: pointer;
}
.help-admin-cat-btn:hover[b-ygum3ff2qa] { background: var(--color-surface-hover); }
.help-admin-cat-btn:focus-visible[b-ygum3ff2qa] { outline: 2px solid var(--color-primary-ring); outline-offset: 1px; }
.help-admin-chev[b-ygum3ff2qa] { color: var(--color-text-muted); transition: transform 0.12s; flex-shrink: 0; }
.help-admin-chev.expanded[b-ygum3ff2qa] { transform: rotate(90deg); }
.help-admin-cat-title[b-ygum3ff2qa] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-admin-cat-count[b-ygum3ff2qa] {
font-size: 11px;
font-weight: 500;
color: var(--color-text-muted);
}
.help-admin-articles[b-ygum3ff2qa] {
list-style: none;
margin: 2px 0 6px 14px;
padding-left: 12px;
border-left: 1px dashed var(--color-border);
}
/* Eine Zeile je Artikel: Titel nimmt den freien Platz, die Metadaten stehen rechtsbündig
dahinter. flex-wrap, damit auf schmalen Fenstern umbrochen statt abgeschnitten wird. */
.help-admin-articles li[b-ygum3ff2qa] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 5px 8px;
border-radius: 6px;
}
.help-admin-articles li:hover[b-ygum3ff2qa] { background: var(--color-surface-hover); }
.help-admin-sort[b-ygum3ff2qa] {
flex-shrink: 0;
min-width: 22px;
font-size: 11px;
color: var(--color-text-muted);
text-align: right;
}
/* Titel ist die wichtigste Information der Zeile, Zielgruppe/Datum sind Nebeninfos und behalten ihre
volle Breite (flex: 0 0 auto). Bei Platzmangel bricht der Titel deshalb zweizeilig um statt zu
eliden — eine Ellipse würde hier den einzigen Blickfang der Zeile verstecken. */
.help-admin-article-title[b-ygum3ff2qa] {
flex: 1 1 220px;
min-width: 0;
overflow-wrap: break-word;
font-size: 12.5px;
font-weight: 500;
color: var(--color-text-primary);
}
.help-admin-article-title:hover[b-ygum3ff2qa] { color: var(--color-primary); }
.help-admin-badge[b-ygum3ff2qa] { font-size: 10px; flex-shrink: 0; }
.help-admin-roles-all[b-ygum3ff2qa] {
font-size: 11.5px;
color: var(--color-text-muted);
flex-shrink: 0;
}
.help-admin-updated[b-ygum3ff2qa] {
font-size: 11.5px;
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.help-admin-actions[b-ygum3ff2qa] {
display: flex;
gap: 2px;
flex-shrink: 0;
}
.help-admin-cat-empty[b-ygum3ff2qa] {
padding: 6px 8px;
font-size: 12px;
color: var(--color-text-muted);
}
/* /Components/Pages/SuperAdmin/HostInstanceCards.razor.rz.scp.css */
/* Unterkarten je Host-Instanz innerhalb einer Check-Karte. Nur CSS-Variablen, damit Light und
Dark ohne zweite Regel funktionieren: --color-bg-app liegt in beiden Themes eine Stufe neben
--color-surface der umgebenden Karte und setzt die Unterkarte damit sichtbar ab. */
.host-instances[b-6q6h849her] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
margin-top: 14px;
/* Unterkarten nicht auf die Zeilenhöhe strecken: eine Instanz ohne Messwerte (stumm oder
ältere Worker-Version) hat nur Kopf und Fußzeile und stuende sonst als große leere Fläche
neben ihren vollen Nachbarn -- das liest sich wie ein Anzeigefehler. */
align-items: start;
}
.host-instance[b-6q6h849her] {
padding: 10px 12px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-bg-app);
}
.host-instance-head[b-6q6h849her] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* Ein Replica-Name wie "os-worker--0000031--" ist länger als die Spalte, aber
der unterscheidende Teil steht am Ende — Abschneiden mit nowrap/ellipsis machte alle Karten
nebeneinander identisch lesbar und damit unbrauchbar, weil das Auseinanderhalten der einzige
Zweck der Zeile ist. Stattdessen zwei Zeilen zulassen und mitten im Namen umbrechen; der
vollständige Name steht zusätzlich im title. */
.host-instance-id[b-6q6h849her] {
font-size: 12.5px;
font-weight: 500;
overflow-wrap: anywhere;
}
.host-instance-head .ds-badge[b-6q6h849her] {
flex: 0 0 auto;
font-size: 10.5px;
}
.host-instance-mount[b-6q6h849her] {
margin: 4px 0 0;
font-size: 11px;
color: var(--color-text-faint);
}
/* Die betrieblich wichtigste Zahl der Unterkarte: eigene Zeile, kräftiger als die Fußzeile. */
.host-instance-load[b-6q6h849her] {
margin: 12px 0 0;
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
}
.host-instance-meta[b-6q6h849her] {
display: flex;
flex-wrap: wrap;
gap: 2px 10px;
margin: 10px 0 0;
font-size: 11.5px;
color: var(--color-text-muted);
}
/* Ohne einen einzigen Messwert (Worker einer älteren Version) bliebe sonst ein leerer Absatz. */
.host-instance-meta:empty[b-6q6h849her] {
display: none;
}
/* /Components/Pages/SuperAdmin/OperationsRadar.razor.rz.scp.css */
/* ── Hangfire-Queues ────────────────────────────────────────── */
.queue-grid[b-x724t13v2s] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 16px;
}
.queue-bar[b-x724t13v2s] {
display: flex;
height: 10px;
border-radius: var(--radius-pill);
overflow: hidden;
background: var(--color-border);
}
.queue-bar-segment[b-x724t13v2s] {
height: 100%;
}
.queue-bar-empty[b-x724t13v2s] {
margin: 0;
color: var(--color-text-muted);
font-size: 13px;
}
.queue-legend[b-x724t13v2s] {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 10px;
font-size: 12px;
color: var(--color-text-secondary);
}
.queue-legend-item[b-x724t13v2s] {
display: flex;
align-items: center;
gap: 6px;
}
.queue-legend-dot[b-x724t13v2s] {
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
}
.queue-legend-value[b-x724t13v2s] {
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.queue-meta[b-x724t13v2s] {
margin-top: 14px;
font-size: 12px;
color: var(--color-text-muted);
}
/* /Components/Pages/SuperAdmin/PlatformDashboard.razor.rz.scp.css */
/* ── 1) Verdikt ─────────────────────────────────────────────── */
.verdict-card[b-tknqvib0uw] {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border-left: 3px solid var(--color-border);
}
.verdict-card--ok[b-tknqvib0uw] { border-left-color: var(--color-success); }
.verdict-card--attention[b-tknqvib0uw] { border-left-color: var(--color-warning); }
.verdict-card--outage[b-tknqvib0uw] { border-left-color: var(--color-danger); }
.verdict-dot[b-tknqvib0uw] {
flex: 0 0 auto;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-border);
}
.verdict-card--ok .verdict-dot[b-tknqvib0uw] { background: var(--color-success); }
.verdict-card--attention .verdict-dot[b-tknqvib0uw] { background: var(--color-warning); }
.verdict-card--outage .verdict-dot[b-tknqvib0uw] { background: var(--color-danger); }
.verdict-body[b-tknqvib0uw] {
flex: 1 1 auto;
min-width: 0;
}
.verdict-headline[b-tknqvib0uw] {
font-size: 18px;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.01em;
}
.verdict-detail[b-tknqvib0uw] {
margin-top: 2px;
font-size: 13px;
color: var(--color-text-secondary);
}
.verdict-timestamp[b-tknqvib0uw] {
flex: 0 0 auto;
font-size: 12px;
color: var(--color-text-muted);
white-space: nowrap;
}
/* ── Rubriken ───────────────────────────────────────────────── */
.section-title[b-tknqvib0uw] {
margin: 22px 0 10px;
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.005em;
}
/* ── 2) Das braucht Aufmerksamkeit ─────────────────────────────
Farbe steckt im Streifen links, nicht im Text (Text bleibt in den normalen Textfarben) — die
Zeilen sind Aufmerksamkeitspunkte, keine bestätigten Störungen (die zeigt die Verdikt-Zeile). */
.attention-rows[b-tknqvib0uw] {
padding: 0;
display: flex;
flex-direction: column;
}
.attention-row[b-tknqvib0uw] {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
border-left: 3px solid var(--color-warning);
border-bottom: 1px solid var(--color-border);
text-decoration: none;
color: inherit;
}
.attention-row:last-child[b-tknqvib0uw] { border-bottom: none; }
.attention-row:hover[b-tknqvib0uw] { background: var(--color-bg-subtle); }
.attention-row-value[b-tknqvib0uw] {
flex: 0 0 auto;
min-width: 44px;
font-size: 22px;
font-weight: 600;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
text-align: right;
}
.attention-row-text[b-tknqvib0uw] {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.attention-row-label[b-tknqvib0uw] {
font-size: 13.5px;
font-weight: 600;
color: var(--color-text-primary);
}
.attention-row-hint[b-tknqvib0uw] {
font-size: 12px;
color: var(--color-text-muted);
}
/* ── 2b) Läuft gerade ───────────────────────────────────────── */
.running-empty[b-tknqvib0uw] {
padding: 14px 20px;
color: var(--color-text-muted);
font-size: 13px;
}
.running-rows[b-tknqvib0uw] {
padding: 0;
display: flex;
flex-direction: column;
}
.running-row[b-tknqvib0uw] {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 20px;
border-bottom: 1px solid var(--color-border);
text-decoration: none;
color: inherit;
}
.running-row:last-child[b-tknqvib0uw] { border-bottom: none; }
.running-row:hover[b-tknqvib0uw] { background: var(--color-bg-subtle); }
.running-row-main[b-tknqvib0uw] {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.running-row-tenant[b-tknqvib0uw] {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
}
.running-row-title[b-tknqvib0uw] {
font-size: 12px;
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.running-row-mode[b-tknqvib0uw] {
flex: 0 0 auto;
}
.running-row-count[b-tknqvib0uw] {
flex: 0 0 auto;
font-size: 12px;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.running-row-activity[b-tknqvib0uw] {
flex: 0 0 auto;
font-size: 12px;
color: var(--color-text-muted);
white-space: nowrap;
min-width: 90px;
text-align: right;
}
.running-row-more[b-tknqvib0uw] {
padding: 10px 20px;
font-size: 12px;
color: var(--color-text-muted);
}
/* ── 3) Betrieb-Ampelleiste ─────────────────────────────────── */
.ops-pill-row[b-tknqvib0uw] {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ops-pill[b-tknqvib0uw] {
text-decoration: none;
color: inherit;
}
.ops-pill:hover[b-tknqvib0uw] { filter: brightness(0.96); }
.ops-pill-value[b-tknqvib0uw] {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ── 4) Durchsatz ───────────────────────────────────────────── */
.throughput-grid[b-tknqvib0uw] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.throughput-compare[b-tknqvib0uw] {
margin-top: 6px;
font-size: 12px;
color: var(--color-text-muted);
}
/* /Components/Pages/SuperAdmin/ProblemReportDetail.razor.rz.scp.css */
/* Fakten-Block: zweispaltig, Beschriftung gedämpft — dieselbe Optik wie der Transparenzblock im
Meldedialog, damit Melder und Triage dasselbe Bild sehen. */
.problem-report-facts[b-cg14l8u04z] {
display: grid;
grid-template-columns: minmax(160px, auto) 1fr;
gap: 6px 16px;
margin: 0;
font-size: 13px;
}
.problem-report-facts dt[b-cg14l8u04z] {
color: var(--color-text-muted);
}
.problem-report-facts dd[b-cg14l8u04z] {
margin: 0;
min-width: 0;
overflow-wrap: anywhere;
}
/* Freitext eines Menschen: Umbrüche erhalten, aber ohne Monospace — es ist Prosa, kein Log. */
.problem-report-freitext[b-cg14l8u04z] {
margin: 0;
white-space: pre-wrap;
line-height: 1.5;
}
.problem-report-shots[b-cg14l8u04z] {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.problem-report-shots figure[b-cg14l8u04z] {
margin: 0;
max-width: 320px;
}
.problem-report-shots img[b-cg14l8u04z] {
max-width: 100%;
border: 1px solid var(--color-border);
border-radius: 6px;
display: block;
}
.problem-report-shots figcaption[b-cg14l8u04z] {
margin-top: 4px;
font-size: 11.5px;
color: var(--color-text-muted);
overflow-wrap: anywhere;
}
.problem-report-transcript[b-cg14l8u04z] {
margin: 0;
max-height: 420px;
overflow: auto;
white-space: pre-wrap;
font-size: 12px;
line-height: 1.5;
background: var(--color-surface-alt);
border-radius: 6px;
padding: 10px 12px;
}
/* /Components/Pages/SuperAdmin/SqlConsole/SqlConsoleResultTable.razor.rz.scp.css */
/* Breite Result-Sets (viele Spalten) müssen innerhalb der Karte scrollen — die Seite selbst nicht.
Die Höhenbegrenzung hält zugleich die Karte handhabbar: ohne sie schiebt ein Ergebnis mit 200
Zeilen alles andere aus dem Bild. */
.sql-console-table-wrap[b-h8atgtjprr] {
overflow: auto;
max-height: 60vh;
}
.sql-console-more[b-h8atgtjprr] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-size: 12.5px;
color: var(--color-text-muted);
border-top: 1px solid var(--color-border);
}
/* Bei 60vh Scrollhöhe wandert der Spaltenkopf sonst aus dem Bild, und ab Zeile 30 rät man,
welche Spalte man gerade liest. */
.sql-console-table-wrap thead th[b-h8atgtjprr] {
position: sticky;
top: 0;
z-index: 1;
background: var(--color-surface);
}
.sql-console-col-type[b-h8atgtjprr] {
margin-top: 2px;
font-size: 10.5px;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
color: var(--color-text-muted);
}
/* CellKind.Null optisch von der Zeichenkette "NULL" unterscheidbar. */
.sql-cell-null[b-h8atgtjprr] {
color: var(--color-text-faint);
font-style: italic;
}
.sql-cell-error[b-h8atgtjprr] {
color: var(--color-danger-text);
}
/* /Components/Pages/SuperAdmin/Tenants.razor.rz.scp.css */
/* Feature-Schalter im Anlage-Dialog (Super-Admin-Teil des Katalogs). Scoped, weil der Dialog
keine Karte ist wie TenantFeaturesCard — eigene, schlanke Regeln statt deren Klassen
mitzubenutzen (scoped CSS ist ohnehin nicht komponentenübergreifend nutzbar). */
.feature-list[b-c9p42x6fbc] {
margin-top: 18px;
}
.feature-row[b-c9p42x6fbc] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 0;
}
.feature-title[b-c9p42x6fbc] {
font-size: 13px;
font-weight: 500;
}
.feature-desc[b-c9p42x6fbc] {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 2px;
}
.feature-divider[b-c9p42x6fbc] {
height: 1px;
background: var(--color-border);
}
/* /Components/Pages/TemplateAssistant/TemplateAssistantPage.razor.rz.scp.css */
/* ── Ablegefläche ───────────────────────────────────────────────────────────────────────────
Das liegt unsichtbar über der ganzen Fläche — damit nimmt sie Klick UND Drop an,
ohne eigenes JavaScript für die Drag-Ereignisse. */
.dropzone[b-3uobbhvqy1] {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 36px 24px;
text-align: center;
border: 1px dashed var(--color-border);
border-radius: var(--radius-md, 8px);
color: var(--color-text-muted);
cursor: pointer;
transition: border-color .15s ease, color .15s ease;
}
.dropzone:hover[b-3uobbhvqy1],
.dropzone:focus-within[b-3uobbhvqy1] {
border-color: var(--color-accent);
color: var(--color-text);
}
.dropzone.is-busy[b-3uobbhvqy1] {
cursor: progress;
opacity: .7;
}
/* rendert sein als Kind-Komponente — das CSS-Isolation-Attribut dieser Datei
wird darauf nicht gestempelt. Ohne ::deep blieb der native „Datei auswählen"-Button mitten in
der Ablegefläche sichtbar (gleiche Stelle wie in TenantMasterDataCard.razor.css beschrieben). */
.dropzone[b-3uobbhvqy1] .dropzone-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: inherit;
}
.dropzone-title[b-3uobbhvqy1] {
font-size: 14px;
font-weight: 500;
color: var(--color-text);
}
.dropzone-hint[b-3uobbhvqy1] {
font-size: 12.5px;
max-width: 46ch;
line-height: 1.5;
}
/* ── Zustandsleiste ─────────────────────────────────────────────────────────────────────────
Soll ohne Lesen erkennbar machen, ob gerade gearbeitet wird: Spinner plus laufender Balken
gegen den ruhenden Zustand mit Häkchen bzw. Warnzeichen. */
.status-card[b-3uobbhvqy1] {
border-left: 3px solid var(--color-border);
}
.status-card.is-running[b-3uobbhvqy1] {
border-left-color: var(--color-accent);
}
.status-main[b-3uobbhvqy1] {
display: flex;
align-items: flex-start;
gap: 12px;
}
.status-text[b-3uobbhvqy1] {
min-width: 0;
}
.status-title[b-3uobbhvqy1] {
font-size: 14px;
font-weight: 600;
color: var(--color-text);
}
.status-detail[b-3uobbhvqy1] {
font-size: 12.5px;
color: var(--color-text-muted);
line-height: 1.5;
margin-top: 2px;
max-width: 72ch;
}
.status-actions[b-3uobbhvqy1] {
display: flex;
gap: 8px;
margin-left: auto;
flex-shrink: 0;
}
.spinner[b-3uobbhvqy1] {
width: 18px;
height: 18px;
flex: 0 0 auto;
margin-top: 1px;
border: 2px solid var(--color-border);
border-top-color: var(--color-accent);
border-radius: 50%;
animation: ta-spin-b-3uobbhvqy1 .9s linear infinite;
}
@keyframes ta-spin-b-3uobbhvqy1 {
to { transform: rotate(360deg); }
}
.progress-track[b-3uobbhvqy1] {
height: 4px;
margin-top: 14px;
border-radius: 2px;
background: var(--color-border);
overflow: hidden;
}
.progress-fill[b-3uobbhvqy1] {
height: 100%;
background: var(--color-accent);
transition: width .3s ease;
}
/* Während eines Laufs pulsiert der Balken, damit auch bei gleicher Breite Bewegung sichtbar ist. */
.progress-fill.is-running[b-3uobbhvqy1] {
animation: ta-pulse-b-3uobbhvqy1 1.4s ease-in-out infinite;
}
@keyframes ta-pulse-b-3uobbhvqy1 {
0%, 100% { opacity: 1; }
50% { opacity: .45; }
}
.progress-label[b-3uobbhvqy1] {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 6px;
}
/* ── Zweispaltiger Bereich: Befunde links, PDF-Vorschau rechts ──────────────────────────── */
.split[b-3uobbhvqy1] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
margin-top: 16px;
}
/* Unter 1200 px untereinander — die Vorschau braucht Breite, um lesbar zu sein. */
@media (max-width: 1200px) {
.split[b-3uobbhvqy1] {
grid-template-columns: minmax(0, 1fr);
}
}
.split-main > .ds-card + .ds-card[b-3uobbhvqy1] {
margin-top: 16px;
}
/* Die Vorschau bleibt beim Scrollen der Befundliste stehen. */
.split-preview[b-3uobbhvqy1] {
position: sticky;
top: 16px;
}
.preview-body[b-3uobbhvqy1] {
padding: 0;
}
.preview-empty[b-3uobbhvqy1] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 56px 24px;
font-size: 13px;
color: var(--color-text-muted);
text-align: center;
}
.sample-picker[b-3uobbhvqy1] {
display: flex;
gap: 4px;
}
/* ── Listen und Chips ──────────────────────────────────────────────────────────────────── */
.note-row[b-3uobbhvqy1],
.card-intro[b-3uobbhvqy1] {
font-size: 13px;
color: var(--color-text-muted);
line-height: 1.55;
}
.note-row[b-3uobbhvqy1] {
display: flex;
align-items: center;
gap: 8px;
}
.card-intro[b-3uobbhvqy1] {
margin: 0 0 12px;
}
.finding-list[b-3uobbhvqy1] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.finding-list li[b-3uobbhvqy1] {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55;
}
/* Das Icon soll auf der ersten Textzeile sitzen, nicht mittig zum ganzen Absatz. */
.finding-list li[b-3uobbhvqy1] svg {
flex: 0 0 auto;
margin-top: 3px;
color: var(--color-text-muted);
}
/* Anzahl der betroffenen Musterschreiben — zurückhaltend, es ist eine Nebeninformation. */
.finding-count[b-3uobbhvqy1] {
margin-left: 6px;
font-size: 11.5px;
color: var(--color-text-faint, var(--color-text-muted));
white-space: nowrap;
}
.chip-row[b-3uobbhvqy1] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.chip[b-3uobbhvqy1] {
font-size: 12px;
padding: 3px 8px;
border: 1px solid var(--color-border);
border-radius: 4px;
color: var(--color-text-muted);
white-space: pre-wrap;
word-break: break-all;
}
/* Kopfzeile mit Titel links und Aktion/Auswahl rechts. */
.ds-card-header[b-3uobbhvqy1] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* /Components/Shared/AssistantDialog.razor.rz.scp.css */
/* ─── KI-Assistent als Modal ───
dialog.ds-dialog bringt Fläche, Rahmen, Backdrop und `display:flex` im offenen Zustand mit
(app.css). Hier nur die Maße und das Durchreichen der Höhe an das Panel. */
.assistant-dialog[b-37bk1x9u8h] {
width: min(94vw, 760px);
/* Feste Höhe statt „so hoch wie der Inhalt": der Chat wächst beim Streamen, ein mitwachsender
Dialog würde bei jeder Antwort springen. .help-chat scrollt stattdessen intern. */
height: min(86vh, 880px);
}
/* ::deep, weil .help-chat aus der Kindkomponente HelpChatPanel stammt und deren Scope-Attribut
trägt, nicht das dieser Datei (siehe HelpArticleBody.razor.css zum selben Thema).
min-height:0 ist Pflicht, sonst verweigert das Flex-Kind das Schrumpfen und die Nachrichtenliste
sprengt den Dialog, statt intern zu scrollen. */
.assistant-dialog[b-37bk1x9u8h] .help-chat {
flex: 1 1 auto;
min-height: 0;
/* Rahmen und Schatten der ds-card entfallen — der Dialog ist bereits die Fläche. */
border: 0;
box-shadow: none;
background: transparent;
}
/* /Components/Shared/CapacityBar.razor.rz.scp.css */
.capacity-bar[b-s2w2f9k5ji] {
margin-top: 12px;
}
.capacity-bar-head[b-s2w2f9k5ji] {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.capacity-bar-title[b-s2w2f9k5ji] {
font-size: 11px;
font-weight: 500;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.capacity-bar-track-wrap[b-s2w2f9k5ji] {
position: relative;
}
.capacity-bar-track[b-s2w2f9k5ji] {
height: 8px;
border-radius: var(--radius-pill);
background: var(--color-border);
overflow: hidden;
}
.capacity-bar-fill[b-s2w2f9k5ji] {
height: 100%;
border-radius: var(--radius-pill);
background: var(--color-primary);
}
.capacity-bar-threshold[b-s2w2f9k5ji] {
position: absolute;
top: -3px;
bottom: -3px;
width: 2px;
background: var(--color-warning);
border-radius: 1px;
}
.capacity-bar-ends[b-s2w2f9k5ji] {
display: flex;
justify-content: space-between;
margin-top: 4px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--color-text-secondary);
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
/* Confirm-Dialog: kompakt, mit großem Icon-Akzent links — abgestimmt auf die existierenden
ds-dialog-Styles. */
.ds-confirm-dialog[b-lyy7jlrao2] {
width: min(92vw, 460px);
padding: 0;
border: none;
border-radius: 12px;
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--color-border);
overflow: hidden;
background: var(--color-surface);
}
.ds-confirm-dialog[b-lyy7jlrao2]::backdrop {
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
}
html[data-theme="dark"] .ds-confirm-dialog[b-lyy7jlrao2]::backdrop {
background: rgba(0, 0, 0, 0.6);
}
.ds-confirm-icon-wrap[b-lyy7jlrao2] {
display: flex;
justify-content: center;
padding: 24px 24px 0;
}
.ds-confirm-icon[b-lyy7jlrao2] {
width: 56px;
height: 56px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
background: var(--color-surface-hover);
}
.ds-confirm-dialog.is-info .ds-confirm-icon[b-lyy7jlrao2] {
background: var(--color-info-soft);
color: var(--color-primary);
}
.ds-confirm-dialog.is-warning .ds-confirm-icon[b-lyy7jlrao2] {
background: var(--color-warning-soft);
color: var(--color-warning-text);
}
.ds-confirm-dialog.is-danger .ds-confirm-icon[b-lyy7jlrao2] {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.ds-confirm-body[b-lyy7jlrao2] {
padding: 16px 24px 8px;
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
}
.ds-confirm-title[b-lyy7jlrao2] {
margin: 0;
font-size: 17px;
font-weight: 700;
line-height: 1.25;
color: var(--color-text-primary);
letter-spacing: -0.005em;
}
.ds-confirm-message[b-lyy7jlrao2] {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--color-text-muted);
white-space: pre-wrap;
}
.ds-confirm-footer[b-lyy7jlrao2] {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 16px 20px 20px;
background: var(--color-bg-subtle);
border-top: 1px solid var(--color-border);
}
.ds-confirm-footer .ds-btn[b-lyy7jlrao2] {
min-width: 96px;
justify-content: center;
}
/* /Components/Shared/DsSwitch.razor.rz.scp.css */
.ds-switch[b-ya0ylxhxp4] {
display: inline-flex;
align-items: center;
cursor: pointer;
flex: none;
}
/* Native Checkbox unsichtbar, aber bedienbar (Tastatur/Screenreader) — der Track ist die Optik. */
.ds-switch input[b-ya0ylxhxp4] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ds-switch-track[b-ya0ylxhxp4] {
position: relative;
width: 36px;
height: 20px;
border-radius: 10px;
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
transition: background-color 120ms, border-color 120ms;
flex: none;
}
.ds-switch-knob[b-ya0ylxhxp4] {
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-text-faint);
transition: transform 120ms, background-color 120ms;
}
/* "An" braucht eine satte Fläche statt eines blassen Tons: --color-primary-soft unterscheidet
sich im Dark-Theme kaum von der Karten-Fläche (16 % Deckkraft auf dunklem Grund), dadurch
sah der Schalter eingeschaltet fast wie ausgeschaltet aus. Volltonfüllung wie bei
.ds-btn-primary schafft den nötigen Kontrast in beiden Themes. Der Knopf liegt dann auf
Primärfarbe und braucht selbst wieder Kontrast dazu — Weiß bleibt (wie --btn-fg dort)
bewusst themenunabhängig, weil --color-primary in beiden Themes dunkel bzw. mittelhell,
aber nie so hell ist, dass Weiß untergeht. */
.ds-switch input:checked + .ds-switch-track[b-ya0ylxhxp4] {
background: var(--color-primary);
border-color: var(--color-primary);
}
.ds-switch input:checked + .ds-switch-track .ds-switch-knob[b-ya0ylxhxp4] {
/* Der Knopf bleibt 14px: die Spur ist mit box-sizing: border-box innen nur 18px hoch, ein
größerer Knopf säße bei top: 2px unten am Rand statt mittig. 16px Versatz lassen ihn rechts
mit demselben 2px-Abstand stehen wie links im Zustand "aus". */
transform: translateX(16px);
background: #ffffff;
}
.ds-switch input:focus-visible + .ds-switch-track[b-ya0ylxhxp4] {
box-shadow: 0 0 0 2px var(--color-primary-soft);
}
.ds-switch input:disabled + .ds-switch-track[b-ya0ylxhxp4] {
opacity: 0.5;
}
.ds-switch:has(input:disabled)[b-ya0ylxhxp4] {
cursor: default;
}
/* /Components/Shared/FileExplorer.razor.rz.scp.css */
/* ─── Rahmen ─── */
/* Die Dropzone ist ein Flex-Kind hiervon (flex: 1 1 auto) — ihr Aussehen liegt in
UploadDropzone.razor.css. */
.file-explorer[b-106xiz2g10] { display: flex; flex-direction: column; gap: 12px; }
.fe-inline-form[b-106xiz2g10] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fe-inline-form .ds-input[b-106xiz2g10] { flex: 1 1 220px; min-width: 160px; }
.fe-error[b-106xiz2g10] {
font-size: 12.5px;
color: var(--color-danger);
padding: 6px 0;
}
.fe-empty[b-106xiz2g10] {
font-size: 12.5px;
color: var(--color-text-muted);
padding: 24px 0;
}
/* ─── Explorer (Tree links, Listing rechts — Windows-Style) ─── */
.blob-explorer[b-106xiz2g10] {
display: grid;
grid-template-columns: minmax(220px, 280px) 1fr;
gap: 12px;
min-height: 360px;
}
/* Ohne Ordner-Baum (HideFolders): Datei-Liste über die volle Breite, so hoch wie ihr Inhalt.
Die Mindesthöhe oben braucht nur der Baum. Ohne ihn stand bei leerer Liste ein 360 px hoher
Kasten mit „Noch keine Dateien." über der Upload-Zone (Schriften). */
.blob-explorer.no-tree[b-106xiz2g10] { grid-template-columns: 1fr; min-height: 0; }
/* Linke Spalte: Ordner-Button + optionales Anlege-Formular über dem Baum. */
.blob-tree-col[b-106xiz2g10] {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.fe-tree-toolbar[b-106xiz2g10] { display: flex; }
.fe-tree-toolbar .ds-btn[b-106xiz2g10] { width: 100%; justify-content: center; }
.blob-tree[b-106xiz2g10] {
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-bg-subtle);
padding: 6px;
overflow: auto;
flex: 1;
max-height: 480px;
}
.blob-tree-node[b-106xiz2g10] {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 6px;
font-size: 13px;
color: var(--color-text-secondary);
border-radius: 4px;
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.blob-tree-node:hover[b-106xiz2g10] { background: var(--color-surface-hover); color: var(--color-text-primary); }
.blob-tree-node.active[b-106xiz2g10] {
background: var(--color-primary-soft);
color: var(--color-primary);
font-weight: 500;
}
.blob-tree-node .chev[b-106xiz2g10] {
width: 14px;
flex-shrink: 0;
text-align: center;
color: var(--color-text-muted);
transition: transform 0.12s;
font-size: 10px;
line-height: 1;
}
.blob-tree-node .chev.expanded[b-106xiz2g10] { transform: rotate(90deg); }
.blob-tree-node .chev.empty[b-106xiz2g10] { visibility: hidden; }
.blob-tree-children[b-106xiz2g10] {
margin-left: 12px;
border-left: 1px dashed var(--color-border);
padding-left: 4px;
}
.blob-pane[b-106xiz2g10] {
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-surface);
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
max-height: 480px;
}
.blob-pane-header[b-106xiz2g10] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-subtle);
font-size: 12px;
color: var(--color-text-secondary);
flex-shrink: 0;
}
.blob-pane-path[b-106xiz2g10] {
flex: 1;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.blob-pane-list[b-106xiz2g10] {
overflow: auto;
flex: 1;
}
.blob-row[b-106xiz2g10] {
display: grid;
grid-template-columns: 24px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 12px;
font-size: 13px;
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border);
cursor: default;
min-width: 0;
}
.blob-row.folder .name[b-106xiz2g10],
.blob-row.folder .icon[b-106xiz2g10] { cursor: pointer; }
.blob-row.folder:hover[b-106xiz2g10] { background: var(--color-surface-hover); }
.blob-row .icon[b-106xiz2g10] { color: var(--color-text-muted); display: flex; align-items: center; }
.blob-row.folder .icon[b-106xiz2g10] { color: var(--color-primary); }
.blob-row .name[b-106xiz2g10] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.blob-row .meta[b-106xiz2g10] {
font-size: 11px;
color: var(--color-text-muted);
font-family: var(--font-mono);
}
.fe-actions[b-106xiz2g10] {
display: inline-flex;
gap: 6px;
align-items: center;
}
.fe-rename-input[b-106xiz2g10] { min-width: 0; }
.blob-pane-empty[b-106xiz2g10] {
padding: 32px;
text-align: center;
font-size: 12.5px;
color: var(--color-text-muted);
}
/* ─── Flacher Modus (Einfach-Ansicht): nur Dateiliste, kein Baum ─── */
.fe-flat-list[b-106xiz2g10] {
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
overflow: auto;
max-height: 320px;
}
.fe-flat-list .blob-row:last-child[b-106xiz2g10] { border-bottom: none; }
/* /Components/Shared/HelpArticleBody.razor.rz.scp.css */
/* Basis-Typografie für den aus Markdown gerenderten Artikelinhalt (siehe HelpMarkdownRenderer).
Ausschließlich Design-Tokens, damit Light/Dark ohne Zusatzaufwand funktionieren.
Durchgängig ::deep, weil der Artikelinhalt als MarkupString eingefügt wird: die CSS-Isolation
stempelt ihr Scope-Attribut nur auf Elemente, die der Razor-Compiler selbst erzeugt. Ohne ::deep
entstünde `.help-article h2[b-xyz]` — ein Selektor, den kein Element des gerenderten Markdowns je
erfüllt, und die ganze Typografie hier bliebe wirkungslos. Mit ::deep wandert das Attribut auf den
Wrapper (`.help-article[b-xyz] h2`) und greift für alle Nachfahren. */
.help-article[b-dncjow4qpi] h2 {
font-size: 18px;
font-weight: 600;
color: var(--color-text-primary);
margin: 24px 0 10px;
}
.help-article[b-dncjow4qpi] h2:first-child { margin-top: 0; }
.help-article[b-dncjow4qpi] h3 {
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary);
margin: 20px 0 8px;
}
.help-article[b-dncjow4qpi] p {
font-size: 13.5px;
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0 0 12px;
}
.help-article[b-dncjow4qpi] ul,
.help-article[b-dncjow4qpi] ol {
font-size: 13.5px;
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0 0 12px;
padding-left: 22px;
}
.help-article[b-dncjow4qpi] code {
font-family: var(--font-mono);
font-size: 12.5px;
background: var(--color-bg-subtle);
padding: 2px 5px;
border-radius: 4px;
}
.help-article[b-dncjow4qpi] pre {
font-family: var(--font-mono);
font-size: 12.5px;
background: var(--color-bg-subtle);
padding: 12px;
border-radius: var(--radius-input);
overflow-x: auto;
margin: 0 0 12px;
}
.help-article[b-dncjow4qpi] pre code {
background: none;
padding: 0;
}
.help-article[b-dncjow4qpi] blockquote {
border-left: 3px solid var(--color-border);
color: var(--color-text-muted);
margin: 0 0 12px;
padding: 2px 14px;
}
.help-article[b-dncjow4qpi] table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
margin: 0 0 12px;
}
.help-article[b-dncjow4qpi] th,
.help-article[b-dncjow4qpi] td {
border: 1px solid var(--color-border);
padding: 6px 10px;
text-align: left;
}
.help-article[b-dncjow4qpi] a {
color: var(--color-primary);
}
.help-article[b-dncjow4qpi] img {
max-width: 100%;
height: auto;
border-radius: var(--radius-input);
}
/* Definitionsliste (Glossar). Markdig verlangt dafür `:` plus DREI Leerzeichen — mit nur einem
bleibt die Zeile ein Absatz, der mit einem Doppelpunkt anfängt. Ohne diese Regeln erbte die
Liste Browser-Defaults (16px, Standardfarbe) und fiele aus dem Schriftbild der Artikel. */
.help-article[b-dncjow4qpi] dl {
margin: 0 0 12px;
}
.help-article[b-dncjow4qpi] dt {
font-size: 13.5px;
font-weight: 600;
color: var(--color-text-primary);
margin-top: 14px;
}
.help-article[b-dncjow4qpi] dt:first-child {
margin-top: 0;
}
.help-article[b-dncjow4qpi] dd {
font-size: 13.5px;
color: var(--color-text-secondary);
line-height: 1.6;
margin: 2px 0 0 16px;
}
/* Warnkasten. Quelle ist ein Blockzitat mit fetter „Achtung"-Einleitung, dem HelpMarkdownRenderer
die Klasse `warning` anhängt (CommonMark statt des früheren `::: warning`-Containers — siehe
dessen IsWarningQuote). Der Container-Fall bleibt abgedeckt: die Extension ist weiter aktiv und
rendert ``, also greifen dieselben Regeln für Altbestand aus der Redaktion.
Die blockquote-Grundregel oben (grauer Balken, gedämpfte Farbe) wird dabei überschrieben, weil
eine Klasse in der Spezifität über einem Elementnamen steht — die Reihenfolge im Bundle spielt
hier also keine Rolle. Farbwahl wie bei .ds-alert-warning im Design-System. */
.help-article[b-dncjow4qpi] .warning {
background: var(--color-warning-bg);
color: var(--color-warning-text);
border-left: 3px solid var(--color-warning);
border-radius: var(--radius-input);
padding: 10px 14px;
margin: 0 0 12px;
}
.help-article[b-dncjow4qpi] .warning > p {
color: inherit;
margin: 0;
}
.help-article[b-dncjow4qpi] .warning > p + p {
margin-top: 8px;
}
/* Mermaid-Diagramme aus einem ```mermaid-Codeblock (siehe js/help-mermaid.js). Der Loader ersetzt
den -Block durch dieses , sobald das SVG steht. Nur Design-Tokens, damit sich das
Diagramm ohne Zusatzaufwand ans aktive Theme anpasst (Mermaid rendert bei jedem Theme-Wechsel neu). */
.help-article[b-dncjow4qpi] .help-mermaid {
display: flex;
justify-content: center;
background: var(--color-bg-subtle);
border-radius: var(--radius-input);
padding: 16px;
margin: 0 0 12px;
overflow-x: auto;
}
.help-article[b-dncjow4qpi] .help-mermaid svg {
max-width: 100%;
height: auto;
}
/* Hinweiszeile, wenn ein Diagramm nicht gerendert werden konnte (Syntaxfehler im Quelltext) — der
ursprüngliche Codeblock bleibt darunter sichtbar, siehe help-mermaid.js. */
.help-article[b-dncjow4qpi] .help-mermaid-hint {
font-size: 12.5px;
color: var(--color-warning-text);
margin: 0 0 6px;
}
/* /Components/Shared/LegalPage.razor.rz.scp.css */
/* ============================================================
Rechtstexte (Impressum, Datenschutz) — reine Lesetypografie.
Nur CSS-Variablen für Farben → Light/Dark automatisch korrekt.
Der Seiteninhalt kommt als ChildContent von außen, deshalb
greifen die Inhaltsregeln über ::deep.
============================================================ */
.legal-page[b-tsb78yn0gh] {
min-height: 100vh;
display: flex;
flex-direction: column;
color: var(--color-text-primary);
}
/* ---------- Kopf ---------- */
.legal-header[b-tsb78yn0gh] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 60px;
padding: 0 24px;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.legal-brand[b-tsb78yn0gh] {
display: flex;
align-items: center;
gap: 10px;
}
.legal-brand-lockup[b-tsb78yn0gh] {
height: 22px;
width: auto;
max-width: 100%;
/* Ohne object-fit staucht max-width das Logo, weil die Hoehe fest bleibt. */
object-fit: contain;
}
/* Nur eine der beiden Varianten ist sichtbar — welche, haengt vom Theme ab. */
.legal-brand-lockup-dark[b-tsb78yn0gh] {
display: none;
}
html[data-theme="dark"] .legal-brand-lockup-light[b-tsb78yn0gh] {
display: none;
}
html[data-theme="dark"] .legal-brand-lockup-dark[b-tsb78yn0gh] {
display: block;
}
/* ---------- Textspalte ---------- */
.legal-main[b-tsb78yn0gh] {
flex: 1;
width: 100%;
max-width: 760px;
margin: 0 auto;
padding: 48px 24px 72px;
font-size: 14px;
line-height: 1.7;
}
.legal-main h1[b-tsb78yn0gh] {
font-size: 30px;
line-height: 1.25;
letter-spacing: -0.02em;
margin: 0;
}
.legal-updated[b-tsb78yn0gh] {
margin: 8px 0 0;
font-size: 12.5px;
color: var(--color-text-muted);
}
.legal-main[b-tsb78yn0gh] h2 {
font-size: 19px;
letter-spacing: -0.01em;
margin: 44px 0 12px;
padding-top: 20px;
border-top: 1px solid var(--color-border);
}
.legal-main[b-tsb78yn0gh] h3 {
font-size: 15px;
margin: 26px 0 8px;
}
.legal-main[b-tsb78yn0gh] p,
.legal-main[b-tsb78yn0gh] ul,
.legal-main[b-tsb78yn0gh] ol {
margin: 0 0 14px;
}
.legal-main[b-tsb78yn0gh] ul,
.legal-main[b-tsb78yn0gh] ol {
padding-left: 22px;
}
.legal-main[b-tsb78yn0gh] li {
margin-bottom: 6px;
}
.legal-main[b-tsb78yn0gh] a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.legal-main[b-tsb78yn0gh] address {
font-style: normal;
}
/* Tabellen (Auftragsverarbeiter, Cookies) — auf schmalen Viewports horizontal scrollbar. */
.legal-main[b-tsb78yn0gh] .legal-table-wrap {
overflow-x: auto;
margin: 0 0 18px;
}
.legal-main[b-tsb78yn0gh] table {
width: 100%;
min-width: 480px;
border-collapse: collapse;
font-size: 13px;
}
.legal-main[b-tsb78yn0gh] th,
.legal-main[b-tsb78yn0gh] td {
text-align: left;
vertical-align: top;
padding: 8px 12px 8px 0;
border-bottom: 1px solid var(--color-border);
}
.legal-main[b-tsb78yn0gh] th {
font-weight: 600;
color: var(--color-text-muted);
white-space: nowrap;
}
/* Offene Angabe, die vor dem Live-Gang gefüllt werden muss. Bewusst knallig: ein
Rechtstext mit sichtbarem Platzhalter darf nicht versehentlich produktiv gehen. */
.legal-main[b-tsb78yn0gh] .legal-todo {
background: var(--color-warning-bg);
color: var(--color-warning-text);
padding: 1px 6px;
border-radius: 4px;
font-weight: 500;
}
/* Hervorgehobener Hinweiskasten (Widerspruchsrecht, offene Punkte). */
.legal-main[b-tsb78yn0gh] .legal-note {
border-left: 3px solid var(--color-primary);
background: var(--color-bg-subtle);
padding: 12px 16px;
margin: 0 0 18px;
border-radius: 0 6px 6px 0;
}
.legal-main[b-tsb78yn0gh] .legal-note > :last-child {
margin-bottom: 0;
}
/* ---------- Fuß ---------- */
.legal-footer[b-tsb78yn0gh] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
max-width: 760px;
width: 100%;
margin: 0 auto;
padding: 18px 24px;
border-top: 1px solid var(--color-border);
font-size: 12.5px;
color: var(--color-text-muted);
}
.legal-footer-links[b-tsb78yn0gh] {
display: flex;
gap: 16px;
}
.legal-footer a:hover[b-tsb78yn0gh] {
color: var(--color-text-primary);
}
@media (max-width: 720px) {
.legal-main[b-tsb78yn0gh] {
padding: 32px 20px 56px;
}
.legal-main h1[b-tsb78yn0gh] {
font-size: 24px;
}
}
/* /Components/Shared/ProblemReportDialog.razor.rz.scp.css */
/* Abstände zwischen den Blöcken des Formulars — der Dialog-Body bringt keine mit. */
.problem-report-spaced[b-bunx7zwwvx] {
margin-top: 14px;
}
.problem-report-text[b-bunx7zwwvx] {
resize: vertical;
min-height: 120px;
}
.problem-report-hint[b-bunx7zwwvx] {
margin-top: 4px;
font-size: 11.5px;
color: var(--color-text-muted);
}
/* Der Datenschutz-Hinweis ist Teil der Zusage an den Melder, nicht Beiwerk — deshalb lesbar
groß statt als Kleingedrucktes. */
.problem-report-privacy[b-bunx7zwwvx] {
margin: 6px 0 8px;
font-size: 12px;
color: var(--color-text-muted);
line-height: 1.45;
}
/* Das native File-Input verschwindet hinter dem Label, das als Knopf gestaltet ist (Muster
TenantMasterDataCard). */
.problem-report-upload[b-bunx7zwwvx] {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.problem-report-file[b-bunx7zwwvx] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.problem-report-files[b-bunx7zwwvx] {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.problem-report-files li[b-bunx7zwwvx] {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
border: 1px solid var(--color-border);
border-radius: 6px;
font-size: 12.5px;
}
.problem-report-file-name[b-bunx7zwwvx] {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.problem-report-file-size[b-bunx7zwwvx] {
color: var(--color-text-muted);
font-size: 11.5px;
}
.problem-report-context[b-bunx7zwwvx] {
margin-top: 16px;
border-top: 1px solid var(--color-border);
padding-top: 10px;
font-size: 12.5px;
}
.problem-report-context summary[b-bunx7zwwvx] {
cursor: pointer;
font-weight: 600;
}
.problem-report-context dl[b-bunx7zwwvx] {
display: grid;
grid-template-columns: minmax(120px, auto) 1fr;
gap: 4px 12px;
margin: 10px 0;
}
.problem-report-context dt[b-bunx7zwwvx] {
color: var(--color-text-muted);
}
.problem-report-context dd[b-bunx7zwwvx] {
margin: 0;
min-width: 0;
overflow-wrap: anywhere;
}
/* Der User-Agent ist ein langer String ohne Leerzeichen — ohne Umbruch sprengt er den Dialog. */
.problem-report-ua[b-bunx7zwwvx] {
font-size: 11.5px;
color: var(--color-text-muted);
}
.problem-report-transcript[b-bunx7zwwvx] {
margin: 0;
max-height: 180px;
overflow: auto;
white-space: pre-wrap;
font-size: 11.5px;
background: var(--color-surface-alt);
border-radius: 6px;
padding: 6px 8px;
}
.problem-report-key[b-bunx7zwwvx] {
margin-top: 6px;
font-size: 13px;
}
.problem-report-done p[b-bunx7zwwvx] {
margin: 8px 0 0;
font-size: 12.5px;
}
/* /Components/Shared/RecipeStepEditor.razor.rz.scp.css */
.rse[b-8jb0ds0ypu] { display: flex; flex-direction: column; gap: 12px; }
.rse-empty[b-8jb0ds0ypu] {
font-size: 12.5px;
color: var(--color-text-muted);
padding: 16px;
text-align: center;
border: 1px dashed var(--color-border);
border-radius: var(--radius-input);
background: var(--color-bg-subtle);
}
.rse-phase[b-8jb0ds0ypu] {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-card, 12px);
background: var(--color-bg-subtle);
}
.rse-phase-head[b-8jb0ds0ypu] { display: flex; flex-direction: column; gap: 1px; padding: 0 2px; }
.rse-phase-title[b-8jb0ds0ypu] {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-secondary, var(--color-text-muted));
}
.rse-phase-hint[b-8jb0ds0ypu] { font-size: 11px; color: var(--color-text-muted); }
.rse-list[b-8jb0ds0ypu] { display: flex; flex-direction: column; gap: 6px; }
.rse-phase-empty[b-8jb0ds0ypu] {
font-size: 12px;
color: var(--color-text-faint, var(--color-text-muted));
padding: 8px 2px;
}
.rse-tile[b-8jb0ds0ypu] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-surface);
}
.rse-tile.is-child[b-8jb0ds0ypu] {
margin-left: 22px;
border-left: 3px solid var(--color-primary-soft);
}
.rse-tile-main[b-8jb0ds0ypu] { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.rse-tile-label[b-8jb0ds0ypu] { font-size: 13px; font-weight: 500; color: var(--color-text-primary); white-space: nowrap; }
.rse-tile-meta[b-8jb0ds0ypu] {
font-size: 11px;
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.rse-tile-actions[b-8jb0ds0ypu] { display: inline-flex; gap: 4px; flex-shrink: 0; }
.rse-badge[b-8jb0ds0ypu] {
font-size: 10px;
padding: 2px 7px;
border-radius: 999px;
flex-shrink: 0;
white-space: nowrap;
}
.rse-badge.top[b-8jb0ds0ypu] { background: var(--color-primary-soft); color: var(--color-primary); }
.rse-badge.child[b-8jb0ds0ypu] { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.rse-add[b-8jb0ds0ypu] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Bearbeiten-Overlay (JS-frei, komponenten-lokal). */
.rse-overlay[b-8jb0ds0ypu] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35); /* bewusst neutral-schwarz: Scrim, themenunabhängig */
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.rse-modal[b-8jb0ds0ypu] {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card, 12px);
width: min(92vw, 560px);
max-height: 88vh;
display: flex;
flex-direction: column;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); /* bewusst neutral-schwarz: Schatten, themenunabhängig */
}
.rse-modal-head[b-8jb0ds0ypu] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--color-border);
}
.rse-modal-head h3[b-8jb0ds0ypu] { margin: 0; font-size: 15px; }
.rse-modal-body[b-8jb0ds0ypu] { padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.rse-modal-foot[b-8jb0ds0ypu] {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--color-border);
}
.rse-field[b-8jb0ds0ypu] { display: flex; flex-direction: column; gap: 4px; }
/* Schalterzeile einer Option des Rollen-Verweises (Portal-Sperre, genau eine Datei). */
.rse-input-option[b-8jb0ds0ypu] { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
/* /Components/Shared/Sparkline.razor.rz.scp.css */
.sparkline[b-2t07f2sptr] {
display: block;
width: 100%;
height: 28px;
margin-top: 8px;
}
.sparkline-line[b-2t07f2sptr] {
fill: none;
stroke: var(--spark-color, var(--color-primary));
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.sparkline-dot[b-2t07f2sptr] {
fill: var(--spark-color, var(--color-primary));
}
/* /Components/Shared/TenantChoiceList.razor.rz.scp.css */
.tenant-choice-list[b-gigwa18so1] {
display: flex;
flex-direction: column;
gap: 8px;
}
.tenant-choice-form[b-gigwa18so1] {
margin: 0;
}
.tenant-choice[b-gigwa18so1] {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-surface);
text-align: left;
}
.tenant-choice-button[b-gigwa18so1] {
justify-content: space-between;
cursor: pointer;
font: inherit;
color: inherit;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tenant-choice-button:hover[b-gigwa18so1] {
border-color: var(--color-primary);
background: var(--color-surface-hover);
}
.tenant-choice-button:focus-visible[b-gigwa18so1] {
outline: 2px solid var(--color-primary-ring);
outline-offset: 2px;
}
.tenant-choice-text[b-gigwa18so1] {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tenant-choice-name[b-gigwa18so1] {
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
}
.tenant-choice-hint[b-gigwa18so1] {
font-size: 11.5px;
color: var(--color-text-muted);
}
/* Icon.razor rendert das svg als eigene Komponente — ohne ::deep greift die Scope-Regel nicht,
siehe NavItem.razor.css .ds-nav-icon als Vorbild. */
[b-gigwa18so1] .tenant-choice-chevron {
flex-shrink: 0;
color: var(--color-text-muted);
}
/* Ankündigung der SSO-Weiterleitung (siehe TenantChoiceFormat.SsoHandoffHint) — eigene Farbe statt
des neutralen Hint-Grau, damit der Klick nicht unangekündigt auf einer fremden Anmeldeseite endet. */
.tenant-choice-sso[b-gigwa18so1] {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11.5px;
font-weight: 500;
color: var(--color-primary);
}
html[data-theme="dark"] .tenant-choice-sso[b-gigwa18so1] {
color: var(--color-primary-hover);
}
/* Gesperrter Eintrag: kein Knopf, sondern ein Grund. Gedämpfte Fläche statt reiner Transparenz,
damit „gesperrt" auch sichtbar ist und nicht nur im Hint-Text steht. */
.tenant-choice-blocked[b-gigwa18so1] {
background: var(--color-bg-subtle);
border-style: dashed;
}
.tenant-choice-blocked .tenant-choice-name[b-gigwa18so1] {
color: var(--color-text-muted);
}
[b-gigwa18so1] .tenant-choice-icon {
flex-shrink: 0;
color: var(--color-text-faint);
}
/* /Components/Shared/UploadDropzone.razor.rz.scp.css */
/* ─── Drag&Drop-Upload-Dropzone ─── */
.fe-dropzone[b-7l6v7fhtbt] {
position: relative;
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 4px;
padding: 11px 16px;
border: 1.5px dashed var(--color-border);
border-radius: var(--radius-card, 12px);
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
font-size: 12.5px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
/* Während des Uploads liegt das Overlay (position:absolute) über der Dropzone und kann sie nicht
höher machen — ohne Mindesthöhe ragen Fortschritts- und Tempo-Zeile unten aus dem gestrichelten
Rahmen heraus. Nur im Upload-Zustand, damit die Dropzone im Ruhezustand kompakt bleibt. */
.fe-dropzone.is-uploading[b-7l6v7fhtbt] { min-height: 172px; }
/* Schlanke Fassung (DropzoneStyle.Slim): dort IST die Dropzone die ganze Komponente und steht
als eine von mehreren gleichrangigen Kacheln in einer Karte (Anlagen- und Dokument(e)-Karte der
Einfach-Ansicht). Sie muss sich deshalb der Höhe der Nachbar-Kacheln annähern, statt sie zu
überragen. Bei DropzoneStyle.Full bleibt die großzügige Fassung: da ist sie der Abschluss einer
Dateiliste und hat den Platz. */
.fe-dropzone.is-compact[b-7l6v7fhtbt] {
--ds-tile-badge-size: 24px;
gap: 3px;
padding: 8px 12px;
}
.fe-dropzone.is-compact .fe-dz-title[b-7l6v7fhtbt] { font-size: 12.5px; }
.fe-dropzone.is-compact .fe-dz-hint[b-7l6v7fhtbt] { font-size: 10.5px; }
/* Kachel-Fassung (DropzoneStyle.Tile): Geometrie und Plakettengröße kommen aus .ds-tile (app.css),
damit die Dropzone und die beiden Schaltflächen daneben dieselbe Kachel sind. Hier bleibt nur,
was diese Dropzone von einer Schaltflächen-Kachel unterscheidet — allen voran der gestrichelte
Rahmen aus .fe-dropzone, der einzige bedeutungstragende Unterschied der drei Quellen.
Zwei Klassen im Selektor, nicht eine: .ds-tile steht in app.css, .fe-dropzone im Scoped-Bundle —
in welcher Reihenfolge der Browser die beiden Dateien anwendet, ist hier nicht garantiert. Der
Kompound-Selektor gewinnt über die Spezifität und damit unabhängig davon. */
.fe-dropzone.is-tile[b-7l6v7fhtbt] {
display: flex;
gap: 4px;
padding: 8px 10px;
}
.fe-dropzone.is-tile .fe-dz-title[b-7l6v7fhtbt] { font-size: 12.5px; line-height: 1.3; }
.fe-dropzone:hover[b-7l6v7fhtbt] {
border-color: var(--color-primary);
background: var(--color-primary-soft);
}
.fe-dropzone.drag-over[b-7l6v7fhtbt] {
border-color: var(--color-primary);
background: var(--color-primary-soft);
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
/* Icon-Badge oben — Aussehen und Größe kommen von .ds-tile-badge (app.css), damit die Plakette
der Quellen-Kacheln in der Anlagen-Karte dieselbe ist. Hier bleibt nur, was an dieser Dropzone
hängt: der Schwebe-Effekt und (weiter unten) pointer-events. */
.fe-dropzone:hover .fe-dz-badge[b-7l6v7fhtbt],
.fe-dropzone.drag-over .fe-dz-badge[b-7l6v7fhtbt] { transform: translateY(-1px); }
.fe-dz-title[b-7l6v7fhtbt] {
font-size: 13.5px;
color: var(--color-text-secondary);
line-height: 1.3;
}
.fe-dz-link[b-7l6v7fhtbt] { color: var(--color-primary); font-weight: 600; }
.fe-dropzone:hover .fe-dz-link[b-7l6v7fhtbt],
.fe-dropzone.drag-over .fe-dz-link[b-7l6v7fhtbt] { text-decoration: underline; }
.fe-dz-hint[b-7l6v7fhtbt] {
font-size: 11px;
color: var(--color-text-muted);
}
/* Fehler direkt an der Fläche, die ihn ausgelöst hat — dezenter Text statt Alert-Kasten, damit
die Dropzone ihre Form behält. */
.fe-dz-error[b-7l6v7fhtbt] {
font-size: 11.5px;
line-height: 1.35;
color: var(--color-danger);
}
/* Unsichtbarer Datei-Input über der gesamten Fläche: Browser routet sowohl Klick als auch
Datei-Drop hierher; das Drag-Highlight steuert die umgebende Label-Fläche.
::deep, weil eine Kind-Komponente ist und das CSS-Isolation-Attribut
nicht auf deren gerendertes stempelt — ohne ::deep bliebe der native
„Dateien auswählen"-Button sichtbar.
z-index hebt das Input über die statisch positionierten Inhalts-Spans (Badge/Titel/Hinweis/
Fehler), die sonst — weil später im DOM — das Drop-Event abfangen und der Browser die Datei im
Tab öffnet statt sie zu übernehmen. Die Spans schalten dafür pointer-events ab (s. u.). */
.fe-dropzone[b-7l6v7fhtbt] .fe-fileinput {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 1;
}
/* Inhalte rein dekorativ — sie dürfen Klick/Drop nicht abfangen, sonst landet der Drop
nicht auf dem Input und der Browser öffnet die Datei in einem neuen Tab. */
.fe-dz-badge[b-7l6v7fhtbt],
.fe-dz-title[b-7l6v7fhtbt],
.fe-dz-hint[b-7l6v7fhtbt],
.fe-dz-error[b-7l6v7fhtbt] { pointer-events: none; }
/* ─── Upload-Fortschritt: Overlay über der Dropzone ─── */
.fe-upload-overlay[b-7l6v7fhtbt] {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 16px;
border-radius: var(--radius-card, 12px);
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
}
/* Upload-Symbol statt eines generischen Spinners: der Pfeil steigt aus der Ablage auf und
verblasst, die Ablage bleibt ruhig stehen. Zeigt damit die Richtung des Vorgangs an — ein
rotierender Ring sagt nur „irgendwas passiert". */
.fe-upload-icon[b-7l6v7fhtbt] {
color: var(--color-primary);
overflow: visible; /* der Pfeil wandert am oberen Rand aus der viewBox heraus */
}
.fe-upload-icon .fe-upload-arrow[b-7l6v7fhtbt] {
/* Ohne fill-box bezöge sich transform-origin auf das gesamte SVG-Koordinatensystem. */
transform-box: fill-box;
transform-origin: center;
animation: fe-upload-arrow-b-7l6v7fhtbt 1.5s ease-in-out infinite;
}
@keyframes fe-upload-arrow-b-7l6v7fhtbt {
0% { transform: translateY(2.5px); opacity: 0; }
30% { transform: translateY(0); opacity: 1; }
65% { transform: translateY(-1.5px); opacity: 1; }
100% { transform: translateY(-4px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.fe-upload-icon .fe-upload-arrow[b-7l6v7fhtbt] { animation: none; opacity: 1; }
}
.fe-upload-info[b-7l6v7fhtbt] {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
max-width: 100%;
}
.fe-upload-count[b-7l6v7fhtbt] { font-size: 11px; color: var(--color-text-muted); }
.fe-upload-name[b-7l6v7fhtbt] {
font-size: 12.5px;
color: var(--color-text-primary);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fe-upload-bar[b-7l6v7fhtbt] {
width: min(280px, 80%);
height: 6px;
border-radius: 3px;
background: var(--color-border); /* primary-soft ist auf dem bg-subtle-Overlay unsichtbar */
overflow: hidden;
}
.fe-upload-bar-fill[b-7l6v7fhtbt] {
height: 100%;
background: var(--color-primary);
border-radius: 3px;
transition: width 0.15s linear;
}
/* Prozent der laufenden Datei plus Tempo/Restdauer des Gesamtvorgangs — eine Zeile, weil das
Overlay die Dropzone nicht höher machen kann (position:absolute). tabular-nums, damit die
Ziffern beim Hochzählen nicht springen; Umbruch erlaubt, damit lange Werte in schmalen
Dropzonen innerhalb des Rahmens bleiben statt herauszuragen. */
.fe-upload-pct[b-7l6v7fhtbt] {
font-size: 11px;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
max-width: 100%;
text-align: center;
text-wrap: balance;
}
als Dropdown. Das Panel liegt absolut über dem Inhalt, damit
das Öffnen den page-header nicht auseinanderschiebt. */
.sales-tenant-filter[b-tdifm2i3np] {
position: relative;
}
.sales-tenant-filter > summary[b-tdifm2i3np] {
list-style: none;
cursor: pointer;
}
.sales-tenant-filter > summary[b-tdifm2i3np]::-webkit-details-marker {
display: none;
}
.sales-tenant-filter-panel[b-tdifm2i3np] {
position: absolute;
z-index: 20;
right: 0;
margin-top: 6px;
min-width: 240px;
max-height: 320px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-surface);
box-shadow: var(--shadow-md);
}
.sales-tenant-filter-item[b-tdifm2i3np] {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px;
border-radius: 6px;
font-size: 12.5px;
font-weight: 400;
cursor: pointer;
}
.sales-tenant-filter-item:hover[b-tdifm2i3np] {
background: var(--color-surface-hover);
}
.sales-status-badges[b-tdifm2i3np] {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* Die Kennzahlen-Tabelle trägt mit den Provisionsspalten über zwanzig Spalten. Sie darf deshalb
in ihrer Karte waagerecht scrollen — die Seite selbst soll es nicht. */
.sales-table-scroll[b-tdifm2i3np] {
overflow-x: auto;
}
/* Nicht (mehr) provisionsrelevante Kanzlei: bewusst nur eine Textfarbe und kein Hintergrund — der
Zeilen-Hover der globalen Tabellenregel färbt den Hintergrund bereits und würde sich sonst mit
der Markierung schlagen. */
tbody tr.sales-row-noncommission td[b-tdifm2i3np],
tbody tr.sales-row-noncommission td.num[b-tdifm2i3np] {
color: var(--color-danger);
}
/* Ampel der Spalte „Sendungen lfd. Monat": farbiger Punkt plus Wert in derselben Farbe. */
.sales-pace[b-tdifm2i3np] {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
}
.sales-pace[b-tdifm2i3np]::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.sales-pace-ok[b-tdifm2i3np] { color: var(--color-success); }
.sales-pace-warn[b-tdifm2i3np] { color: var(--color-warning); }
.sales-pace-behind[b-tdifm2i3np] { color: var(--color-danger); }
/* Summenzeile: optisch abgesetzt vom Datenkörper, aber im selben Raster. */
tfoot tr.sales-total-row td[b-tdifm2i3np] {
padding: 12px 16px;
border-top: 2px solid var(--color-border);
background: var(--color-bg-subtle);
color: var(--color-text-primary);
font-weight: 600;
white-space: nowrap;
}
/* /Components/Pages/Sales/SalesTenantDetailPage.razor.rz.scp.css */
.section-title[b-zv1r04pk6e] {
margin: 22px 0 10px;
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.005em;
}
/* Zweiter Abschnitt innerhalb derselben Karte (Kontakt-Karte: Admins, dann Rechnungsempfänger).
Ohne die Trennlinie stößt die Überschrift ohne Abgrenzung an die Tabelle darüber. */
.sales-subsection[b-zv1r04pk6e] {
border-top: 1px solid var(--color-border);
}
.sales-tile-grid[b-zv1r04pk6e] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
}
.sales-delta-hint[b-zv1r04pk6e] {
margin-top: 4px;
font-size: 12px;
color: var(--color-text-muted);
}
/* Zeitraumfilter im page-header: Korn-Segmente + Scheiben-Select in einer Zeile. */
.sales-period-filter[b-zv1r04pk6e] {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.sales-status-badges[b-zv1r04pk6e] {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* ── Zeitreihe: reines CSS/HTML-Balkendiagramm (kein ApexCharts) ─────────────
Zwei unabhängig skalierte Spuren je Monat (Umsatz oben, Sendungen unten) — Muster wie ein
Kurs-/Volumen-Chart. Unvollständige Monate bekommen eine Schraffur ÜBER der Flächenfarbe statt
einer zweiten, hartkodierten Farbe — funktioniert dadurch in beiden Themes, weil die Schraffur
selbst aus einem Theme-Token gemischt wird (color-mix, kein Hex-Literal). */
.sales-month-chart[b-zv1r04pk6e] {
display: flex;
align-items: flex-end;
gap: 6px;
overflow-x: auto;
padding-bottom: 4px;
}
/* Spalten mindestens so breit wie das nowrap-Monatslabel ("Mär 26" ≈ 36px bei 10px Schrift),
sonst überlappen die zentrierten Labels ihre Nachbarn zu einem unlesbaren Streifen. Nach oben
gedeckelt gestreckt, damit 12 Monate die Kartenbreite nutzen statt links zu kleben; bei
24 Monaten auf schmalen Fenstern greift weiter das overflow-x der Chart-Zeile. */
.sales-month-col[b-zv1r04pk6e] {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 0;
min-width: 38px;
max-width: 64px;
}
.sales-month-revenue-track[b-zv1r04pk6e] {
height: 90px;
width: 14px;
display: flex;
align-items: flex-end;
}
.sales-month-letters-track[b-zv1r04pk6e] {
height: 30px;
width: 14px;
display: flex;
align-items: flex-end;
margin-top: 3px;
}
.sales-month-bar[b-zv1r04pk6e] {
width: 100%;
height: 0;
border-radius: 2px 2px 0 0;
}
.sales-month-bar--revenue[b-zv1r04pk6e] { background-color: var(--color-primary); }
.sales-month-bar--letters[b-zv1r04pk6e] { background-color: var(--color-info); }
.sales-month-bar.is-incomplete[b-zv1r04pk6e] {
background-image: repeating-linear-gradient(
45deg,
color-mix(in srgb, var(--color-surface) 55%, transparent) 0 4px,
transparent 4px 8px
);
}
.sales-month-label[b-zv1r04pk6e] {
margin-top: 4px;
font-size: 10px;
color: var(--color-text-muted);
white-space: nowrap;
}
.sales-month-legend[b-zv1r04pk6e] {
margin-top: 10px;
display: flex;
gap: 16px;
font-size: 11.5px;
color: var(--color-text-muted);
}
.sales-legend-dot[b-zv1r04pk6e] {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 4px;
}
.sales-legend-dot--revenue[b-zv1r04pk6e] { background-color: var(--color-primary); }
.sales-legend-dot--letters[b-zv1r04pk6e] { background-color: var(--color-info); }
/* /Components/Pages/SuperAdmin/BillingIssuedSection.razor.rz.scp.css */
/* Rechnungsliste der Abrechnung — breit als Tabelle, schmal gestapelt. Ausschließlich Design-Tokens,
damit trägt das dunkle Theme ohne eine zweite Regelmenge (docs/concepts/theming.md).
Warum gestapelt und nicht gescrollt: neun Spalten mit je 32 px Innenabstand, Kopftitel in
Großbuchstaben, das Status-Etikett und die PDF-Knöpfe brauchen zusammen rund 1050 px (gemessen
25.09.2026 mit dem App-CSS an der breitesten Zeile: drei PDF-Knöpfe, zwei Aktionen im Status).
Bei halbem Bildschirm stehen 615 bis 935 px zur Verfügung — die Tabelle ragte über den
Kartenrand. Ein Scroll-Container ist laut app.css (.ds-table) keine Alternative, er schneidet
das Zeilenmenü ab.
Container Query statt Media Query: gemessen wird die Breite der Liste selbst, nicht die des
Fensters — die Seitenleiste lässt sich einklappen, und dieselbe Fensterbreite ergibt damit zwei
verschiedene Listenbreiten. Tabelle erst ab 1200 px: 1050 px gemessene Mindestbreite plus Reserve,
denn jede weitere Aktion im Status verbreitert die Spalte um ihren breitesten Knopf. */
.bill-issued-list[b-4j0d8nc5c7] {
container: billing-issued / inline-size;
}
.bill-right[b-4j0d8nc5c7] {
text-align: right;
}
/* Ein Datum bricht nie in sich um (sonst stand „18.09.20 / 26-" untereinander), der Zeitraum nur
nach dem Strich. Nötig, weil .ds-table-Zellen überall umbrechen dürfen (overflow-wrap: anywhere). */
.bill-period-part[b-4j0d8nc5c7] {
white-space: nowrap;
}
/* PDF-Knöpfe und die Aktionen im Status stehen nebeneinander, solange Platz ist, und brechen sonst
untereinander um — die Mindestbreite der Zelle ist dann der breiteste Knopf, nicht ihre Summe. */
.bill-pdf-actions[b-4j0d8nc5c7] {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.bill-status-actions[b-4j0d8nc5c7] .row-actions-inline {
flex-wrap: wrap;
justify-content: flex-start;
}
/* Gestapelt: jede Rechnung ein Block, jeder Wert mit seiner Spaltenbeschriftung (data-label, Texte
aus BillingIssuedFormat). Die kurzen Werte teilen sich ein Raster, Status und PDF bekommen die
volle Breite. Die role-Attribute im Markup halten die Tabellensemantik, die display: block/grid
Screenreadern sonst nimmt. Der Kopf bleibt für sie lesbar, nur unsichtbar. */
@container billing-issued (max-width: 1199px) {
.bill-table[b-4j0d8nc5c7],
.bill-table tbody[b-4j0d8nc5c7] {
display: block;
}
.bill-table thead[b-4j0d8nc5c7] {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.bill-table tbody[b-4j0d8nc5c7] {
border-top: 1px solid var(--color-border);
}
.bill-table tbody tr[b-4j0d8nc5c7] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px 20px;
padding: 14px 4px;
border-bottom: 1px solid var(--color-border);
}
.bill-table tbody tr:last-child[b-4j0d8nc5c7] {
border-bottom: 0;
}
.bill-table tbody td[b-4j0d8nc5c7] {
display: block;
padding: 0;
border: 0;
min-width: 0;
}
.bill-table tbody td[b-4j0d8nc5c7]::before {
content: attr(data-label);
display: block;
margin-bottom: 3px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted-on-subtle);
}
.bill-table .bill-wide[b-4j0d8nc5c7] {
grid-column: 1 / -1;
}
.bill-table .bill-right[b-4j0d8nc5c7] {
text-align: left;
}
.bill-pdf-actions[b-4j0d8nc5c7] {
justify-content: flex-start;
}
}
/* /Components/Pages/SuperAdmin/BillingSettings.razor.rz.scp.css */
.grid-2[b-2padfyjc0a] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
}
.grid-3[b-2padfyjc0a] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px 24px;
}
.col-full[b-2padfyjc0a] {
grid-column: 1 / -1;
}
.w-full[b-2padfyjc0a] {
width: 100%;
}
.upload-label[b-2padfyjc0a] {
cursor: pointer;
margin: 0;
}
/* rendert sein als Kind-Komponente — das CSS-Isolation-Attribut der
umschließenden Datei wird darauf nicht gestempelt (siehe TenantMasterDataCard.razor.css). */
.upload-label[b-2padfyjc0a] .hidden-input {
display: none;
}
/* /Components/Pages/SuperAdmin/HealthCheckCard.razor.rz.scp.css */
/* Karten mit Instanz-Unterkarten über die ganze Breite des Karten-Grids der Systemstatus-Seite:
in einer 280px-Spalte stünden die Unterkarten (Balken plus Fußzeile) einspaltig untereinander
und die Karte würde beliebig lang. Die Eigenschaft sitzt am ds-card-Div, weil nur das direktes
Kind des Grids ist. Alle anderen Karten bleiben im Raster. */
.health-check-card-wide[b-nwmr9fo1b1] {
grid-column: 1 / -1;
}
/* /Components/Pages/SuperAdmin/HelpArticleEdit.razor.rz.scp.css */
/* ─── Bilder-Karte der Hilfe-Redaktion (/admin/help/{id}) ───
Kein ::deep nötig: dieses Markup erzeugt der Razor-Compiler selbst, die CSS-Isolation stempelt
ihr Scope-Attribut also auf jedes Element hier. (Anders als HelpArticleBody, das seinen Inhalt
als MarkupString einfügt — dort ist ::deep zwingend.) */
.help-images-upload[b-11tvnre0v9] {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.help-images-hint[b-11tvnre0v9] {
margin: 0;
font-size: 12px;
color: var(--color-text-muted);
line-height: 1.5;
}
/* Feste Kachelgröße statt Originalmaße: die Liste soll eine ruhige Spalte bleiben, auch wenn
Screenshots in ganz unterschiedlichen Seitenverhältnissen hochgeladen werden. `contain` statt
`cover`, damit nichts abgeschnitten wird — man soll erkennen, welches Bild man vor sich hat. */
.help-images-thumb[b-11tvnre0v9] {
display: block;
width: 48px;
height: 48px;
object-fit: contain;
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-bg-subtle);
}
/* /Components/Pages/SuperAdmin/HelpArticles.razor.rz.scp.css */
/* ─── Redaktions-Baum Kategorie → Artikel (/admin/help) ───
Optik bewusst identisch zum Lese-Inhaltsverzeichnis (HelpToc.razor.css): der Redakteur soll die
Gliederung wiedererkennen, die der Leser sieht. Zusätzlich trägt jede Artikelzeile hier ihre
Redaktions-Metadaten (SortOrder, Status, Rollen, Änderungszeit, Aktionen).
Kein ::deep nötig — anders als HelpArticleBody rendert diese Seite ihr Markup selbst, die
CSS-Isolation stempelt ihr Scope-Attribut also auf jedes Element hier. */
.help-admin-tree[b-ygum3ff2qa] {
padding: 8px;
}
.help-admin-cat + .help-admin-cat[b-ygum3ff2qa] {
margin-top: 2px;
}
.help-admin-cat-btn[b-ygum3ff2qa] {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 7px 8px;
background: none;
border: none;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
text-align: left;
cursor: pointer;
}
.help-admin-cat-btn:hover[b-ygum3ff2qa] { background: var(--color-surface-hover); }
.help-admin-cat-btn:focus-visible[b-ygum3ff2qa] { outline: 2px solid var(--color-primary-ring); outline-offset: 1px; }
.help-admin-chev[b-ygum3ff2qa] { color: var(--color-text-muted); transition: transform 0.12s; flex-shrink: 0; }
.help-admin-chev.expanded[b-ygum3ff2qa] { transform: rotate(90deg); }
.help-admin-cat-title[b-ygum3ff2qa] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-admin-cat-count[b-ygum3ff2qa] {
font-size: 11px;
font-weight: 500;
color: var(--color-text-muted);
}
.help-admin-articles[b-ygum3ff2qa] {
list-style: none;
margin: 2px 0 6px 14px;
padding-left: 12px;
border-left: 1px dashed var(--color-border);
}
/* Eine Zeile je Artikel: Titel nimmt den freien Platz, die Metadaten stehen rechtsbündig
dahinter. flex-wrap, damit auf schmalen Fenstern umbrochen statt abgeschnitten wird. */
.help-admin-articles li[b-ygum3ff2qa] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 5px 8px;
border-radius: 6px;
}
.help-admin-articles li:hover[b-ygum3ff2qa] { background: var(--color-surface-hover); }
.help-admin-sort[b-ygum3ff2qa] {
flex-shrink: 0;
min-width: 22px;
font-size: 11px;
color: var(--color-text-muted);
text-align: right;
}
/* Titel ist die wichtigste Information der Zeile, Zielgruppe/Datum sind Nebeninfos und behalten ihre
volle Breite (flex: 0 0 auto). Bei Platzmangel bricht der Titel deshalb zweizeilig um statt zu
eliden — eine Ellipse würde hier den einzigen Blickfang der Zeile verstecken. */
.help-admin-article-title[b-ygum3ff2qa] {
flex: 1 1 220px;
min-width: 0;
overflow-wrap: break-word;
font-size: 12.5px;
font-weight: 500;
color: var(--color-text-primary);
}
.help-admin-article-title:hover[b-ygum3ff2qa] { color: var(--color-primary); }
.help-admin-badge[b-ygum3ff2qa] { font-size: 10px; flex-shrink: 0; }
.help-admin-roles-all[b-ygum3ff2qa] {
font-size: 11.5px;
color: var(--color-text-muted);
flex-shrink: 0;
}
.help-admin-updated[b-ygum3ff2qa] {
font-size: 11.5px;
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.help-admin-actions[b-ygum3ff2qa] {
display: flex;
gap: 2px;
flex-shrink: 0;
}
.help-admin-cat-empty[b-ygum3ff2qa] {
padding: 6px 8px;
font-size: 12px;
color: var(--color-text-muted);
}
/* /Components/Pages/SuperAdmin/HostInstanceCards.razor.rz.scp.css */
/* Unterkarten je Host-Instanz innerhalb einer Check-Karte. Nur CSS-Variablen, damit Light und
Dark ohne zweite Regel funktionieren: --color-bg-app liegt in beiden Themes eine Stufe neben
--color-surface der umgebenden Karte und setzt die Unterkarte damit sichtbar ab. */
.host-instances[b-6q6h849her] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
margin-top: 14px;
/* Unterkarten nicht auf die Zeilenhöhe strecken: eine Instanz ohne Messwerte (stumm oder
ältere Worker-Version) hat nur Kopf und Fußzeile und stuende sonst als große leere Fläche
neben ihren vollen Nachbarn -- das liest sich wie ein Anzeigefehler. */
align-items: start;
}
.host-instance[b-6q6h849her] {
padding: 10px 12px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-bg-app);
}
.host-instance-head[b-6q6h849her] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* Ein Replica-Name wie "os-worker--0000031--" ist länger als die Spalte, aber
der unterscheidende Teil steht am Ende — Abschneiden mit nowrap/ellipsis machte alle Karten
nebeneinander identisch lesbar und damit unbrauchbar, weil das Auseinanderhalten der einzige
Zweck der Zeile ist. Stattdessen zwei Zeilen zulassen und mitten im Namen umbrechen; der
vollständige Name steht zusätzlich im title. */
.host-instance-id[b-6q6h849her] {
font-size: 12.5px;
font-weight: 500;
overflow-wrap: anywhere;
}
.host-instance-head .ds-badge[b-6q6h849her] {
flex: 0 0 auto;
font-size: 10.5px;
}
.host-instance-mount[b-6q6h849her] {
margin: 4px 0 0;
font-size: 11px;
color: var(--color-text-faint);
}
/* Die betrieblich wichtigste Zahl der Unterkarte: eigene Zeile, kräftiger als die Fußzeile. */
.host-instance-load[b-6q6h849her] {
margin: 12px 0 0;
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
}
.host-instance-meta[b-6q6h849her] {
display: flex;
flex-wrap: wrap;
gap: 2px 10px;
margin: 10px 0 0;
font-size: 11.5px;
color: var(--color-text-muted);
}
/* Ohne einen einzigen Messwert (Worker einer älteren Version) bliebe sonst ein leerer Absatz. */
.host-instance-meta:empty[b-6q6h849her] {
display: none;
}
/* /Components/Pages/SuperAdmin/OperationsRadar.razor.rz.scp.css */
/* ── Hangfire-Queues ────────────────────────────────────────── */
.queue-grid[b-x724t13v2s] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 16px;
}
.queue-bar[b-x724t13v2s] {
display: flex;
height: 10px;
border-radius: var(--radius-pill);
overflow: hidden;
background: var(--color-border);
}
.queue-bar-segment[b-x724t13v2s] {
height: 100%;
}
.queue-bar-empty[b-x724t13v2s] {
margin: 0;
color: var(--color-text-muted);
font-size: 13px;
}
.queue-legend[b-x724t13v2s] {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 10px;
font-size: 12px;
color: var(--color-text-secondary);
}
.queue-legend-item[b-x724t13v2s] {
display: flex;
align-items: center;
gap: 6px;
}
.queue-legend-dot[b-x724t13v2s] {
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
}
.queue-legend-value[b-x724t13v2s] {
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.queue-meta[b-x724t13v2s] {
margin-top: 14px;
font-size: 12px;
color: var(--color-text-muted);
}
/* /Components/Pages/SuperAdmin/PlatformDashboard.razor.rz.scp.css */
/* ── 1) Verdikt ─────────────────────────────────────────────── */
.verdict-card[b-tknqvib0uw] {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border-left: 3px solid var(--color-border);
}
.verdict-card--ok[b-tknqvib0uw] { border-left-color: var(--color-success); }
.verdict-card--attention[b-tknqvib0uw] { border-left-color: var(--color-warning); }
.verdict-card--outage[b-tknqvib0uw] { border-left-color: var(--color-danger); }
.verdict-dot[b-tknqvib0uw] {
flex: 0 0 auto;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-border);
}
.verdict-card--ok .verdict-dot[b-tknqvib0uw] { background: var(--color-success); }
.verdict-card--attention .verdict-dot[b-tknqvib0uw] { background: var(--color-warning); }
.verdict-card--outage .verdict-dot[b-tknqvib0uw] { background: var(--color-danger); }
.verdict-body[b-tknqvib0uw] {
flex: 1 1 auto;
min-width: 0;
}
.verdict-headline[b-tknqvib0uw] {
font-size: 18px;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.01em;
}
.verdict-detail[b-tknqvib0uw] {
margin-top: 2px;
font-size: 13px;
color: var(--color-text-secondary);
}
.verdict-timestamp[b-tknqvib0uw] {
flex: 0 0 auto;
font-size: 12px;
color: var(--color-text-muted);
white-space: nowrap;
}
/* ── Rubriken ───────────────────────────────────────────────── */
.section-title[b-tknqvib0uw] {
margin: 22px 0 10px;
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
letter-spacing: -0.005em;
}
/* ── 2) Das braucht Aufmerksamkeit ─────────────────────────────
Farbe steckt im Streifen links, nicht im Text (Text bleibt in den normalen Textfarben) — die
Zeilen sind Aufmerksamkeitspunkte, keine bestätigten Störungen (die zeigt die Verdikt-Zeile). */
.attention-rows[b-tknqvib0uw] {
padding: 0;
display: flex;
flex-direction: column;
}
.attention-row[b-tknqvib0uw] {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
border-left: 3px solid var(--color-warning);
border-bottom: 1px solid var(--color-border);
text-decoration: none;
color: inherit;
}
.attention-row:last-child[b-tknqvib0uw] { border-bottom: none; }
.attention-row:hover[b-tknqvib0uw] { background: var(--color-bg-subtle); }
.attention-row-value[b-tknqvib0uw] {
flex: 0 0 auto;
min-width: 44px;
font-size: 22px;
font-weight: 600;
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
text-align: right;
}
.attention-row-text[b-tknqvib0uw] {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.attention-row-label[b-tknqvib0uw] {
font-size: 13.5px;
font-weight: 600;
color: var(--color-text-primary);
}
.attention-row-hint[b-tknqvib0uw] {
font-size: 12px;
color: var(--color-text-muted);
}
/* ── 2b) Läuft gerade ───────────────────────────────────────── */
.running-empty[b-tknqvib0uw] {
padding: 14px 20px;
color: var(--color-text-muted);
font-size: 13px;
}
.running-rows[b-tknqvib0uw] {
padding: 0;
display: flex;
flex-direction: column;
}
.running-row[b-tknqvib0uw] {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 20px;
border-bottom: 1px solid var(--color-border);
text-decoration: none;
color: inherit;
}
.running-row:last-child[b-tknqvib0uw] { border-bottom: none; }
.running-row:hover[b-tknqvib0uw] { background: var(--color-bg-subtle); }
.running-row-main[b-tknqvib0uw] {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.running-row-tenant[b-tknqvib0uw] {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
}
.running-row-title[b-tknqvib0uw] {
font-size: 12px;
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.running-row-mode[b-tknqvib0uw] {
flex: 0 0 auto;
}
.running-row-count[b-tknqvib0uw] {
flex: 0 0 auto;
font-size: 12px;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.running-row-activity[b-tknqvib0uw] {
flex: 0 0 auto;
font-size: 12px;
color: var(--color-text-muted);
white-space: nowrap;
min-width: 90px;
text-align: right;
}
.running-row-more[b-tknqvib0uw] {
padding: 10px 20px;
font-size: 12px;
color: var(--color-text-muted);
}
/* ── 3) Betrieb-Ampelleiste ─────────────────────────────────── */
.ops-pill-row[b-tknqvib0uw] {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ops-pill[b-tknqvib0uw] {
text-decoration: none;
color: inherit;
}
.ops-pill:hover[b-tknqvib0uw] { filter: brightness(0.96); }
.ops-pill-value[b-tknqvib0uw] {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ── 4) Durchsatz ───────────────────────────────────────────── */
.throughput-grid[b-tknqvib0uw] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.throughput-compare[b-tknqvib0uw] {
margin-top: 6px;
font-size: 12px;
color: var(--color-text-muted);
}
/* /Components/Pages/SuperAdmin/ProblemReportDetail.razor.rz.scp.css */
/* Fakten-Block: zweispaltig, Beschriftung gedämpft — dieselbe Optik wie der Transparenzblock im
Meldedialog, damit Melder und Triage dasselbe Bild sehen. */
.problem-report-facts[b-cg14l8u04z] {
display: grid;
grid-template-columns: minmax(160px, auto) 1fr;
gap: 6px 16px;
margin: 0;
font-size: 13px;
}
.problem-report-facts dt[b-cg14l8u04z] {
color: var(--color-text-muted);
}
.problem-report-facts dd[b-cg14l8u04z] {
margin: 0;
min-width: 0;
overflow-wrap: anywhere;
}
/* Freitext eines Menschen: Umbrüche erhalten, aber ohne Monospace — es ist Prosa, kein Log. */
.problem-report-freitext[b-cg14l8u04z] {
margin: 0;
white-space: pre-wrap;
line-height: 1.5;
}
.problem-report-shots[b-cg14l8u04z] {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.problem-report-shots figure[b-cg14l8u04z] {
margin: 0;
max-width: 320px;
}
.problem-report-shots img[b-cg14l8u04z] {
max-width: 100%;
border: 1px solid var(--color-border);
border-radius: 6px;
display: block;
}
.problem-report-shots figcaption[b-cg14l8u04z] {
margin-top: 4px;
font-size: 11.5px;
color: var(--color-text-muted);
overflow-wrap: anywhere;
}
.problem-report-transcript[b-cg14l8u04z] {
margin: 0;
max-height: 420px;
overflow: auto;
white-space: pre-wrap;
font-size: 12px;
line-height: 1.5;
background: var(--color-surface-alt);
border-radius: 6px;
padding: 10px 12px;
}
/* /Components/Pages/SuperAdmin/SqlConsole/SqlConsoleResultTable.razor.rz.scp.css */
/* Breite Result-Sets (viele Spalten) müssen innerhalb der Karte scrollen — die Seite selbst nicht.
Die Höhenbegrenzung hält zugleich die Karte handhabbar: ohne sie schiebt ein Ergebnis mit 200
Zeilen alles andere aus dem Bild. */
.sql-console-table-wrap[b-h8atgtjprr] {
overflow: auto;
max-height: 60vh;
}
.sql-console-more[b-h8atgtjprr] {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-size: 12.5px;
color: var(--color-text-muted);
border-top: 1px solid var(--color-border);
}
/* Bei 60vh Scrollhöhe wandert der Spaltenkopf sonst aus dem Bild, und ab Zeile 30 rät man,
welche Spalte man gerade liest. */
.sql-console-table-wrap thead th[b-h8atgtjprr] {
position: sticky;
top: 0;
z-index: 1;
background: var(--color-surface);
}
.sql-console-col-type[b-h8atgtjprr] {
margin-top: 2px;
font-size: 10.5px;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
color: var(--color-text-muted);
}
/* CellKind.Null optisch von der Zeichenkette "NULL" unterscheidbar. */
.sql-cell-null[b-h8atgtjprr] {
color: var(--color-text-faint);
font-style: italic;
}
.sql-cell-error[b-h8atgtjprr] {
color: var(--color-danger-text);
}
/* /Components/Pages/SuperAdmin/Tenants.razor.rz.scp.css */
/* Feature-Schalter im Anlage-Dialog (Super-Admin-Teil des Katalogs). Scoped, weil der Dialog
keine Karte ist wie TenantFeaturesCard — eigene, schlanke Regeln statt deren Klassen
mitzubenutzen (scoped CSS ist ohnehin nicht komponentenübergreifend nutzbar). */
.feature-list[b-c9p42x6fbc] {
margin-top: 18px;
}
.feature-row[b-c9p42x6fbc] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 0;
}
.feature-title[b-c9p42x6fbc] {
font-size: 13px;
font-weight: 500;
}
.feature-desc[b-c9p42x6fbc] {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 2px;
}
.feature-divider[b-c9p42x6fbc] {
height: 1px;
background: var(--color-border);
}
/* /Components/Pages/TemplateAssistant/TemplateAssistantPage.razor.rz.scp.css */
/* ── Ablegefläche ───────────────────────────────────────────────────────────────────────────
Das liegt unsichtbar über der ganzen Fläche — damit nimmt sie Klick UND Drop an,
ohne eigenes JavaScript für die Drag-Ereignisse. */
.dropzone[b-3uobbhvqy1] {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 36px 24px;
text-align: center;
border: 1px dashed var(--color-border);
border-radius: var(--radius-md, 8px);
color: var(--color-text-muted);
cursor: pointer;
transition: border-color .15s ease, color .15s ease;
}
.dropzone:hover[b-3uobbhvqy1],
.dropzone:focus-within[b-3uobbhvqy1] {
border-color: var(--color-accent);
color: var(--color-text);
}
.dropzone.is-busy[b-3uobbhvqy1] {
cursor: progress;
opacity: .7;
}
/* rendert sein als Kind-Komponente — das CSS-Isolation-Attribut dieser Datei
wird darauf nicht gestempelt. Ohne ::deep blieb der native „Datei auswählen"-Button mitten in
der Ablegefläche sichtbar (gleiche Stelle wie in TenantMasterDataCard.razor.css beschrieben). */
.dropzone[b-3uobbhvqy1] .dropzone-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: inherit;
}
.dropzone-title[b-3uobbhvqy1] {
font-size: 14px;
font-weight: 500;
color: var(--color-text);
}
.dropzone-hint[b-3uobbhvqy1] {
font-size: 12.5px;
max-width: 46ch;
line-height: 1.5;
}
/* ── Zustandsleiste ─────────────────────────────────────────────────────────────────────────
Soll ohne Lesen erkennbar machen, ob gerade gearbeitet wird: Spinner plus laufender Balken
gegen den ruhenden Zustand mit Häkchen bzw. Warnzeichen. */
.status-card[b-3uobbhvqy1] {
border-left: 3px solid var(--color-border);
}
.status-card.is-running[b-3uobbhvqy1] {
border-left-color: var(--color-accent);
}
.status-main[b-3uobbhvqy1] {
display: flex;
align-items: flex-start;
gap: 12px;
}
.status-text[b-3uobbhvqy1] {
min-width: 0;
}
.status-title[b-3uobbhvqy1] {
font-size: 14px;
font-weight: 600;
color: var(--color-text);
}
.status-detail[b-3uobbhvqy1] {
font-size: 12.5px;
color: var(--color-text-muted);
line-height: 1.5;
margin-top: 2px;
max-width: 72ch;
}
.status-actions[b-3uobbhvqy1] {
display: flex;
gap: 8px;
margin-left: auto;
flex-shrink: 0;
}
.spinner[b-3uobbhvqy1] {
width: 18px;
height: 18px;
flex: 0 0 auto;
margin-top: 1px;
border: 2px solid var(--color-border);
border-top-color: var(--color-accent);
border-radius: 50%;
animation: ta-spin-b-3uobbhvqy1 .9s linear infinite;
}
@keyframes ta-spin-b-3uobbhvqy1 {
to { transform: rotate(360deg); }
}
.progress-track[b-3uobbhvqy1] {
height: 4px;
margin-top: 14px;
border-radius: 2px;
background: var(--color-border);
overflow: hidden;
}
.progress-fill[b-3uobbhvqy1] {
height: 100%;
background: var(--color-accent);
transition: width .3s ease;
}
/* Während eines Laufs pulsiert der Balken, damit auch bei gleicher Breite Bewegung sichtbar ist. */
.progress-fill.is-running[b-3uobbhvqy1] {
animation: ta-pulse-b-3uobbhvqy1 1.4s ease-in-out infinite;
}
@keyframes ta-pulse-b-3uobbhvqy1 {
0%, 100% { opacity: 1; }
50% { opacity: .45; }
}
.progress-label[b-3uobbhvqy1] {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 6px;
}
/* ── Zweispaltiger Bereich: Befunde links, PDF-Vorschau rechts ──────────────────────────── */
.split[b-3uobbhvqy1] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
align-items: start;
margin-top: 16px;
}
/* Unter 1200 px untereinander — die Vorschau braucht Breite, um lesbar zu sein. */
@media (max-width: 1200px) {
.split[b-3uobbhvqy1] {
grid-template-columns: minmax(0, 1fr);
}
}
.split-main > .ds-card + .ds-card[b-3uobbhvqy1] {
margin-top: 16px;
}
/* Die Vorschau bleibt beim Scrollen der Befundliste stehen. */
.split-preview[b-3uobbhvqy1] {
position: sticky;
top: 16px;
}
.preview-body[b-3uobbhvqy1] {
padding: 0;
}
.preview-empty[b-3uobbhvqy1] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 56px 24px;
font-size: 13px;
color: var(--color-text-muted);
text-align: center;
}
.sample-picker[b-3uobbhvqy1] {
display: flex;
gap: 4px;
}
/* ── Listen und Chips ──────────────────────────────────────────────────────────────────── */
.note-row[b-3uobbhvqy1],
.card-intro[b-3uobbhvqy1] {
font-size: 13px;
color: var(--color-text-muted);
line-height: 1.55;
}
.note-row[b-3uobbhvqy1] {
display: flex;
align-items: center;
gap: 8px;
}
.card-intro[b-3uobbhvqy1] {
margin: 0 0 12px;
}
.finding-list[b-3uobbhvqy1] {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.finding-list li[b-3uobbhvqy1] {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
line-height: 1.55;
}
/* Das Icon soll auf der ersten Textzeile sitzen, nicht mittig zum ganzen Absatz. */
.finding-list li[b-3uobbhvqy1] svg {
flex: 0 0 auto;
margin-top: 3px;
color: var(--color-text-muted);
}
/* Anzahl der betroffenen Musterschreiben — zurückhaltend, es ist eine Nebeninformation. */
.finding-count[b-3uobbhvqy1] {
margin-left: 6px;
font-size: 11.5px;
color: var(--color-text-faint, var(--color-text-muted));
white-space: nowrap;
}
.chip-row[b-3uobbhvqy1] {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.chip[b-3uobbhvqy1] {
font-size: 12px;
padding: 3px 8px;
border: 1px solid var(--color-border);
border-radius: 4px;
color: var(--color-text-muted);
white-space: pre-wrap;
word-break: break-all;
}
/* Kopfzeile mit Titel links und Aktion/Auswahl rechts. */
.ds-card-header[b-3uobbhvqy1] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* /Components/Shared/AssistantDialog.razor.rz.scp.css */
/* ─── KI-Assistent als Modal ───
dialog.ds-dialog bringt Fläche, Rahmen, Backdrop und `display:flex` im offenen Zustand mit
(app.css). Hier nur die Maße und das Durchreichen der Höhe an das Panel. */
.assistant-dialog[b-37bk1x9u8h] {
width: min(94vw, 760px);
/* Feste Höhe statt „so hoch wie der Inhalt": der Chat wächst beim Streamen, ein mitwachsender
Dialog würde bei jeder Antwort springen. .help-chat scrollt stattdessen intern. */
height: min(86vh, 880px);
}
/* ::deep, weil .help-chat aus der Kindkomponente HelpChatPanel stammt und deren Scope-Attribut
trägt, nicht das dieser Datei (siehe HelpArticleBody.razor.css zum selben Thema).
min-height:0 ist Pflicht, sonst verweigert das Flex-Kind das Schrumpfen und die Nachrichtenliste
sprengt den Dialog, statt intern zu scrollen. */
.assistant-dialog[b-37bk1x9u8h] .help-chat {
flex: 1 1 auto;
min-height: 0;
/* Rahmen und Schatten der ds-card entfallen — der Dialog ist bereits die Fläche. */
border: 0;
box-shadow: none;
background: transparent;
}
/* /Components/Shared/CapacityBar.razor.rz.scp.css */
.capacity-bar[b-s2w2f9k5ji] {
margin-top: 12px;
}
.capacity-bar-head[b-s2w2f9k5ji] {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.capacity-bar-title[b-s2w2f9k5ji] {
font-size: 11px;
font-weight: 500;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.capacity-bar-track-wrap[b-s2w2f9k5ji] {
position: relative;
}
.capacity-bar-track[b-s2w2f9k5ji] {
height: 8px;
border-radius: var(--radius-pill);
background: var(--color-border);
overflow: hidden;
}
.capacity-bar-fill[b-s2w2f9k5ji] {
height: 100%;
border-radius: var(--radius-pill);
background: var(--color-primary);
}
.capacity-bar-threshold[b-s2w2f9k5ji] {
position: absolute;
top: -3px;
bottom: -3px;
width: 2px;
background: var(--color-warning);
border-radius: 1px;
}
.capacity-bar-ends[b-s2w2f9k5ji] {
display: flex;
justify-content: space-between;
margin-top: 4px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--color-text-secondary);
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
/* Confirm-Dialog: kompakt, mit großem Icon-Akzent links — abgestimmt auf die existierenden
ds-dialog-Styles. */
.ds-confirm-dialog[b-lyy7jlrao2] {
width: min(92vw, 460px);
padding: 0;
border: none;
border-radius: 12px;
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--color-border);
overflow: hidden;
background: var(--color-surface);
}
.ds-confirm-dialog[b-lyy7jlrao2]::backdrop {
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
}
html[data-theme="dark"] .ds-confirm-dialog[b-lyy7jlrao2]::backdrop {
background: rgba(0, 0, 0, 0.6);
}
.ds-confirm-icon-wrap[b-lyy7jlrao2] {
display: flex;
justify-content: center;
padding: 24px 24px 0;
}
.ds-confirm-icon[b-lyy7jlrao2] {
width: 56px;
height: 56px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
background: var(--color-surface-hover);
}
.ds-confirm-dialog.is-info .ds-confirm-icon[b-lyy7jlrao2] {
background: var(--color-info-soft);
color: var(--color-primary);
}
.ds-confirm-dialog.is-warning .ds-confirm-icon[b-lyy7jlrao2] {
background: var(--color-warning-soft);
color: var(--color-warning-text);
}
.ds-confirm-dialog.is-danger .ds-confirm-icon[b-lyy7jlrao2] {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.ds-confirm-body[b-lyy7jlrao2] {
padding: 16px 24px 8px;
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
}
.ds-confirm-title[b-lyy7jlrao2] {
margin: 0;
font-size: 17px;
font-weight: 700;
line-height: 1.25;
color: var(--color-text-primary);
letter-spacing: -0.005em;
}
.ds-confirm-message[b-lyy7jlrao2] {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--color-text-muted);
white-space: pre-wrap;
}
.ds-confirm-footer[b-lyy7jlrao2] {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 16px 20px 20px;
background: var(--color-bg-subtle);
border-top: 1px solid var(--color-border);
}
.ds-confirm-footer .ds-btn[b-lyy7jlrao2] {
min-width: 96px;
justify-content: center;
}
/* /Components/Shared/DsSwitch.razor.rz.scp.css */
.ds-switch[b-ya0ylxhxp4] {
display: inline-flex;
align-items: center;
cursor: pointer;
flex: none;
}
/* Native Checkbox unsichtbar, aber bedienbar (Tastatur/Screenreader) — der Track ist die Optik. */
.ds-switch input[b-ya0ylxhxp4] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ds-switch-track[b-ya0ylxhxp4] {
position: relative;
width: 36px;
height: 20px;
border-radius: 10px;
background: var(--color-bg-subtle);
border: 1px solid var(--color-border);
transition: background-color 120ms, border-color 120ms;
flex: none;
}
.ds-switch-knob[b-ya0ylxhxp4] {
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-text-faint);
transition: transform 120ms, background-color 120ms;
}
/* "An" braucht eine satte Fläche statt eines blassen Tons: --color-primary-soft unterscheidet
sich im Dark-Theme kaum von der Karten-Fläche (16 % Deckkraft auf dunklem Grund), dadurch
sah der Schalter eingeschaltet fast wie ausgeschaltet aus. Volltonfüllung wie bei
.ds-btn-primary schafft den nötigen Kontrast in beiden Themes. Der Knopf liegt dann auf
Primärfarbe und braucht selbst wieder Kontrast dazu — Weiß bleibt (wie --btn-fg dort)
bewusst themenunabhängig, weil --color-primary in beiden Themes dunkel bzw. mittelhell,
aber nie so hell ist, dass Weiß untergeht. */
.ds-switch input:checked + .ds-switch-track[b-ya0ylxhxp4] {
background: var(--color-primary);
border-color: var(--color-primary);
}
.ds-switch input:checked + .ds-switch-track .ds-switch-knob[b-ya0ylxhxp4] {
/* Der Knopf bleibt 14px: die Spur ist mit box-sizing: border-box innen nur 18px hoch, ein
größerer Knopf säße bei top: 2px unten am Rand statt mittig. 16px Versatz lassen ihn rechts
mit demselben 2px-Abstand stehen wie links im Zustand "aus". */
transform: translateX(16px);
background: #ffffff;
}
.ds-switch input:focus-visible + .ds-switch-track[b-ya0ylxhxp4] {
box-shadow: 0 0 0 2px var(--color-primary-soft);
}
.ds-switch input:disabled + .ds-switch-track[b-ya0ylxhxp4] {
opacity: 0.5;
}
.ds-switch:has(input:disabled)[b-ya0ylxhxp4] {
cursor: default;
}
/* /Components/Shared/FileExplorer.razor.rz.scp.css */
/* ─── Rahmen ─── */
/* Die Dropzone ist ein Flex-Kind hiervon (flex: 1 1 auto) — ihr Aussehen liegt in
UploadDropzone.razor.css. */
.file-explorer[b-106xiz2g10] { display: flex; flex-direction: column; gap: 12px; }
.fe-inline-form[b-106xiz2g10] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fe-inline-form .ds-input[b-106xiz2g10] { flex: 1 1 220px; min-width: 160px; }
.fe-error[b-106xiz2g10] {
font-size: 12.5px;
color: var(--color-danger);
padding: 6px 0;
}
.fe-empty[b-106xiz2g10] {
font-size: 12.5px;
color: var(--color-text-muted);
padding: 24px 0;
}
/* ─── Explorer (Tree links, Listing rechts — Windows-Style) ─── */
.blob-explorer[b-106xiz2g10] {
display: grid;
grid-template-columns: minmax(220px, 280px) 1fr;
gap: 12px;
min-height: 360px;
}
/* Ohne Ordner-Baum (HideFolders): Datei-Liste über die volle Breite, so hoch wie ihr Inhalt.
Die Mindesthöhe oben braucht nur der Baum. Ohne ihn stand bei leerer Liste ein 360 px hoher
Kasten mit „Noch keine Dateien." über der Upload-Zone (Schriften). */
.blob-explorer.no-tree[b-106xiz2g10] { grid-template-columns: 1fr; min-height: 0; }
/* Linke Spalte: Ordner-Button + optionales Anlege-Formular über dem Baum. */
.blob-tree-col[b-106xiz2g10] {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.fe-tree-toolbar[b-106xiz2g10] { display: flex; }
.fe-tree-toolbar .ds-btn[b-106xiz2g10] { width: 100%; justify-content: center; }
.blob-tree[b-106xiz2g10] {
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-bg-subtle);
padding: 6px;
overflow: auto;
flex: 1;
max-height: 480px;
}
.blob-tree-node[b-106xiz2g10] {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 6px;
font-size: 13px;
color: var(--color-text-secondary);
border-radius: 4px;
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.blob-tree-node:hover[b-106xiz2g10] { background: var(--color-surface-hover); color: var(--color-text-primary); }
.blob-tree-node.active[b-106xiz2g10] {
background: var(--color-primary-soft);
color: var(--color-primary);
font-weight: 500;
}
.blob-tree-node .chev[b-106xiz2g10] {
width: 14px;
flex-shrink: 0;
text-align: center;
color: var(--color-text-muted);
transition: transform 0.12s;
font-size: 10px;
line-height: 1;
}
.blob-tree-node .chev.expanded[b-106xiz2g10] { transform: rotate(90deg); }
.blob-tree-node .chev.empty[b-106xiz2g10] { visibility: hidden; }
.blob-tree-children[b-106xiz2g10] {
margin-left: 12px;
border-left: 1px dashed var(--color-border);
padding-left: 4px;
}
.blob-pane[b-106xiz2g10] {
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
background: var(--color-surface);
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
max-height: 480px;
}
.blob-pane-header[b-106xiz2g10] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-subtle);
font-size: 12px;
color: var(--color-text-secondary);
flex-shrink: 0;
}
.blob-pane-path[b-106xiz2g10] {
flex: 1;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.blob-pane-list[b-106xiz2g10] {
overflow: auto;
flex: 1;
}
.blob-row[b-106xiz2g10] {
display: grid;
grid-template-columns: 24px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 12px;
font-size: 13px;
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border);
cursor: default;
min-width: 0;
}
.blob-row.folder .name[b-106xiz2g10],
.blob-row.folder .icon[b-106xiz2g10] { cursor: pointer; }
.blob-row.folder:hover[b-106xiz2g10] { background: var(--color-surface-hover); }
.blob-row .icon[b-106xiz2g10] { color: var(--color-text-muted); display: flex; align-items: center; }
.blob-row.folder .icon[b-106xiz2g10] { color: var(--color-primary); }
.blob-row .name[b-106xiz2g10] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.blob-row .meta[b-106xiz2g10] {
font-size: 11px;
color: var(--color-text-muted);
font-family: var(--font-mono);
}
.fe-actions[b-106xiz2g10] {
display: inline-flex;
gap: 6px;
align-items: center;
}
.fe-rename-input[b-106xiz2g10] { min-width: 0; }
.blob-pane-empty[b-106xiz2g10] {
padding: 32px;
text-align: center;
font-size: 12.5px;
color: var(--color-text-muted);
}
/* ─── Flacher Modus (Einfach-Ansicht): nur Dateiliste, kein Baum ─── */
.fe-flat-list[b-106xiz2g10] {
border: 1px solid var(--color-border);
border-radius: var(--radius-input);
overflow: auto;
max-height: 320px;
}
.fe-flat-list .blob-row:last-child[b-106xiz2g10] { border-bottom: none; }
/* /Components/Shared/HelpArticleBody.razor.rz.scp.css */
/* Basis-Typografie für den aus Markdown gerenderten Artikelinhalt (siehe HelpMarkdownRenderer).
Ausschließlich Design-Tokens, damit Light/Dark ohne Zusatzaufwand funktionieren.
Durchgängig ::deep, weil der Artikelinhalt als MarkupString eingefügt wird: die CSS-Isolation
stempelt ihr Scope-Attribut nur auf Elemente, die der Razor-Compiler selbst erzeugt. Ohne ::deep
entstünde `.help-article h2[b-xyz]` — ein Selektor, den kein Element des gerenderten Markdowns je
erfüllt, und die ganze Typografie hier bliebe wirkungslos. Mit ::deep wandert das Attribut auf den
Wrapper (`.help-article[b-xyz] h2`) und greift für alle Nachfahren. */
.help-article[b-dncjow4qpi] h2 {
font-size: 18px;
font-weight: 600;
color: var(--color-text-primary);
margin: 24px 0 10px;
}
.help-article[b-dncjow4qpi] h2:first-child { margin-top: 0; }
.help-article[b-dncjow4qpi] h3 {
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary);
margin: 20px 0 8px;
}
.help-article[b-dncjow4qpi] p {
font-size: 13.5px;
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0 0 12px;
}
.help-article[b-dncjow4qpi] ul,
.help-article[b-dncjow4qpi] ol {
font-size: 13.5px;
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0 0 12px;
padding-left: 22px;
}
.help-article[b-dncjow4qpi] code {
font-family: var(--font-mono);
font-size: 12.5px;
background: var(--color-bg-subtle);
padding: 2px 5px;
border-radius: 4px;
}
.help-article[b-dncjow4qpi] pre {
font-family: var(--font-mono);
font-size: 12.5px;
background: var(--color-bg-subtle);
padding: 12px;
border-radius: var(--radius-input);
overflow-x: auto;
margin: 0 0 12px;
}
.help-article[b-dncjow4qpi] pre code {
background: none;
padding: 0;
}
.help-article[b-dncjow4qpi] blockquote {
border-left: 3px solid var(--color-border);
color: var(--color-text-muted);
margin: 0 0 12px;
padding: 2px 14px;
}
.help-article[b-dncjow4qpi] table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
margin: 0 0 12px;
}
.help-article[b-dncjow4qpi] th,
.help-article[b-dncjow4qpi] td {
border: 1px solid var(--color-border);
padding: 6px 10px;
text-align: left;
}
.help-article[b-dncjow4qpi] a {
color: var(--color-primary);
}
.help-article[b-dncjow4qpi] img {
max-width: 100%;
height: auto;
border-radius: var(--radius-input);
}
/* Definitionsliste (Glossar). Markdig verlangt dafür `:` plus DREI Leerzeichen — mit nur einem
bleibt die Zeile ein Absatz, der mit einem Doppelpunkt anfängt. Ohne diese Regeln erbte die
Liste Browser-Defaults (16px, Standardfarbe) und fiele aus dem Schriftbild der Artikel. */
.help-article[b-dncjow4qpi] dl {
margin: 0 0 12px;
}
.help-article[b-dncjow4qpi] dt {
font-size: 13.5px;
font-weight: 600;
color: var(--color-text-primary);
margin-top: 14px;
}
.help-article[b-dncjow4qpi] dt:first-child {
margin-top: 0;
}
.help-article[b-dncjow4qpi] dd {
font-size: 13.5px;
color: var(--color-text-secondary);
line-height: 1.6;
margin: 2px 0 0 16px;
}
/* Warnkasten. Quelle ist ein Blockzitat mit fetter „Achtung"-Einleitung, dem HelpMarkdownRenderer
die Klasse `warning` anhängt (CommonMark statt des früheren `::: warning`-Containers — siehe
dessen IsWarningQuote). Der Container-Fall bleibt abgedeckt: die Extension ist weiter aktiv und
rendert `
`, also greifen dieselben Regeln für Altbestand aus der Redaktion.
Die blockquote-Grundregel oben (grauer Balken, gedämpfte Farbe) wird dabei überschrieben, weil
eine Klasse in der Spezifität über einem Elementnamen steht — die Reihenfolge im Bundle spielt
hier also keine Rolle. Farbwahl wie bei .ds-alert-warning im Design-System. */
.help-article[b-dncjow4qpi] .warning {
background: var(--color-warning-bg);
color: var(--color-warning-text);
border-left: 3px solid var(--color-warning);
border-radius: var(--radius-input);
padding: 10px 14px;
margin: 0 0 12px;
}
.help-article[b-dncjow4qpi] .warning > p {
color: inherit;
margin: 0;
}
.help-article[b-dncjow4qpi] .warning > p + p {
margin-top: 8px;
}
/* Mermaid-Diagramme aus einem ```mermaid-Codeblock (siehe js/help-mermaid.js). Der Loader ersetzt
den
-Block durch dieses, sobald das SVG steht. Nur Design-Tokens, damit sich das Diagramm ohne Zusatzaufwand ans aktive Theme anpasst (Mermaid rendert bei jedem Theme-Wechsel neu). */ .help-article[b-dncjow4qpi] .help-mermaid { display: flex; justify-content: center; background: var(--color-bg-subtle); border-radius: var(--radius-input); padding: 16px; margin: 0 0 12px; overflow-x: auto; } .help-article[b-dncjow4qpi] .help-mermaid svg { max-width: 100%; height: auto; } /* Hinweiszeile, wenn ein Diagramm nicht gerendert werden konnte (Syntaxfehler im Quelltext) — der ursprüngliche Codeblock bleibt darunter sichtbar, siehe help-mermaid.js. */ .help-article[b-dncjow4qpi] .help-mermaid-hint { font-size: 12.5px; color: var(--color-warning-text); margin: 0 0 6px; } /* /Components/Shared/LegalPage.razor.rz.scp.css */ /* ============================================================ Rechtstexte (Impressum, Datenschutz) — reine Lesetypografie. Nur CSS-Variablen für Farben → Light/Dark automatisch korrekt. Der Seiteninhalt kommt als ChildContent von außen, deshalb greifen die Inhaltsregeln über ::deep. ============================================================ */ .legal-page[b-tsb78yn0gh] { min-height: 100vh; display: flex; flex-direction: column; color: var(--color-text-primary); } /* ---------- Kopf ---------- */ .legal-header[b-tsb78yn0gh] { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; padding: 0 24px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .legal-brand[b-tsb78yn0gh] { display: flex; align-items: center; gap: 10px; } .legal-brand-lockup[b-tsb78yn0gh] { height: 22px; width: auto; max-width: 100%; /* Ohne object-fit staucht max-width das Logo, weil die Hoehe fest bleibt. */ object-fit: contain; } /* Nur eine der beiden Varianten ist sichtbar — welche, haengt vom Theme ab. */ .legal-brand-lockup-dark[b-tsb78yn0gh] { display: none; } html[data-theme="dark"] .legal-brand-lockup-light[b-tsb78yn0gh] { display: none; } html[data-theme="dark"] .legal-brand-lockup-dark[b-tsb78yn0gh] { display: block; } /* ---------- Textspalte ---------- */ .legal-main[b-tsb78yn0gh] { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 48px 24px 72px; font-size: 14px; line-height: 1.7; } .legal-main h1[b-tsb78yn0gh] { font-size: 30px; line-height: 1.25; letter-spacing: -0.02em; margin: 0; } .legal-updated[b-tsb78yn0gh] { margin: 8px 0 0; font-size: 12.5px; color: var(--color-text-muted); } .legal-main[b-tsb78yn0gh] h2 { font-size: 19px; letter-spacing: -0.01em; margin: 44px 0 12px; padding-top: 20px; border-top: 1px solid var(--color-border); } .legal-main[b-tsb78yn0gh] h3 { font-size: 15px; margin: 26px 0 8px; } .legal-main[b-tsb78yn0gh] p, .legal-main[b-tsb78yn0gh] ul, .legal-main[b-tsb78yn0gh] ol { margin: 0 0 14px; } .legal-main[b-tsb78yn0gh] ul, .legal-main[b-tsb78yn0gh] ol { padding-left: 22px; } .legal-main[b-tsb78yn0gh] li { margin-bottom: 6px; } .legal-main[b-tsb78yn0gh] a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } .legal-main[b-tsb78yn0gh] address { font-style: normal; } /* Tabellen (Auftragsverarbeiter, Cookies) — auf schmalen Viewports horizontal scrollbar. */ .legal-main[b-tsb78yn0gh] .legal-table-wrap { overflow-x: auto; margin: 0 0 18px; } .legal-main[b-tsb78yn0gh] table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 13px; } .legal-main[b-tsb78yn0gh] th, .legal-main[b-tsb78yn0gh] td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--color-border); } .legal-main[b-tsb78yn0gh] th { font-weight: 600; color: var(--color-text-muted); white-space: nowrap; } /* Offene Angabe, die vor dem Live-Gang gefüllt werden muss. Bewusst knallig: ein Rechtstext mit sichtbarem Platzhalter darf nicht versehentlich produktiv gehen. */ .legal-main[b-tsb78yn0gh] .legal-todo { background: var(--color-warning-bg); color: var(--color-warning-text); padding: 1px 6px; border-radius: 4px; font-weight: 500; } /* Hervorgehobener Hinweiskasten (Widerspruchsrecht, offene Punkte). */ .legal-main[b-tsb78yn0gh] .legal-note { border-left: 3px solid var(--color-primary); background: var(--color-bg-subtle); padding: 12px 16px; margin: 0 0 18px; border-radius: 0 6px 6px 0; } .legal-main[b-tsb78yn0gh] .legal-note > :last-child { margin-bottom: 0; } /* ---------- Fuß ---------- */ .legal-footer[b-tsb78yn0gh] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 760px; width: 100%; margin: 0 auto; padding: 18px 24px; border-top: 1px solid var(--color-border); font-size: 12.5px; color: var(--color-text-muted); } .legal-footer-links[b-tsb78yn0gh] { display: flex; gap: 16px; } .legal-footer a:hover[b-tsb78yn0gh] { color: var(--color-text-primary); } @media (max-width: 720px) { .legal-main[b-tsb78yn0gh] { padding: 32px 20px 56px; } .legal-main h1[b-tsb78yn0gh] { font-size: 24px; } } /* /Components/Shared/ProblemReportDialog.razor.rz.scp.css */ /* Abstände zwischen den Blöcken des Formulars — der Dialog-Body bringt keine mit. */ .problem-report-spaced[b-bunx7zwwvx] { margin-top: 14px; } .problem-report-text[b-bunx7zwwvx] { resize: vertical; min-height: 120px; } .problem-report-hint[b-bunx7zwwvx] { margin-top: 4px; font-size: 11.5px; color: var(--color-text-muted); } /* Der Datenschutz-Hinweis ist Teil der Zusage an den Melder, nicht Beiwerk — deshalb lesbar groß statt als Kleingedrucktes. */ .problem-report-privacy[b-bunx7zwwvx] { margin: 6px 0 8px; font-size: 12px; color: var(--color-text-muted); line-height: 1.45; } /* Das native File-Input verschwindet hinter dem Label, das als Knopf gestaltet ist (Muster TenantMasterDataCard). */ .problem-report-upload[b-bunx7zwwvx] { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .problem-report-file[b-bunx7zwwvx] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .problem-report-files[b-bunx7zwwvx] { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .problem-report-files li[b-bunx7zwwvx] { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 12.5px; } .problem-report-file-name[b-bunx7zwwvx] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .problem-report-file-size[b-bunx7zwwvx] { color: var(--color-text-muted); font-size: 11.5px; } .problem-report-context[b-bunx7zwwvx] { margin-top: 16px; border-top: 1px solid var(--color-border); padding-top: 10px; font-size: 12.5px; } .problem-report-context summary[b-bunx7zwwvx] { cursor: pointer; font-weight: 600; } .problem-report-context dl[b-bunx7zwwvx] { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 4px 12px; margin: 10px 0; } .problem-report-context dt[b-bunx7zwwvx] { color: var(--color-text-muted); } .problem-report-context dd[b-bunx7zwwvx] { margin: 0; min-width: 0; overflow-wrap: anywhere; } /* Der User-Agent ist ein langer String ohne Leerzeichen — ohne Umbruch sprengt er den Dialog. */ .problem-report-ua[b-bunx7zwwvx] { font-size: 11.5px; color: var(--color-text-muted); } .problem-report-transcript[b-bunx7zwwvx] { margin: 0; max-height: 180px; overflow: auto; white-space: pre-wrap; font-size: 11.5px; background: var(--color-surface-alt); border-radius: 6px; padding: 6px 8px; } .problem-report-key[b-bunx7zwwvx] { margin-top: 6px; font-size: 13px; } .problem-report-done p[b-bunx7zwwvx] { margin: 8px 0 0; font-size: 12.5px; } /* /Components/Shared/RecipeStepEditor.razor.rz.scp.css */ .rse[b-8jb0ds0ypu] { display: flex; flex-direction: column; gap: 12px; } .rse-empty[b-8jb0ds0ypu] { font-size: 12.5px; color: var(--color-text-muted); padding: 16px; text-align: center; border: 1px dashed var(--color-border); border-radius: var(--radius-input); background: var(--color-bg-subtle); } .rse-phase[b-8jb0ds0ypu] { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-card, 12px); background: var(--color-bg-subtle); } .rse-phase-head[b-8jb0ds0ypu] { display: flex; flex-direction: column; gap: 1px; padding: 0 2px; } .rse-phase-title[b-8jb0ds0ypu] { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary, var(--color-text-muted)); } .rse-phase-hint[b-8jb0ds0ypu] { font-size: 11px; color: var(--color-text-muted); } .rse-list[b-8jb0ds0ypu] { display: flex; flex-direction: column; gap: 6px; } .rse-phase-empty[b-8jb0ds0ypu] { font-size: 12px; color: var(--color-text-faint, var(--color-text-muted)); padding: 8px 2px; } .rse-tile[b-8jb0ds0ypu] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-surface); } .rse-tile.is-child[b-8jb0ds0ypu] { margin-left: 22px; border-left: 3px solid var(--color-primary-soft); } .rse-tile-main[b-8jb0ds0ypu] { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .rse-tile-label[b-8jb0ds0ypu] { font-size: 13px; font-weight: 500; color: var(--color-text-primary); white-space: nowrap; } .rse-tile-meta[b-8jb0ds0ypu] { font-size: 11px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .rse-tile-actions[b-8jb0ds0ypu] { display: inline-flex; gap: 4px; flex-shrink: 0; } .rse-badge[b-8jb0ds0ypu] { font-size: 10px; padding: 2px 7px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; } .rse-badge.top[b-8jb0ds0ypu] { background: var(--color-primary-soft); color: var(--color-primary); } .rse-badge.child[b-8jb0ds0ypu] { background: var(--color-bg-subtle); color: var(--color-text-muted); } .rse-add[b-8jb0ds0ypu] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* Bearbeiten-Overlay (JS-frei, komponenten-lokal). */ .rse-overlay[b-8jb0ds0ypu] { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); /* bewusst neutral-schwarz: Scrim, themenunabhängig */ display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .rse-modal[b-8jb0ds0ypu] { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card, 12px); width: min(92vw, 560px); max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); /* bewusst neutral-schwarz: Schatten, themenunabhängig */ } .rse-modal-head[b-8jb0ds0ypu] { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--color-border); } .rse-modal-head h3[b-8jb0ds0ypu] { margin: 0; font-size: 15px; } .rse-modal-body[b-8jb0ds0ypu] { padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 14px; } .rse-modal-foot[b-8jb0ds0ypu] { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--color-border); } .rse-field[b-8jb0ds0ypu] { display: flex; flex-direction: column; gap: 4px; } /* Schalterzeile einer Option des Rollen-Verweises (Portal-Sperre, genau eine Datei). */ .rse-input-option[b-8jb0ds0ypu] { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } /* /Components/Shared/Sparkline.razor.rz.scp.css */ .sparkline[b-2t07f2sptr] { display: block; width: 100%; height: 28px; margin-top: 8px; } .sparkline-line[b-2t07f2sptr] { fill: none; stroke: var(--spark-color, var(--color-primary)); stroke-width: 2; vector-effect: non-scaling-stroke; } .sparkline-dot[b-2t07f2sptr] { fill: var(--spark-color, var(--color-primary)); } /* /Components/Shared/TenantChoiceList.razor.rz.scp.css */ .tenant-choice-list[b-gigwa18so1] { display: flex; flex-direction: column; gap: 8px; } .tenant-choice-form[b-gigwa18so1] { margin: 0; } .tenant-choice[b-gigwa18so1] { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-input); background: var(--color-surface); text-align: left; } .tenant-choice-button[b-gigwa18so1] { justify-content: space-between; cursor: pointer; font: inherit; color: inherit; transition: border-color 0.15s ease, background-color 0.15s ease; } .tenant-choice-button:hover[b-gigwa18so1] { border-color: var(--color-primary); background: var(--color-surface-hover); } .tenant-choice-button:focus-visible[b-gigwa18so1] { outline: 2px solid var(--color-primary-ring); outline-offset: 2px; } .tenant-choice-text[b-gigwa18so1] { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tenant-choice-name[b-gigwa18so1] { font-size: 14px; font-weight: 600; color: var(--color-text-primary); } .tenant-choice-hint[b-gigwa18so1] { font-size: 11.5px; color: var(--color-text-muted); } /* Icon.razor rendert das svg als eigene Komponente — ohne ::deep greift die Scope-Regel nicht, siehe NavItem.razor.css .ds-nav-icon als Vorbild. */ [b-gigwa18so1] .tenant-choice-chevron { flex-shrink: 0; color: var(--color-text-muted); } /* Ankündigung der SSO-Weiterleitung (siehe TenantChoiceFormat.SsoHandoffHint) — eigene Farbe statt des neutralen Hint-Grau, damit der Klick nicht unangekündigt auf einer fremden Anmeldeseite endet. */ .tenant-choice-sso[b-gigwa18so1] { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: var(--color-primary); } html[data-theme="dark"] .tenant-choice-sso[b-gigwa18so1] { color: var(--color-primary-hover); } /* Gesperrter Eintrag: kein Knopf, sondern ein Grund. Gedämpfte Fläche statt reiner Transparenz, damit „gesperrt" auch sichtbar ist und nicht nur im Hint-Text steht. */ .tenant-choice-blocked[b-gigwa18so1] { background: var(--color-bg-subtle); border-style: dashed; } .tenant-choice-blocked .tenant-choice-name[b-gigwa18so1] { color: var(--color-text-muted); } [b-gigwa18so1] .tenant-choice-icon { flex-shrink: 0; color: var(--color-text-faint); } /* /Components/Shared/UploadDropzone.razor.rz.scp.css */ /* ─── Drag&Drop-Upload-Dropzone ─── */ .fe-dropzone[b-7l6v7fhtbt] { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 11px 16px; border: 1.5px dashed var(--color-border); border-radius: var(--radius-card, 12px); background: var(--color-bg-subtle); color: var(--color-text-secondary); font-size: 12.5px; cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } /* Während des Uploads liegt das Overlay (position:absolute) über der Dropzone und kann sie nicht höher machen — ohne Mindesthöhe ragen Fortschritts- und Tempo-Zeile unten aus dem gestrichelten Rahmen heraus. Nur im Upload-Zustand, damit die Dropzone im Ruhezustand kompakt bleibt. */ .fe-dropzone.is-uploading[b-7l6v7fhtbt] { min-height: 172px; } /* Schlanke Fassung (DropzoneStyle.Slim): dort IST die Dropzone die ganze Komponente und steht als eine von mehreren gleichrangigen Kacheln in einer Karte (Anlagen- und Dokument(e)-Karte der Einfach-Ansicht). Sie muss sich deshalb der Höhe der Nachbar-Kacheln annähern, statt sie zu überragen. Bei DropzoneStyle.Full bleibt die großzügige Fassung: da ist sie der Abschluss einer Dateiliste und hat den Platz. */ .fe-dropzone.is-compact[b-7l6v7fhtbt] { --ds-tile-badge-size: 24px; gap: 3px; padding: 8px 12px; } .fe-dropzone.is-compact .fe-dz-title[b-7l6v7fhtbt] { font-size: 12.5px; } .fe-dropzone.is-compact .fe-dz-hint[b-7l6v7fhtbt] { font-size: 10.5px; } /* Kachel-Fassung (DropzoneStyle.Tile): Geometrie und Plakettengröße kommen aus .ds-tile (app.css), damit die Dropzone und die beiden Schaltflächen daneben dieselbe Kachel sind. Hier bleibt nur, was diese Dropzone von einer Schaltflächen-Kachel unterscheidet — allen voran der gestrichelte Rahmen aus .fe-dropzone, der einzige bedeutungstragende Unterschied der drei Quellen. Zwei Klassen im Selektor, nicht eine: .ds-tile steht in app.css, .fe-dropzone im Scoped-Bundle — in welcher Reihenfolge der Browser die beiden Dateien anwendet, ist hier nicht garantiert. Der Kompound-Selektor gewinnt über die Spezifität und damit unabhängig davon. */ .fe-dropzone.is-tile[b-7l6v7fhtbt] { display: flex; gap: 4px; padding: 8px 10px; } .fe-dropzone.is-tile .fe-dz-title[b-7l6v7fhtbt] { font-size: 12.5px; line-height: 1.3; } .fe-dropzone:hover[b-7l6v7fhtbt] { border-color: var(--color-primary); background: var(--color-primary-soft); } .fe-dropzone.drag-over[b-7l6v7fhtbt] { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: 0 0 0 3px var(--color-primary-soft); } /* Icon-Badge oben — Aussehen und Größe kommen von .ds-tile-badge (app.css), damit die Plakette der Quellen-Kacheln in der Anlagen-Karte dieselbe ist. Hier bleibt nur, was an dieser Dropzone hängt: der Schwebe-Effekt und (weiter unten) pointer-events. */ .fe-dropzone:hover .fe-dz-badge[b-7l6v7fhtbt], .fe-dropzone.drag-over .fe-dz-badge[b-7l6v7fhtbt] { transform: translateY(-1px); } .fe-dz-title[b-7l6v7fhtbt] { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.3; } .fe-dz-link[b-7l6v7fhtbt] { color: var(--color-primary); font-weight: 600; } .fe-dropzone:hover .fe-dz-link[b-7l6v7fhtbt], .fe-dropzone.drag-over .fe-dz-link[b-7l6v7fhtbt] { text-decoration: underline; } .fe-dz-hint[b-7l6v7fhtbt] { font-size: 11px; color: var(--color-text-muted); } /* Fehler direkt an der Fläche, die ihn ausgelöst hat — dezenter Text statt Alert-Kasten, damit die Dropzone ihre Form behält. */ .fe-dz-error[b-7l6v7fhtbt] { font-size: 11.5px; line-height: 1.35; color: var(--color-danger); } /* Unsichtbarer Datei-Input über der gesamten Fläche: Browser routet sowohl Klick als auch Datei-Drop hierher; das Drag-Highlight steuert die umgebende Label-Fläche. ::deep, weileine Kind-Komponente ist und das CSS-Isolation-Attribut nicht auf deren gerendertes stempelt — ohne ::deep bliebe der native „Dateien auswählen"-Button sichtbar. z-index hebt das Input über die statisch positionierten Inhalts-Spans (Badge/Titel/Hinweis/ Fehler), die sonst — weil später im DOM — das Drop-Event abfangen und der Browser die Datei im Tab öffnet statt sie zu übernehmen. Die Spans schalten dafür pointer-events ab (s. u.). */ .fe-dropzone[b-7l6v7fhtbt] .fe-fileinput { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; } /* Inhalte rein dekorativ — sie dürfen Klick/Drop nicht abfangen, sonst landet der Drop nicht auf dem Input und der Browser öffnet die Datei in einem neuen Tab. */ .fe-dz-badge[b-7l6v7fhtbt], .fe-dz-title[b-7l6v7fhtbt], .fe-dz-hint[b-7l6v7fhtbt], .fe-dz-error[b-7l6v7fhtbt] { pointer-events: none; } /* ─── Upload-Fortschritt: Overlay über der Dropzone ─── */ .fe-upload-overlay[b-7l6v7fhtbt] { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: var(--radius-card, 12px); background: var(--color-bg-subtle); color: var(--color-text-secondary); } /* Upload-Symbol statt eines generischen Spinners: der Pfeil steigt aus der Ablage auf und verblasst, die Ablage bleibt ruhig stehen. Zeigt damit die Richtung des Vorgangs an — ein rotierender Ring sagt nur „irgendwas passiert". */ .fe-upload-icon[b-7l6v7fhtbt] { color: var(--color-primary); overflow: visible; /* der Pfeil wandert am oberen Rand aus der viewBox heraus */ } .fe-upload-icon .fe-upload-arrow[b-7l6v7fhtbt] { /* Ohne fill-box bezöge sich transform-origin auf das gesamte SVG-Koordinatensystem. */ transform-box: fill-box; transform-origin: center; animation: fe-upload-arrow-b-7l6v7fhtbt 1.5s ease-in-out infinite; } @keyframes fe-upload-arrow-b-7l6v7fhtbt { 0% { transform: translateY(2.5px); opacity: 0; } 30% { transform: translateY(0); opacity: 1; } 65% { transform: translateY(-1.5px); opacity: 1; } 100% { transform: translateY(-4px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .fe-upload-icon .fe-upload-arrow[b-7l6v7fhtbt] { animation: none; opacity: 1; } } .fe-upload-info[b-7l6v7fhtbt] { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; } .fe-upload-count[b-7l6v7fhtbt] { font-size: 11px; color: var(--color-text-muted); } .fe-upload-name[b-7l6v7fhtbt] { font-size: 12.5px; color: var(--color-text-primary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe-upload-bar[b-7l6v7fhtbt] { width: min(280px, 80%); height: 6px; border-radius: 3px; background: var(--color-border); /* primary-soft ist auf dem bg-subtle-Overlay unsichtbar */ overflow: hidden; } .fe-upload-bar-fill[b-7l6v7fhtbt] { height: 100%; background: var(--color-primary); border-radius: 3px; transition: width 0.15s linear; } /* Prozent der laufenden Datei plus Tempo/Restdauer des Gesamtvorgangs — eine Zeile, weil das Overlay die Dropzone nicht höher machen kann (position:absolute). tabular-nums, damit die Ziffern beim Hochzählen nicht springen; Umbruch erlaubt, damit lange Werte in schmalen Dropzonen innerhalb des Rahmens bleiben statt herauszuragen. */ .fe-upload-pct[b-7l6v7fhtbt] { font-size: 11px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; max-width: 100%; text-align: center; text-wrap: balance; }