@font-face {
    font-family: 'Lato';
    src: local('Lato Regular'), local('Lato-Regular'),
         url('../assets/fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Italic'), local('Lato-Italic'),
         url('../assets/fonts/Lato-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Light'), local('Lato-Light'),
         url('../assets/fonts/Lato-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Bold'), local('Lato-Bold'),
         url('../assets/fonts/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: local('Lato Bold Italic'), local('Lato-BoldItalic'),
         url('../assets/fonts/Lato-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../assets/fonts/SpaceGrotesk-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../assets/fonts/SpaceGrotesk-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../assets/fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('../assets/fonts/SpaceGrotesk-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.md-typeset,
.md-content,
.md-header,
.md-nav,
.md-footer {
    font-family: 'Lato', sans-serif;
}

/* --------------------------------------------------------------------------
   Header announcement bar – link to www.admin.digital
   -------------------------------------------------------------------------- */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-header__title {
    font-family: 'Space Grotesk', 'Lato', sans-serif;
}

.md-banner {
    background-color: var(--md-primary-fg-color--dark);
    color: #ffffff;
    text-align: center;
    padding: 0.35rem 1rem;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.md-banner__inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.md-banner__inner > div {
    width: 100%;
    text-align: center;
}

.header-contact-links {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.header-contact-links > span {
    opacity: 0.6;
}

.header-contact-links .header-icon {
    width: 0.85rem;
    height: 0.85rem;
    min-width: 0.85rem;
    min-height: 0.85rem;
    fill: currentColor;
    opacity: 0.95;
}

.md-banner a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 140ms ease;
}

.md-banner a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.md-typeset .question>.admonition-title, .md-typeset .question>summary {
    background-color: var(--md-default-fg-color--lightest);
}

.md-typeset .admonition.question, .md-typeset details.question {
    border-color: var(--md-default-fg-color--lighter);
}

.md-typeset details.question[open] {
    background-color: var(--md-default-bg-color);
}

.md-typeset .question>.admonition-title:before, .md-typeset .question>summary:before, .md-typeset .question>.admonition-title:after, .md-typeset .question>summary:after {
    background-color: var(--md-default-fg-color--light);
}

/* --------------------------------------------------------------------------
   "Grid cards" (e.g. Erste Schritte)
   -------------------------------------------------------------------------- */

.md-typeset .grid.cards {
    --ad-digital-card-bg: var(--md-default-bg-color);
    --ad-digital-card-border: var(--md-default-fg-color--lightest);
    --ad-digital-card-bg-hover: var(--md-default-fg-color--lightest);
    --ad-digital-card-border-hover: var(--md-default-fg-color--lighter);
    margin-block: 1.5rem;
}

/* More breathing room between cards */
.md-typeset .grid.cards > ul {
    gap: 1.25rem !important;
    row-gap: 1.25rem !important;
    column-gap: 1.25rem !important;
    padding: 0.5rem;
}

/* Some Material versions apply the grid to the container, not the list */
.md-typeset .grid.cards {
    gap: 1.25rem !important;
    row-gap: 1.25rem !important;
    column-gap: 1.25rem !important;
}

.md-typeset .grid.cards > ol {
    gap: 1.25rem !important;
    row-gap: 1.25rem !important;
    column-gap: 1.25rem !important;
    padding: 0.5rem;
}

@supports (background-color: color-mix(in srgb, white 50%, black)) {
    .md-typeset .grid.cards {
        --ad-digital-card-bg: color-mix(
            in srgb,
            var(--md-default-bg-color) 94%,
            var(--md-default-fg-color) 6%
        );
        --ad-digital-card-bg-hover: color-mix(
            in srgb,
            var(--md-default-bg-color) 90%,
            var(--md-default-fg-color) 10%
        );
        --ad-digital-card-border: color-mix(
            in srgb,
            var(--md-default-fg-color) 14%,
            transparent
        );
        --ad-digital-card-border-hover: color-mix(
            in srgb,
            var(--md-default-fg-color) 22%,
            transparent
        );
    }
}

.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
    background-color: var(--ad-digital-card-bg);
    border: 1px solid var(--ad-digital-card-border);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover {
    background-color: var(--ad-digital-card-bg-hover);
    border-color: var(--ad-digital-card-border-hover);
    box-shadow: none !important;
}

/* Material may apply hover shadow to an anchor wrapper */
.md-typeset .grid.cards > ul > li > a,
.md-typeset .grid.cards > ol > li > a,
.md-typeset .grid.cards > ul > li > a:hover,
.md-typeset .grid.cards > ol > li > a:hover {
    box-shadow: none !important;
}

/* Divider inside a card (the markdown ---) */
.md-typeset .grid.cards > ul > li hr,
.md-typeset .grid.cards > ol > li hr {
    border-bottom-color: var(--ad-digital-card-border);
    opacity: 1;
}