//Media Queries

@media print {
    * {
        font-size: 10pt;
    }
    header, footer, main, nav, aside {
        body > & {
            width: 19cm;
            margin: auto;
            .border-box();
        }
    }
    header, footer{
        padding: 0.5rem;
        ;
    }
    body {
        & > header {
            font-size: 200%;
            font-weight: bolder;
        }
        & > nav, > header {
            display: none;
        }
    }
    main {
        padding: 1.5rem 0.5rem 3.25rem;
        .flexKinder(flow,'row');
        width: @breiteTextBereich;
        section {
            padding: 0 0.5rem;
            h1, h2, p {
                margin-bottom: 1rem;
            }
            footer {
                padding: 0;
                p {
                    padding: 0.5rem;
                    font-size: 85%;
                    margin-bottom: 0;
                }
            }
            article.liste {
                page-break-after: always;
            }
        }
        h1, h2 {
            margin-left: 5em;
        }
        h1 {
            font-size: 2em;
        }
        h2 {
            font-size: 1.75em;
        }
        table {
            margin: auto;
            td, th {
                padding: 0.5rem;
                collapse: true;
            }
        }
    }
    aside {
        padding-top: 2rem;
        .flexKinder(flow,'row');
        width: @breiteNavBereich;
    }
}

@media screen and (min-width: 831px) {
    header, footer, main, nav, aside {
        body > & {
            width: @breiteMainBereich;
            margin: auto;
            .border-box();
        }
    }
    header, footer{
        padding: 0.5rem;
    }
    body {
        & > header {
            font-size: 200%;
            font-weight: bolder;
        }
        & > nav {
            ul {
                .flexEltern();
                margin: 0;
                li {
                    display: inline-block;
                    height: 1.5rem;
                    padding: 0.5rem 1rem;
                }
            }
        }
    }
    main {
        padding: 1.5rem 0.5rem 3.25rem;
        .flexKinder(flow,'row');
        width: @breiteTextBereich;
        section {
            padding: 0 0.5rem;
            h1, h2, p {
                margin-bottom: 1rem;
            }
            footer {
                padding: 0;
                p {
                    padding: 0.5rem;
                    font-size: 85%;
                    margin-bottom: 0;
                }
            }
        }
        h1, h2 {
            margin-left: 5em;
        }
        h1 {
            font-size: 2em;
        }
        h2 {
            font-size: 1.75em;
        }
        table {
            margin: auto;
            td, th {
                padding: 0.5rem;
            }
        }
    }
    aside {
        padding-top: 2rem;
        .flexKinder(flow,'row');
        width: @breiteNavBereich;
    }
}

@media screen and (max-width: 830px) {
    html body {
        @boxHeight: 5rem;
        & > header {
            height: @boxHeight;
            font-size: @boxHeight;
            text-align: center;
            padding: 1rem;
        }
        & > footer {
            padding: 1rem;
        }
        & > nav {
            ul {
                li {
                    display: inline-block;
                    border: none;
                    width: auto;
                    height: 1.5em;
                    padding-top: 0.25em;
                    a {
                        padding: 0.75rem;
                    }
                    &:not(:first-child) {
                        border-left: none;
                    }
                }
            }
        }
        main section {
            header {
                padding: 0 0.5rem;
                h1, h2, p {
                    margin-bottom: 1rem;
                }
                h1, h2 {
                    margin-left: 5em;
                }
                h1 {
                    font-size: 2em;
                }
                h2 {
                    font-size: 1.75em;
                }
            }
            form {
                @formLabelWidth: 10rem;
                @formItemWidth: 40rem;
                @sectionMargin: 1rem;
                margin: @sectionMargin;
                fieldset {
                    width: auto;
                    margin: 1rem auto;
                    padding: @sectionMargin;
                    legend {
                        margin: @sectionMargin;
                        margin-left: @sectionMargin * 2;
                    }
                    div {
                        &  > label {
                            width: auto;
                            display: inline-block;
                            margin: 0.5rem;
                        }
                        input, textarea {
                            display: inline-block;
                            width: auto;
                            padding: 0.25rem;
                            margin: 0.5rem;
                            margin-bottom: 1.0rem;
                            border-style:  solid;
                            border-width: thin;
                        }
                        div.radio-button {
                            padding-left: 20%;
                            label, input {
                                display: inline;
                                width: auto;
                            }
                            input {
                                margin-top: inherit;
                                margin-right: 1rem;
                                margin-left: 1rem;
                                margin-bottom: inherit;
                            }
                        }
                        textarea {
                            height: 10rem;
                        }
                        ul.suche {
                            width: 30rem;
                            margin-left: @formLabelWidth + 1.5rem;
                            margin-top: -1rem;
                            background: white;
                            position: absolute;
                            border: solid thin;
                            li {list-style: none;
                                text-indent: 0;
                                cursor: pointer;
                                &:hover {
                                    background: @mainColorLight;
                                    color: @mainColor;
                                }
                            }
                        }
                    }
                }
            }

        }
        table {
            width: 90%;
            margin: 5%;
            td, th {
                padding: 0.25rem;
            }
            colgroup:not(:first-child) col:first-child{
                border-left: solid thin;
            }
            thead {
                th {
                    font-size: 100%;
                    font-weight: bold;
                }
            }
        }
    }
}
@media screen and (max-width: 720px) {
    html body {
        @boxHeight: 2.5rem;
        & > header {
            height: @boxHeight;
            font-size: @boxHeight;
            text-align: center;
            padding: 1rem;
        }

        & > nav {
            .hamburgerMenu();
        }
        main section header {
            h1, h2 {
                text-align: center;
                margin: 0.5rem auto;
            }
        }
        table {
            width: 100%;
            margin: 1rem 0;
            td, th {
                padding: 0.25rem;
            }
            colgroup:not(:first-child) col:first-child{
                border-left: solid thin;
            }
            thead {
                th {
                    font-size: 100%;
                    font-weight: bold;
                    .hyphens();
                }
            }
        }
    }
}