:root
{
    --platin: #E8E8E8;
    --lazuli: #05668D;
    --green: #6F8F72;
    --umber: #8C271E;
    --gold: #E8AA14;

    --color-60: #fcfdf8;
    --color-30: #8c9137;
    --color-10: #22110a;
    --color-neutral: #FF8811;
    --color-neutral2: #FB8500;






    --bg-color-base: #313031;
    --bg-color-light: color-mix(in lab, var(--bg-color-base), #FFFFFF 10% );
    --bg-color-dark: color-mix(in lab, var(--bg-color-base), #000000 20% );

    --border-width: 8px;
    --content-padding: 8px;
    --border-color: #313031;
    --font-color: #ffe6c0;
    --font-color-content: #fff7f0;


    --panel-background: var(--bg-color-light);
    --panel-inset-background: color-mix(in lab, var(--color-30), white 20%);
    --panel-inset-dark-background: color-mix(in lab, var(--color-30), black 40%);

    --button-color: #8e8e8e;
    --button-color-hover: #ffffff;
}

.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 .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: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}
.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;
}
.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
{
    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;
}
input: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:invalid
{
    background-color: #f08686;
}
input[type="checkbox"], input[type="radio"]
{
    display: inline-block;
    height: unset;
    margin-right: 1rem;
}
.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;
}