.skiplink:focus {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 9999;
    height: auto;
    padding: 1rem;
    width: auto;
    clip: unset;
    overflow: visible;
    white-space: normal;
    background: var(--color-primary);
    color: var(--color-gray-lightest);
    outline: .125rem dotted var(--color-gray-lightest);
    outline-offset: -.25rem;
}

.header__countries-toggle .icon,
.header__languages-toggle .icon {
    transform-origin: center;
    transition: transform .3s, fill .3s;
}

.header__countries-toggle[aria-expanded=true] .icon--rotate,
.header__languages-toggle[aria-expanded=true] .icon--rotate {
    transform: rotate(180deg);
}

.header__countries-dropdown[aria-hidden=false],
.header__languages-dropdown[aria-hidden=false] {
    visibility: visible;
    z-index: 10;
    height: auto;
    margin-top: 1rem;
    padding: 1rem;
    background: #fff;
    border-radius: 1rem;
    transform: scaleY(1);
}

.header__countries-dropdown[aria-hidden=false] {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.header__countries-dropdown[aria-hidden=false] .button {
    justify-content: center;
    width: 100%;
}

.header__languages-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.header__languages-link {
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--color-gray-darkest);
    transition: color .3s;
}

.header__languages-link .icon {
    top: 0;
}

.header__languages-link:hover,
.header__languages-link:focus-visible {
    color: var(--color-primary);
}

.header__languages-link:active {
    color: var(--color-secondary);
}

.country-select__continents-toggle .icon--rotate {
    transform-origin: center;
    transition: fill .3s, transform .3s;
}

.country-select__continents-toggle[aria-expanded=true] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.country-select__continents-toggle[aria-expanded=true] .icon--rotate {
    transform: rotate(180deg);
}

.country-select__continents-toggle[aria-expanded=true] .country-select__continents-toggle-text--visible {
    display: inline;
}

.country-select__continents-toggle[aria-expanded=true] .country-select__continents-toggle-text--hidden {
    display: none;
}

.country-select__countries-dropdown[aria-hidden=false] {
    visibility: visible;
    height: auto;
    margin-top: 1rem;
    padding: 1rem 0;
    background: #fff;
    border-radius: 1rem;
    transform: scaleY(1);
}

.country-select__countries {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0 clamp(1rem, 4.2667vw, 3rem);
}

.country-select__link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: clamp(.75rem, 3.2vw, 1rem);
    color: var(--color-gray-darkest);
    transition: color .3s;
}

.country-select__link:hover,
.country-select__link:focus-visible {
    color: var(--color-primary);
}

.country-select__link:active {
    color: var(--color-secondary);
}

/* Original SVG-Flag Styling - auskommentiert für Emoji-Test
.country-select__link .icon--flag {
    font-size: clamp(1.5rem, 6.4vw, 2rem);
    top: 0;
}
*/

/* Emoji-Flaggen rund stylen */
.icon--flag-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    overflow: hidden;
    font-size: 2.65rem;
    line-height: 1;
    flex-shrink: 0;
}

.search-input:user-valid {
    border-color: green;
}

.product__back-to-search-link:hover,
.product__back-to-search-link:focus-visible,
.product__version-toggle:hover,
.product__version-toggle:focus-visible {
    color: var(--color-primary);
}

.product__back-to-search-link:active,
.product__version-toggle:active {
    color: var(--color-secondary);
}

.product__version-toggle[aria-expanded=false] {
    color: var(--color-gray-dark);
}

.product__version-toggle[aria-expanded=false]:hover,
.product__version-toggle[aria-expanded=false]:focus-visible {
    color: var(--color-primary);
}

.product__version-toggle[aria-expanded=false]:active {
    color: var(--color-secondary);
}

.product__version-toggle[aria-expanded=false] .icon {
    transform: rotate(0);
}

.product__downloads {
    visibility: visible;
    height: auto;
    transform-origin: top;
    transform: scaleY(1);
    transition: transform .3s;
}

.product__downloads[aria-hidden=true] {
    visibility: hidden;
    height: 0;
    transform: scaleY(0);
}

.product__download-link:hover,
.product__download-link:focus-visible {
    color: var(--color-primary);
}

.product__download-link:active {
    color: var(--color-secondary);
}

.product__downloads-list {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.product__version-download-link {
    font-size: clamp(1rem, 4.2667vw, 1.125rem);
    text-decoration: none;
    display: grid;
    align-items: start;
    grid-template-areas: 'name name icon'
                         'dateversion dateversion icon';
    padding: .25rem clamp(.5rem, 2.1333vw, .75rem);
    color: var(--color-gray-dark);
    border-radius: .75rem;
    transition: background .3s, color .3s;
}

.product__version-download-link:hover,
.product__version-download-link:focus-visible {
    background: var(--color-gray-lightest);
    color: var(--color-primary);
}

.product__version-download-link:focus-visible {
    outline-color: var(--color-primary);
}

.product__version-download-link:hover strong,
.product__version-download-link:focus-visible strong {
    color: var(--color-primary);
}

.product__version-download-link:active,
.product__version-download-link:active strong,
.product__version-download-link:active .icon {
    color: var(--color-secondary);
}

.product__version-download-link .icon {
    font-size: 1.25rem;
    top: .375rem;
    grid-area: icon;
    margin-left: auto;
    color: var(--color-primary);
    transition: color .3s;
}

.product__download-language {
    grid-area: name;
}

.product__download-language strong {
    font-weight: 400;
    color: var(--color-gray-darkest);
    transition: color .3s;
}

.product__download-date-version {
    font-size: .875rem;
    grid-area: dateversion;
}

.product__subscription-modal {
    border: 0;
    padding: clamp(1rem, 4.2667vw, 2.5rem);
    background: var(--color-gray-lightest);
    border-radius: 1.5rem;
}

.product__subscription-modal[open] {
    display: flex;
    flex-direction: column;
}

.product__subscription-modal[open]:focus {
    outline: .125rem solid var(--color-primary);
}

.product__subscription-modal::backdrop {
    background: var(--color-gray-darkest);
    opacity: .5;
    mix-blend-mode: multiply;
}

.product__subscription-modal-top {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.product__subscription-modal-close {
    margin-left: auto;
    padding: 1rem;
}

.product__subscription-modal-headline {
    font-size: clamp(1.5rem, 6.4vw, 2.25rem);
    line-height: 1;
    flex-shrink: 0;
    margin: 0 auto 0 0;
}

.product__subscription-modal-product {
    border-bottom: 1px solid var(--color-gray-dark);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
}

.product__subscription-modal-product-name {
    border-bottom: 1px solid var(--color-gray-dark);
    padding-bottom: .5rem;
}

.product__subscription-modal-product-meta {
    font-size: clamp(1rem, 4.2667vw, 1.125rem);
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin: 0;
    padding: 0;
}

.product__subscription-modal-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
}

.product__subscription-modal-label {
    display: block;
    padding-bottom: .25rem;
}

.product__subscription-modal-input {
    font-size: 1.125rem;
    border: 1px solid var(--color-gray-dark);
    height: 3rem;
    padding: 0 clamp(1rem, 4.2667vw, 1.5rem);
    width: 100%;
    background: #fff;
    border-radius: 2.125rem;
    color: var(--color-gray-darkest);
    transition: border-color .3s;
}

.product__subscription-modal-input:hover,
.product__subscription-modal-input:focus-visible {
    border-color: var(--color-primary);
}

.select-helper {
    position: relative;
}

.select-helper .icon {
    font-size: 1.25rem;
    pointer-events: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.product__subscription-modal-submit {
    margin-right: auto;
}

footer a {
    font-weight: 500;
    text-decoration: none;
    color: var(--color-gray-darkest);
}

footer a:hover,
footer a:focus-visible {
    text-decoration: underline;
    color: var(--color-primary);
}

footer a:active {
    color: var(--color-secondary);
}

footer address,
footer p,
footer ul {
    font-size: 1.125rem;
}

.footer__images {
    margin: 0 auto;
    max-width: 67.5rem;
    padding: 0 clamp(.5rem, 2.1333vw, 4.25rem);
}

.footer__columns {
    margin: clamp(2rem, 8.5333vw, 4.5rem) auto 0;
    padding: clamp(1.5rem, 6.4vw, 3rem) clamp(.5rem, 2.1333vw, 4.25rem) 1.25rem;
    background: #fff;
}

.footer__container {
    margin: 0 auto;
    max-width: 90rem;
}

.footer__grid {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 12.8vw, 6rem);
}

.footer__grid-column-headline {
    color: var(--color-primary);
}

.footer__grid-column-contacts {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.footer__concept-request {
    padding: 0 clamp(.5rem, 2.1333vw, 4.25rem);
    background: #fff;
}

.footer__concept-request .footer__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    border-top: .125rem solid var(--color-primary);
    padding: 1.25rem 0;
}

.footer__request {
    margin: 0;
}

.footer__navigation-copyright {
    padding: 2.5rem clamp(.5rem, 2.1333vw, 4.25rem) 1rem;
    background: #fff;
}

.footer__navigation-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer__navigation-list-item:not(:first-child) {
    position: relative;

    &::before {
        content: '|';
        padding-right: 1rem;
    }
}

.footer__navigation-copyright .footer__container {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 2.5rem;
}

.footer__copyright {
    margin: 0;
}

@media screen and (min-width: 30em) {
    .country-select__countries {
        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    }

    .footer__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, 24rem);
        gap: clamp(3rem, 12.8vw, 6rem);
        justify-content: space-between;
    }
}

@media screen and (min-width: 48em) {
    .country-select__countries {
        display: block;
        column-count: 2;
        column-gap: 1rem;
        column-fill: balance;
    }

    .country-select__country {
        padding: .75rem 0;
    }

    .product__subscription-modal-form,
    .product__downloads-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .product__downloads-list {
        gap: 1rem 2rem;
    }

    .product__subscription-modal-form {
        gap: 1.5rem 1rem;
    }
}

@media screen and (min-width: 64em) {
    .product__subscription-modal-product-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 80em) {
    .country-select__countries {
        column-count: 3;
    }

    .product__downloads-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 100em) {
    .product__downloads-list {
        gap: 1rem 4rem;
    }
}

/* Document Request Form */
.document-request {
    max-width: 94.5rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 6.4vw, 3rem) clamp(1rem, 4.2667vw, 2rem);
}

.document-request__title {
    font-size: clamp(1.5rem, 6.4vw, 2.25rem);
    line-height: 1.2;
    margin: 0 0 1rem;
    color: var(--color-gray-darkest);
}

.document-request__intro {
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0 0 2rem;
    color: var(--color-gray-dark);
}

.document-request__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: clamp(1.5rem, 6.4vw, 2.5rem);
    background: var(--color-gray-lightest);
    border-radius: 1.5rem;
}

.document-request__field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.document-request__field--error .document-request__input,
.document-request__field--error .document-request__textarea {
    border-color: #c00;
}

.document-request__row {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.document-request__label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-gray-darkest);
}

.document-request__required {
    color: #c00;
}

.document-request__input,
.document-request__textarea {
    font-family: inherit;
    font-size: 1.125rem;
    border: 1px solid var(--color-gray-dark);
    padding: 0 clamp(1rem, 4.2667vw, 1.5rem);
    width: 100%;
    background: #fff;
    border-radius: 2.125rem;
    color: var(--color-gray-darkest);
    transition: border-color .3s;
}

.document-request__input {
    height: 3rem;
}

.document-request__textarea {
    padding: clamp(.75rem, 3.2vw, 1rem) clamp(1rem, 4.2667vw, 1.5rem);
    border-radius: 1.5rem;
    resize: vertical;
    min-height: 8rem;
}

.document-request__select {
    font-family: inherit;
    font-size: 1.125rem;
    border: 1px solid var(--color-gray-dark);
    height: 3rem;
    padding: 0 3rem 0 clamp(1rem, 4.2667vw, 1.5rem);
    width: 100%;
    background: #fff;
    border-radius: 2.125rem;
    color: var(--color-gray-darkest);
    transition: border-color .3s;
    appearance: none;
    cursor: pointer;
}

.document-request__select:hover,
.document-request__select:focus-visible {
    border-color: var(--color-primary);
    outline: none;
}

.document-request__select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.document-request .select-helper {
    position: relative;
}

.document-request .select-helper .icon {
    font-size: 1.25rem;
    pointer-events: none;
    position: absolute;
    top: .875rem;
    right: 1rem;
    color: var(--color-gray-dark);
}

.document-request__input:hover,
.document-request__input:focus-visible,
.document-request__textarea:hover,
.document-request__textarea:focus-visible {
    border-color: var(--color-primary);
    outline: none;
}

.document-request__input:focus-visible,
.document-request__textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.document-request__error {
    font-size: .875rem;
    color: #c00;
    padding-left: 1rem;
}

.document-request__actions {
    margin-top: 1rem;
}

.document-request__back-link {
    font-size: clamp(1rem, 4.2667vw, 1.125rem);
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
    color: var(--color-gray-dark);
    transition: color .3s;
}

.document-request__back-link:hover,
.document-request__back-link:focus-visible {
    color: var(--color-primary);
}

.document-request__back-link .icon {
    top: 0;
}

.document-request__back-link--bottom {
    margin-top: 2rem;
    margin-bottom: 0;
}

/* Document Request Info Section */
.document-request-info {
    padding: clamp(3rem, 8.5vw, 5rem) clamp(1rem, 4.2667vw, 2rem);
}

.document-request-info__inner {
    max-width: 60rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 8.5vw, 4rem);
    justify-items: center;
}

.document-request-info__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.document-request-info__item:first-child .document-request-info__image {
    max-width: 150px;
}

.document-request-info__item:last-child .document-request-info__image {
    max-width: 100%;
}

.document-request-info__image {
    height: auto;
}

@media screen and (min-width: 900px) {
    .document-request-info__inner {
        grid-template-columns: auto 1fr;
        align-items: flex-start;
        gap: clamp(3rem, 6vw, 6rem);
    }

    .document-request-info__item:last-child .document-request-info__image {
        max-width: 550px;
    }
}

.document-request--success {
    text-align: center;
    padding-top: clamp(3rem, 12.8vw, 6rem);
}

.document-request--success .document-request__title {
    color: var(--color-primary);
}

.document-request--success .document-request__message {
    font-size: 1.125rem;
    line-height: 1.6;
    margin: 0 0 2rem;
    color: var(--color-gray-dark);
}

@media screen and (min-width: 30em) {
    .document-request__row {
        flex-direction: row;
        gap: 1rem;
    }

    .document-request__field--half {
        flex: 1;
    }
}

@media screen and (prefers-color-scheme: dark) {
    footer {
        color: var(--color-gray-dark);
    }

    ::selection {
        background: var(--color-gray-lightest);
        color: var(--color-gray-darkest);
    }

    footer ::selection {
        background: var(--color-gray-darkest);
        color: var(--color-gray-lightest);
    }

    .footer__columns,
    .footer__concept-request,
    .footer__navigation-copyright {
        background: var(--color-gray-lightest);
    }

    .footer__concept-request .footer__container {
        border-color: var(--color-gray-darkest);
    }

    .footer__grid-column-headline {
        font-weight: 400;
    }

    .product__subscription-modal::backdrop {
        opacity: .8;
    }

    .document-request .select-helper .icon {
        color: var(--color-gray-darkest);
    }

    .document-request__title {
        color: var(--color-gray-lightest);
    }

    .document-request__intro,
    .document-request--success .document-request__message {
        color: var(--color-gray-dark);
    }

    .document-request__form .document-request__label {
        color: var(--color-gray-darkest);
    }
}