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);
}

/*********************** PSeitenkopf (auch PPageNavigatorBar) ********************/

/* Eine Zeile: Zurück, Titel mit Status und Untertitel, rechts die Aktionen (Telerik-Leiste mit Menü „…“) und die
   Werkzeuge der Anwendung. Reicht der Platz nicht, rutschen Aktionen und Werkzeuge in eine eigene Zeile (390 px). */
.p-seitenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kendo-spacing-1, 0.25rem) var(--kendo-spacing-3, 0.75rem);
    min-height: 3.5rem;
    padding-block: var(--kendo-spacing-1, 0.25rem);
    padding-inline: var(--kendo-spacing-3, 0.75rem);
    background: var(--kendo-color-app-surface);
    color: var(--kendo-color-on-app-surface);
    border-bottom: 1px solid var(--kendo-color-border);
    box-sizing: border-box;
}

.p-seitenkopf-menue,
.p-seitenkopf-zurueck {
    flex: 0 0 auto;
}

/* Den schwebenden Menüknopf der PNavigationSidebar braucht es nicht, solange der Seitenkopf einen eigenen zeigt */
body:has(.p-seitenkopf-menue) .ptogglefab {
    display: none !important;
}

/* Der Titel nimmt, was er braucht; den Rest bekommen die Aktionen */
.p-seitenkopf-titel {
    flex: 0 1 auto;
    min-width: min(12rem, 100%);
    max-width: 100%;
}

.p-seitenkopf-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kendo-spacing-1, 0.25rem) var(--kendo-spacing-2, 0.5rem);
    min-width: 0;
}

.p-seitenkopf-text {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    font-size: var(--kendo-font-size-xl, 1.25rem);
    font-weight: var(--kendo-font-weight-semibold, 600);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p-seitenkopf-unter {
    font-size: var(--kendo-font-size-sm, 0.875rem);
    line-height: 1.3;
    color: var(--kendo-color-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Aktionen: so breit, wie Platz ist (mindestens 16rem, sonst eigene Zeile); was nicht passt, kommt ins Menü „…“ */
.p-seitenkopf-aktionen.k-toolbar {
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.p-seitenkopf-werkzeuge {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--kendo-spacing-2, 0.5rem);
    margin-inline-start: auto;
    min-width: 0;
}

/* Handy: kleinerer Titel, Werkzeuge über die ganze Breite */
@media (max-width: 599.98px) {
    .p-seitenkopf {
        padding-inline: var(--kendo-spacing-2, 0.5rem);
    }

    .p-seitenkopf-text {
        font-size: var(--kendo-font-size-lg, 1.125rem);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .p-seitenkopf-werkzeuge {
        flex-basis: 100%;
    }
}

/*********************** PStatusMarke ********************/

/* Symbol und Wort, nie nur Farbe. Grund und Schrift aus den „subtle“-Farben des Themes - hell und dunkel lesbar. */
.p-status {
    display: inline-flex;
    align-items: center;
    gap: var(--kendo-spacing-1, 0.25rem);
    padding-block: var(--kendo-spacing-0\.5, 0.125rem);
    padding-inline: var(--kendo-spacing-2, 0.5rem);
    border-radius: var(--kendo-border-radius-full, 9999px);
    font-size: var(--kendo-font-size-sm, 0.875rem);
    font-weight: var(--kendo-font-weight-semibold, 600);
    line-height: 1.3;
    white-space: nowrap;
    background: var(--kendo-color-base-subtle);
    color: var(--kendo-color-on-base);
}

.p-status .k-svg-icon {
    flex: none;
}

.p-status-info {
    background: var(--kendo-color-info-subtle);
    color: var(--kendo-color-info-on-subtle);
}

.p-status-erfolg {
    background: var(--kendo-color-success-subtle);
    color: var(--kendo-color-success-on-subtle);
}

.p-status-warnung {
    background: var(--kendo-color-warning-subtle);
    color: var(--kendo-color-warning-on-subtle);
}

.p-status-fehler {
    background: var(--kendo-color-error-subtle);
    color: var(--kendo-color-error-on-subtle);
}

/*********************** Dunkle Darstellung ********************/

/* Seite selbst: Grund und Schrift aus dem Theme (hell bleibt, wie die Anwendungen es heute haben) */
:root[data-p-farbschema="dunkel"] body {
    background-color: var(--kendo-color-app-surface);
    color: var(--kendo-color-on-app-surface);
}

/* Einfache Links ohne eigene Klasse: das Blau des Browsers hat im Dunkeln zu wenig Kontrast */
:root[data-p-farbschema="dunkel"] a:not([class]):link,
:root[data-p-farbschema="dunkel"] a:not([class]):visited {
    color: oklch(80% 0.11 245deg);
}

/* Suchtreffer: im Dunkeln gedämpftes Gelb statt grellem */
:root[data-p-farbschema="dunkel"] mark.search-highlight {
    background-color: oklch(55% 0.12 95deg);
    color: var(--kendo-color-on-app-surface);
}

/*********************** 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 ********************/

/*********************** PGrid: Zeile öffnen ********************/

/* Doppeltipp öffnet die Zeile (pgrid.js) - der Browser soll dabei nicht zoomen */
.p-grid-oeffnet .k-master-row {
    touch-action: manipulation;
}