.multi-frame
{
    width: 100%;
    overflow-x: auto;
    display: grid;
    grid-template-columns: 100vw 100vw;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}
.multi-frame .frame
{
    width: 100%;
    scroll-snap-align: center;
}
.frame
{
    color: var(--font-color);
    background-color: var(--bg-color-base);
    padding: var(--border-width);
    border: 4px outset color-mix(in lab, var(--border-color), #000 10% );
    border-top-color: color-mix(in lab, var(--border-color), #FFFFFF 20% );
    border-bottom-color: color-mix(in lab, var(--border-color), #000000 20% );
    box-shadow: 0px 0px 3px 0px #201815;
    /*margin: 0 auto;*/
}
.frame.max
{
    height: 100%;
    display: grid;
    grid-template-rows: max-content auto max-content;
}
.frame .two-columns
{
    display: flex;
    flex-direction: column;
}
.frame .two-columns > *:first-child
{
    flex-grow: 1;
}
.frame .two-columns > *:last-child
{
    width: max-content;
}
.frame-header
{
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-bottom: calc(var(--border-width) * 1.5);
}
.frame-header h1
{
    flex-grow: 1;
}
.frame-content
{
    color: var(--font-color-content);
    background-color: var(--bg-color-light);
    border: 4px inset var(--border-color);
    border-top-color: color-mix(in lab, var(--border-color), #000000 20% );
    border-bottom-color: color-mix(in lab, var(--border-color), #FFFFFF 20% );
    padding: var(--content-padding);
    min-height: 128px;
    overflow-x: clip;
}
.frame-content.small-borders
{
    color: var(--font-color-content);
    background-color: var(--bg-color-dark);
    border: 1px inset var(--border-color);
    border-top-color: color-mix(in lab, var(--border-color), #000000 20% );
    border-bottom-color: color-mix(in lab, var(--border-color), #FFFFFF 20% );
    padding: 0;
    min-height: 128px;
}
.frame-footer
{
    background-color: var(--bg-color-dark);
    border: 4px inset var(--border-color);
    border-top-color: color-mix(in lab, var(--border-color), #000000 20% );
    border-bottom-color: color-mix(in lab, var(--border-color), #FFFFFF 20% );
    padding: var(--content-padding);
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.frame > .frame-content:not(:last-of-type),
.frame .two-columns:not(:last-of-type),
.frame-footer:not(:last-of-type)
{
    margin-bottom: calc(var(--border-width) * 1.5);
}
.spacer
{
    flex-grow: 1;
}
button, .button
{
    background-color: var(--button-color);
    padding: 10px 12px 10px 12px;
    text-align: left;
    color: #000;
    font-weight: 600;
    display: inline-block;
    vertical-align: baseline;
    min-width: 128px;
    border: none;
    line-height: inherit;
    white-space: nowrap;
    box-shadow: inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 10px 2px -8px color-mix(in lab, var(--button-color), #FFFFFF 40% ),
    inset 0px 10px 2px -8px color-mix(in lab, var(--button-color), #000000 20% ),
    inset 0px -9px 2px -8px #000,
    0px 0px 4px 0px #000;
    position: relative;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    height: 36px;
    text-align: left;
}
button:hover, button:focus, .button:hover, .button:focus
{
    color: #000;
    text-decoration: none;
    outline: 0;
    background-color: var(--button-color-hover);
    box-shadow: inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 9px 2px -8px #fff,
    inset 0px 8px 4px -8px #000,
    inset 0px -8px 4px -8px #000,
    inset 0px -9px 2px -8px color-mix(in lab, var(--button-color-hover), #000000 20% ),
    0px 0px 4px 0px #000,
    inset 0px 0px 4px 2px color-mix(in lab, var(--button-color-hover), #FFFFFF 20% );

    filter: brightness(120%) drop-shadow(0 0 2px color-mix(in lab, var(--button-color-hover), #FFFFFF 20% ));
}
button:active, .button.active
{
    position: relative;
    padding-top: 12px;
    padding-bottom: 8px;
    vertical-align: -2px;
    box-shadow: inset 0px 10px 2px -8px #000,
    inset 0px 9px 2px -8px #000,
    inset 8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset -8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset -8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 0px 9px 2px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 0px -9px 2px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 0px -8.5px 0px -8px color-mix(in lab, var(--button-color-hover), #FFFFFF 30% ),
    0px 0px 4px 0px #000;

    background-color: color-mix(in lab, var(--button-color-hover), #000000 20% );
    filter: none;
    outline: 0;
}
button[disabled], .button[disabled]
{
    --button-color: #636363;
    --button-color-hover: #515151;
    color: #686868;
    position: relative;
    padding-top: 12px;
    padding-bottom: 8px;
    vertical-align: -2px;
    box-shadow: inset 0px 10px 2px -8px #000,
    inset 0px 9px 2px -8px #000,
    inset 8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset -8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset -8px 0px 4px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 0px 9px 2px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 0px -9px 2px -8px color-mix(in lab, var(--button-color-hover), #000000 10% ),
    inset 0px -8.5px 0px -8px color-mix(in lab, var(--button-color-hover), #FFFFFF 30% ),
    0px 0px 4px 0px #000;

    background-color: color-mix(in lab, var(--button-color-hover), #000000 20% );
    filter: none;
    outline: 0;
    cursor: not-allowed;
}
button.green, .button.green
{
    --button-color: #5eb663;
    --button-color-hover: #5eb663;
}
button.red, .button.red
{
    --button-color: #b65e5e;
    --button-color-hover: #b65e5e;
}
button.icon, .button.icon
{
    min-width: unset;
}


input, textarea, div[contenteditable=true]
{
    vertical-align: baseline;
    font-family: inherit;
    line-height: 1.2;
    font-size: 105%;
    height: 36px;
    width: 100%;
    background: #8e8e8e;
    border-radius: 4px;
    padding: 6px;
    border: none;
    box-shadow: inset 0px 4px 1px -2px #000,inset 0px -4px 1px -2px #c5c5c5,inset 2px 0px 1px 0px #5f5f5f,inset -2px 0px 1px 0px #5f5f5f,inset 0px -2px 2px 0px #5f5f5f,0px 0px 4px 1px #2e2521;
    display: block;
}
div[contenteditable=true]
{
    height: unset;
    min-height: 36px;
}
input:focus,
div[contenteditable=true]:focus
{
    outline: none;
    background: #f0dab4;
    box-shadow: inset 0px 4px 2px -2px #000,inset 0px -1px 1px 0px #74624b,inset 0px -4px 2px -2px #e0e0e0,inset 2px 0px 2px 0px #a6885c,inset -2px 0px 2px 0px #a6885c,0px 0px 4px 1px #2e2521;
}
input:user-invalid
{
    background-color: #f08686;
}
input[type="checkbox"], input[type="radio"]
{
    display: inline-block;
    height: unset;
    margin-right: 1rem;
    width: auto;
}
.input.radio
{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.editable:not(.edit) input
{
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: inherit;
}
.show-in-edit-mode
{
    display: none;
}
.editable.edit .show-in-edit-mode
{
    display: block;
}

.hide-in-edit-mode
{
    display: block;
}
.editable.edit .hide-in-edit-mode
{
    display: none;
}


.editable dd:has(input[type="checkbox"]):after
{
    content: "Nein";
}
.editable dd:has(input[type="checkbox"]:checked):after
{
    content: "Ja";
}
.editable input[type="checkbox"]
{
    display: none;
}


.editable.edit dd:has(input[type="checkbox"]):after
{
    content: "";
}
.editable.edit dd:has(input[type="checkbox"]:checked):after
{
    content: "";
}
.editable.edit input[type="checkbox"]
{
    display: block;
}


dialog
{
    margin: auto !important;
    border: none;
}
dialog::backdrop
{
    backdrop-filter: blur(0.3rem);
}
dialog .frame
{
    max-width: unset !important;
    min-width: 25rem !important;
}
dl
{
    display: grid;
    grid-template-columns: minmax(min-content, max-content) auto;
    align-items: center;
    grid-gap: .5rem 2rem;
}
dl dt
{

}
dl dd
{
    width: 100%;
}
dl dd:has(button)
{
    display: inline-flex;
    justify-content: end;
}


ul
{
    list-style: none;
}
ul li
{
    --button-color: #8e8e8e;
    --button-color-hover: #e39827;
    background-color: var(--button-color);
    padding: 10px 12px 10px 12px;
    text-align: left;
    color: #000;
    font-weight: 600;
    display: inline-block;
    vertical-align: baseline;
    min-width: 128px;
    border: none;
    line-height: inherit;
    white-space: nowrap;
    box-shadow: inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 10px 2px -8px color-mix(in lab, var(--button-color), #FFFFFF 40% ),
    inset 0px 10px 2px -8px color-mix(in lab, var(--button-color), #000000 20% ),
    inset 0px -9px 2px -8px #000,
    0px 0px 4px 0px #000;
    position: relative;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    height: 36px;
    text-align: left;
}
ul li:hover, ul li.selected
{
    background-color: var(--button-color-hover);
}

.item-grid
{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: .5rem;
}
.item-grid > *
{
    aspect-ratio: 1/1;
}
.item-grid .item-socket
{
    margin: 1rem;
    border: 1px solid black;
    background-color: var(--bg-color-dark);
}
.item-grid .item
{
    border: 1px solid black;
}


.grid-inset
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    grid-gap: .2rem .1rem;
    padding: .2rem .1rem;
    background-color: var(--bg-color-dark);
}
.frame-content:has(.grid-inset),
.frame-content:has(.list-inset)
{
    background-color: var(--bg-color-light);
    padding: var(--border-width);
    border: 2px outset var(--border-color);
    border-top-color: color-mix(in lab, var(--border-color), #FFFFFF 20% );
    border-bottom-color: color-mix(in lab, var(--border-color), #000000 20% );
    box-shadow: 0px 0px 3px 0px #201815;
    min-width: min-content;
}



.list-inset
{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: .2rem .1rem;
    padding: .2rem .1rem;
    background-color: var(--bg-color-dark);
}
.list-inset .placeholder
{
    margin: var(--border-width);
    height: 2rem;
    background-color: var(--bg-color-base);
}
.list-inset .placeholder button
{
    width: 100%;
    text-align: center;
}

.frame-header + .list-inset
{
    margin-top: var(--border-width);
}

.list-inset-new
{
    overflow-y: auto;
    height: 100%;
}
.list-inset-new > *
{
    color: var(--font-color-content);
    background-color: var(--bg-color-light);
    border: 1px inset var(--border-color);
    border-top-color: color-mix(in lab, var(--border-color), #FFFFFF 20% );
    border-bottom-color: color-mix(in lab, var(--border-color), #000000 20% );
    padding: var(--content-padding);
}