body {
    --footer-reserved-space: 100px;

    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13pt;
    margin-bottom: var(--footer-reserved-space);
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        max-width: calc(100vw - 60px);
    }
}

@media (max-width: 768px) {
    .container,
    .container-md,
    .container-sm {
        max-width: calc(100vw - 60px);
    }
}

@media (max-width: 560px) {
    .container,
    .container-md,
    .container-sm {
        max-width: calc(100vw - 10px);
    }
}

.sc {
    font-variant: small-caps;
}

h1,
h2,
h3,
h4 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    margin: 1em 0 0.5em;
}

p {
    text-align: justify;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

code {
    font-family: '0xProto Nerd Font Mono', monospace;
    /* font-weight: bold; */
    font-size: 93%;
    color: #e5185d;
    background-color: rgba(243, 132, 175, 0.2);
    padding: 0 0.3em;
    border-radius: 0.3em;
}

pre {
    font-family: '0xProto Nerd Font Mono', monospace;
    /* font-weight: bold; */
    font-size: 93%;
    padding: 0.5em 1em;
    border-radius: 0.5em;
}

pre pre {
    padding: 0;
    border-radius: 0;
}

pre .s,
pre .sb,
pre .sc,
pre .dl,
pre .sd,
pre .s2,
pre .sh,
pre .sx,
pre .gh,
pre .s1 {
    color: #fad31c !important;
    font-weight: normal !important;
}

pre .sx {
    font-style: normal !important;
}

pre .c,
pre .ch,
pre .cd,
pre .cm,
pre .cpf,
pre .c1,
pre .cs {
    font-weight: normal !important;
}

pre .k,
pre .kn,
pre .kp,
pre .kr,
pre .kv,
pre .nt {
    color: #fdb717 !important;
}

pre .na {
    color: #73a946 !important;
}

pre.wrap-code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.rouge-table {
    padding: 0;
    font-size: 90%;
    border-radius: 0;
}

.rouge-gutter {
    padding-right: 1em;
    user-select: none;
}

kbd {
    position: relative;
    top: -0.05em;

    min-width: 1.75em;
    display: inline-block;
    text-align: center;

    margin: 0 0.1em;
    padding: 0.1em 0.4em;
    border: 1px solid #ddd;
    border-radius: 0.2em;

    color: inherit;
    background-color: transparent;
    font-family: '0xProto Nerd Font Mono', monospace;
    font-size: 11pt;

    box-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.3);
}

.meta {
    display: none;
}

hr {
    height: 4px !important;
    margin: 1rem 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    background: none;
    color: inherit;
    opacity: 0.25;
    box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.3);
}

svg {
    user-select: none;
}

svg text[font-family='monospace'] {
    font-family: '0xProto Nerd Font Mono', monospace;
    font-style: italic;
    font-size: 79%;
}

svg text[font-family='Times,serif'] {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 70%;
}

form {
    border: 1px solid #ddd;
    border-radius: 1em;
    padding: 1em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.table-container {
    overflow-x: auto;
}

.table td,
.table th {
    white-space: nowrap;
}

tr.noborder td {
    border: none;
}

.input-group {
    flex-wrap: nowrap;
}

.input-with-text-mod .input-group-text {
    margin-left: -0.75em;
    border: none;
    background-color: #fff;
}

.input-with-text-mod input {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

input.error {
    background-color: rgba(241, 62, 13, 0.3);
    outline: 1px solid rgba(241, 62, 13, 1);
}

.modal-xxl {
    --bs-modal-width: calc(100vw - 4em);
}

/* Header, menu, footer */

.header {
    background-color: #f4f4f4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 20% 95%;
}

.title {
    padding: 0.5em 0;
    text-align: center;

    font-family: 'Patua One', monospace;
    font-weight: 400;
    font-size: 3rem;
}

.title a {
    color: unset;
    text-decoration: none;
}

.title a:hover {
    text-decoration: none;
}

.menu {
    position: relative;
    z-index: 20;

    padding: 0.5em 0 5px;
    border-top: 1px solid #ddd;

    text-align: right;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.menu .btn {
    margin-bottom: 5px;
}

.menu a:hover,
a.btn:hover {
    text-decoration: none;
}

footer {
    position: fixed;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;

    padding: 0.3em 1em;
    border-top: 1px solid #ccc;

    text-align: right;
    font-size: 75%;
    color: #888;
    background-color: #f4f4f4;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

footer a {
    color: #888;
    text-decoration: none;
}

footer a:hover {
    color: unset;
    text-decoration: underline;
}

.navbar {
    backdrop-filter: blur(5px);
}

.navbar-nav > a > .fa {
    display: inline-block;
    width: 1.2em;
}

a.nav-link {
    margin-left: 1em;
}

@media (max-width: 992px) {
    a.nav-link {
        margin-left: 0.5em;
        text-align: left;
    }
}

@media (min-width: 1200px) {
    .nav-link.active {
        padding-right: 1em !important;
        padding-left: 1em !important;
        border-radius: 0.5em;
        outline: 1px solid #ccc;
        background-color: #fff;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }
}

.btn {
    white-space: nowrap;
}

.btn .bi,
button .bi {
    margin-right: 0.55em;
}

.btn-primary {
    border: 1px solid #428bd4;
    background-color: #428bd4;
}

.btn-primary:focus,
.btn-primary:hover {
    border: 1px solid #2c72b8;
    background-color: #2c72b8;
}

.btn-module {
    position: relative;
    top: -0.8em;
}

.btn-module-4 {
    margin-bottom: 0.5em;
}

@media (min-width: 576px) {
    .btn-module {
        position: unset;
        top: unset;
        padding-top: 1.5em;
        text-align: right;
    }

    .btn-module-4 {
        position: unset;
        top: unset;
        text-align: right;
    }
}

.show-on-mobile {
    display: none;
}

@media (max-width: 768px) {
    .title {
        font-size: 2rem;
    }

    .sponsor {
        top: -1.1em;
    }

    .hide-on-mobile {
        display: none;
    }

    .show-on-mobile {
        display: unset;
    }
}

/* General utility classes */

.api_messages {
    position: relative;
    z-index: 100;
    border: 1px solid #ddd;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

.api_messages button {
    position: absolute;
    right: 0;
    box-shadow: none;
}

.please-reload {
    position: fixed;
    z-index: 1000;
    inset: 0;

    padding: 32px;
    padding-top: 200px;

    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.85);
}

.hl {
    outline: 2px solid white;
    box-shadow: 0 0 8px 3px darkgreen;
}

.photo {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    object-fit: cover;
}

.n2 {
    display: inline-block;
    width: 2em;
    text-align: right;
}

.bg-c1 {
    background-color: #f7b801 !important;
}

.bg-c2 {
    background-color: #f18701 !important;
}

.bg-c3 {
    background-color: #90be6d !important;
}

.bg-b0 {
    background-color: #3465a4 !important;
}

.bg-b1 {
    background-color: #5f3577 !important;
}

.bg-b2 {
    background-color: #73a946 !important;
}

.bg-b3 {
    background-color: #00a8a8 !important;
}

.bg-b4 {
    background-color: #778590 !important;
}

.bg-b5 {
    background-color: #f4951b !important;
}

.bg-b6 {
    background-color: #952749 !important;
}

.bg-b7 {
    background-color: #8c0c03 !important;
}

.rot {
    transition:
        transform 0.5s cubic-bezier(0.18, 0.855, 0.375, 1.29),
        opacity 0.5s cubic-bezier(0.18, 0.855, 0.375, 1.29);
}

.rot.rot180 {
    transform: rotate(180deg);
}

.sq-icon {
    width: 3em;
    height: 3em;
    border-radius: 0.5em;
    object-fit: cover;
}

.swatches {
    display: flex;
    flex-flow: wrap;
}

.swatches > span {
    display: flex;
    flex-direction: column;
    width: 2em;
    height: 2em;
    margin-right: 0.2em;
    margin-bottom: 1.2em;
    border-radius: 20%;
}

.swatches > span > span {
    position: relative;
    top: 2.4em;
    text-align: center;
    font-size: 80%;
    opacity: 0.7;
}

.werbung a {
    color: rgb(89, 189, 255);
}

.ceremony_mockup {
    display: inline-block;
    padding: 1em;
    border: 1px solid #aaa;
    border-radius: 1em;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
}

.photodiv {
    position: relative;
    width: 128px;
    height: 128px;
    overflow: hidden;
    border-radius: 20%;
    box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.2);
}

.photodiv > div {
    width: 128px;
    height: 128px;
    background-repeat: no-repeat;
    background-size: cover;
}

.ti_adjust {
    width: 7em;
}

/* Images and content helpers */

img.full,
svg.full {
    display: block;
    width: 100%;
    min-width: 1000px;
    border-radius: 0.5em;
    cursor: grab;
}

svg.full {
    min-width: 800px;
}

img.full-shadow {
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.1);
    margin: 0.25em;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

img.fit-width {
    min-width: unset;
}

img.r {
    float: right;
    margin-top: 0.5em;
    margin-bottom: 1em;
    margin-left: 1em;
    border-radius: 0.5em;
}

.scroll-x {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.scroll-x > img,
.scroll-x > svg {
    width: 100%;
    overflow-x: auto;
}

@media (pointer: coarse) {
    .scroll-x > img {
        width: max(100%, 900px);
    }

    .scroll-x > img.fit-width {
        width: 100%;
    }
}

div.floatright {
    float: right;
    max-width: 100%;
    margin-bottom: 0.8em;
    margin-left: 1em;
    border: 0.5em solid #fff;
    border-radius: 0.2em;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
}

div.floatright img {
    width: 100%;
    height: auto;
}

div.floatright > p {
    margin-top: 0.4em;
    margin-bottom: 0;
    text-align: left;
    font-size: 75%;
    line-height: 120%;
}

@media (max-width: 768px) {
    div.floatright.fr-wide {
        display: block;
        width: 100% !important;
    }
}

/* Hints */

.hint {
    display: flow-root;
    position: relative;

    min-height: 3.5em;
    margin-bottom: 1em;
    padding: 0.7em 0.5em 0.5em 3em;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;

    text-align: justify;
    background-color: #f9f9f9;
}

@media (max-width: 767.999999px) {
    p,
    .hint {
        text-align: left;
    }
}

.hint::before {
    content: '';
    display: block;
    position: absolute;
    top: 0.75em;
    left: 0.5em;
    width: 2em;
    height: 2em;
    background-image: url(/images/bulb.png);
    background-size: cover;
}

.hint.wink::before {
    background-image: url(/images/wink.png);
}

.hint.task::before {
    background-image: url(/images/memo.png);
}

.hint.books::before {
    background-image: url(/images/books.png);
}

.hint.think::before {
    background-image: url(/images/think.png);
}

.hint.handshake::before {
    background-image: url(/images/handshake.png);
}

.hint.melting::before {
    background-image: url(/images/melting.png);
}

.hint.good,
.hint.bad {
    padding-left: 0.5em;
}

.hint.good p:first-child,
.hint.bad p:first-child {
    padding-left: 2em;
}

.hint.good::before {
    background-image: url(/images/check.png);
    filter: saturate(800%) hue-rotate(270deg);
    transform: scale(0.5) rotate(5deg) translateY(-8px);
}

.hint.bad::before {
    background-image: url(/images/cross.png);
    transform: scale(0.5) translateY(-8px);
}

/* Logo blocks */

.logos {
    margin: 2em 0;
}

.logos img {
    width: 100%;
    object-fit: contain;
}

@media (max-width: 1400px) {
    .logos img {
        height: 170px;
        margin-bottom: 1em;
    }
}

@media (max-width: 1200px) {
    .logos img {
        height: 140px;
    }
}

@media (max-width: 992px) {
    .logos img {
        height: 110px;
    }
}

@media (max-width: 768px) {
    .logos img {
        width: 100% !important;
        height: 150px;
    }
}

/* FAQ */

.faq {
    margin-bottom: 1em;
}

.faq .q {
    display: inline;
    margin-right: 0.5em;
    font-family: 'Alegreya SC', sans-serif;
    font-weight: 500;
}

.faq .q::before {
    content: '\f101';
    margin-right: 0.5em;
    font: normal normal normal 14px/1 ForkAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Tutorial cards, current layout */

.hscol {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;

    @media (min-width: 768px) {
        width: 50%;
    }

    @media (min-width: 1200px) {
        width: 33.3333333333%;
    }

    .tutorial_card3 {
        display: flex;
        flex-direction: row;
        position: relative;
        overflow: hidden;
        width: 100%;
        min-width: 0;
        margin-bottom: 1.5em;
        border-radius: 0.75em;
        box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.2s ease;

        > div {
            display: block;
            position: relative;
            overflow: hidden;
            width: 100%;
            min-width: 0;
        }

        h4 {
            display: none;
            margin: 0 0 8px;
            overflow: hidden;
            color: #222;
            font-size: 1.25rem;
            font-weight: bold;
            text-overflow: ellipsis;
        }

        &:hover {
            text-decoration: none;
            box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.3);
        }

        img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            object-position: 50% 50%;

            &.theme-image-dark {
                display: none;
            }
        }

        .shade {
            position: absolute;
            inset: 0;
            width: 100%;
            aspect-ratio: 16 / 9;
            pointer-events: none;
            background: linear-gradient(
                to top,
                rgba(0, 0, 0, 0.05) 0%,
                rgba(0, 0, 0, 0) 8px
            );
        }

        .card-content {
            position: relative;
            min-width: 0;
            padding: 1em;
            border-top: 1px solid #eee;
            color: #222;

            h4 {
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            .abstract {
                display: -webkit-box;
                overflow: hidden;
                color: #555;
                font-size: 0.95rem;
                line-height: 1.4;
                text-overflow: ellipsis;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
        }
    }

    @media (max-width: 767.999999px) {
        padding-right: 0.375rem;
        padding-left: 0.375rem;

        .tutorial_card3 {
            margin-bottom: 1.25em;
            border: 1px solid #e5e5e5;
            border-radius: 0.5em;
            box-shadow: 0 0.125em 0.4em rgba(0, 0, 0, 0.08);

            &:hover {
                box-shadow: 0 0.125em 0.4em rgba(0, 0, 0, 0.12);
            }

            .card-content {
                padding: 1em;
            }
        }
    }

    @media (min-width: 768px) and (max-width: 1199.999999px) {
        &.hor2 {
            width: 100%;

            .tutorial_card3 {
                flex-direction: column;

                > div {
                    display: flex;
                    flex-direction: row;
                    width: 100%;
                    min-width: 0;
                }

                img {
                    flex: 0 0 55%;
                    max-width: 55%;
                    height: auto;
                    aspect-ratio: auto;
                }

                .shade {
                    width: 55%;
                    height: 100%;
                    background: linear-gradient(
                        to left,
                        rgba(0, 0, 0, 0.05) 0%,
                        rgba(0, 0, 0, 0) 8px
                    );
                }

                .card-content {
                    display: flex;
                    flex: 1 1 0;
                    flex-direction: column;
                    min-width: 0;
                    border-top: unset;
                    border-left: 1px solid #eee;

                    h4 {
                        padding-bottom: 0.5em;
                        border-bottom: 1px solid #eee;
                    }

                    .abstract {
                        -webkit-line-clamp: 10;
                    }
                }
            }
        }
    }

    @media (min-width: 1200px) {
        &.hor3 {
            width: 50%;
        }
    }
}

/* Kenney galleries */

.kenney-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;

    div {
        text-align: center;
        font-family: '0xProto Nerd Font Mono', monospace;
        font-size: 90%;

        img {
            width: 128px;
            height: 128px;
            padding: 0.5em;
            border: 1px solid #ddd;
            border-radius: 0.5em;
            object-fit: contain;
        }
    }
}

.kenney-overview {
    img {
        width: 100%;
    }
}

.squircle {
    display: inline-block;
    width: 2.2em;
    height: 2.2em;
    margin-right: 0.4em;
    margin-left: -0.2em;
    padding: 0.2em;
    background-image: url(/images/squircle.png);
    background-size: cover;
}

.squircle img {
    width: 100%;
    height: 100%;
    transform: scale(0.7) translate(0, -0.1em);
}

/* Primary auto-TOC */

.autotoc {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;

    border-bottom: 1px solid rgba(0, 0, 0, 0.15);

    font-size: 85%;
    background-color: #fff;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);

    transform: translateY(0);
    transition: transform 0.3s ease-out;
}

.autotoc.hidden {
    transform: translateY(calc(-100% - 1em));
}

.autotoc > .items {
    overflow-x: auto;
    white-space: nowrap;
    text-align: center;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.autotoc > .items::-webkit-scrollbar,
.autotoc > .progress_spots_lg::-webkit-scrollbar {
    display: none;
}

.autotoc > .items > button {
    display: inline-block;
    position: relative;

    width: 20em;
    margin-bottom: 0.5em;
    padding: 1em 2em;
    border: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    scroll-snap-align: center;

    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
    user-select: none;
}

.autotoc > .items > button.active {
    position: relative;
    font-weight: bold;
}

.autotoc > .progress_sm {
    display: none;
    position: absolute;
    bottom: 0.13em;
    left: 0;

    width: 0;
    height: 0.25em;
    border-radius: 0.05em;

    background-color: rgba(0, 0, 0, 0.3);
    transform: translate(0.15em, 0.05em);
    transition: left 0.3s ease-out;
}

.autotoc > .progress_spots_sm {
    display: none;
    position: absolute;
    bottom: 0.1em;
    left: 0;

    width: 100%;
    height: 0.2em;
    flex-wrap: nowrap;

    pointer-events: none;
}

.autotoc > .progress_spots_sm > div,
.autotoc > .progress_spots_lg > div {
    display: inline-block;
    height: 0.2em;
    margin: 0 0.15em;
    padding: 0 0.5em;
    border-radius: 1em;
    background-color: rgba(0, 0, 0, 0.15);
}

.autotoc > .progress_spots_sm > div {
    width: 20em;
}

.autotoc > .progress_spots_lg {
    display: block;
    position: relative;
    top: -2em;

    overflow-x: auto;
    margin-bottom: -2.2em;

    white-space: nowrap;
    text-align: center;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    pointer-events: none;
}

.autotoc > .progress_spots_lg > div {
    width: calc(20em - 0.3em);
    transition: background-color 0.1s ease-out;
}

.autotoc > .progress_spots_lg > div.active {
    background-color: rgba(0, 0, 0, 0.3);
}

.autotoc-container {
    border-top: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}

@media (max-width: 768px) {
    .autotoc {
        pointer-events: none;
    }

    .autotoc > .items {
        padding: 1em 1em 0.6em;
    }

    .autotoc > .items > button {
        width: 100%;
        margin-bottom: 0;
        padding: 0 1em;
    }

    .autotoc > .items > button.active {
        font-weight: unset;
    }

    .autotoc > .progress_spots_sm {
        display: flex;
    }

    .autotoc > .progress_spots_sm > div {
        display: block;
    }

    .autotoc > .progress_spots_lg {
        display: none;
    }

    .autotoc > .progress_sm {
        display: block;
    }
}

/* Secondary auto-TOC */

body.has-autotoc-secondary {
    --autotoc-primary-height: 3.6rem;
    --autotoc-secondary-width: 18rem;
    --autotoc-secondary-gap: 1.75rem;
    --autotoc-secondary-top: 3.6rem;
    --autotoc-secondary-bottom: 1.9rem;
    --autotoc-article-width: 1320px;
    --autotoc-layout-width: calc(
        var(--autotoc-secondary-width)
        + var(--autotoc-secondary-gap)
        + var(--autotoc-article-width)
    );

    margin-bottom: 0;
}

body.has-autotoc-secondary.autotoc-primary-visible {
    --autotoc-secondary-top: var(--autotoc-primary-height);
}

.autotoc-secondary-layout {
    display: block;
    position: relative;
    z-index: 0;
    padding-bottom: var(--footer-reserved-space);
}

.autotoc-secondary-main {
    min-width: 0;
}

.autotoc-secondary {
    box-sizing: border-box;
    z-index: 1;

    width: var(--autotoc-secondary-width);
    overflow: hidden;

    display: flex;
    flex-direction: column;

    padding: 1rem 1rem 1.5rem 1.15rem;
    border-right: 1px solid rgba(var(--bs-body-color-rgb), 0.12);

    background: rgba(var(--bs-body-bg-rgb), 0.96);
    backdrop-filter: blur(12px);
    scrollbar-width: thin;

    transition:
        opacity 160ms ease,
        transform 160ms ease,
        visibility 160ms ease;
}

.autotoc-secondary.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
    pointer-events: none;
}

.autotoc-secondary-title {
    flex: 0 0 auto;
    margin: 0 0 0.7rem;
    padding: 0 0 0.55rem;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
    font-size: 0.86rem;
    font-weight: 700;
}

.autotoc-secondary-items {
    display: grid;
    align-content: start;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: hidden;
    gap: 0.04rem;
}

.autotoc-secondary a {
    display: block;
    padding: 0.18rem 0.45rem;
    border-left: 0.11rem solid transparent;
    border-radius: 0.35rem;
    color: inherit;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.22;
    opacity: 0.56;
}

.autotoc-secondary a:hover {
    opacity: 0.95;
    background: rgba(var(--bs-body-color-rgb), 0.055);
}

.autotoc-secondary a.active {
    border-left-color: #074e84;
    color: #074e84;
    background: rgba(12, 93, 155, 0.055);
    font-weight: 400;
    opacity: 1;
}

.autotoc-secondary a.level-2 {
    padding-left: 0.45rem;
    font-weight: 600;
    opacity: 0.72;
}

.autotoc-secondary a.level-2.active {
    font-weight: 600;
}

.autotoc-secondary a.level-3 {
    padding-left: 1rem;
}

.autotoc-secondary a.level-4 {
    padding-left: 1.55rem;
}

.autotoc-secondary a.level-5 {
    padding-left: 2.1rem;
    font-size: 0.72rem;
}

@media (min-width: 1400px) {
    .autotoc-secondary-layout {
        display: grid;
        grid-template-columns:
            var(--autotoc-secondary-width)
            minmax(0, var(--autotoc-article-width));
        column-gap: var(--autotoc-secondary-gap);
        align-items: start;

        width: min(calc(100vw - 2rem), var(--autotoc-layout-width));
        margin-right: auto;
        margin-left: auto;
    }

    .autotoc-secondary-main {
        width: 100%;
        max-width: var(--autotoc-article-width);
        margin-right: 0;
        margin-left: 0;
    }

    .autotoc-secondary {
        position: sticky;
        top: var(--autotoc-secondary-top);
        height: calc(
            100vh
            - var(--autotoc-secondary-top)
            - var(--autotoc-secondary-bottom)
        );
    }
}

@media (max-width: 1399.98px) {
    .autotoc-secondary {
        display: none;
    }
}

/* Other animations */

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.bi-spin {
    display: inline-block;
    animation: spinner 1.5s ease-out infinite;
}

/* Print */

@media print {
    body {
        font-size: 12pt;
        margin-bottom: 0;
    }

    .container {
        max-width: 100%;
    }

    .menu,
    .header,
    footer,
    .autotoc,
    .autotoc-secondary {
        display: none;
    }

    .autotoc-secondary-layout {
        display: block;
        padding-bottom: 0;
    }
}

/* "Neu" promotion: badge on a tutorial card and banner on top of the home page */

.badge-new {
    display: inline-block;
    padding: 0.2em 0.7em;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7a18, #e5232e);
    color: #fff;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 0.15em 0.4em rgba(0, 0, 0, 0.25);
    transform: rotate(-4deg);
}

.tutorial_card3 > div > .badge-new {
    position: absolute;
    top: 0.7em;
    left: 0.7em;
}

.new-tutorial-banner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 1.5em 0 2em;
    border: 2px solid #ff7a18;
    border-radius: 0.75em;
    background: linear-gradient(135deg, #fff7ec, #fff);
    box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.1);
    color: #222;
    text-decoration: none;
    transition: box-shadow 0.2s ease;

    @media (min-width: 768px) {
        flex-direction: row;
    }

    &:hover {
        color: #222;
        text-decoration: none;
        box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.3);
    }

    .new-tutorial-image {
        flex: 0 0 auto;
        background: #fff;

        @media (min-width: 768px) {
            width: 42%;
        }

        img {
            display: block;
            width: 100%;
            height: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }
    }

    .new-tutorial-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0.6em;
        min-width: 0;
        padding: 1.25em 1.5em;
    }

    .new-tutorial-title {
        font-size: 1.6rem;
        font-weight: bold;
        line-height: 1.2;
    }

    .new-tutorial-abstract {
        text-align: left;
    }
}