.site-page.page.blog {
    padding: 130px 0 30px 0;
}

.floater {
    left: unset;
    right: 4vw;
    height: 38px;
}



.l-btn.faq-link {
    display: none;
}

.glossary-wrapper {
    display: contents;
    background-color: rgba(223, 231, 228, 1);
    filter: drop-shadow(3px 3px 2px rgba(128, 128, 128, 1));
}

.drag-handle {
    display: none;
    background-color: rgba(223, 231, 228, 1);
    /* box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.507); */
}

.drag-handle:hover {

    background-color: rgb(211, 221, 217);
    /* box-shadow: -2px 0 2px rgba(128, 128, 128, 0.7); */
    background-image: linear-gradient(90deg,
            rgba(0, 0, 0, 0.2) 50%,
            transparent 50%);

    background-size: 2px 100%;

}

.drag-handle:active {
    background-color: #f1f7f5;
    border-left: .5px solid rgba(128, 128, 128, 0.3);
}

.glossary-wrapper:has(input[data-dismissible-toggle]:checked) {
    display: block;
    position: fixed;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: auto;
    max-height: calc(100% - 140px);
    overflow: hidden;
}

.glossary-wrapper:has(input[data-dismissible-toggle]:checked) .drag-handle {
    position: sticky;
    top: 0;
    display: block;
    height: 12px;
    cursor: ns-resize;
    touch-action: none;
    background-image: linear-gradient(90deg,
            #c3c9c79a 50%,
            transparent 50%);

    background-size: 2px 100%;
}

.glossary-wrapper:has(input[data-dismissible-toggle]:checked)>.l-btn.headline {
    position: sticky;
    top: 0;
    margin: 0 5px;
    filter: none;
    box-shadow: 1px 1px 0px rgba(128, 128, 128, 0.5);
    padding: 5px;
}

.glossary-wrapper[data-resizing] {
    user-select: none;
}

.sheet.glossary {
    position: static;
    top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    font-family: 'Sulphur Point', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 16px;
    /* background-color: rgba(223, 231, 228, 0.85); */
    transform: translateX(-120%);
    width: 100%;
    height: 0;
    max-height: max-content;
    padding: 0 0 20px 0;
    overflow-y: auto;
}

.glossary-wrapper:has(input[data-dismissible-toggle]:checked) .sheet.glossary {
    height: 100%;
}

.sheet.glossary>.tree-buttons {
    order: 2;
    flex: 0 1 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: end;
    justify-self: flex-end;
    gap: 0 10px;
    width: 100%;
    height: max-content;
    margin: 0 5px;
    color: var(--corporate-darkgreen-alpha);
}

.tree-buttons>button {
    flex: 0 1 16px;
    place-self: center end;
    width: 16px;
    height: 16px;
    outline: .5px solid var(--corporate-darkgreen-alpha);
    color: var(--corporate-darkgreen-alpha);
    border-radius: 5px;
    margin: 0;
}

.tree-buttons>span {
    flex: 1 1 auto;
    text-align: right;
    align-self: center;
}

.headline.l-btn {
    position: fixed;
    top: 130px;
    left: 0;
    order: 1;
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    font-family: 'Sulphur Point', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 16px;
    background-color: #dfe7e4;
    padding: 0 10px;
    filter: drop-shadow(3px 3px 2px rgba(128, 128, 128, 0.5));
    opacity: .5;
    margin: 0;
}

html[data-scroll-direction="up"] .headline.l-btn,
html[data-scroll-direction="down"] .headline.l-btn,
.headline.l-btn:is(:hover, :focus) {
    opacity: 1;
}

.glossary>.headline>input {
    width: 100%;
    height: 100%;
}

.topic-title,
.glossary-item .l-btn::before {
    color: rgb(91, 124, 143);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.1em;
}

.blog-article {
    scroll-margin-top: 160px;
}

.last-update {
    display: flex;
    flex-direction: row;
    gap: 0 5px;
    font-family: 'Sulphur Point', 'Times New Roman', serif;
    font-weight: 500;
    font-size: 14px;
    color: rgb(91, 124, 143);
    width: auto;
    margin: 15px;
}

.blog-sheet-frame:has(.headline>input:checked) .glossary {
    transform: translateX(0);
}

.sheet.glossary>.glossary-list {
    order: 3;
    flex: 1 0 100%
}

.sheet.glossary>.glossary-list.first-grade {
    flex: 0 0 90%;
    max-height: 100%;
    min-height: max-content;
    width: 90%;
    margin: auto;
}

.glossary-list.first-grade>.glossary-item:first-of-type {
    margin-top: 0;
}

.glossary-item {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-auto-rows: max-content;
    place-items: center start;
    gap: 0 3px;
    margin: 5px 0;
}

.glossary-item>.glossary-link {
    grid-area: 1 / 2;
}

.glossary-item>ul {
    grid-column: 2;
    grid-row: 2;
}

.glossary-item .l-btn {
    align-self: start;
    margin: 0;
}

.glossary-item .l-btn:has(input:checked)::before {
    content: "-";
}

.glossary-item input {
    height: 12px;
    width: 12px;
}

.glossary-item .l-btn::before {
    grid-area: 1 / 1;
    content: "-";
}

.glossary-item .l-btn>span,
.glossary-item:has(ul, input:checked) .l-btn>.node-expand {
    display: none;
}

.glossary-item:has(ul)>.l-btn::before {
    grid-area: 1 / 1;
    content: "+";
}

.glossary-item:has(ul) .l-btn>.node-expand {
    display: block;
}

.glossary-item:has(ul, input:checked) .l-btn>.node-collapse {
    display: block;
}

.glossary-item>ul {
    display: none;
    height: 0;
}

.glossary-item:has(>.btn-treenode>input:checked)>ul {
    display: block;
    height: 100%;
    transition: height 2s smooth;
}

.blog-sheet-frame .card,
.blog-article {
    font-size: 17.5px;
    font-family: var(--article-lead-font);
}

.blog-sheet-frame .lead,
.blog-sheet-frame .blog-article>p {
    font-size: .9em;
    color: var(--corporate-black);
}

.blog-article .headline {
    color: var(--corporate-darkgreen);
    font-size: 1.1em;
    line-height: 1em;
    height: auto;
    margin: 10px 0 6px 0;
}

.blog-article>span:has(time) {
    font-size: .7em;
    color: var(--corporate-darkgreen);
    line-height: 1em;
    margin-bottom: 5px;
}

.blog-article ol,
.blog-article ul {
    font-size: .9em;
    margin-inline: 25px;
}

.blog-article>ul {
    margin: 5px 0 10px;

}

.blog-article>ul>li {
    list-style: disc;
    margin-inline-start: 3ch;
}

.blog-article>ul>li,
.blog-article>blockquote {
    color: var(--corporate-darkgreen)
}



@media (min-width: 540px) {
    .glossary-wrapper:has(input[data-dismissible-toggle]:checked) {
        display: block;
        position: fixed;
        bottom: 40px;
        left: 0;
        width: 100%;
        max-height: max-content;

        overflow: hidden;
    }

    .floater {
        left: unset;
        right: 4vw;
        height: 38px;
        bottom: 50px
    }
}

@media (min-width: 640px) {
    .glossary-wrapper {
        display: contents;
    }

    .drag-handle {
        display: none
    }

    .drag-handle:hover {
        background-color: rgb(211, 221, 217);
        background-image: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.2) 50%,
                transparent 50%);

        background-size: 100% 2px;

    }

    .sheet.glossary {
        position: fixed;
        top: 155px;
        left: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 0;
        align-content: start;
        font-family: 'Sulphur Point', 'Times New Roman', serif;
        font-weight: 500;
        font-size: 16px;
        width: clamp(150px, 40vw, 350px);
        transform: translateX(-120%);
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        padding: 10px 10px 40px 10px;
        max-height: calc(100vh - 155px);
        overflow-y: auto;
    }

    .sheet.glossary>.glossary-list.first-grade {
        flex: 0 0 90%;
        height: max-content;
        width: 90%;
        margin: 0 auto;
    }

    .glossary-wrapper:has(input[data-dismissible-toggle]:checked)>.l-btn.headline {
        grid-row: 1;
        height: max-content;
        position: static;
        top: 130px;
        margin: 10px 5px 5px 5px;
    }


    .sheet.glossary>.tree-buttons {
        order: 2;
        flex: 0 1 max-content
    }

    .tree-buttons {
        display: flex;
    }

    .sheet.glossary>.headline {
        order: 1;
        flex: 1 1 max-content;
        text-align: left
    }

    .sheet.glossary>.glossary-list {
        order: 3;
        flex: 1 0 100%
    }

    .blog-sheet-frame:has(input[data-dismissible-toggle]:checked) {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        overflow-y: hidden
    }


    .blog-sheet-frame:has(input[data-dismissible-toggle]:checked) .glossary-wrapper {
        position: sticky;
        flex: 1 1 clamp(200px, 30%, 260px);
        display: grid;
        grid-template-columns: 1fr 5px;
        grid-template-rows: max-content;
        height: 100%;
        max-height: unset;
        resize: none;
    }

    .blog-sheet-frame:has(input[data-dismissible-toggle]:checked) .glossary-wrapper .drag-handle {
        grid-column: 2;
        grid-row: 1 / 3;
        height: 100%;
        width: 100%;
        cursor: ew-resize;
        touch-action: none;
    }

    .blog-sheet {
        flex: 0 1 80%;
        padding: 0 5vw 0 15px;
        width: 100%;
        height: 100%;
        margin: 0 5vw 0 0;
        overflow-y: auto;
    }

    .site-page.page.blog:has(input[data-dismissible-toggle]:checked) {
        padding: 125px 0 40px 0;
        height: 100vh;
    }

    .blog-sheet-frame:has(input[data-dismissible-toggle]:checked) .sheet.glossary {
        position: static;
        grid-row: 2;
        display: grid;
        grid-template-rows: max-content 1fr;
        width: 100%;
        height: 100%;
        padding: 0 5px 20px 5px;
    }

    .blog-sheet-frame:has(input[data-dismissible-toggle]:checked) .sheet.glossary>.tree-buttons {
        position: sticky;
        top: 0;
        grid-row: 1;
        order: 2;
        flex: 0 1 100%;
        margin: 0 3px;
        gap: 0 5px;
    }

    .blog-sheet-frame:has(input[data-dismissible-toggle]:checked) .sheet.glossary>.glossary-list.first-grade {
        grid-row: 2;
        /* flex: 0 0 100%; */
        height: 100%;
        width: 90%;
        padding-bottom: 40px;
        margin: 0 auto;
        overflow-y: auto;
    }


}

@media (min-width: 740px) {}