* {
    font-family: Quicksand, Helvetica, Arial, 'sans-serif';
}

header {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-surface);
    box-shadow: var(--mud-elevation-4);
    z-index: 10;
}

header .burger-button{
    position: absolute;
    left: 0;
}

header .headline{
    position: relative;
    font-size: 20px;
    margin: 0 16px;
}

main{
    position: absolute;
    left: 0;
    top: 48px;
    right: 0;
    bottom: 0;
    overflow-y: auto;
}

    main.admin {
        position: relative;
        top: 0;
        margin: 0 auto;
        max-width: 1024px;
    }

footer {
    height: 64px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 8px;
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-surface);
    z-index: 10;
}

    footer a {
        color: var(--mud-palette-surface);
        text-decoration: none;
    }

#top-menu {
    visibility: collapse;
    width: 0;
}

#drawer {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 20;
    visibility: collapse;
}

    #drawer .content {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 300px;
        display: flex;
        flex-direction: column;
        background: var(--mud-palette-surface);
        box-shadow: var(--mud-elevation-8);
        z-index: 25;
    }

    #drawer .background {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,.5);
    }

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

    .section.even {
        background: var(--mud-palette-surface);
    }

    .section.uneven {
        background: var(--mud-palette-background);
    }

.section-image {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
}

.section-info {
}

.subsection{
    padding: 32px;
}

.foldable-header {
    display: flex;
    padding: 8px;
    cursor: pointer;
}

    .foldable-header .mud-icon-root{
        transform: rotate(90deg);
    }

.foldable-content {
    overflow: hidden;
}

.foldable.closed .foldable-header .mud-icon-root {
    transform: rotate(-90deg);
}

.foldable.closed .foldable-content {
    height: 0;
}

    .foldable-content.open {
        height: initial;
    }

.logon {
    visibility: visible;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    width: calc(100vw - 64px);
    background-color: var(--mud-palette-surface);
    padding: 12px;
    border-radius: 12px;
    position: relative;
    margin: 0 auto;
    top: calc(38.2vh - 160px);
}

.link {
    position: absolute;
    bottom: 8px;
    margin: 0 auto;
}

.mud-picker-color-picker {
    width: 0;
    height: 0;
}

.mud-picker-color-controls {
    visibility: collapse;
}

    .mud-picker-color-controls .mud-picker-color-controls-row {
        height: 0;
    }

.mud-picker-color-view {
    width: initial;
    height: initial;
}

.mud-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
}

.colorpicker {
    height: 56px;
    display: flex;
    gap: 12px;
}

.coloritem {
    width: 36px;
    height: 36px;
    transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-radius 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: var(--mud-default-borderradius);
    box-shadow: 0 0 6px rgba(127, 130, 134, .18);
}

    .coloritem:hover {
        cursor: pointer;
        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
    }


    .coloritem.selected {
        border-radius: 50%;
        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
    }

.mud-button{
    border-radius: 26px;
}

@media (min-width: 800px) {
    /* Tablet-spezifische Stile */

    .section {
        flex-direction: row;
        min-height: 80vh;
    }

        .section.uneven {
            background: var(--mud-palette-background);
            flex-direction: row-reverse;
        }

    .section-image {
        width: 61.8%;
        aspect-ratio: initial;
    }

    .section-info {
        width: 392px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .logon {
        width: 736px;
    }
}


@media (min-width: 1024px) {
    /* Desktop-spezifische Stile */

    header {
        align-items: center;
        justify-content: flex-start;
    }

    #burger-button{
        visibility: collapse;
    }

    #top-menu {
        position: relative;
        visibility: visible;
        display: flex;
        flex-direction: row;
        height: 48px;
        width: initial;
    }

        #top-menu .list-item{
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            padding: 0 16px;
            font-weight: 500;
        }

        #top-menu .list-item:hover {
            background-color: var(--mud-palette-tertiary);
        }

        #drawer {
            visibility: collapse;
        }

    .section-image {
        width: 61.8%;
    }

    .section-info {
        width: 38.2%;
    }

    .subsection {
        padding: 64px;
    }
}