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