/* THORIUM Supportportal – Wissen & Hilfe */

.knowledge-hero .page-hero-inner {
    width:
        min(
            1080px,
            100%
        );
}


.knowledge-main {
    padding-top:
        42px;
}


.knowledge-inner {
    width:
        min(
            1080px,
            100%
        );
}


/* ==========================================================
   SUCHE
========================================================== */

.knowledge-search-card {
    margin-bottom:
        28px;

    padding:
        28px;

    display:
        grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(320px, 1.1fr);

    align-items:
        center;

    gap:
        24px 34px;

    border:
        1px solid
        var(--thorium-border);

    border-radius:
        10px;

    background:
        #ffffff;

    box-shadow:
        0 14px 36px
        rgba(18, 30, 42, .055);
}


.knowledge-search-copy h2 {
    margin:
        0;

    font-size:
        25px;

    line-height:
        1.15;

    font-weight:
        900;
}


.knowledge-search-copy p {
    margin:
        9px 0 0;

    color:
        var(--thorium-muted);

    font-size:
        14px;

    line-height:
        1.6;
}


.knowledge-search-field {
    position:
        relative;
}


.knowledge-search-field input {
    width:
        100%;

    min-height:
        54px;

    padding:
        0 52px 0 48px;

    border:
        1px solid
        #cdd5de;

    border-radius:
        7px;

    outline:
        none;

    background:
        #ffffff;

    color:
        var(--thorium-text);

    font-family:
        inherit;

    font-size:
        16px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.knowledge-search-field input:focus {
    border-color:
        var(--thorium-blue);

    box-shadow:
        0 0 0 3px
        rgba(53, 69, 176, .12);
}


.knowledge-search-icon {
    position:
        absolute;

    left:
        16px;

    top:
        50%;

    width:
        20px;

    height:
        20px;

    transform:
        translateY(-50%);

    color:
        #7b8794;

    pointer-events:
        none;
}


.knowledge-search-icon svg {
    width:
        100%;

    height:
        100%;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.knowledge-search-shortcut {
    position:
        absolute;

    right:
        14px;

    top:
        50%;

    min-width:
        28px;

    min-height:
        28px;

    padding:
        3px 7px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(-50%);

    border:
        1px solid
        #d6dde5;

    border-bottom-color:
        #c2cad4;

    border-radius:
        5px;

    background:
        #f7f9fb;

    color:
        #65717e;

    font-family:
        inherit;

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1;
}


.knowledge-result-state {
    grid-column:
        1 / -1;

    margin-top:
        -10px;

    color:
        #7a8591;

    font-size:
        12px;

    font-weight:
        700;
}


/* ==========================================================
   LAYOUT
========================================================== */

.knowledge-layout {
    display:
        grid;

    grid-template-columns:
        280px
        minmax(0, 1fr);

    align-items:
        start;

    gap:
        28px;
}


.knowledge-side {
    position:
        sticky;

    top:
        112px;

    display:
        grid;

    gap:
        16px;
}


.knowledge-side-card {
    padding:
        26px;

    border:
        1px solid
        rgba(53, 69, 176, .16);

    border-radius:
        10px;

    background:
        var(--thorium-soft-blue);
}


.knowledge-side-kicker {
    color:
        var(--thorium-blue);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.knowledge-side-card h2 {
    margin:
        10px 0 0;

    font-size:
        24px;

    line-height:
        1.1;

    font-weight:
        900;
}


.knowledge-side-card p {
    margin:
        13px 0 22px;

    color:
        var(--thorium-muted);

    font-size:
        14px;

    line-height:
        1.65;
}


.knowledge-side-card .button {
    width:
        100%;
}


.knowledge-side-note {
    padding:
        20px;

    border:
        1px solid
        var(--thorium-border);

    border-radius:
        9px;

    background:
        #ffffff;
}


.knowledge-side-note strong,
.knowledge-side-note span {
    display:
        block;
}


.knowledge-side-note strong {
    font-size:
        14px;
}


.knowledge-side-note span {
    margin-top:
        7px;

    color:
        var(--thorium-muted);

    font-size:
        13px;

    line-height:
        1.55;
}


.knowledge-side-note a {
    display:
        inline-block;

    margin-top:
        13px;

    color:
        var(--thorium-blue);

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        800;
}


.knowledge-side-note a:hover {
    text-decoration:
        underline;
}


/* ==========================================================
   ARTIKEL
========================================================== */

.knowledge-articles {
    min-width:
        0;
}


.knowledge-category + .knowledge-category {
    margin-top:
        30px;
}


.knowledge-category-head {
    margin-bottom:
        11px;
}


.knowledge-category-label {
    color:
        #687582;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.knowledge-article {
    overflow:
        hidden;

    border:
        1px solid
        var(--thorium-border);

    border-radius:
        9px;

    background:
        #ffffff;

    box-shadow:
        0 8px 24px
        rgba(18, 30, 42, .035);

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.knowledge-article + .knowledge-article {
    margin-top:
        10px;
}


.knowledge-article:hover {
    border-color:
        rgba(53, 69, 176, .28);
}


.knowledge-article[open] {
    border-color:
        rgba(53, 69, 176, .26);

    box-shadow:
        0 12px 28px
        rgba(18, 30, 42, .06);
}


.knowledge-article summary {
    min-height:
        70px;

    padding:
        17px 19px;

    display:
        grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        24px;

    align-items:
        center;

    gap:
        12px;

    cursor:
        pointer;

    list-style:
        none;
}


.knowledge-article summary::-webkit-details-marker {
    display:
        none;
}


.knowledge-article-number {
    color:
        var(--thorium-blue);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .06em;
}


.knowledge-article-title {
    font-size:
        16px;

    font-weight:
        850;

    line-height:
        1.4;
}


.knowledge-article-arrow {
    position:
        relative;

    width:
        20px;

    height:
        20px;
}


.knowledge-article-arrow::before,
.knowledge-article-arrow::after {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        11px;

    height:
        2px;

    border-radius:
        999px;

    background:
        #7c8792;

    transform:
        translate(-50%, -50%);

    transition:
        transform .18s ease;
}


.knowledge-article-arrow::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


.knowledge-article[open]
.knowledge-article-arrow::after {
    transform:
        translate(-50%, -50%)
        rotate(0deg);
}


.knowledge-article-body {
    padding:
        0 55px 22px 73px;

    border-top:
        1px solid
        #edf0f3;
}


.knowledge-article-body p {
    margin:
        16px 0 0;

    color:
        #53606c;

    font-size:
        15px;

    line-height:
        1.72;
}


.knowledge-article-body strong {
    color:
        var(--thorium-text);
}


/* ==========================================================
   KEINE TREFFER
========================================================== */

.knowledge-empty {
    padding:
        30px;

    border:
        1px dashed
        #cbd3dc;

    border-radius:
        9px;

    background:
        #ffffff;

    text-align:
        center;
}


.knowledge-empty strong,
.knowledge-empty span {
    display:
        block;
}


.knowledge-empty strong {
    font-size:
        17px;
}


.knowledge-empty span {
    margin-top:
        8px;

    color:
        var(--thorium-muted);

    font-size:
        14px;
}


.knowledge-empty a {
    display:
        inline-block;

    margin-top:
        16px;

    color:
        var(--thorium-blue);

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        800;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 860px) {

    .knowledge-search-card {
        grid-template-columns:
            1fr;
    }


    .knowledge-result-state {
        margin-top:
            -6px;
    }


    .knowledge-layout {
        grid-template-columns:
            1fr;
    }


    .knowledge-side {
        position:
            static;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

}


@media (max-width: 640px) {

    .knowledge-search-card {
        padding:
            22px;
    }


    .knowledge-search-shortcut {
        display:
            none;
    }


    .knowledge-search-field input {
        padding-right:
            16px;
    }


    .knowledge-side {
        grid-template-columns:
            1fr;
    }


    .knowledge-article summary {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            22px;

        padding:
            15px;
    }


    .knowledge-article-body {
        padding:
            0 18px 20px 49px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .knowledge-article,
    .knowledge-article-arrow::before,
    .knowledge-article-arrow::after,
    .knowledge-search-field input {
        transition:
            none !important;
    }

}

/* ==========================================================
   ARTIKEL – OPTIONALE RESSOURCEN
========================================================== */

.knowledge-resources {
    margin-top:
        20px;

    padding-top:
        17px;

    border-top:
        1px solid
        #edf0f3;
}


.knowledge-resources-title {
    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--thorium-text);

    font-size:
        13px;

    font-weight:
        900;
}


.knowledge-resources-links {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.knowledge-resource-link {
    min-height:
        38px;

    padding:
        8px 12px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    border:
        1px solid
        #d6dde5;

    border-radius:
        6px;

    background:
        #f8fafc;

    color:
        var(--thorium-text);

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        800;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}


.knowledge-resource-link:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(53, 69, 176, .35);

    background:
        var(--thorium-soft-blue);
}


.knowledge-resource-type {
    padding:
        3px 6px;

    border-radius:
        4px;

    background:
        var(--thorium-blue);

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .06em;
}