.obituary,
.experts,
.guide,
.contact,
.archive,
.faq {
    position: relative;
    background-image: url("../images/background.jpg");
    background-size: cover;
    width: 100%;
    padding: 140px 1rem 1.5rem 1rem;
    top: -60px;
}

.obituary:empty,
.experts:empty,
.guide:empty,
.contact:empty,
.archive:empty,
.faq:empty {
    display: none;
}

.experts {
    background-image: url("https://mediagroup-advertisement-obituary.s3.eu-central-1.amazonaws.com/images/experts-background.jpg");
}

.guide {
    background-image: url("https://mediagroup-advertisement-obituary.s3.eu-central-1.amazonaws.com/images/guide-background.jpg");
}

.contact,
.faq {
    background-image: url("https://mediagroup-advertisement-obituary.s3.eu-central-1.amazonaws.com/images/faq-background.jpg");
}

.experts:before,
.guide:before,
.contact:before,
.archive:before,
.faq:before {
    content: "";
    opacity: .75;
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    background: var(--background-black);
}

.archive {
    padding: 200px 1rem 1.5rem 1rem;
    top: -120px;
}

.search {
    position: relative;
    background: var(--background-white);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    display: grid;
    align-items: start;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: var(--max-small-content-width);
    margin: 0 auto;
}

main article section.headline.white {
    margin: 0;
}

@media (prefers-color-scheme: dark) {
    .search {
        background: var(--light-gray);
    }
}

.search h2 {
    margin: 0;
}

.search > m-button {
    margin: 0 0 1rem 0;
}

.search.extended {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.search.extended > section {
    position: relative;
    display: inline-grid;
    flex-direction: row;
    grid-template-columns: 1fr;
    align-items: end;
    gap: 1rem;
    justify-content: space-between;
}

.search.extended > section.two,
.search.extended > section.three {
    grid-template-columns: 1fr;
}

.search.extended > section fieldset {
    position: relative;
    display: flex;
    flex-direction: column;
}

.search.extended > section fieldset.local-agent {
    border: 2px solid transparent;
    display: flex;
    background: var(--gray);
    border-radius: var(--border-radius);
    min-height: 48px;
    padding: 0 1rem;
    flex-direction: row;
}

.search.extended > section fieldset.local-agent > label {
    width: 100%;
    margin: 0;
    line-height: 48px;
}

.search.extended > section fieldset.local-agent > m-state {
    display: flex;
    width: auto;
    line-height: 48px;
    align-items: center;
}

.archive .search {
    grid-template-columns: 1fr;
    padding: .5rem;
}

.archive .search fieldset {
    gap: .5rem;
    display: flex;
    max-width: 100%;
    justify-content: space-between;
    min-width: 0;
}

#container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    width: 100%;
}


.year-viewport {
    width: 100%;
    overflow-x: hidden;
    display: flex;
    justify-content: center;

}

#yearcontainer {
    display: flex;
    gap: .5rem;
}

.year {
    min-width: 88px;
    scroll-snap-align: center;
}


.year-viewport {
    max-width: calc(88px * 9 + (.5rem * 8));
}

#container .month {
    border: 2px solid var(--gray);
    border-radius: var(--border-radius);
    padding: .25rem;
    background: var(--light-gray);
}

#container .month.active {
    border: 2px solid var(--primary);
}

#container .month-title {
    font-weight: bold;
    text-align: center;
    margin: .5rem 0 1rem 0;
}

#container .calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .25rem;
}

#container .day-name {
    font-weight: bold;
    text-align: center;
}

#container .calendar .day-name:nth-child(6),
#container .calendar .day-name:nth-child(7) {
    color: var(--primary);
}

#container .day {
    padding: .3rem;
    text-align: center;
    cursor: pointer;
    border-radius: .5rem;
}

#container .day.advertisement {
    background: var(--white);
}

#container .day.advertisement.active {
    background: var(--primary);
    color: var(--background-white)
}

#container .day.advertisement.today {
    background: var(--black) !important;
    color: var(--background-white) !important;
}

#container .day.advertisement.active.inactive {
    background: var(--medium-gray) !important;
    color: var(--background-white) !important;
}

@media (prefers-color-scheme: dark) {
    #container .day.advertisement.today {
        background: var(--primary) !important;
    }
}

#container .day.advertisement.inactive {
    background: var(--light-gray);
    color: var(--ninth-background-color)
}

#container .day:hover {
    background-color: var(--medium-gray);
}

.search-results {
    opacity: 0;
}

.search-results.visible {
    opacity: 1;
}

.search-results .sorting {
    position: relative;
    display: grid;
    gap: 1rem;
    justify-content: space-between;
    width: 100%;
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 1rem 0;
    align-items: center;
    grid-template-areas: "down down"
    "entries entries"
    "back next";
}


.search-results .sorting m-select.order,
.search-results .sorting m-button.up,
.search-results .sorting m-button.down {
    grid-area: down;
    width: 100%;
}

.search-results .sorting m-button.back {
    grid-area: back;
}

.search-results .sorting m-button.next {
    grid-area: next;
}

.search-results .sorting span {
    text-align: center;
}

.search-results > div > ul {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0;
}

.search-results > div > ul li {
    position: relative;
    background: var(--gray);
    border-radius: var(--border-radius);
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.search-results > div > ul li a {
    padding: 1rem;
    height: 100%;
    border-radius: var(--border-radius);
}

.search-results > div > ul li a:hover {
    box-shadow: var(--box-shadow);
}

.search-results > div > ul li .lable {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background: var(--dark-gray);
    color: var(--white);
    text-transform: uppercase;
    padding: .5rem 1rem;
    border-top-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.search-results > div > ul li .lable.today {
    background: var(--primary);
}

.search-results > div > ul li img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-height: 10rem;
    padding: 2rem 0 0 0;
}

.search-results > div > ul li .center {
    min-height: 160px;
    overflow: hidden;
}

.search-results > div > ul li h3 {
    color: var(--black);
    margin: 0 0 .25rem 0;
}

.search-results > div > ul li p {
    margin: 0;
}

.search-results .pagination {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    justify-content: space-between;
    width: 100%;
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 1rem 0;
}

#pageNumber {
    color: var(--primary);
    font-weight: 900;
}

section.search m-button {
    width: 100%;
}

.search-results .pagination m-button,
.archive .search m-button.page {
    padding: .75rem 0;
    max-width: max-content;
}

.archive .search m-button.active {
    background: var(--primary);
    color: var(--background-white)
}

.search-results .pagination .icon {
    margin: 0;
    background: var(--black);
}

.search-results .pagination m-button.back > .icon,
.archive .search m-button.back > .icon,
.search-results .pagination m-button.next > .icon,
.archive .search m-button.next > .icon {
    -webkit-mask-image: url(../images/singlearrow.svg);
    mask-image: url(../images/singlearrow.svg);
    margin: auto 0 auto 8px;
    background: var(--black);
}

.search-results .pagination m-button.next .icon,
.archive .search m-button.next .icon {
    margin: auto 8px auto 0;
}

.search-results .pagination m-button.start > .icon,
.search-results .pagination m-button.end > .icon {
    -webkit-mask-image: url(../images/doublearrow.svg);
    mask-image: url(../images/doublearrow.svg);
    margin: 0 0 0 4px;
}

.search-results .pagination m-button.end > .icon {
    rotate: 180deg;
    margin: 0 6px 0 0;
}

.search-results .pagination .left,
.search-results .pagination .right {
    display: flex;
    flex-direction: column;
}

.search-results .pagination .right {
    text-align: left;
}

.search-results .pagination .left > span:first-of-type,
.search-results .pagination .right > span:first-of-type {
    margin: 0 0 1rem 0;
}

.search-results .pagination .left > span:last-of-type,
.search-results .pagination .right > span:last-of-type {
    gap: .25rem;
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
}

.search-results .pagination .left > span:last-of-type {
    justify-content: space-between;
}

.experts > .search m-select > .frame {
    top: 3px;
}

svg.newspaper-logo {
    max-width: 100%;
}

svg.newspaper-logo use {
    fill: var(--black);
}

@media (max-width: 1013px) {
    #container {
        grid-template-columns: repeat(2, 1fr);
    }

    #container > *:nth-child(3) {
        display: none;
    }

    .year-viewport {
        max-width: calc(88px * 7 + (.5rem * 6));
    }

}

@media (max-width: 820px) {
    .year-viewport {
        max-width: calc(88px * 5 + (.5rem * 4));
    }

}

@media (max-width: 630px) {
    #container {
        grid-template-columns: repeat(1, 1fr);
    }


    #container > *:nth-child(2) {
        display: none;
    }

    .year-viewport {
        max-width: calc(88px * 3 + (.5rem * 2));
    }

    .search-results .pagination .left > span:last-of-type,
    .search-results .pagination .right > span:last-of-type {
        display: grid;
        grid-template-columns: repeat(7, auto);
    }

    .search-results .pagination .left > span:last-of-type m-button:not(.number),
    .search-results .pagination .right > span:last-of-type m-button:not(.number) {
        grid-row: 1;
    }

    .search-results .pagination .left > span:last-of-type m-button:not(.number):nth-last-of-type(2),
    .search-results .pagination .right > span:last-of-type m-button:not(.number):nth-last-of-type(2) {
        grid-column: 6 / 6;
    }

    .search-results .pagination .left > span:last-of-type m-button:not(.number):last-of-type,
    .search-results .pagination .right > span:last-of-type m-button:not(.number):last-of-type {
        grid-column: 7 / 7;
    }

    .search-results .pagination .left > span:last-of-type m-button.number,
    .search-results .pagination .right > span:last-of-type m-button.number {
        grid-row: 2;
    }
}

@media (min-width: 440px) and (max-width: 630px) {

    .search-results .pagination .left > span:last-of-type m-button.number:first-of-type,
    .search-results .pagination .right > span:last-of-type m-button.number:first-of-type {
        grid-column: 2 / 2;
    }

    .search-results .pagination .left > span:last-of-type m-button.number:nth-of-type(3),
    .search-results .pagination .right > span:last-of-type m-button.number:nth-of-type(3) {
        grid-column: 2 / 2;
    }

    .search-results .pagination .left > span:last-of-type m-button.number:nth-of-type(4),
    .search-results .pagination .right > span:last-of-type m-button.number:nth-of-type(4) {
        grid-column: 3 / 3;
    }

    .search-results .pagination .left > span:last-of-type m-button.number:nth-of-type(5),
    .search-results .pagination .right > span:last-of-type m-button.number:nth-of-type(5) {
        grid-column: 4 / 4;
    }

    .search-results .pagination .left > span:last-of-type m-button.number:nth-of-type(6),
    .search-results .pagination .right > span:last-of-type m-button.number:nth-of-type(6) {
        grid-column: 5 / 5;
    }

    .search-results .pagination .left > span:last-of-type m-button.number:nth-of-type(7),
    .search-results .pagination .right > span:last-of-type m-button.number:nth-of-type(7) {
        grid-column: 6 / 6;
    }
}

@media (max-width: 440px) {

    .year-viewport {
        max-width: calc(88px * 1);
    }

    .search-results .pagination .left > span:last-of-type,
    .search-results .pagination .right > span:last-of-type {
        grid-template-columns: repeat(5, auto);
    }

    .search-results .pagination .left > span:last-of-type m-button:not(.number),
    .search-results .pagination .right > span:last-of-type m-button:not(.number) {
        grid-row: 1;
    }

    .search-results .pagination .left > span:last-of-type m-button:not(.number):nth-last-of-type(2),
    .search-results .pagination .right > span:last-of-type m-button:not(.number):nth-last-of-type(2) {
        grid-column: 4 / 4;
    }

    .search-results .pagination .left > span:last-of-type m-button:not(.number):last-of-type,
    .search-results .pagination .right > span:last-of-type m-button:not(.number):last-of-type {
        grid-column: 5 / 5;
    }
}

@media (max-width: 768px) {
    .search-results .sorting > span {
        grid-area: entries;
    }
}

@media (min-width: 768px) {
    .search {
        grid-template-columns: 1fr auto auto;
    }

    .contact > .search {
        grid-template-columns: 1fr auto;
        /*grid-template-columns: 2fr 1fr auto;*/
    }

    .search > m-button {
        margin: 2rem 0 0 0;
    }

    .experts > .search {
        grid-template-columns: 1fr minmax(250px, auto) minmax(125px, auto) auto;
    }

    .search-results .sorting {
        grid-template-areas: "down entries back next";
        grid-template-columns: 0.24fr 1fr auto auto;
    }

    .sorting .entries {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .search-results > div > ul {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .search-results .pagination {
        grid-template-columns: auto auto;
    }

    .search-results .pagination .right {
        text-align: right;
    }

    .search.extended > section {
        grid-template-columns: 2fr 1fr;
    }

    .search.extended > section.two {
        grid-template-columns: max-content max-content;
        justify-content: space-between;
    }

    .search.extended > section.three {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .search.extended > section.three.button {
        grid-template-columns: max-content max-content max-content;
    }
}

@media (min-width: 1400px) {
    .obituary:empty,
    .experts:empty,
    .guide:empty,
    .contact:empty,
    .archive:empty,
    .faq:empty {
        display: block;
    }

    .obituary,
    .experts,
    .guide,
    .contact,
    .faq {
        padding: 200px 1rem 3rem 1rem;
        top: -160px;
        margin: 0 0 -160px 0;
    }

    .search-results > div > ul {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        max-width: var(--max-content-width);
        padding: 0;
    }
}