@import '_container.css';
@import '_css-variables.css';

.theme-zum-schwarzen-ross {
    --color-primary-5: #faf7f5;
    --color-primary-10: #f4efeb;
    --color-primary-20: #e1d3c7;
    --color-primary-30: #d7c4b5;
    --color-primary-75: #af896b;
    --color-primary-100: #946139;

    --color-neutral-0: #FFFFFF;
    --color-neutral-10: #EBF0F5;
    --color-neutral-20: #D9E2EC;
    --color-neutral-30: #B7C2D0;
    --color-neutral-40: #9AA9BC;
    --color-neutral-50: #8E9BAB;
    --color-neutral-60: #677688;
    --color-neutral-70: #46576C;
    --color-neutral-80: #2D3A49;
    --color-neutral-90: #011022;
}

.header {
    background-color: var(--color-neutral-0);
    color: var(--color-primary-100);
}

@media (min-width: 1280px) {
    .header__nav {
        --link-color: var(--color-neutral-80);
        --link-color-hover: var(--color-neutral-90);
    }
}

.hero {
    background-color: var(--color-primary-20);
}

.image {
    border-radius: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
}
td, th {
    padding: 0.5rem;
}

th {
    background-color: var(--color-primary-100);
    color: var(--color-neutral-0);
}

th:last-child,
td:last-child,
th:nth-child(3),
td:nth-child(3) {
    text-align: start;
}

@media (min-width: 576px) {
    th:last-child,
    td:last-child,
    th:nth-child(3),
    td:nth-child(3) {
        text-align: end;
        width: 20%;
    }
}


@media (min-width: 1024px) {
    th:last-child,
    td:last-child,
    th:nth-child(3),
    td:nth-child(3) {
        width: 10%;
    }
}

tr:nth-child(even) {
    background-color: var(--color-primary-10);
}

.grid-container th:last-child,
.grid-container td:last-child,
.grid-container th:nth-child(3),
.grid-container td:nth-child(3) {
    text-align: start;
    width: auto;
}
@media (min-width: 1024px) {
    .grid-container th:last-child,
    .grid-container td:last-child,
    .grid-container th:nth-child(3),
    .grid-container td:nth-child(3) {
        width: auto;
    }
}


@media (max-width: 575px) {
    table tbody tr {
        display: block;
    }
    table th {
        display: none;
    }
    table tbody td {
        display: block;
    }
    table tbody td:first-of-type {
        color: var(--color-neutral-0);
        background-color: var(--color-primary-100);
    }
    table tbody td:last-of-type {
        margin-bottom: 1rem;
    }
    table tbody td:after {
        content: attr(data-label);
    }
}



.article__aside .textmedia-teaser__content {
    --text-color: var(--textmedia-text-color);

    padding: 0;

    &:has(.button) {
        --button-position: relative;
        --button-bottom: 0;

        padding-bottom: 0;
    }
}

.article__aside  .textmedia-teaser {
    background: #FFF;
    border-radius: 0;
    display: block;
    width: var(--textmedia-teaser-width);
    min-width: var(--textmedia-teaser-width);
    overflow: hidden;
    position: relative;
}


.footer .component {
    margin: 0;
}

.hero .button,
.page__content .button,
.header__menu-button .button {
    border: 2px solid #946139;
    border-radius: 0;
    background: #946139;
}

.hero .button:hover,
.page__content .button:hover,
.header__menu-button .button:hover {
    background-color: #af896b;
    border: 2px solid #af896b;
}

.footer .button,
.footer__meta .button {
    &:hover:not(:disabled) {
        --button-content-color: var(--color-primary-10);
        --button-content-border-bottom-color: var(--color-primary-10);
    }
}

.article__aside .textmedia-teaser-grid__grid {
    display: block;
}

@media (min-width: 768px) {

    .article__aside {
        position: sticky;
        top: 0;
        align-self: start;
    }
    .button {
        margin-top: 10px;
    }
}