/*
 * EMB Baggerkonfigurator – globales Frontend-Grundlayout
 * Version 2.04.45
 *
 * Dieses Modul steuert ausschließlich Seitenbreite, Außenabstände,
 * Header-/Inhaltsabstände, normalen Dokumentfluss und Footer-Verhalten.
 * Seitenspezifische Komponenten verbleiben in frontend-ui.css.
 */

:root {
    --fe-content-max: 1520px;
    --fe-shell-gutter: clamp(6px, 1.4vw, 20px);
    --fe-shell-margin: clamp(6px, 1.4vw, 20px);
    --fe-header-padding-block: clamp(15px, 2vw, 22px);
    --fe-header-padding-inline: clamp(18px, 3vw, 46px);
    --fe-main-padding-inline: clamp(16px, 3vw, 46px);
    --fe-main-padding-bottom: clamp(42px, 5vw, 76px);
    --fe-footer-padding-block: 22px;
    --fe-footer-padding-inline: clamp(18px, 3vw, 46px);
    --fe-layout-gap: clamp(18px, 2.4vw, 30px);
}

html {
    min-width: 320px;
}

body.app-body--frontend {
    min-width: 320px;
}

body.app-body--frontend #rahmen.frontend-shell {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.app-body--frontend .frontend-header,
body.app-body--frontend #content.frontend-main,
body.app-body--frontend .frontend-footer {
    min-width: 0;
}

body.app-body--frontend #content.frontend-main {
    flex: 1 0 auto;
}

body.app-body--frontend #content.frontend-main > * {
    min-width: 0;
    max-width: 100%;
}

body.app-body--frontend #content.frontend-main > div,
body.app-body--frontend #content.frontend-main > section,
body.app-body--frontend #content.frontend-main > article {
    width: 100%;
}

body.app-body--frontend #content.frontend-main > :last-child {
    margin-bottom: 0;
}

body.app-body--frontend .frontend-footer {
    flex: 0 0 auto;
    width: 100%;
    padding: var(--fe-footer-padding-block) var(--fe-footer-padding-inline);
}

body.app-body--frontend .frontend-footer__links,
body.app-body--frontend .frontend-footer__contact {
    min-width: 0;
}

body.app-body--frontend .frontend-footer a {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    :root {
        --fe-shell-gutter: 6px;
        --fe-shell-margin: 6px;
        --fe-header-padding-block: 15px;
        --fe-header-padding-inline: 18px;
        --fe-main-padding-inline: 16px;
        --fe-main-padding-bottom: 48px;
        --fe-footer-padding-inline: 18px;
        --fe-layout-gap: 18px;
    }
}

@media (max-width: 620px) {
    :root {
        --fe-shell-gutter: 0px;
        --fe-shell-margin: 0px;
        --fe-header-padding-inline: 14px;
        --fe-main-padding-inline: 12px;
        --fe-main-padding-bottom: 36px;
        --fe-footer-padding-inline: 14px;
        --fe-layout-gap: 14px;
    }

    body.app-body--frontend #rahmen.frontend-shell {
        border-radius: 0;
    }

    body.app-body--frontend .frontend-footer {
        gap: 16px;
    }
}