@font-face {
    font-family: 'TmCommon';
    src: url('../_commonfonts/Josefin Sans/JosefinSans-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'TmHeading';
    src: url('../_commonfonts/Lora/Lora-VariableFont_wght.ttf') format('truetype');
}

:root {
    --bs-font-sans-serif: "TmCommon", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.display-1 {
    font-family: "TmHeading", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}


.ratio-2x1 {
    --bs-aspect-ratio: 50%;
}

.tm-popover-bo-select {
    --bs-popover-max-width: 500px;
}

/* Offcanvas-Grössen */

/* XS */
.tm-offcanvas-sm {
    width: 100% !important;
}

.tm-offcanvas-md {
    width: 100% !important;
}

.tm-offcanvas-lg {
    width: 100% !important;
}

.tm-offcanvas-xl {
    width: 100% !important;
}

/* SM */
@media (min-width: 576px) {
    .tm-offcanvas-sm {
        width: 75% !important;
    }

    .tm-offcanvas-md {
        width: 100% !important;
    }

    .tm-offcanvas-lg {
        width: 100% !important;
    }

    .tm-offcanvas-xl {
        width: 100% !important;
    }
}

/* MD */
@media (min-width: 768px) {
    .tm-offcanvas-sm {
        width: 50% !important;
    }

    .tm-offcanvas-md {
        width: 75% !important;
    }

    .tm-offcanvas-lg {
        width: 100% !important;
    }

    .tm-offcanvas-xl {
        width: 100% !important;
    }
}

/* LG */
@media (min-width: 992px) {
    .tm-offcanvas-sm {
        width: 33% !important;
    }

    .tm-offcanvas-md {
        width: 50% !important;
    }

    .tm-offcanvas-lg {
        width: 75% !important;
    }

    .tm-offcanvas-xl {
        width: 100% !important;
    }
}

/* XL */
@media (min-width: 1200px) {
    .tm-offcanvas-sm {
        width: 25% !important;
    }

    .tm-offcanvas-md {
        width: 33% !important;
    }

    .tm-offcanvas-lg {
        width: 50% !important;
    }

    .tm-offcanvas-xl {
        width: 75% !important;
    }
}

/* XXL */
@media (min-width: 1400px) {
    .tm-offcanvas-sm {
        width: 25% !important;
    }

    .tm-offcanvas-md {
        width: 33% !important;
    }

    .tm-offcanvas-lg {
        width: 50% !important;
    }

    .tm-offcanvas-xl {
        width: 75% !important;
    }
}



.tm-offcanvas-full {
    width: 100% !important;
}

/* RR/21.10.2026 - Kacheln im BusinessObjectManager (Rahmen, Hover, Markierung) */
.tm-component-tile-body {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.tm-component-tiles-with-contextmenu {
    -webkit-touch-callout: none;
}

    .tm-component-tiles-with-contextmenu .tm-component-tile-body {
        cursor: pointer;
    }

        .tm-component-tiles-with-contextmenu .tm-component-tile-body:hover {
            background-color: var(--bs-tertiary-bg);
        }

    .tm-component-tiles-with-contextmenu .tm-component-tile.tm-selected .tm-component-tile-body {
        border-color: var(--bs-primary);
        outline: 2px solid var(--bs-primary);
        background-color: var(--bs-primary-bg-subtle);
    }

    /* RR/21.10.2026 - Tastaturfokus auf der Kachel selbst statt auf der Grid-Spalte (inkl. Gutter) */
    .tm-component-tiles-with-contextmenu .tm-component-tile:focus-visible {
        outline: none;
    }

        .tm-component-tiles-with-contextmenu .tm-component-tile:focus-visible .tm-component-tile-body {
            outline: 2px solid var(--bs-primary);
            outline-offset: 2px;
        }

/* RR/31.10.2026 - Stichwortsuche im BusinessObjectManager: 200px, am Handy eigene Zeile unter den Tasten */
.tm-business-object-search {
    width: 200px;
}

@media (max-width: 767.98px) {
    .tm-business-object-search {
        flex: 1 1 100%;
        width: 100%;
        margin-top: .25rem;
    }
}

/* RR/31.10.2026 - Gestapelte Tabelle (ComponentTableModel.StackedBelow = Md): jede Zeile eine Karte,
   Zellen untereinander mit Beschriftung aus data-label. Gewichtung ueber tm-col-* (BusinessObjectTableColumnPriority),
   tm-table-compact blendet Detail-Spalten aus, "Mehr" (tm-row-more) klappt eine einzelne Karte auf. */
.tm-row-more {
    display: none !important;
}

@media (max-width: 767.98px) {
    .tm-table-stacked-md,
    .tm-table-stacked-md tbody {
        display: block;
    }

        .tm-table-stacked-md thead,
        .tm-table-stacked-md .tm-col-desktop-only {
            display: none !important;
        }

        .tm-table-stacked-md tr {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: .5rem;
            border: var(--bs-border-width) solid var(--bs-border-color);
            border-radius: var(--bs-border-radius);
            overflow: hidden;
        }

        .tm-table-stacked-md td,
        .tm-table-stacked-md th {
            display: grid;
            grid-template-columns: 35% 1fr;
            gap: .5rem;
            flex: 1 1 100%;
            width: auto !important;
            border-bottom: 0;
            padding: .25rem .5rem;
        }

        .tm-table-stacked-md td[data-label]::before {
            content: attr(data-label);
            color: var(--bs-secondary-color);
            font-size: .875em;
        }

        /* Zellen ohne Beschriftung (Aktiv-Schalter, Icons, Kommentare) als schmale Werkzeugzeile */
        .tm-table-stacked-md .tm-col-tool {
            display: block;
            flex: 0 0 auto;
        }

        .tm-table-stacked-md .tm-col-primary {
            display: block;
            flex: 1 1 0;
            min-width: 60%;
            font-weight: 600;
        }

        /* Gruppenueberschrift ohne Kartenrahmen */
        .tm-table-stacked-md tr:has(> .tm-col-group) {
            border: 0;
            margin-bottom: .25rem;
        }

        .tm-table-stacked-md .tm-col-group {
            display: block;
        }

        .tm-table-stacked-md.tm-table-compact tr:not(.tm-row-expanded) .tm-col-detail {
            display: none;
        }

        .tm-table-stacked-md.tm-table-compact .tm-row-more {
            display: inline-block !important;
        }
}

/* RR/31.10.2026 - In der Karte zuerst Werkzeuge vor dem Titel, dann der Titel (Primary), dann der Rest in Spaltenfolge */
@media (max-width: 767.98px) {
    .tm-table-stacked-md .tm-col-lead {
        order: -2;
    }

    .tm-table-stacked-md .tm-col-primary {
        order: -1;
    }
}

/* RR/31.10.2026 - Karte vollflaechig hinterlegen (Luecken neben schmalen Werkzeug-Zellen) */
@media (max-width: 767.98px) {
    .tm-table-stacked-md tr {
        background-color: var(--bs-body-bg);
    }

    .tm-table-stacked-md tr:has(> .tm-col-group) {
        background-color: transparent;
    }
}

/* RR/31.10.2026 - Lupe im Suchfeld, Pfad relativ zu diesem Stylesheet (unabhaengig vom Anwendungspfad) */
.tm-search-icon {
    background-image: url('../_CommonIcons/Search.svg');
    background-size: auto 16px;
    background-repeat: no-repeat;
    background-position: 10px center;
}