html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

mark.search-highlight {
    background-color: #ffeb3b;
    color: #000;
    padding: 0;
    border-radius: 2px;
}

/*********************** PGrid, gestapelte Darstellung ********************/

/* PGridCommandColumn: Schaltflächen als eigene Zeile unter den Feldern (über die ganze Breite), Kopf ohne Titel weg.
   Die Zellenklassen gibt es nur gestapelt; „k-grid-stack“ am Grid setzt Telerik beim Umschalten durch PGrid nicht. */
.k-grid-stack-row > .k-grid-stack-command-cell {
    grid-column: 1 / -1;
    order: 1000;
}

.k-grid-stack-command-cell > .k-grid-stack-header:empty {
    display: none;
}

/* inline: die Hülle hält Klicks nur über den Schaltflächen von der Zeile fern, der Rest der Zeile wählt/öffnet weiter */
.k-grid-stack-command-cell .p-grid-commands {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--kendo-spacing-2, 0.5rem);
}

/*********************** PPageNavigatorBar ********************/

/* Titel + Untertitel gestapelt: enge Zeilenhöhe, damit beide zusammen (16px + 12px)
   innerhalb der Button-Höhe der Toolbar bleiben und diese nicht höher wird. */
.p-page-navigator-title {
    line-height: 1.25;
    white-space: nowrap;
}

/*********************** Mentions (PMentionTextBox, PEditor) ********************/

/* Hüll-Element um das Telerik-Feld: nimmt keinen Platz ein */
.p-mention-host {
    display: contents;
}

/* Vorschlagsliste: Aufbau, Farben und Abstände kommen aus dem Telerik-Theme (k-popup, k-list …), hier nur Ergänzungen */
.p-mention-popup .k-list-item {
    cursor: pointer;
}

.p-mention-popup .k-list-item-text {
    white-space: nowrap;
}

.p-mention-hit {
    font-weight: var(--kendo-font-weight-bold, bold);
}

.p-mention-key {
    flex: none;
    margin-inline-start: var(--kendo-spacing-2, 8px);
    color: var(--kendo-color-subtle);
    font-size: var(--kendo-font-size-sm, 0.875rem);
    white-space: nowrap;
}

.p-mention-popup .k-list-item-description {
    color: var(--kendo-color-subtle);
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.p-mention-head,
.p-mention-foot {
    padding-block: var(--kendo-spacing-1, 4px);
    padding-inline: var(--kendo-spacing-2, 8px);
    color: var(--kendo-color-subtle);
    font-size: var(--kendo-font-size-sm, 0.875rem);
}

.p-mention-head {
    font-weight: var(--kendo-font-weight-semibold, 600);
    border-block-end: 1px solid var(--kendo-color-border);
}

.p-mention-foot {
    border-block-start: 1px solid var(--kendo-color-border);
}

.p-mention-foot.p-mention-error {
    color: var(--kendo-color-error);
}

/* Fuß mit Knopf bzw. Ladeanzeige */
.p-mention-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kendo-spacing-2, 8px);
}

.p-mention-foot-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Knopf im Feld: nur bei Fokus oder Mauszeiger sichtbar, am Touchgerät immer. visibility statt display, damit das
   Feld beim Erscheinen nicht springt. Im mehrzeiligen Feld oben rechts; im einzeiligen Feld bleibt Teleriks
   Ausrichtung (Suffix über die ganze Höhe, Knopf mittig auf der Textzeile) */
.p-mention-host .k-textarea > .k-input-suffix:has(> .p-mention-button) {
    align-self: flex-start;
}

.p-mention-button {
    visibility: hidden;
}

.k-input:hover .p-mention-button,
.k-input:focus-within .p-mention-button {
    visibility: visible;
}

@media (hover: none) {
    .p-mention-button {
        visibility: visible;
    }
}

/*********************** PWizard ********************/
