main {
    position: relative;
}

#btn-urlaub-anzeigen {
    padding: .3em .3em .3em .6em;
    color: #fff;
    background-color: #ee7700;
    text-align: center;
    font-size: 1em;
    line-height: 1;
    border-radius: 7px;
    border: none;
    width: max-content;

    margin-top: 1.5rem;
    cursor: pointer;
}

#btn-urlaub-anzeigen:hover {
    background-color: #e07000;
}

#btn-urlaub-anzeigen > img {
    position: relative;
    top: .15em;
    height: 1em;

    transform-origin: center center;

    transition: transform .3s ease-in-out;
}

#btn-urlaub-anzeigen.shown > img {
    transform: rotateZ(90deg);
}

#urlaub-info-overlay {
    position: absolute;
    top: 4em;
    z-index: 15;

    transform-origin: top left;
    pointer-events: none;
    opacity: 0;
    transform: scale(.9) translate(-1rem, -1rem);
    transition: transform .3s ease-in-out, opacity .3s ease-in-out;
    box-shadow: 6px 8px 11px #cccccc;
    border: solid 1px #efefef;
}

#urlaub-info-overlay.shown {
    pointer-events: all;
    transform: none;
    opacity: 1;
}

#urlaub-info-header {
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: 1rem;
    background-color: #ee7700;
    color: #fff;
    font-size: 1.2em;
    padding-inline: 1em;
    align-items: center;
}

#urlaub-info-header,
#urlaub-info-content {
    padding: .75rem 1.25rem;
}

#btn-urlaub-ausblenden {
    display: flex;
    width: 1.25em;
    height: 1.25em;

    align-items: center;
    justify-content: center;
    font-size: 1em;

    background-color: rgb(0, 0, 0, .2);
    border: none;
    border-radius: 100%;
    cursor: pointer;

    transition: background-color .25s cubic-bezier(0, 0, .1, 1);
}

#btn-urlaub-ausblenden > img {
    height: 65%;
}

#btn-urlaub-ausblenden:hover {
    background-color: rgb(0, 0, 0, .35);
}

#urlaub-info-content {
    background-color: #fff;
    line-height: 1.4;
}

#urlaub-info-content h2 {
    margin-bottom: 0;
}

#urlaub-info-content div {
    margin-bottom: .5em;
}

#urlaub-info-content div > p {
    margin: 0;
}

#urlaub-info-content p > span {
    float: right;
    width: 10em;
    padding-right: .5em;
}

#urlaub-info-content p::after {
    content: "";
    clear: both;
    display: table;
}

@media only screen and (max-width: 576px) {
    #urlaub-info-overlay {
        position: relative;
        display: none;
        width: 100%;
        top: .5em;

        transition: display .3s allow-discrete;

        animation: mobile-overlay-close .3s ease-in-out;

        @starting-style {
            opacity: 0;
            transform: scale(.9) translate(0, -1rem);
        }
    }

    #urlaub-info-overlay.shown {
        display: block;
        animation: mobile-overlay-open .3s ease-in-out forwards;
    }

    #btn-urlaub-anzeigen {
        width: 100%;
        font-size: 1.1em;
    }
}

@media only screen and (min-width: 11768px) {

    #urlaub-info-header,
    #urlaub-info-content {
        font-size: 1.75em;
    }

    #urlaub-info-content h2 {
        font-size: 2.3rem;
    }

    #btn-urlaub-anzeigen {
        font-size: 1.4em;
    }
}

@keyframes mobile-overlay-open {
    from {
        opacity: 0;
        transform: scale(.9) translate(0, -1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes mobile-overlay-close {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: scale(.9) translate(0, -1rem);
    }
}