noscript {
    color: red;
}

.rechtliches {
    background-color: white;
    padding: 1rem;
    margin: 0;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    hyphens: auto;
    overflow-wrap: break-word;
}

.rechtliches a {
    color: rgb(50, 150, 255);
    text-decoration: none;
}

.rechtliches a:hover {
    text-decoration: underline;
}

.rechtliches h1 {
    font-size: 2rem;
    text-decoration: underline;
    margin: 2rem 0 0 0;
}

.rechtliches h2 {
    margin: 2rem 0 0 0;
}

.rechtliches h3 {
    margin: 0;
}

.rechtliches h4 {
    margin: 0;
}

.inhalt,
.impressum,
.datenschutz,
.nutzungsbedingungen {
    margin: 0 0 4rem 0;
}

.rechtliches .floating {
    display: none;
}


@media (min-width: 768px) {

    .rechtliches {
        background-color: white;
        padding: 4rem;
        margin: 4rem 4rem 1rem 4rem;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);

    }

    .rechtliches .floating {

        position: fixed;
        z-index: 9999;
        right: 0;
        bottom: -4rem;

        width: 16rem;
        height: 200px;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;

        padding: 0.5rem 0 0 1rem;
        border-radius: 5px 0 0 0;

        overflow: hidden;

        background-color: white;
        border: 1px solid black;
        border-right: none;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);

        transition: width .3s ease, height .3s ease;
    }

    .rechtliches .floating h1 {
        margin: 0.25rem 0;
    }

    .rechtliches .floating p {
        margin: 0.25rem 0;
    }
}