:root {
    @property --carousel-child-count {
        syntax: "<integer>";
        inherits: true;
        initial-value: 0;
    }
    @property --carousel-selected {
        syntax: "<integer>";
        inherits: true;
        initial-value: 0;
    }
}


body.lw {
    width: 100%;
    min-height: 100%;

    grid-template: 
            "main"  auto
            "aside" auto
            / 1fr;

    overflow: auto;

    padding: var(--spacing-md);
    gap: var(--spacing-lg);
    
    box-sizing: border-box;
    
    place-content: start stretch;
    place-items: stretch;
    
    background: center/cover no-repeat url(/resources/common/img/login-background.png);

    > main {
        grid-area: main;
        
        display: grid;
        place-content: center stretch;
        place-items: center stretch;
        
        grid-template-rows: auto 1fr;

        margin: 0; 
        padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
        background: radial-gradient(#fcebe7, #fcf1ec);
        border-radius: 20px;
        box-shadow: 1px 2px 6px #0003, 3px 6px 20px #0003;
        
        img.login-logo {
            width: 100%;
            max-height: 5rem;
            object-fit: contain;
        }

        .login-feedback {
            padding: 1rem 0.5rem;
        }

        form {
            display: grid;
            place-items: stretch;
            gap: 1rem;
            
            /*
                let's stay manual until css framework is established (bootsfaces, ... https://vanillaframework.io/?)
            */
            
            input, button, select, textarea {
                &:hover, &:focus {
                    outline-offset: -5px;
                    outline: 2px solid #555;
                }
            }

            .login-links{
                text-align: center;
            }

            a {
                color:var(--fontColor);
                &:hover {
                    text-decoration: underline;
                    /* font-weight: 700; */
                    text-decoration-thickness: 2px;
                }

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

            input[type="text"], input[type="password"] {
                line-height: 2.25rem;
                padding: 0.25rem 1rem;
                border: 1px solid #ccc;
                border-radius: 1rem;
                width: 100%;
            }
            
            button[type="submit"] {
                width: 100%;
                line-height: 2.25rem;
                padding: 0.25rem 1rem;
                border-radius: 1rem;
                border: 1px solid #d41649;
                background-color: #d41649;
                color: #fcebe7;
                &:hover, &:focus {
                    outline-color: #fff;
                }
            }
        }

        .login-imprint {
            text-align: right;
            a {
                color: var(--fontColor);
                font-size: 0.875rem;
                &:hover {
                    text-decoration: underline;
                    text-decoration-thickness: 2px;
                }
                &:focus-visible {
                    outline: 2px solid #000;
                }
            }
        }

        .hr-text {
            line-height: 1em;
            position: relative;
            outline: 0;
            border: 0;
            /*color: black;*/
            text-align: center;
            height: 1.5em;
            opacity: 0.5;
        }

        .hr-text:before {
            content: "";
            background: linear-gradient(to right, transparent, #818078, transparent);
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 1px;
        }

        .hr-text:after {
            content: attr(data-content);
            position: relative;
            display: inline-block;
            padding: 0 0.5em;
            line-height: 1.5em;
            color: #818078;
            background-color: #fcfcfa;
        }

        .login-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding-top: 0.5rem;

            form {
                margin: 0;
            }

            .login-locale-select {
                background: transparent;
                border: 1px solid #ccc;
                border-radius: 0.5rem;
                padding: 0.25rem 0.5rem;
                font-size: 0.875rem;
                color: var(--fontColor);
                cursor: pointer;
                min-height: 44px;

                &:hover, &:focus-visible {
                    outline: 2px solid #555;
                    outline-offset: -2px;
                }
            }

            .login-imprint-link {
                margin-left: auto;
                color: var(--fontColor);
                font-size: 0.875rem;
                white-space: nowrap;
                min-height: 44px;
                display: inline-flex;
                align-items: center;

                &:hover {
                    text-decoration: underline;
                    text-decoration-thickness: 2px;
                }

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


    > aside#lim-login-message {
        grid-area: aside;

        * {
            color: white;
        }
        
        display: grid;
        grid-template:
            "arrow-left content arrow-right" 1fr
            "selectors  selectors selectors" auto
            / auto 1fr auto;

        .carousel-arrow {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            padding: 0.25rem;
            cursor: pointer;
            opacity: 0.55;
            transition: opacity 0.25s;
            line-height: 1;
            align-self: center;

            &:hover, &:focus-visible {
                opacity: 0.85;
            }
            &:focus-visible {
                outline: 2px solid white;
                outline-offset: 2px;
                border-radius: 4px;
            }
        }
        .carousel-arrow-left {
            grid-area: arrow-left;
        }
        .carousel-arrow-right {
            grid-area: arrow-right;
        }

        .carousel-panels {
            grid-area: content;
            overflow: hidden;

            > .carousel-panel {
                display: none;
                width: 100%;

                &.selected {
                    display: block;
                }
                
                h2 {
                    font-size: 1.75rem;
                }
                hr {
                    margin: 1rem 0;
                    opacity: 1;
                }
                p {
                    font-weight: 500;
                    font-size: 1rem;
                    line-height: 1.15;
                    letter-spacing: 0.25px;
                }
            }
        }
        
        .carousel-selectors {
            grid-area: selectors;

            display: grid;
            place-content: center;
            place-items: center;
            
            grid-template-columns: repeat(var(--carousel-child-count), auto);
            gap: 0.5rem;

            .carousel-selector {
                display: grid;
                padding: 0.25rem;
                box-sizing: content-box;
                --carousel-active: 0;
                width: 0; height: 0;
                min-width: 0.5rem;
                min-height: 0.5rem;
                background-color: white;
                border: 0;
                border-radius: 1rem;
                cursor: pointer;

                &.selected {
                    width: 2rem;
                }
                transition: width 0.3s;

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

/* small */   
@media (min-width: 576px) and (max-width: 849.9px) {
    body.lw {
        justify-items: center;
        padding: var(--spacing-lg) var(--spacing-xl);
        grid-template:
                "main"  auto
                "aside" auto
                / 1fr;
        place-content: start center;
        > main {
            width: 480px;
            padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
            grid-template-rows: 7rem 1fr;
            img.login-logo {
                max-height: 7rem;
            }
        }
        > aside {
            width: 480px;
        }
    }
}

/* medium */
@media (min-width: 850px) and (max-width: 1199.9px) {
    body.lw {
        width: 100%;+
        padding: var(--spacing-md);
        overflow: auto;
        grid-template:
                "main aside" auto
                / auto auto;
        gap: var(--spacing-lg);
        place-content: center;
        place-items: stretch auto;
        > main {
            width: 424px;
            padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
            grid-template-rows: 8rem 1fr;
            img.login-logo {
                max-height: 8rem;
            }
        }
        > aside#lim-login-message {
            font-size: 0.875em;
            width: 396px;
            padding: var(--spacing-sm);
            gap: var(--spacing-sm);
            .carousel-arrow {
                font-size: 1.5rem;
            }
            .carousel-selectors {
                gap: 1rem;
            }
            .carousel-selector {
                padding: 0.5rem;
                min-width: 0.75rem;
                min-height: 0.75rem;
                &.selected {
                    width: 4rem;
                }
            }
            .carousel-panels {
                position: relative;
            }
            .carousel-panel {
                display: none;
                &.selected {
                    display: block;
                }
            }
            .carousel-panels > .carousel-panel h2 {
                font-size: 2.5rem;
            }
            .carousel-panels > .carousel-panel p {
                font-size: 1.15rem;
            }
        }
    }
}

/* large */
@media (min-width: 1200px) and (max-width: 1299.9px) {
    body.lw {
        width: 100%;
        padding: var(--spacing-lg);
        overflow: auto;
        grid-template:
                "main aside" auto
                / auto auto;
        gap: var(--spacing-xl);
        place-content: center;
        place-items: stretch auto;
        > main {
            width: 560px;
            padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
            grid-template-rows: 10rem 1fr;
            img.login-logo {
                max-height: 10rem;
            }
        }
        > aside#lim-login-message {
            width: 475px;
            padding: var(--spacing-sm);
            gap: var(--spacing-sm);
            .carousel-arrow {
                font-size: 2rem;
            }
            .carousel-selectors {
                gap: 1rem;
            }
            .carousel-selector {
                padding: 0.5rem;
                min-width: 0.75rem;
                min-height: 0.75rem;
                &.selected {
                    width: 4rem;
                }
            }
            .carousel-panels {
                position: relative;
            }
            .carousel-panel {
                display: none;
                &.selected {
                    display: block;
                }
            }
            .carousel-panels > .carousel-panel h2 {
                font-size: 3.25rem;
            }
            .carousel-panels > .carousel-panel hr {
                margin: 1.5rem 0;
            }
            .carousel-panels > .carousel-panel p {
                font-size: 1.25rem;
            }
        }
    }
}

/* extra large */
@media (min-width: 1300px) and (max-width: 1499.9px) {
    body.lw {
        width: 100%;
        padding: var(--spacing-xl);
        overflow: auto;
        grid-template:
                "main aside" auto / auto auto;
        gap: calc(1.5 * var(--spacing-xxl));
        place-content: center;
        place-items: stretch auto;
        > main {
            width: 640px;
            padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
            grid-template-rows: 10rem 1fr;
            img.login-logo {
                max-height: 10rem;
            }
        }
        > aside#lim-login-message {
            width: 543px;
            padding: var(--spacing-md);
            gap: var(--spacing-md);
            .carousel-arrow {
                font-size: 2rem;
            }
            .carousel-selectors {
                gap: 1rem;
            }
            .carousel-selector {
                padding: 0.5rem;
                min-width: 0.75rem;
                min-height: 0.75rem;
                &.selected {
                    width: 4rem;
                }
            }
            .carousel-panels {
                position: relative;
            }
            .carousel-panel {
                display: none;
                &.selected {
                    display: block;
                }
            }
            .carousel-panels > .carousel-panel h2 {
                font-size: 3.25rem;
            }
            .carousel-panels > .carousel-panel hr {
                margin: 1.5rem 0;
            }
            .carousel-panels > .carousel-panel p {
                font-size: 1.25rem;
            }
        }
    }
}

/* gigantic */
@media (min-width: 1500px){
    body.lw {
        width: 100%;
        padding: var(--spacing-xxl);
        overflow: auto;
        grid-template:
                "main aside" auto
                / auto auto;
        gap: calc(2 * var(--spacing-xxl));
        place-content: center;
        place-items: stretch auto;
        > main {
            width: 780px;
            padding: var(--spacing-xl) var(--spacing-xxl) var(--spacing-xxl);
            grid-template-rows: 10rem 1fr;
            img.login-logo {
                max-height: 10rem;
            }
        }
        > aside#lim-login-message {
            width: 612px;
            padding: var(--spacing-lg);
            gap: var(--spacing-lg);
            .carousel-arrow {
                font-size: 2rem;
            }
            .carousel-selectors {
                gap: 1rem;
            }
            .carousel-selector {
                padding: 0.5rem;
                min-width: 0.75rem;
                min-height: 0.75rem;
                &.selected {
                    width: 4rem;
                }
            }
            .carousel-panels {
                position: relative;
            }
            .carousel-panel {
                display: none;
                &.selected {
                    display: block;
                }
            }
            .carousel-panels > .carousel-panel h2 {
                font-size: 3.25rem;
            }
            .carousel-panels > .carousel-panel hr {
                margin: 1.5rem 0;
            }
            .carousel-panels > .carousel-panel p {
                font-size: 1.25rem;
            }
        }
    }
}