/* =========================================================================
   Seiten-CSS: Anrufe – Anrufliste (calls/index.ejs) und Anruf-Detail (calls/detail.ejs)
   Nur seitenspezifische Ergänzungen. Zuerst das Vokabular aus DESIGN.md
   verwenden (Komponenten, .stack/.cluster/.grid). Ausschließlich Tokens
   (var(--…)) verwenden, keine Hex-Werte, keine Redefinition von Basis-
   Klassen (.btn, .card, .table, .badge, .muted, .pagination …).
   Selektoren mit einer Seitenklasse präfixen: .page-calls (Liste),
   .page-call (Detail).
   ========================================================================= */

/* ======================================================================
   Anrufliste – Zeitraum, Filter
   .calls-controls > nav.segmented + Filter-Schalter (nur mobil) +
   Zeitraum-Hinweis + form.filter-bar.calls-filter
   ====================================================================== */
.page-calls .calls-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.page-calls .calls-presets {
    flex: 0 1 auto;
    min-width: 0;
}

.page-calls .calls-filter {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
}

.page-calls .calls-filter .filter-field {
    min-width: 0;
}

.page-calls .calls-filter :where(input, select) {
    width: 100%;
    min-width: 0;
}

.page-calls .calls-filter .filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-left: 0;
}

@container (min-width: 640px) {
    .page-calls .calls-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Tablet/Desktop: zwei Zeilen (Von, Bis, Status, Bereich | E-Mail, KI-Bewertung,
   Rufnummer, Aktionen) */
@container (min-width: 720px) {
    .page-calls .calls-filter {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .page-calls .calls-filter .filter-actions {
        grid-column: 4 / -1;
    }
}

/* Sehr breite Ansicht: alle Filter in einer Zeile, Rufnummer elastisch,
   Aktionen rechtsbündig */
@container (min-width: 1200px) {
    .page-calls .calls-filter {
        grid-template-columns:
            minmax(124px, 152px) minmax(124px, 152px)
            minmax(140px, 220px) minmax(116px, 190px) minmax(116px, 180px)
            minmax(130px, 180px) minmax(160px, 1fr) auto;
    }

    .page-calls .calls-filter .filter-actions {
        grid-column: -2 / -1;
    }
}

/* Filter-Schalter: nur mobil (< 768 px). Die Checkbox steht vor dem Formular,
   damit das Formular ohne JS ein-/ausgeklappt werden kann. */
.page-calls .calls-filter-btn {
    gap: 6px;
}

.page-calls .calls-filter-count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}

.page-calls .calls-filter-chevron {
    margin-right: -2px;
    color: var(--color-text-tertiary);
    transition: transform var(--duration) var(--ease-standard);
}

@media (min-width: 768px) {
    .page-calls .calls-filter-toggle,
    .page-calls .calls-filter-btn {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .page-calls .calls-controls {
        gap: 10px 12px;
    }

    /* Zeitraum-Vorgaben: eine Zeile, seitlich scrollbar, mit weichem Rand
       rechts (js/app.js scrollt den aktiven Eintrag in die Mitte) */
    .page-calls .calls-presets {
        flex-basis: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    }

    /* js/app.js setzt data-fade je nach Scrollposition (ohne JS: rechts) */
    .page-calls .calls-presets[data-fade='none'] {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .page-calls .calls-presets[data-fade='left'] {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px);
        mask-image: linear-gradient(90deg, transparent, #000 32px);
    }

    .page-calls .calls-presets[data-fade='both'] {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    }

    .page-calls .calls-presets .segmented-item {
        padding: 0 12px;
    }

    .page-calls .calls-filter-btn {
        cursor: pointer;
    }

    .page-calls .calls-filter-toggle:focus-visible + .calls-filter-btn {
        outline: 2px solid var(--color-focus);
        outline-offset: 2px;
    }

    .page-calls .calls-filter-toggle:checked + .calls-filter-btn {
        border-color: var(--navy-300);
        background: var(--color-primary-soft);
    }

    .page-calls .calls-filter-toggle:checked + .calls-filter-btn .calls-filter-chevron {
        transform: rotate(180deg);
    }

    .page-calls .calls-filter-toggle:not(:checked) ~ .calls-filter {
        display: none;
    }
}

/* ======================================================================
   Anrufliste – Kennzahlen
   ====================================================================== */
/* Kennzahlen-Raster: mobil 2 Spalten (Komponente), mittlere Breiten 3 + 2
   Kacheln, ab 880 px Inhaltsbreite (Laptop ab 1280 px) alle fünf in einer
   Reihe; Beschriftungen brechen dann zweizeilig an Leerzeichen um */
@container (min-width: 640px) {
    .page-calls .calls-stats {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .page-calls .calls-stats > * {
        grid-column: span 2;
    }

    .page-calls .calls-stats > :nth-child(n + 4) {
        grid-column: span 3;
    }
}

@container (min-width: 880px) {
    .page-calls .calls-stats {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .page-calls .calls-stats > *,
    .page-calls .calls-stats > :nth-child(n + 4) {
        grid-column: auto;
    }
}

.page-calls .calls-stats .stat-label {
    white-space: normal;
    -webkit-hyphens: manual;
    hyphens: manual;
    line-height: 1.35;
}

/* Fünf schmale Kacheln (880–1059 px Inhaltsbreite): ohne Icon, damit die
   Beschriftung („Weiterleitungsquote“) ganz sichtbar bleibt */
@container (min-width: 880px) and (max-width: 1059.98px) {
    .page-calls .calls-stats .stat-icon {
        display: none;
    }
}

@media (max-width: 639.98px) {
    /* fünf Kacheln im 2er-Raster: die Quote über die volle Breite */
    .page-calls .calls-stats > :last-child {
        grid-column: 1 / -1;
    }
}

/* ======================================================================
   Anrufliste – Kopf der Tabelle mit aktiven Filtern
   ====================================================================== */
.page-calls .calls-list-head .section-title {
    margin-right: 2px;
}

.page-calls .calls-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    height: 24px;
    padding: 0 6px 0 10px;
    border-radius: var(--radius-full);
    background: var(--brand-bg);
    box-shadow: inset 0 0 0 1px var(--brand-border);
    color: var(--brand-fg);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.page-calls .calls-chip:hover {
    background: var(--navy-100);
    box-shadow: inset 0 0 0 1px var(--navy-200);
    color: var(--brand-text);
}

.page-calls .calls-chip-name {
    font-weight: var(--weight-regular);
    color: var(--color-text-secondary);
}

.page-calls .calls-chip .icon {
    margin-left: 1px;
    opacity: 0.7;
}

/* ======================================================================
   Anrufliste – Tabelle
   Desktop (≥ 768 px): kompakte Zeilen; schmale Spalten schrumpfen auf ihren
   Inhalt (width: 1 %), die Zusammenfassung nimmt den Rest. Die ganze Zeile
   ist anklickbar: der Detail-Link (Pfeil in der letzten Spalte) legt eine
   unsichtbare Fläche (::after) über die Zeile.
   Spalten je Breite:
     ≥ 1600 px   Datum · Anrufer · Zusammenfassung · Dauer · Bereich · Status · E-Mail
     1280–1599   ohne E-Mail (.col-from-2xl; Mail-Status in der Detailansicht)
     768–1279    ohne Bereich (.col-from-xl), Datum zweizeilig
   Mobil (< 768 px): kompakte Karten (siehe unten).
   ====================================================================== */
.page-calls .calls-table tbody tr {
    position: relative;
}

.page-calls .calls-table .calls-col-date .cell-sub {
    font-variant-numeric: tabular-nums;
}

.page-calls .calls-table .calls-col-summary {
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.page-calls .calls-table .calls-col-summary .cell-sub {
    margin-top: 2px;
}

/* Detail-Link: deckt die ganze Zeile ab (Fokusrahmen bleibt am Pfeil) */
.page-calls .calls-open::after {
    content: '';
    position: absolute;
    inset: 0;
}

.page-calls .calls-open-icon {
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .page-calls .calls-table th,
    .page-calls .calls-table td {
        padding-right: 10px;
        padding-left: 10px;
    }

    .page-calls .calls-table td {
        padding-block: 10px;
    }

    .page-calls .calls-table th:first-child,
    .page-calls .calls-table td:first-child {
        padding-left: 20px;
    }

    .page-calls .calls-table th:last-child,
    .page-calls .calls-table td:last-child {
        padding-right: 12px;
        padding-left: 0;
    }

    /* Dauer (rechtsbündig) nicht an den linksbündigen Bereich kleben */
    .page-calls .calls-table .calls-col-duration {
        padding-right: 24px;
    }

    .page-calls .calls-table .calls-col-date,
    .page-calls .calls-table .calls-col-caller,
    .page-calls .calls-table .calls-col-duration,
    .page-calls .calls-table .calls-col-dept,
    .page-calls .calls-table .calls-col-status,
    .page-calls .calls-table .calls-col-mail {
        width: 1%;
    }

    .page-calls .calls-table .calls-col-summary {
        min-width: 200px;
    }

    .page-calls .calls-table .calls-col-mail {
        white-space: nowrap;
    }

    /* Detail-Link als ruhiger Pfeil; „Details“ bleibt für Screenreader */
    .page-calls .calls-open {
        width: var(--control-h-sm);
        padding: 0;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

    .page-calls .calls-open .icon {
        width: 18px;
        height: 18px;
        margin: 0;
        color: var(--gray-400);
    }

    .page-calls .calls-open-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .page-calls .calls-table tbody tr:hover .calls-open {
        background: var(--gray-100);
    }

    .page-calls .calls-table tbody tr:hover .calls-open .icon {
        color: var(--gray-700);
    }

    .page-calls .calls-table tbody tr:hover .calls-col-summary .cell-title {
        color: var(--color-link);
    }
}

/* Status: lange Texte („Aufgelegt während Begrüßung“) dürfen umbrechen,
   kurze bleiben einzeilig */
@media (min-width: 768px) and (max-width: 1439.98px) {
    .page-calls .calls-table .calls-col-status {
        min-width: 158px;
    }

    .page-calls .calls-table .calls-col-status .badge {
        height: auto;
        min-height: 22px;
        padding-block: 3px;
        line-height: 1.25;
        white-space: normal;
    }
}

@media (min-width: 1440px) {
    .page-calls .calls-table .calls-col-dept,
    .page-calls .calls-table .calls-col-status {
        white-space: nowrap;
    }
}

/* Sehr breit (≥ 1600 px): Bereich, Status und E-Mail teilen sich den
   zusätzlichen Platz mit der Zusammenfassung (statt einer großen Lücke) */
@media (min-width: 1600px) {
    .page-calls .calls-table .calls-col-dept,
    .page-calls .calls-table .calls-col-status,
    .page-calls .calls-table .calls-col-mail {
        width: auto;
    }

    .page-calls .calls-table .calls-col-summary {
        width: 34%;
    }
}

/* Ab 1280 px: Datum und Uhrzeit in einer Zeile („16.10.2026  13:45“) */
@media (min-width: 1280px) {
    .page-calls .calls-table .calls-col-date .cell-sub {
        display: inline;
        margin: 0 0 0 8px;
        font-size: inherit;
    }

    .page-calls .calls-table .calls-time-unit {
        display: none;
    }

    .page-calls .calls-table .calls-col-summary {
        min-width: 240px;
    }
}

/* Mittlere Breiten: etwas engere Spalten */
@media (min-width: 768px) and (max-width: 1279.98px) {
    .page-calls .calls-table .calls-col-duration {
        padding-right: 16px;
    }

    .page-calls .calls-table .calls-col-summary {
        min-width: 180px;
    }
}

/* Mobil (< 768 px): kompakte Anruf-Karte statt des allgemeinen 2-Spalten-
   Rasters – Anrufer + Zeitpunkt, Zusammenfassung, Status-Pills, Dauer/Bereich
   und „Details“ in einer Zeile. Der Zeilenumbruch nach den Pills entsteht
   durch tr::after (order 6). Die ganze Karte ist anklickbar. */
@media (max-width: 767.98px) {
    .page-calls .calls-table tr:not(.table-empty) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
    }

    .page-calls .calls-table tr:not(.table-empty):hover {
        border-color: var(--gray-300);
        box-shadow: var(--shadow-sm);
    }

    .page-calls .calls-table tr:not(.table-empty)::after {
        content: '';
        order: 6;
        flex-basis: 100%;
        height: 0;
    }

    .page-calls .calls-table td.calls-col-caller,
    .page-calls .calls-table td.calls-col-date,
    .page-calls .calls-table td.calls-col-status,
    .page-calls .calls-table td.calls-col-mail {
        flex: 0 0 auto;
    }

    .page-calls .calls-table td.calls-col-caller::before,
    .page-calls .calls-table td.calls-col-date::before,
    .page-calls .calls-table td.calls-col-status::before,
    .page-calls .calls-table td.calls-col-mail::before {
        content: none;
    }

    .page-calls .calls-table td.calls-col-caller {
        order: 1;
        flex: 1 1 auto;
        font-size: var(--text-md);
        font-weight: var(--weight-semibold);
    }

    .page-calls .calls-table td.calls-col-date {
        order: 2;
        font-size: 12.5px;
        color: var(--color-text-tertiary);
        text-align: right;
    }

    .page-calls .calls-table .calls-col-date .cell-sub {
        display: inline;
        margin: 0;
        font-size: inherit;
    }

    .page-calls .calls-table .calls-col-date .cell-sub::before {
        content: ', ';
    }

    .page-calls .calls-table td.calls-col-summary {
        order: 3;
        flex: 1 1 100%;
        margin-top: -2px;
    }

    /* ohne Zusammenfassung keine leere „–“-Zeile */
    .page-calls .calls-table td.calls-col-summary.is-empty {
        display: none;
    }

    .page-calls .calls-table td.calls-col-status { order: 4; }
    .page-calls .calls-table td.calls-col-mail { order: 5; }

    .page-calls .calls-table td.calls-col-duration,
    .page-calls .calls-table td.calls-col-dept {
        flex: 0 1 auto;
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
    }

    .page-calls .calls-table td.calls-col-duration { order: 7; }
    .page-calls .calls-table td.calls-col-dept { order: 8; }

    .page-calls .calls-table td.calls-col-duration::before,
    .page-calls .calls-table td.calls-col-dept::before {
        display: inline;
        margin: 0 4px 0 0;
        font-size: inherit;
    }

    /* (tbody tr …: schlägt die Trennlinie aus .table-stack, auch in der letzten Karte) */
    .page-calls .calls-table tbody tr:not(.table-empty) td.col-actions {
        order: 9;
        margin-left: auto;
        padding-top: 0;
        border-top: 0;
    }

    .page-calls .calls-open {
        gap: 4px;
        padding-right: 8px;
    }
}

/* ======================================================================
   Anruf-Detail – Layout
   Desktop: Hauptspalte (Zusammenfassung, Transkript, Bewertung) + Seiten-
   spalte (Anrufdaten, Aufnahme, E-Mail). Schmal: eine Spalte in sinnvoller
   Reihenfolge (Daten vor dem langen Transkript).
   ====================================================================== */
.page-call .call-col {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap);
    min-width: 0;
}

@container (min-width: 1080px) {
    .page-call .call-layout {
        grid-template-columns: minmax(0, 1fr) minmax(400px, 440px);
    }
}

/* Einspaltig: Zusammenfassung, Aufnahme und Transkript zuerst (das, was man
   liest/hört), danach die Anrufdaten – Zeitpunkt, Dauer und Bereich stehen
   ohnehin in der Kopfleiste */
@container (max-width: 979.98px) {
    .page-call .call-col {
        display: contents;
    }

    .page-call .call-card-summary { order: 1; }
    .page-call .call-card-audio { order: 2; }
    .page-call .call-card-transcript { order: 3; }
    .page-call .call-card-meta { order: 4; }
    .page-call .call-card-mail { order: 5; }
    .page-call .call-card-evaluation { order: 6; }
}

/* Kopfleiste: Rufnummer als Titel mit tabellarischen Ziffern (Umbruch/kein
   Abschneiden regelt .topbar in layout.css) */
.page-call .topbar-title {
    font-variant-numeric: tabular-nums;
}

.page-call .call-mail-pill .icon {
    width: 14px;
    height: 14px;
}

/* ======================================================================
   Anruf-Detail – Zusammenfassung
   ====================================================================== */
.page-call .call-summary-heading {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

.page-call .call-summary-heading + .call-summary-text {
    margin-top: 6px;
}

.page-call .call-summary-text {
    max-width: 80ch;
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.page-call .call-handover {
    max-width: 80ch;
    padding: 12px 14px;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    background: var(--brand-bg);
    color: var(--brand-text);
    line-height: var(--leading-normal);
}

.page-call .call-handover-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--brand-fg);
}

/* ======================================================================
   Anruf-Detail – Beschreibungslisten in der Seitenspalte (.dl, .dl-stacked)
   ====================================================================== */
/* Beschriftungsspalte so schmal wie die längste Beschriftung („Weiterleitungs-
   ziel“), damit die Werte Platz haben; auch mobil zweispaltig (kürzer) */
.page-call .call-card-meta .dl,
.page-call .call-card-mail .dl {
    grid-template-columns: minmax(96px, 140px) minmax(0, 1fr);
}

@media (max-width: 639.98px) {
    .page-call .call-card-meta .dl,
    .page-call .call-card-mail .dl {
        grid-template-columns: minmax(88px, 138px) minmax(0, 1fr);
    }

    .page-call .call-card-meta .dl > dt,
    .page-call .call-card-mail .dl > dt {
        padding-right: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--color-border-subtle);
    }

    .page-call .call-card-meta .dl > dd,
    .page-call .call-card-mail .dl > dd {
        padding-top: 10px;
    }

    .page-call .call-card-meta .dl > dt:first-of-type,
    .page-call .call-card-meta .dl > dt:first-of-type + dd,
    .page-call .call-card-mail .dl > dt:first-of-type,
    .page-call .call-card-mail .dl > dt:first-of-type + dd {
        padding-top: 0;
    }

    .page-call .call-card-meta .dl > dt:last-of-type,
    .page-call .call-card-mail .dl > dt:last-of-type {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .page-call .call-card-meta .dl > dt.dl-stacked {
        padding-bottom: 4px;
        border-bottom: 0;
    }

    .page-call .call-card-meta .dl > dd.dl-stacked {
        padding-top: 0;
    }
}

.page-call .call-status {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.page-call .call-status::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neutral-solid);
    transform: translateY(-1px);
}

.page-call .call-status-success::before { background: var(--success-solid); }
.page-call .call-status-warning::before { background: var(--warning-solid); }
.page-call .call-status-failure::before,
.page-call .call-status-danger::before,
.page-call .call-status-error::before { background: var(--danger-solid); }
.page-call .call-status-info::before { background: var(--info-solid); }

.page-call .call-status + .call-dd-sub {
    padding-left: 16px;
}

.page-call .call-dd-sub {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: var(--leading-snug);
    color: var(--color-text-tertiary);
}

.page-call .call-id {
    display: inline-block;
    max-width: 100%;
    padding: 2px 6px;
    font-size: var(--text-xs);
    line-height: 1.5;
    word-break: break-all;
    cursor: text;
    -webkit-user-select: all;
    user-select: all;
}

.page-call .call-recipients {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-call .call-recipients > li {
    overflow-wrap: anywhere;
}

.page-call .call-recipients > li + li {
    margin-top: 2px;
}

/* ======================================================================
   Anruf-Detail – Zustände, Hinweise, Fehler
   ====================================================================== */
.page-call .call-note-label {
    margin-bottom: 2px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-tertiary);
}

.page-call .call-error-text {
    padding: 8px 10px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-md);
    background: var(--danger-bg);
    color: var(--danger-text);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    white-space: pre-wrap;
}

.page-call .call-mail-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}


/* ======================================================================
   Anruf-Detail – Transkript: Systemereignisse (Weiterleitung, Ende)
   ====================================================================== */
.page-call .msg-system {
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.page-call .msg-system .msg-bubble {
    max-width: 100%;
}

.page-call .call-event-note {
    max-width: min(640px, 100%);
    padding: 8px 12px;
    border: 1px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
    font-size: 12.5px;
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.page-call .call-event-note-label {
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

/* ======================================================================
   Anruf-Detail – Bewertungskriterien
   ====================================================================== */
.page-call .call-criteria > li {
    display: block;
}

.page-call .call-criterion-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-call .call-criterion-result {
    justify-content: center;
    min-width: 36px;
}

.page-call .call-criterion-rationale {
    max-width: 80ch;
    margin-top: 6px;
    padding-left: 46px;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
}

@media (max-width: 639.98px) {
    .page-call .call-criterion-rationale {
        padding-left: 0;
    }
}

/* --- KI-Bewertung (call_successful) – zweite Kennzahlen-Reihe und Hinweis je Anruf ------- */
/* Handy: zwei Kacheln je Zeile wie die erste Reihe (Standard von .stats); ab Tablet vier */
@media (min-width: 768px) {
    .page-calls .calls-stats-ki {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.page-calls .calls-ki {
    white-space: nowrap;
}

.page-calls .calls-ki-success { color: var(--success-fg); }
.page-calls .calls-ki-danger { color: var(--danger-fg); }
.page-calls .calls-ki-neutral { color: var(--color-text-secondary); }