*, *::before, *::after {
    box-sizing: border-box
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
    margin: 0
}

ul[role='list'], ol[role='list'] {
    list-style: none
}

body {
    min-height: 100vh;
    line-height: 1.5
}

h1, h2, h3, h4, button, input, label {
    line-height: 1.1
}

h1, h2, h3, h4 {
    text-wrap: balance
}

a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor
}

img, picture, video {
    max-width: 100%;
    display: block;
    height: auto
}

input, button, textarea, select {
    font: inherit
}

textarea:not([rows]) {
    min-height: 10em
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Work Sans';
    font-style: italic;
    font-weight: 100 900;
    src: url(/assets/work-sans-italic.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 100 900;
    src: url(/assets/work-sans.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;


    --inputPadding: 5px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-family: 'Work Sans', sans-serif;
}

#main {
    padding: 2rem;

    @media (max-width: 600px) {
        padding: 1rem;
    }
}


#main-header {
    padding: 1rem 2rem;
    background-color: #0a73bb;
    color: white;
    font-weight: 600;
    text-transform: uppercase;

    display: flex;
    justify-content: space-between;
    gap: 2rem;

    @media (max-width: 600px) {
        padding-inline: 1rem;
    }

    nav {
        ul {
            margin: 0;
            padding: 0;
            list-style-type: "";
            display: flex;
            gap: 1rem;
        }
    }
}

h1 {
    font-weight: 600;
}

.pruefobjekte {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    article {
        margin-block: 1rem;

        h3 {
            font-weight: 550;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            font-size: 1rem;
            margin-bottom: 0.5em;
        }
    }

    .regalcheckliste {
        margin-block: 1rem;

        h3 {
            text-transform: none;
            font-weight: 500;
            margin: 1rem 0 0.5rem 0;
        }
    }
}

dl {
    display: flex;
    gap: 1em;

    dd {
        align-self: end;
    }
}

#unterschrift {
    height: 2rem;
}

ul.comma-seperated {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1ch;

    list-style-type: "";
    padding: 0;
    margin: 0;

    li:not(:last-child) {
        position: relative;

        &::after {
            content: ", ";
            position: absolute;
        }
    }
}

.firmen {
    margin-top: 2rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

dl {
    dt {
        font-weight: 480;
    }
}


a,
button.link-btn {
    cursor: pointer;
    text-decoration: none;
    transition-property: color, background-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 0.1em;
    text-transform: inherit;

    &:link, &:visited, &:hover, &:active {
        color: inherit;
    }
}


.fieldset {
    --cols: 4;

    /*
    @media (max-width: 1200px) {
        --cols: 3;
    }

    @media (max-width: 1023px) {
        --cols: 2;
    }

    @media (max-width: 600px) {
        --cols: 1;
    }
     */

    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr) );
    gap: 1rem;
    align-items: start;

    padding: 0;
    border: none;

    @media (max-width: 600px) {
        row-gap: 0.5rem;
    }

    @media print {
        row-gap: 0.5rem;
    }

    &#hard-facts {
        margin-bottom: 2rem;

        dl {
            grid-column: 1 / -1;

            display: grid;
            grid-template-columns: subgrid;
            row-gap: 0.5em;
        }
    }

    legend {
        margin-top: 2rem;
        margin-bottom: 0.8rem;
    }

    /* form */

    .matrix-field {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .matrix-content {

            .block {
                border: 1px solid black;
                position: relative;
                padding: 1rem;

                @media (max-width: 600px) {
                    padding: 0.5rem;
                }

                .close-btn {
                    position: absolute;
                    top: -1rem;
                    right: -0.5rem;
                }
            }
        }
    }

    /* _entry */

    .matrix-content {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        row-gap: 1rem;

        &:not(:has(.matrix-block)) {
            display: none;
        }

        .matrix-block {

            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat( var(--cols), minmax(0, 1fr) );

            & > legend {
                margin-top: 0;
                margin-bottom: 0;
                font-size: 1em;

                background: white;
                padding: 0 .5em;
            }

            .fieldset {
                grid-column: 1 / -1;
                display: grid;
                grid-template-columns: subgrid;
                row-gap: 0.5rem;
                margin: 0;

                legend {
                    font-weight: 500;
                    text-transform: uppercase;
                }
            }
        }
    }

    .subfield-types {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

    .subfields {
        grid-column: 1 / -1;

        display: flex;
        flex-direction: column;
        gap: 1rem;

        .fieldset {
            display: flex;
            flex-direction: column;
        }
    }

    .heading, .markdown {
        grid-column: 1 / -1;
    }

    .heading {
        font-size: 1.2em;
        font-weight: 500;
        margin-top: 0.5rem;
    }

    &.subfield-wrapper {
        --cols: 1;
        gap: 0;
    }

    .matrix-content {
        .block,
        .matrix-block {

            --bg-color: white;
            background-color: color-mix(in hsl, var(--bg-color), white 60%);

            &.red {
                --bg-color: red;
            }

            &.yellow {
                --bg-color: yellow;
            }

            &.green {
                --bg-color: green;
            }

            &.teal {
                --bg-color: teal;
            }

            &.purple {
                --bg-color: purple;
            }
        }
    }
}

.width-100 {
    grid-column-end: span 4;
}

.width-75 {
    grid-column-end: span 3;
}

.width-50 {
    grid-column-end: span 2;
}

.width-25 {
    grid-column-end: span 1;
}

@media (max-width: 1200px) {
    .width-75 {
        grid-column-end: span 4;
    }

    .width-50 {
        grid-column-end: span 2;
    }

    .width-25 {
        grid-column-end: span 2;
    }
}

@media (max-width: 900px) {
    .width-50 {
        grid-column-end: span 4;
    }

    .width-25 {
        grid-column-end: span 4;
    }
}

.field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;

    &.row-span-2 {
        grid-row-end: span 2;
    }

    label {
        text-transform: uppercase;
        font-weight: 700;
        padding-left: var(--inputPadding);
        margin-bottom: 0.3em;
        text-wrap: balance;

        .required {
            color: red;
        }

        &:has(input[type="checkbox"]),
        &:has(input[type="radio"]) {
            text-transform: none;
            font-weight: 450;
        }
    }

    label.inline-label {
        margin-top: 1.1em;
        margin-bottom: 0;

        text-transform: none;
        font-weight: normal;

        display: flex;
        align-items: baseline;
        gap: 0.3em;

        @media (max-width: 600px) {
            margin-top: 0;
        }
    }

    .input-wrapper {
        &.with-suffix,
        &.radio ul {
            display: flex;
            gap: 0.5em;
            align-items: baseline;
            flex-wrap: wrap;
        }

    }

    .errors {
        margin-top: 1rem;
        border: 4px solid red;
        padding: 0.5em 1em 0.5em 2em;
    }

    .flex {
        display: flex;
        gap: 0.5em;

        select {
            max-width: calc(100% - 2.5rem);
            flex: 1;
        }
    }

    .aktuell-hoechste-nummer {
        margin-top: 0.5rem;
        font-size: 0.85em;
    }
}


.add-option.round,
button.close-btn {
    --size: 1.0rem;
    --icon-size: 1rem;
    --padding: 10px;

    padding: var(--padding);
    height: var(--size);
    width: var(--size);
    min-width: var(--size);
    box-sizing: content-box;

    --display: grid;
    display: var(--display);
    place-items: center;
    align-content: center;

    &::before, &::after {
        display: block;
        content: " ";
        width: var(--icon-size);
        height: 2px;
        background-color: currentColor;

        grid-row: 1;
        grid-column: 1;
        rotate: 45deg;
    }

    &::after {
        rotate: -45deg;
    }
}

.add-option.round {
    --padding: 5px;
    --icon-size: 0.8rem;

    border-radius: 50%;
    border-color: black;

    &::before {
        rotate: 0deg;
    }

    &::after {
        rotate: 90deg;
    }
}


.tabs-wrapper {
    margin-top: 5px;
    margin-inline: -1rem;
    position: relative;

    &::before, &::after {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        width: 1.5rem;
        z-index: 2;
    }

    &::before {
        left: 0;

        background: linear-gradient(
                to right,
                hsl(0, 0%, 100%) 0%,
                hsla(0, 0%, 100%, 0) 100%
        );
    }

    &::after {
        right: 0;

        background: linear-gradient(
                to left,
                hsl(0, 0%, 100%) 0%,
                hsla(0, 0%, 100%, 0) 100%
        );
    }

    ul {
        padding-inline: 1rem;
        overflow-x: auto;
        overflow-y: clip;
        scrollbar-width: none;

        display: flex;
        list-style: none;
        gap: 5px;

        position: relative;

        li {

            &:has(a[aria-current="page"]),
            &:has(button[aria-current="true"]) {
                translate: 0 1px;
            }
        }

        a, button {
            padding: 0.5rem 1rem;
            display: block;
            border: 1px solid black;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            background-color: lightgrey;
            color: inherit;
            line-height: 1;
            font-weight: normal;

            &:hover,
            &[aria-current="page"],
            &[aria-current="true"] {
                background-color: white;
            }

            &[aria-current="page"],
            &[aria-current="true"] {
                border-bottom: none;
                font-weight: bold;
            }

            &:focus-visible {
                outline: 2px solid currentColor;
            }
        }
    }

    .line {
        height: 1px;
        margin-top: -1px;
        background-color: black;
        margin-inline: 1rem;
    }
}

.tab {
    display: none;

    border: 1px solid black;
    border-top: none;

    padding: 1rem;
    margin: 0;

    &[aria-current="true"] {
        display: grid;
    }

    &:first-of-type:last-of-type {
        border: none;
        padding: 0;
    }
}


form {
    max-width: 100%;
}

input, select, textarea {
    max-width: 100%;
    border-radius: 0;
    color: currentColor;
    font: inherit;
    border: 1px solid currentColor;

    &:focus-visible {
        outline: 2px dotted;
        outline-offset: 1px;
    }
}

input {
    &[type=text], &[type=number], &[type=date], &[type=file] {
        padding: var(--inputPadding);
        line-height: 1;
    }

    &[type=file] {
        width: 100%;
    }

    &[type=radio], &[type=checkbox] {
        accent-color: black;
    }
}

select {
    appearance: none;
    padding: var(--inputPadding);
    background-color: white;
    line-height: 1;
}


textarea {
    min-height: 2lh;
    width: 100%;
    padding: 0.5em;
    resize: vertical;
}

input[switch] {
    accent-color: black;
}

button {
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
}

button:not(.link-btn),
.btn,
a.btn {
    --text: white;
    --bg: black;
    --border: var(--bg);

    border: 2px solid var(--border);
    padding: var(--padding, 0.625em 1.5em);
    background-color: var(--bg);
    color: white;
    cursor: pointer;
    width: fit-content;
    line-height: 1;
    font-weight: 500;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
    display: var(--display, inline-block);

    @media (max-width: 600px) {

    }

    &:link, &:visited {
        color: var(--text);
    }

    &:hover, &:focus {
        color: var(--bg);
        background-color: var(--text);
    }

    &[disabled] {
        background-color: grey;
        cursor: not-allowed;
    }

    &.remove-asset {
        padding: 0 13px;
    }

    &.secondary {
        --text: black;
        --bg: white;
        --border: var(--text);
    }
}


.flash-message {
    padding: 1rem;
    background-color: currentColor;

    &.error {
        background-color: red;
    }

    ul {
        margin-block-start: 1lh;
        padding-inline-start: 1em;
    }
}

.files-list {
    padding-left: 0;
    list-style-type: "";
    display: flex;
    flex-direction: column;
    gap: 0.3rem;

    &.images {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 200px));

        gap: 0.5rem;

        a .flex {
            flex-direction: column;
        }

        img {
            width: 100%;
        }
    }

    &:not(:has(li)) {
        display: none;
    }

    a {
        &:hover, &:focus {
            color: currentColor;
        }

        &:focus-visible {
            outline: 3px solid currentColor;
            outline-offset: 3px;
        }
    }

    .asset-list-item {
        align-items: center;
        width: 100%;
    }

    .flex {
        display: flex;
        gap: 0.5em;
    }

    img {
        width: 40px;
        min-width: 40px;
    }

    .icon img {
        width: 20px;
        min-width: 20px;
    }

    .filename {
        text-overflow: ellipsis;
        display: block;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

    &.remove-files {
        margin-bottom: 1rem;

        & > .flex {
            justify-content: space-between;
            align-items: baseline;
        }

        .asset-list-item {
            max-width: calc(100% - 0.5em - 2em);
        }
    }
}

.list-none {
    list-style-type: "";
    padding-left: 0;

    label {
        text-indent: -1.7em;
        display: block;
        padding-left: 1.7em;
        hyphens: auto;
    }
}

.login {

    form {
        max-width: 30rem;
        margin-inline: auto;

        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

.pruefbericht.edit {
    #main {
        .actions {
            position: sticky;
            bottom: 1rem;
            margin-top: 1rem;

            .frosted {
                margin-left: auto;
                width: max-content;
                padding: 1rem;
                border-radius: 8px;

                background-color: rgba(255, 255, 255, .2);
                backdrop-filter: blur(16px);
            }
        }

        .subnav {
            display: none;
        }

        @media (max-width: 600px) {
            .fieldset {
                row-gap: 1.25rem;

                .matrix-content {
                    .matrix-block {
                        .fieldset {
                            row-gap: 1.25rem;
                        }
                    }
                }
            }

            .matrix-field {
                margin-bottom: 1rem;
            }
        }
    }
}

dialog {
    h1 {
        margin-bottom: 1em;
    }

    form[method="dialog"] {
        width: max-content;
        margin-left: auto;
    }

    &::backdrop {
        background-color: rgba(0, 0, 0, .6);
    }

    .actions {
        margin-top: 1rem;
    }
}

.pruefbericht {
    article {
        header {
            margin-bottom: 2rem;
        }
    }

    .subnav {
        margin-bottom: 2rem;
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;

        @media (max-width: 600px) {
            font-size: 0.9rem;

            --padding: 0.5em 1.2em;
        }
    }
}

.bericht-index {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    padding: 0;
    margin: 0;
    margin-top: 1rem;

    a {
        display: block;
        padding: 1rem;
        outline: 1px solid black;
        border-radius: 8px;
        transition: outline 0.1s ease-out;

        &:hover, &:focus {
            outline: 3px solid black;
        }
    }

    .title {
        display: block;
        font-weight: 500;
        font-size: 1.2rem;
    }
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.condition:not(.condition-met) {
    display: none;
}


dialog {
    max-width: none;
    max-height: 95%;
    overflow: auto;

    width: 95%;

    border: none;

    &::backdrop {
        background: rgba(0, 0, 0, 0.6);
    }
}

.images-slideshow {
    height: 95%;

    form[method="dialog"] {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 2;

        .close-btn {
            padding: 10px;
        }
    }

    .swiper {
        height: 100%;
    }

    picture {
        height: 100%;
    }

    img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        object-position: center;
    }
}

#search-overlay {
    #search-input-form {
        input {
            display: block;
            width: 100%;
            padding: 0.5em 1em;
            margin-top: .5rem;
        }
    }

    #search-result {
        margin-top: 1rem;

        ul {
            padding: 0;
            list-style-type: "";

            li {
                .title {
                    font-weight: 450;
                }

                & + li {
                    a {
                        border-top: 1px solid black;
                    }
                }
            }
        }

        a {
            display: flex;
            justify-content: space-between;
            padding: 0.4em 0.5em;

            &:focus, &:hover {
                background: lightgray;
            }
        }
    }
}

dl.berichtNr {
    display: none;
}

@media screen {
    .screen-hidden {
        display: none;
    }
}

.briefkopf {
    margin-block: 1rem;
}

@media print {
    .print-hidden {
        display: none !important;
    }

    dl.asset {
        dt {
            display: none;
        }
    }
}


#signing-dialog{
    width: 95%;
    height: 95%;
    border: none;

    form[method="dialog"]{
        position: fixed;
        top: 1rem;
        right: 1rem;
    }

    &::backdrop{
        background: rgba(0,0,0,.7);
    }

    iframe{
        width: 100%;
        height: 100%;
    }
}

#offline-notice{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem;

    background: red;
    color: white;

    display: none;
}

.offline{
    #offline-notice{
        display: block;
    }
}