/*
 * Hinweis Safari ≤ 17.1 (z.B. iPadOS 16.7):
 * Verschachtelte Selektoren müssen mit "&" beginnen ("& a" statt "a"),
 * und Deklarationen müssen vor den verschachtelten Regeln stehen.
 */

#footer-content {
    background-color: var(--theme-footer-bg);
    color: var(--theme-footer-color);
    font-size: 0.875rem; /* 14px */
    letter-spacing: 0.25px;
    padding-top: 5rem; /* 80px */
    padding-bottom: 5rem; /* 80px */
    @media (min-width: 768px) {
        font-size: 0.9375rem; /* 15px */
        padding-top: 7.1875rem; /* 115px */
        padding-bottom: 7.1875rem; /* 115px */
    }
    @media (min-width: 1400px) {
        font-size: 1rem; /* 16px */
        padding-top: 9.375rem; /* 150px */
        padding-bottom: 9.375rem; /* 150px */
    }
    & .layout-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.875rem; /* 30px */
        @media (min-width: 768px) {
            grid-template-columns: repeat(2, max-content);
        }
        @media (min-width: 1400px) {
            justify-content: space-between;
            grid-template-columns: repeat(4, max-content);
        }
    }
    & .ce {
        padding-block-start: inherit;
    }
    & p {
        margin-block-end: 1.125rem; /* 18px */
        @media (min-width: 768px) {
            margin-block-end: 1.75rem; /* 28px */
        }

        &:last-child {
            margin-block-end: 0;
        }
    }
    & header {
        margin-block-end: 0.4375rem; /* 7px */
        @media (min-width: 768px) {
            margin-block-end: 0.9375rem; /* 15px */
        }
    }
    & h1, & .h1, & h2, & .h2, & h3, & .h3, & h4, & .h4, & h5, & .h5, & h6, & .h6 {
        color: var(--theme-white);
        font-size: 1.4375rem; /* 23px */
        @media (min-width: 768px) {
             font-size: 1.5625rem; /* 25px */
        }
    }
    & table {
        --border-color: transparent;
        --background-color: transparent;
    }
    & th, & td {
        padding: 0;
        border: none;
        line-height: 1.3;
    }
    & td + td {
        padding-left: 0.5rem; /* 8px */
        @media (min-width: 768px) {
            padding-left: 1.25rem; /* 20px */
        }
    }
    & ul {
        list-style: none;
        padding: 0;
    }

    & th, & td, & ul, & p {
        line-height: 1.3;
        @media (min-width: 768px) {
             line-height: 1.6875;
        }
    }
    & a {
        color: var(--theme-footer-color);
        font-weight: 600;
        text-decoration: underline;

        &:hover,
        &:focus {
            color: var(--theme-secondary-dark);
        }
    }
    /* Focus für alle interaktiven Elemente */
    & a:focus-visible,
    & button:focus-visible,
    & input:focus-visible,
    & select:focus-visible,
    & textarea:focus-visible {
        outline: 0.125rem solid var(--theme-secondary-light); /* 2px */
        outline-offset: 0.125rem; /* 2px */
        border-radius: 0.125rem; /* 2px */
    }
}