/* Source: doc/assets/css/contact.css */
@media (min-width: 720px) {
    .contact-container {
        max-width: var(--toddyi-size-820px);
    }
}

/* Source: doc/assets/css/impressum.css */
@media (max-width: 560px) {
    .impressum-dl__row {
        grid-template-columns: 1fr;
        gap: var(--toddyi-size-4px);
    }
}

/* Source: doc/assets/css/landing/responsive.css */
@media (max-width: 820px) {
    .toddyi-hero__inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .toddyi-hero__visual {
        order: -1;
        /* The screenshot spans the full width here, which for a 900px capture
           is about a third of its size — a picture of an interface rather than
           one you can read. A fixed frame height crops it instead of shrinking
           it, and because that height stays below the capture's own 660px the
           image is never scaled up: an aspect ratio here reached 123% at 768px,
           which is a blurred screenshot rather than a small one. (#271) */
        block-size: var(--toddyi-size-460px);
        min-height: 0;
    }

    /* contain, not cover: the narrow capture is already the right shape, and
       cropping it would clip the very cards it exists to show. The frame keeps
       a fixed height so the swap between the two sources shifts nothing. */
    .toddyi-hero__shot {
        inline-size: var(--toddyi-size-100pct);
        block-size: var(--toddyi-size-100pct);
        object-fit: contain;
    }

    .toddyi-agent__card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .toddyi-agent__cta {
        width: var(--toddyi-size-100pct);
    }
}

/* Source: doc/assets/css/landing/responsive.css */
@media (max-width: 640px) {
    .toddyi-page {
        gap: var(--toddyi-size-40px);
    }

    .toddyi-hero__actions {
        flex-direction: column;
    }

    .toddyi-btn {
        width: var(--toddyi-size-100pct);
    }

    .toddyi-spec-list__row {
        grid-template-columns: 1fr;
        gap: var(--toddyi-size-4px);
    }

    .toddyi-doc-nav__list {
        flex-direction: column;
        gap: var(--toddyi-size-10px);
    }
}

/* Source: doc/assets/css/layout/responsive.css */
@media (max-width: 640px) {
    .site-header__inner {
        padding: var(--toddyi-size-28px) var(--toddyi-size-16px) var(--toddyi-size-24px);
    }

    .box {
        padding: var(--toddyi-size-28px) var(--toddyi-size-16px) var(--toddyi-size-60px);
    }

    .box > main {
        padding: var(--toddyi-size-20px) var(--toddyi-size-16px);
    }

    .stats {
        flex-direction: column;
    }

    .info-row {
        flex-direction: column;
        gap: var(--toddyi-size-4px);
    }

    .label {
        width: var(--toddyi-size-100pct);
    }
}

/* Source: doc/assets/css/layout/responsive.css */
@media (max-width: 768px) {
    .doc-bg {
        background-attachment: scroll;
        background-position: center top;
    }
}

/* Source: doc/assets/css/layout/responsive.css */
@media (max-width: 640px) {
    .doc-body--landing .site-header--landing .site-header__inner {
        padding: var(--toddyi-size-12px) var(--toddyi-size-16px);
    }

    .doc-body--landing .site-header__cta {
        padding: var(--toddyi-size-7px) var(--toddyi-size-12px);
        font-size: var(--toddyi-size-0-76rem);
    }
}


/* Source: doc/assets/css/layout/responsive.css */
/* At phone widths the brand and the call to action did not fit on one line, and
   neither would give way: the brand is wide letter-spaced uppercase, the button
   is nowrap. They overlapped. The brand yields — it is already the page you are
   on — and both shed padding. (#271) */
@media (max-width: 600px) {
    .doc-body--landing .site-header--landing .site-header__inner {
        gap: var(--toddyi-size-10px);
        padding: var(--toddyi-size-10px) var(--toddyi-size-16px);
    }

    .doc-body--landing .site-header__brand {
        min-inline-size: 0;
        overflow: hidden;
    }

    .doc-body--landing .site-header__org {
        letter-spacing: 0.1em;
        font-size: var(--toddyi-size-0-65rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .doc-body--landing .site-header__cta {
        flex: none;
        padding: var(--toddyi-size-8px) var(--toddyi-size-12px);
        font-size: var(--toddyi-size-0-75rem);
    }

    .lang-nav {
        padding: var(--toddyi-size-6px) var(--toddyi-size-16px);
    }
}