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