/* ============================================================================
   Massen-Vertragsaenderungen: die Aktionen "Massen-Preisaenderung" und
   "Leistungen hinzufuegen/entfernen".

   Warum GLOBAL und nicht als scoped CSS neben der Komponente: der Wizard besteht
   aus mehreren Bauteilen (Wizard + Historienliste), und die CSS-Isolation von
   Blazor gilt immer nur fuer das Markup EINER Komponente - die Historie waere
   sonst unformatiert. Dasselbe Vorgehen wie bei styles/detail-layout.css.

   Der Aufbau ist absichtlich der des Massen-Uploads
   (Pages/Settings/Client/ManageMassUploadPage.razor.css): dieselbe Abfolge aus
   Kopf, Schrittleiste, Karten, Bannern und Knopfzeile, damit die neuen Aktionen
   wie ein Teil derselben Familie aussehen.

   Die Klassen heissen hier cc-* und nicht mu-*: dieselben Namen global gesetzt
   wuerden die scoped Regeln der beiden bestehenden Wizards ueberlagern und deren
   Aussehen mitverandern.
   ========================================================================= */

.cc-wizard {
    max-width: 1200px;
}

/* ---------- Header ---------- */
.cc-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.cc-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: var(--primary-light-color, #e8f5e9);
    color: var(--primary-dark-color, #1e7e3f);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.cc-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text, #212529);
    line-height: 1.2;
}

.cc-subtitle {
    font-size: 0.8125rem;
    color: var(--color-text-light, #6c757d);
    margin-top: 0.25rem;
}

/* ---------- Stepper ---------- */
.cc-stepper {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cc-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 0;
    min-width: 140px;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--default-border-radius, 0.5rem);
    background-color: var(--color-surface, #fff);
}

.cc-step-index {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: var(--color-border, #dee2e6);
    color: var(--color-text-light, #6c757d);
    flex: 0 0 auto;
}

.cc-step-label {
    font-size: 0.8125rem;
    color: var(--color-text-light, #6c757d);
    line-height: 1.2;
}

.cc-step.is-active {
    border-color: var(--primary-background-color, #1e7e3f);
    box-shadow: 0 0 0 1px var(--primary-background-color, #1e7e3f) inset;
}

.cc-step.is-active .cc-step-index {
    background-color: var(--primary-background-color, #1e7e3f);
    color: var(--primary-font-color, #fff);
}

.cc-step.is-active .cc-step-label {
    color: var(--color-text, #212529);
    font-weight: 600;
}

.cc-step.is-done .cc-step-index {
    background-color: var(--primary-light-color, #e8f5e9);
    color: var(--primary-dark-color, #1e7e3f);
}

/* ---------- Cards ---------- */
.cc-card {
    background-color: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--default-border-radius, 0.5rem);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
    overflow: hidden;
}

.cc-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #dee2e6);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text, #212529);
}

.cc-card-header i {
    color: var(--primary-dark-color, #1e7e3f);
}

.cc-card-body {
    padding: 1.25rem;
}

.cc-hint {
    font-size: 0.8125rem;
    color: var(--color-text-light, #6c757d);
    margin: 0 0 0.75rem;
}

.cc-hint-example {
    margin-top: 1rem;
}

/* ---------- Format definition ---------- */
.cc-def-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

.cc-def-table th,
.cc-def-table td {
    border: 1px solid var(--color-border, #dee2e6);
    padding: 0.5rem 0.625rem;
    text-align: left;
    vertical-align: top;
}

.cc-def-table th {
    background-color: var(--primary-light-color, #e8f5e9);
    color: var(--color-text, #212529);
    font-weight: 600;
    white-space: nowrap;
}

.cc-def-table td {
    color: var(--color-text-light, #6c757d);
}

.cc-categories {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.cc-categories-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text, #212529);
}

.cc-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background-color: var(--primary-light-color, #e8f5e9);
    color: var(--primary-dark-color, #1e7e3f);
    font-size: 0.75rem;
    font-weight: 500;
}

.cc-example {
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: 6px;
    padding: 0.75rem;
    font-size: 0.75rem;
    color: var(--color-text, #212529);
    overflow-x: auto;
    margin: 0 0 1rem;
    white-space: pre;
}

.cc-download {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary-link-color, #1e7e3f);
    text-decoration: none;
}

.cc-download:hover {
    text-decoration: underline;
}

/* ---------- Summary / banners ---------- */
.cc-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1rem;
    font-size: 0.875rem;
}

.cc-summary-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text, #212529);
}

.cc-summary-item.cc-ok { color: var(--primary-dark-color, #1e7e3f); }
.cc-summary-item.cc-err { color: #c0392b; }

.cc-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1rem;

    /* Auch nach unten: unter einem Hinweis folgen Felder, und ohne Abstand
       liest sich der Hinweis wie die Beschriftung des naechsten Feldes. */
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--default-border-radius, 0.5rem);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.cc-card-body > .cc-banner:last-child {
    margin-bottom: 0;
}

.cc-banner i { margin-top: 0.1rem; }

.cc-banner-error {
    background-color: #fdecea;
    color: #c0392b;
    border: 1px solid #f5c6cb;
}

.cc-banner-warn {
    background-color: #fff8e1;
    color: #8a6d3b;
    border: 1px solid #faebcc;
}

.cc-banner-ok {
    background-color: var(--primary-light-color, #e8f5e9);
    color: var(--primary-dark-color, #1e7e3f);
    border: 1px solid var(--primary-light-color, #cfe8d6);
}

.cc-missing-path {
    font-family: monospace;
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

/* ---------- Preview table ---------- */
.cc-table-wrap {
    max-height: 460px;
    overflow: auto;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--default-border-radius, 0.5rem);
    margin-bottom: 1rem;
}

.cc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.cc-table thead th {
    position: sticky;
    top: 0;
    background-color: var(--color-surface, #fff);
    border-bottom: 2px solid var(--color-border, #dee2e6);
    padding: 0.55rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text, #212529);
    white-space: nowrap;
    z-index: 1;
}

.cc-table tbody td {
    border-bottom: 1px solid var(--color-border, #eee);
    padding: 0.5rem 0.75rem;
    color: var(--color-text, #212529);
    vertical-align: top;
}

.cc-table tbody tr.cc-row-error {
    background-color: #fdecea;
}

.cc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    margin: 0.1rem 0.2rem 0.1rem 0;
}

.cc-badge-ok {
    background-color: var(--primary-light-color, #e8f5e9);
    color: var(--primary-dark-color, #1e7e3f);
}

.cc-badge-err {
    background-color: #fdecea;
    color: #c0392b;
}

.cc-badge-warn {
    background-color: #fff8e1;
    color: #7a5900;
}

.cc-invoicedata {
    font-size: 0.75rem;
    color: var(--color-text, #212529);
    white-space: nowrap;
}

.cc-muted {
    color: var(--color-text-light, #6c757d);
}

/* ---------- Phases + progress ---------- */
.cc-phases {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cc-phases li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--color-text-light, #6c757d);
}

.cc-phases li.is-done { color: var(--primary-dark-color, #1e7e3f); }
.cc-phases li.is-active { color: var(--color-text, #212529); font-weight: 600; }
.cc-phases li.is-done i { color: var(--primary-dark-color, #1e7e3f); }
.cc-phases li.is-active i { color: var(--primary-background-color, #1e7e3f); }

.cc-progress {
    width: 100%;
    height: 12px;
    background-color: var(--color-border, #e9ecef);
    border-radius: 999px;
    overflow: hidden;
}

.cc-progress-bar {
    height: 100%;
    background-color: var(--primary-background-color, #1e7e3f);
    border-radius: 999px;
    transition: width 0.2s ease;
}

.cc-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-light, #6c757d);
}

.cc-progress-file {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: monospace;
}

/* ---------- Done ---------- */
.cc-done {
    text-align: center;
    padding: 2rem 1.25rem;
}

.cc-done-icon {
    font-size: 2.75rem;
    color: var(--primary-dark-color, #1e7e3f);
    margin-bottom: 0.5rem;
}

.cc-done-icon.has-errors { color: #e0a800; }

.cc-done-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text, #212529);
    margin-bottom: 0.5rem;
}

.cc-done .cc-summary { justify-content: center; }

/* ---------- Actions ---------- */
.cc-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;

    /* Abstand nach unten: im ersten Schritt folgt direkt die Historie, sonst die
       Meldungsleiste - beide sollen nicht am Knopf kleben. */
    margin-bottom: 1.75rem;
}

/* Knopfzeile INNERHALB einer Karte (z. B. "Betroffene Verträge ermitteln"). */
.cc-actions-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem;
    border-radius: var(--default-border-radius, 0.5rem);
    border: 1px solid var(--color-border, #ced4da);
    background-color: var(--color-surface, #fff);
    color: var(--color-text, #212529);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.cc-btn:hover:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.03);
}

.cc-btn-primary {
    background-color: var(--primary-background-color, #1e7e3f);
    border-color: var(--primary-border-color, #1e7e3f);
    color: var(--primary-font-color, #fff);
}

.cc-btn-primary:hover:not(:disabled) {
    background-color: var(--primary-background-color-hover, #196b35);
    border-color: var(--primary-border-color-hover, #196b35);
    color: var(--primary-font-color-hover, #fff);
}

.cc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- No access ---------- */
.cc-noaccess {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem;
    color: var(--color-text-light, #6c757d);
    font-size: 0.875rem;
}

/* ---------- Auswahl der Leistungen ---------- */
.cc-filterbar {
    max-width: 380px;
    margin-bottom: 0.875rem;
}

.cc-select-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--default-border-radius, 0.5rem);
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
}

.cc-select-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.875rem;
    border-bottom: 1px solid var(--color-border, #eee);
    cursor: pointer;
    margin: 0;
}

.cc-select-row:last-child {
    border-bottom: none;
}

.cc-select-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Ausgewaehlt wird ueber einen leichten Grauton und einen Balken in der
   Primaerfarbe markiert - NICHT ueber eine flaechige Primaerfarbe: die ist je
   Mandant frei waehlbar, und auf einem dunklen Ton verschwindet die dunkle
   Schrift darauf. Der Balken traegt die Farbe, der Text bleibt lesbar. */
.cc-select-row.is-selected {
    background-color: rgba(0, 0, 0, 0.035);
    box-shadow: inset 3px 0 0 var(--primary-background-color, #1e7e3f);
}

.cc-select-row.is-selected .cc-select-title {
    font-weight: 600;
}

.cc-select-main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.cc-select-title {
    font-size: 0.875rem;
    color: var(--color-text, #212529);
}

.cc-select-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

/* ---------- Umschalter hinzufuegen / entfernen ---------- */
.cc-mode-switch {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cc-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border: 1px solid var(--color-border, #ced4da);
    border-radius: var(--default-border-radius, 0.5rem);
    background-color: var(--color-surface, #fff);
    color: var(--color-text, #212529);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.cc-mode-btn:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.cc-mode-btn.is-active {
    background-color: var(--primary-background-color, #1e7e3f);
    border-color: var(--primary-border-color, #1e7e3f);
    color: var(--primary-font-color, #fff);
}

/* ---------- Felder und Filterraster ---------- */
.cc-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.cc-field > label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text, #212529);
}

.cc-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 1rem;
}

.cc-inline-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
}

.cc-inline-fields .cc-field {
    min-width: 200px;
}

.cc-toggle-row {
    margin-bottom: 0.75rem;
}

.cc-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

/* ---------- Preismatrix ---------- */
.cc-matrix td:first-child {
    width: 55%;
}

.cc-num {
    text-align: right;
    white-space: nowrap;
}

.cc-table tbody tr.cc-row-skip td {
    color: var(--color-text-light, #6c757d);
}

/* ---------- Zusammenfassung ---------- */
.cc-summary-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    margin-bottom: 0.2rem;
}

.cc-summary-cell i {
    color: var(--color-text-light, #6c757d);
    font-size: 0.7rem;
}

.cc-price-old {
    color: var(--color-text-light, #6c757d);
    text-decoration: line-through;
}

.cc-price-new {
    font-weight: 600;
    color: var(--primary-dark-color, #1e7e3f);
}

.cc-summary-block {
    margin-top: 1rem;
}

.cc-summary-block-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text, #212529);
    margin-bottom: 0.2rem;
}

/* ---------- Historie ---------- */
.cc-actions-col {
    width: 1%;
    white-space: nowrap;
}

.cc-linkbtn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-link-color, #1e7e3f);
    cursor: pointer;
    text-align: left;
}

.cc-linkbtn:hover {
    text-decoration: underline;
}

.cc-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-border, #ced4da);
    border-radius: var(--default-border-radius, 0.5rem);
    background-color: var(--color-surface, #fff);
    color: var(--color-text, #212529);
    cursor: pointer;
}

.cc-iconbtn:hover:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.03);
}

.cc-iconbtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cc-iconbtn.is-danger {
    border-color: #c0392b;
    color: #c0392b;
}

/* Die aufgeklappte Zeile ist der Kopf der Detailansicht darunter und wird
   deshalb markiert - aber wie die ausgewaehlte Leistung: heller Grauton plus
   Balken in der Primaerfarbe. Eine flaechige Primaerfarbe verschluckt die
   dunkle Schrift, sobald der Mandant einen kraeftigen Ton gewaehlt hat, und
   genau das war hier der Fall. */
.cc-table tbody tr.cc-row-open > td {
    background-color: rgba(0, 0, 0, 0.035);
    border-bottom-color: transparent;
}

.cc-table tbody tr.cc-row-open > td:first-child {
    box-shadow: inset 3px 0 0 var(--primary-background-color, #1e7e3f);
}

.cc-table tbody tr.cc-row-open .cc-linkbtn {
    font-weight: 700;
}

.cc-detail {
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--default-border-radius, 0.5rem);
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
    background-color: rgba(0, 0, 0, 0.015);
}

.cc-detail-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text, #212529);
    margin-bottom: 0.5rem;
}

.cc-detail-head i {
    color: var(--primary-dark-color, #1e7e3f);
}

/* ---------- Ausstehende Aenderung (Hinweis an Leistung, Vorlage, Vertrag) ---------- */
.cc-pending {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--default-border-radius, 0.5rem);
    background-color: #fff8e1;
    border: 1px solid #faebcc;
    color: #8a6d3b;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.cc-pending i {
    margin-top: 0.1rem;
}

.cc-pending-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cc-pending-title {
    font-weight: 600;
}

/* ---------- Wartehinweis ---------- */
/* Der Kreisel sitzt IM Knopf: die Ermittlung der betroffenen Vertraege und das
   Einplanen dauern je nach Vertragsmenge spuerbar, und ein Knopf, der einfach
   nichts tut, sieht kaputt aus. Zusaetzlich laeuft der globale Ladebalken der
   Anwendung (SessionService.ChangeBusyIndicatorState). */
.cc-spin {
    animation: cc-spin 0.9s linear infinite;
}

@keyframes cc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.cc-btn-danger {
    border-color: #c0392b;
    color: #c0392b;
}

.cc-btn-danger:hover:not(:disabled) {
    background-color: #fdecea;
}

/* ---------- Ankuendigungen im Lauf-Detail ---------- */
.cc-announcements {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border, #dee2e6);
    border-radius: var(--default-border-radius, 0.5rem);
    background-color: var(--color-surface, #fff);
}

.cc-announcement-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.cc-announcement-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cc-detail-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text, #212529);
    margin-right: 0.25rem;
}

/* ---------- Abstaende ----------
   Nachgezogen, weil im ersten Entwurf mehrere Bloecke direkt aneinander stiessen:
   Karten an Knopfzeilen, Tabellen an Hinweisen, Felder an Bannern. */
.cc-summary {
    margin-bottom: 0.75rem;
}

.cc-select-list {
    margin-bottom: 0.25rem;
}

.cc-card-body > .cc-hint:last-child,
.cc-card-body > .cc-field:last-child,
.cc-card-body > .cc-table-wrap:last-child,
.cc-card-body > .cc-summary:last-child {
    margin-bottom: 0;
}

.cc-detail > .cc-summary:first-of-type {
    margin-top: 0;
}

.cc-detail .cc-table-wrap:last-child,
.cc-detail .cc-hint:last-child {
    margin-bottom: 0;
}

/* Der Rumpfeditor und die Platzhalterleiste gehoeren zusammen, danach folgt
   wieder ein eigener Block. */
.cc-field + .cc-field {
    margin-top: 0.25rem;
}

/* ---------- Knopfzeile im Filter ----------
   Wie im Kommunikationsdialog (.mcd-filter-actions): der Filter wird oben
   festgelegt und dort auch angewendet - nicht unten bei der Auswertung. */
.cc-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border, #dee2e6);
}

.cc-filter-actions-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: #8a6d3b;
}

.cc-error-detail {
    margin-top: 0.25rem;
    font-family: monospace;
    font-size: 0.75rem;
    word-break: break-word;
}

/* Der Name des Laufs im Warnhinweis - leise hinter dem Satz, nicht in Klammern
   mitten hinein. */
.cc-pending-run {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.06);
    font-size: 0.7rem;
}