/* =========================================================
   KCF CORE – RESPONSIVE / MOBILE
   Stand: 2026
   ========================================================= */

/*
 * Diese Datei wird NACH
 * - kcf_core_variables.css
 * - kcf_core_main.css
 * - kcf_core_layout.css
 * - kcf_core_components.css
 * - ggf. kcf_core_login.css
 * geladen.
 */


/* Mobile Branding ist auf Desktop nicht sichtbar. */
.kcf_topbar_mobile_brand {
    display: none;
}



/* =========================================================
   KCF CORE – MOBILE NAVIGATION / DESKTOP DEFAULT
   ========================================================= */

.kcf_topbar_mobile_brand,
.kcf_mobile_navigation_toggle,
.kcf_mobile_navigation {
    display: none;
}

body.kcf_mobile_navigation_open {
    overflow: hidden;
}

/* =========================================================
   KCF CORE – GROSSE / MITTLERE DESKTOPS
   ========================================================= */

@media (max-width: 1400px) {
    :root {
        --kcf_navigation_primary_width: 140px;
        --kcf_navigation_secondary_width: 260px;
    }

    .kcf_server_overview_grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .kcf_plugin_grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .kcf_server_account_grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    [data-kcf-email-accounts] {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}


/* =========================================================
   KCF CORE – TABLET / KLEINER DESKTOP
   ========================================================= */

@media (max-width: 1180px) {
    :root {
        --kcf_navigation_primary_width: 112px;
        --kcf_navigation_secondary_width: 230px;
    }

    .kcf_page_content {
        padding-right:
            var(--kcf_spacing_5);

        padding-left:
            var(--kcf_spacing_5);
    }

    .kcf_navigation_settings {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .kcf_navigation_settings_sidebar {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .kcf_server_details_columns {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .kcf_plugin_grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    [data-kcf-email-accounts] {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* =========================================================
   KCF CORE – TABLET / MOBILE LAYOUT
   ========================================================= */

@media (max-width: 1024px) {
    :root {
        --kcf_header_height: 64px;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        overflow-x: hidden;
    }


    /* APP */

    .kcf_app,
    .kcf_app.kcf_app_has_secondary_navigation {
        display: block;

        min-height: 100dvh;
    }

    .kcf_app_main,
    .kcf_app.kcf_app_has_secondary_navigation
    .kcf_app_main {
        display: flex;

        min-width: 0;
        min-height: 100dvh;
    }


    /* TOPBAR */

    .kcf_topbar_mobile_brand {
        display: inline-flex;
        align-items: center;

        min-width: 0;

        gap: var(--kcf_spacing_2);

        color: #ffffff;
    }

    .kcf_topbar_mobile_brand_mark {
        flex: 0 0 auto;

        font-size: 1.45rem;
        font-weight: 800;

        letter-spacing: -0.08em;
    }

    .kcf_topbar_mobile_brand_name {
        overflow: hidden;

        color: #ffffff;

        font-size: 0.86rem;
        font-weight: 700;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kcf_topbar,
    .kcf_app.kcf_app_has_secondary_navigation ~ .kcf_topbar,
    body.kcf_has_secondary_navigation
    .kcf_topbar {
        left: 0;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap:
            var(--kcf_spacing_4);

        height:
            calc(
                var(--kcf_header_height)
                + env(safe-area-inset-top)
            );

        padding:
            env(safe-area-inset-top)
            var(--kcf_spacing_4)
            0;
    }

    .kcf_topbar_brand {
        min-width: 0;
    }

    .kcf_topbar_logo {
        font-size: 1.55rem;
    }

    .kcf_topbar_name {
        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }

    .kcf_topbar_search {
        display: none;
    }

    .kcf_topbar_datetime {
        display: none;
    }

    .kcf_topbar_user {
        min-width: 0;
    }


    /* MOBILE TOPBAR */

    .kcf_topbar {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .kcf_topbar_mobile_brand {
        display: inline-flex;
        align-items: center;

        min-width: 0;

        gap:
            var(--kcf_spacing_2);
    }

    .kcf_topbar_mobile_brand_mark {
        flex: 0 0 auto;

        font-size: 1.45rem;
        font-weight: 800;

        letter-spacing: -0.08em;
    }

    .kcf_topbar_mobile_brand_name {
        overflow: hidden;

        color: #ffffff;

        font-size: 0.86rem;
        font-weight: 700;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .kcf_topbar_search,
    .kcf_topbar_user {
        display: none;
    }

    .kcf_mobile_navigation_toggle {
        display: inline-grid;
        place-items: center;

        width: 42px;
        height: 42px;

        padding: 0;

        background:
            rgb(255 255 255 / 0.08);

        border:
            1px solid
            rgb(255 255 255 / 0.14);

        border-radius:
            var(--kcf_border_radius);

        color: #ffffff;

        cursor: pointer;

        font-size: 1.05rem;

        touch-action: manipulation;
    }

    .kcf_mobile_navigation_toggle:hover,
    .kcf_mobile_navigation_toggle:focus-visible {
        background:
            rgb(255 255 255 / 0.14);
    }


    /* DESKTOP-NAVIGATION AUF MOBIL AUSBLENDEN */

    .kcf_navigation_primary,
    .kcf_navigation_secondary {
        display: none;
    }


    /* OFF-CANVAS NAVIGATION */

    .kcf_mobile_navigation {
        position: fixed;

        z-index: 1000;

        inset: 0;

        display: block;

        visibility: hidden;

        pointer-events: none;
    }

    .kcf_mobile_navigation_backdrop {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        padding: 0;

        background:
            rgb(25 27 26 / 0.56);

        border: 0;

        opacity: 0;

        cursor: pointer;

        transition:
            opacity
            var(--kcf_transition_normal);

        backdrop-filter:
            blur(2px);
    }

    .kcf_mobile_navigation_drawer {
        position: absolute;

        top: 0;
        right: 0;
        bottom: 0;

        display: flex;
        flex-direction: column;

        width:
            min(
                88vw,
                380px
            );
        height: 100dvh;

        padding-top:
            env(safe-area-inset-top);

        background:
            var(--kcf_color_surface);

        border-left:
            1px solid
            var(--kcf_color_border);

        box-shadow:
            -18px
            0
            44px
            rgb(0 0 0 / 0.18);

        transform:
            translateX(100%);

        transition:
            transform
            var(--kcf_transition_normal);

        will-change: transform;
    }

    .kcf_mobile_navigation.kcf_is_open {
        visibility: visible;

        pointer-events: auto;
    }

    .kcf_mobile_navigation.kcf_is_open
    .kcf_mobile_navigation_backdrop {
        opacity: 1;
    }

    .kcf_mobile_navigation.kcf_is_open
    .kcf_mobile_navigation_drawer {
        transform:
            translateX(0);
    }


    /* DRAWER HEADER */

    .kcf_mobile_navigation_header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap:
            var(--kcf_spacing_3);

        min-height: 64px;

        padding:
            var(--kcf_spacing_3)
            var(--kcf_spacing_4);

        border-bottom:
            1px solid
            var(--kcf_color_border);
    }

    .kcf_mobile_navigation_brand {
        display: inline-flex;
        align-items: center;

        min-width: 0;

        gap:
            var(--kcf_spacing_2);

        color:
            var(--kcf_color_text);

        font-size: 0.9rem;
        font-weight: 700;
    }

    .kcf_mobile_navigation_brand_mark {
        flex: 0 0 auto;

        font-size: 1.45rem;
        font-weight: 800;

        letter-spacing: -0.08em;
    }

    .kcf_mobile_navigation_close {
        display: inline-grid;
        place-items: center;

        flex: 0 0 42px;

        width: 42px;
        height: 42px;

        padding: 0;

        background:
            var(--kcf_color_surface_secondary);

        border:
            1px solid
            var(--kcf_color_border);

        border-radius:
            var(--kcf_border_radius);

        color:
            var(--kcf_color_text_muted);

        cursor: pointer;

        font-size: 1rem;

        touch-action: manipulation;
    }

    .kcf_mobile_navigation_close:hover,
    .kcf_mobile_navigation_close:focus-visible {
        color:
            var(--kcf_color_value);
    }


    /* BENUTZER */

    .kcf_mobile_navigation_user {
        display: flex;
        align-items: center;

        gap:
            var(--kcf_spacing_3);

        padding:
            var(--kcf_spacing_4);

        background:
            var(--kcf_color_navigation_secondary);

        border-bottom:
            1px solid
            var(--kcf_color_border);
    }

    .kcf_mobile_navigation_user_avatar {
        display: grid;
        place-items: center;

        flex: 0 0 42px;

        width: 42px;
        height: 42px;

        background:
            var(--kcf_color_surface);

        border:
            1px solid
            var(--kcf_color_border);

        border-radius: 50%;

        color:
            var(--kcf_color_label);
    }

    .kcf_mobile_navigation_user_content {
        display: flex;
        flex-direction: column;

        min-width: 0;

        gap: 1px;
    }

    .kcf_mobile_navigation_user_content > span {
        color:
            var(--kcf_color_text_muted);

        font-size: 0.68rem;
    }

    .kcf_mobile_navigation_user_content > a {
        overflow: hidden;

        color:
            var(--kcf_color_text);

        font-size: 0.86rem;
        font-weight: 700;

        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* NAVIGATION */

    .kcf_mobile_navigation_scroll {
        flex: 1;

        min-height: 0;

        overflow-y: auto;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;
    }

    .kcf_mobile_navigation_primary {
        display: grid;

        gap:
            var(--kcf_spacing_1);

        padding:
            var(--kcf_spacing_3);
    }

    .kcf_mobile_navigation_item {
        display: grid;

        grid-template-columns:
            38px
            minmax(0, 1fr)
            auto;

        align-items: center;

        gap:
            var(--kcf_spacing_3);

        min-height: 50px;

        padding:
            var(--kcf_spacing_2)
            var(--kcf_spacing_3);

        border:
            1px solid
            transparent;

        border-radius:
            var(--kcf_border_radius);

        color:
            var(--kcf_color_text_muted);

        font-size: 0.88rem;
        font-weight: 650;
    }

    .kcf_mobile_navigation_item:hover,
    .kcf_mobile_navigation_item:focus-visible {
        background:
            var(--kcf_color_surface_secondary);

        color:
            var(--kcf_color_text);
    }

    .kcf_mobile_navigation_item.kcf_is_active {
        background:
            var(--kcf_color_navigation_secondary);

        border-color:
            var(--kcf_color_border);

        color:
            var(--kcf_color_value);
    }

    .kcf_mobile_navigation_item_icon {
        display: grid;
        place-items: center;

        width: 38px;
        height: 38px;

        color:
            var(--kcf_color_label);

        font-size: 1rem;
    }

    .kcf_mobile_navigation_item.kcf_is_active
    .kcf_mobile_navigation_item_icon {
        color:
            var(--kcf_color_value);
    }

    .kcf_mobile_navigation_item_title {
        min-width: 0;
    }

    .kcf_mobile_navigation_item_chevron {
        color:
            var(--kcf_color_text_muted);

        font-size: 0.7rem;
    }


    /* SEKUNDÄRNAVIGATION IM DRAWER */

    .kcf_mobile_navigation_secondary {
        margin:
            0
            var(--kcf_spacing_3)
            var(--kcf_spacing_4);

        padding-top:
            var(--kcf_spacing_3);

        border-top:
            1px solid
            var(--kcf_color_border);
    }

    .kcf_mobile_navigation_section_title,
    .kcf_mobile_navigation_subsection {
        color:
            var(--kcf_color_text_muted);

        font-size: 0.68rem;
        font-weight: 750;

        letter-spacing: 0.055em;

        text-transform: uppercase;
    }

    .kcf_mobile_navigation_section_title {
        margin-bottom:
            var(--kcf_spacing_2);

        padding:
            0
            var(--kcf_spacing_3);
    }

    .kcf_mobile_navigation_subsection {
        display: flex;
        align-items: center;

        gap:
            var(--kcf_spacing_2);

        margin:
            var(--kcf_spacing_3)
            var(--kcf_spacing_3)
            var(--kcf_spacing_1);
    }

    .kcf_mobile_navigation_subsection::after {
        flex: 1;

        height: 1px;

        background:
            var(--kcf_color_border);

        content: "";
    }

    .kcf_mobile_navigation_secondary nav {
        display: grid;

        gap:
            var(--kcf_spacing_1);
    }

    .kcf_mobile_navigation_subitem {
        display: flex;
        align-items: center;

        gap:
            var(--kcf_spacing_3);

        min-height: 44px;

        padding:
            var(--kcf_spacing_2)
            var(--kcf_spacing_3);

        border-radius:
            var(--kcf_border_radius);

        color:
            var(--kcf_color_text_muted);

        font-size: 0.84rem;
        font-weight: 600;
    }

    .kcf_mobile_navigation_subitem > i {
        width: 18px;

        color:
            var(--kcf_color_label);

        text-align: center;
    }

    .kcf_mobile_navigation_subitem:hover,
    .kcf_mobile_navigation_subitem:focus-visible {
        background:
            var(--kcf_color_surface_secondary);

        color:
            var(--kcf_color_text);
    }

    .kcf_mobile_navigation_subitem.kcf_is_active {
        background:
            var(--kcf_color_surface_secondary);

        color:
            var(--kcf_color_value);
    }


    /* DRAWER FOOTER */

    .kcf_mobile_navigation_footer {
        padding:
            var(--kcf_spacing_3)
            var(--kcf_spacing_4)
            max(
                var(--kcf_spacing_3),
                env(safe-area-inset-bottom)
            );

        border-top:
            1px solid
            var(--kcf_color_border);
    }

    .kcf_mobile_navigation_logout {
        display: flex;
        align-items: center;
        justify-content: center;

        gap:
            var(--kcf_spacing_2);

        min-height: 44px;

        background:
            rgb(185 75 75 / 0.07);

        border:
            1px solid
            rgb(185 75 75 / 0.18);

        border-radius:
            var(--kcf_border_radius);

        color:
            var(--kcf_color_error);

        font-size: 0.82rem;
        font-weight: 700;
    }


    /* CONTENT */

    .kcf_page_content,
    body.kcf_has_secondary_navigation
    .kcf_page_content {
        padding:
            calc(
                var(--kcf_header_height)
                + env(safe-area-inset-top)
                + var(--kcf_spacing_5)
            )
            var(--kcf_spacing_5)
            var(--kcf_spacing_6);
    }

    .kcf_footer {
        padding:
            var(--kcf_spacing_4)
            var(--kcf_spacing_5);
    }


    /* SEITENKOPF */

    .kcf_page_header {
        margin-bottom:
            var(--kcf_spacing_5);
    }

    .kcf_page_title {
        font-size:
            clamp(
                1.5rem,
                4vw,
                1.9rem
            );
    }

    .kcf_page_header_actions {
        align-items: flex-start;
    }

    .kcf_page_header_navigation_icon {
        flex-basis: 54px;

        width: 54px;
        height: 54px;

        font-size: 1.45rem;
    }


    /* FORMULARE / CARDS */

    .kcf_form_row,
    .kcf_user_edit_top_grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .kcf_settings_grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .kcf_navigation_settings_sidebar {
        grid-template-columns:
            minmax(0, 1fr);
    }


    /* SERVER */

    .kcf_server_overview_grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .kcf_server_details_data > div {
        grid-template-columns:
            minmax(120px, 0.5fr)
            minmax(0, 1fr);
    }


    /* ICON PICKER */

    .kcf_icon_picker_modal {
        padding:
            var(--kcf_spacing_4);
    }

    .kcf_icon_picker_dialog {
        width:
            min(
                100%,
                900px
            );

        max-height:
            calc(
                100dvh
                - 2rem
            );
    }

    .kcf_icon_picker_toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .kcf_icon_picker_filters {
        overflow-x: auto;

        scrollbar-width: none;
    }

    .kcf_icon_picker_filters::-webkit-scrollbar {
        display: none;
    }
}


/* =========================================================
   KCF CORE – SMARTPHONE
   ========================================================= */

@media (max-width: 720px) {
    :root {
        --kcf_header_height: 60px;
    }


    /* TOPBAR */

    .kcf_topbar,
    .kcf_app.kcf_app_has_secondary_navigation ~ .kcf_topbar,
    body.kcf_has_secondary_navigation
    .kcf_topbar {
        gap:
            var(--kcf_spacing_2);

        padding-right:
            var(--kcf_spacing_3);

        padding-left:
            var(--kcf_spacing_3);
    }

    .kcf_topbar_logo {
        font-size: 1.4rem;
    }

    .kcf_topbar_name {
        font-size: 0.82rem;
    }

    .kcf_topbar_user {
        gap:
            var(--kcf_spacing_2);
    }

    .kcf_topbar_user_info {
        display: none;
    }

    .kcf_topbar_user_avatar {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

    .kcf_topbar_logout {
        width: 38px;
        height: 38px;

        margin-left: 0;
    }


    /* CONTENT */

    .kcf_page_content {
        padding-right:
            var(--kcf_spacing_4);

        padding-left:
            var(--kcf_spacing_4);
    }

    .kcf_footer {
        padding-right:
            var(--kcf_spacing_4);

        padding-left:
            var(--kcf_spacing_4);

        text-align: center;
    }


    /* SEITENKOPF */

    .kcf_page_header_navigation {
        align-items: flex-start;

        gap:
            var(--kcf_spacing_3);
    }

    .kcf_page_header_navigation_icon {
        flex-basis: 46px;

        width: 46px;
        height: 46px;

        font-size: 1.2rem;
    }

    .kcf_page_header_navigation
    .kcf_page_description {
        font-size: 0.84rem;
    }

    .kcf_page_header_actions {
        flex-direction: column;
        align-items: stretch;

        gap:
            var(--kcf_spacing_3);
    }

    .kcf_page_header_actions
    > .kcf_button {
        width: 100%;
    }


    /* BUTTONS / TOUCH */

    .kcf_button {
        min-height: 44px;
    }

    .kcf_icon_button {
        width: 40px;
        height: 40px;
    }

    .kcf_form_input,
    .kcf_form_select,
    .kcf_form_textarea {
        min-height: 44px;
    }


    /* CARDS */

    .kcf_card {
        padding:
            var(--kcf_spacing_4);
    }

    .kcf_settings_grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .kcf_settings_card {
        gap:
            var(--kcf_spacing_3);

        padding:
            var(--kcf_spacing_4);
    }

    .kcf_settings_card_icon {
        width: 40px;
        height: 40px;
    }


    /* FORMULARE */

    .kcf_form_actions {
        flex-direction: column;
        align-items: stretch;
    }

    .kcf_form_actions
    .kcf_button {
        width: 100%;
    }

    .kcf_navigation_settings
    .kcf_settings_field_row {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .kcf_navigation_settings
    .kcf_settings_card_header,
    .kcf_navigation_settings
    .kcf_settings_card_content,
    .kcf_user_edit_card_header,
    .kcf_user_edit_card_content {
        padding:
            var(--kcf_spacing_4);
    }


    /* TABELLEN */

    .kcf_table_wrapper,
    .kcf_server_simple_table_wrapper {
        margin-right:
            calc(
                0px
                - var(--kcf_spacing_4)
            );

        margin-left:
            calc(
                0px
                - var(--kcf_spacing_4)
            );

        width:
            calc(
                100%
                + var(--kcf_spacing_4)
                + var(--kcf_spacing_4)
            );

        border-right: 0;
        border-left: 0;

        border-radius: 0;

        overscroll-behavior-x: contain;

        -webkit-overflow-scrolling: touch;
    }

    .kcf_table,
    .kcf_server_simple_table {
        width: max-content;
        min-width: 100%;
    }

    .kcf_table th,
    .kcf_table td {
        padding:
            var(--kcf_spacing_3);
    }

    .kcf_table_actions {
        position: sticky;
        right: 0;

        background:
            var(--kcf_color_surface);

        box-shadow:
            -8px
            0
            12px
            rgb(0 0 0 / 0.035);
    }

    .kcf_table th.kcf_table_actions {
        background:
            var(--kcf_color_surface_secondary);
    }


    /* USER */

    [data-kcf-email-accounts] {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .kcf_user_edit_information {
        align-items: flex-start;
        flex-direction: column;

        gap:
            var(--kcf_spacing_2);
    }

    .kcf_user_admin_identity {
        align-items: flex-start;
        flex-direction: column;

        gap: 0;
    }


    /* SERVER */

    .kcf_server_overview_grid,
    .kcf_server_account_grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .kcf_server_details_toggle {
        align-items: flex-start;

        gap:
            var(--kcf_spacing_3);

        padding:
            var(--kcf_spacing_3);
    }

    .kcf_server_details_toggle_end {
        gap:
            var(--kcf_spacing_2);
    }

    .kcf_server_details_protected_badge {
        padding:
            4px
            6px;

        font-size: 0.64rem;
    }

    .kcf_server_details_content {
        padding:
            var(--kcf_spacing_3);
    }

    .kcf_server_details_data > div {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            var(--kcf_spacing_1);
    }

    .kcf_server_php_assignment {
        align-items: flex-start;
        flex-direction: column;

        gap:
            var(--kcf_spacing_2);
    }

    .kcf_server_details_summary {
        align-items: flex-start;
        flex-direction: column;

        gap:
            var(--kcf_spacing_2);
    }

    .kcf_server_details_summary
    > span:not(:last-child)::after {
        display: none;
    }


    /* PLUGINS */

    .kcf_plugin_grid {
        grid-template-columns:
            minmax(0, 1fr);
    }


    /* CHANGELOG */

    .kcf_changelog_toggle {
        align-items: flex-start;

        padding:
            var(--kcf_spacing_4);
    }

    .kcf_changelog_toggle_main {
        align-items: flex-start;
        flex-direction: column;

        gap:
            var(--kcf_spacing_1);
    }

    .kcf_changelog_toggle_meta {
        flex:
            0
            0
            auto;
    }

    .kcf_changelog_content {
        padding:
            0
            var(--kcf_spacing_4)
            var(--kcf_spacing_4);
    }


    /* ICON PICKER */

    .kcf_icon_picker_modal {
        place-items: stretch;

        padding: 0;
    }

    .kcf_icon_picker_dialog {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;

        border: 0;
        border-radius: 0;
    }

    .kcf_icon_picker_header,
    .kcf_icon_picker_toolbar {
        padding:
            var(--kcf_spacing_3)
            var(--kcf_spacing_4);
    }

    .kcf_icon_picker_status {
        padding:
            var(--kcf_spacing_3)
            var(--kcf_spacing_4);
    }

    .kcf_icon_picker_grid {
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(92px, 1fr)
            );

        padding:
            0
            var(--kcf_spacing_4)
            calc(
                var(--kcf_spacing_4)
                + env(safe-area-inset-bottom)
            );
    }

    .kcf_icon_picker_item {
        min-height: 84px;
    }


    /* LOGIN */

    .kcf_login {
        align-items: center;

        padding:
            max(
                20px,
                env(safe-area-inset-top)
            )
            max(
                16px,
                env(safe-area-inset-right)
            )
            max(
                20px,
                env(safe-area-inset-bottom)
            )
            max(
                16px,
                env(safe-area-inset-left)
            );
    }

    .kcf_login_container {
        gap: 20px;
    }

    .kcf_login_logo {
        width:
            min(
                240px,
                70vw
            );
    }

    .kcf_login_panel {
        padding:
            24px
            20px;
    }
}


/* =========================================================
   KCF CORE – KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 480px) {
    .kcf_topbar_mobile_brand_name,
    .kcf_topbar_name {
        display: none;
    }

    .kcf_topbar_user_avatar {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }

    .kcf_topbar_logout {
        width: 36px;
        height: 36px;
    }

    .kcf_page_content {
        padding-right:
            var(--kcf_spacing_3);

        padding-left:
            var(--kcf_spacing_3);
    }

    .kcf_footer {
        padding-right:
            var(--kcf_spacing_3);

        padding-left:
            var(--kcf_spacing_3);
    }

    .kcf_page_header_navigation_icon {
        display: none;
    }

    .kcf_page_title {
        font-size:
            clamp(
                1.35rem,
                7vw,
                1.65rem
            );
    }

    .kcf_card,
    .kcf_settings_card {
        padding:
            var(--kcf_spacing_3);
    }

    .kcf_plugin_card_main {
        grid-template-columns:
            44px
            minmax(0, 1fr);

        padding:
            var(--kcf_spacing_3);
    }

    .kcf_plugin_card_icon {
        width: 44px;
        height: 44px;

        font-size: 1.15rem;
    }

    .kcf_server_stat {
        padding:
            var(--kcf_spacing_3);
    }

    .kcf_server_stat_icon,
    .kcf_server_details_icon {
        flex-basis: 38px;

        width: 38px;
        height: 38px;
    }

    .kcf_server_details_heading span {
        font-size: 0.7rem;
    }

    .kcf_icon_picker_filters {
        gap:
            var(--kcf_spacing_2);
    }

    .kcf_icon_picker_filter {
        flex:
            0
            0
            auto;
    }

    .kcf_login_panel {
        padding:
            22px
            16px;
    }
}


/* =========================================================
   KCF CORE – SEHR SCHMALE DISPLAYS
   ========================================================= */

@media (max-width: 360px) {
    .kcf_topbar {
        padding-right:
            var(--kcf_spacing_2);

        padding-left:
            var(--kcf_spacing_2);
    }

    .kcf_topbar_user_avatar {
        display: none;
    }

    .kcf_page_content {
        padding-right:
            var(--kcf_spacing_2);

        padding-left:
            var(--kcf_spacing_2);
    }

    .kcf_footer {
        padding-right:
            var(--kcf_spacing_2);

        padding-left:
            var(--kcf_spacing_2);
    }
}


/* =========================================================
   KCF CORE – KLEINE DISPLAYHÖHE / LANDSCAPE
   ========================================================= */

@media (max-height: 560px) and (orientation: landscape) and (max-width: 1024px) {
    .kcf_mobile_navigation_drawer {
        width:
            min(
                72vw,
                420px
            );
    }

    .kcf_mobile_navigation_user {
        padding:
            var(--kcf_spacing_2)
            var(--kcf_spacing_4);
    }

    .kcf_mobile_navigation_item {
        min-height: 44px;
    }
}


/* =========================================================
   KCF CORE – TOUCH-GERÄTE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {
    .kcf_button,
    .kcf_icon_button,
    .kcf_navigation_secondary_item,
    .kcf_icon_picker_filter,
    .kcf_icon_picker_close,
    .kcf_user_email_account_delete {
        touch-action: manipulation;
    }

    .kcf_button:hover,
    .kcf_settings_card:hover,
    .kcf_plugin_card:hover {
        transform: none;
    }
}


/* =========================================================
   KCF CORE – REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   KCF CORE – DRUCK
   ========================================================= */

@media print {
    .kcf_topbar,
    .kcf_navigation_primary,
    .kcf_navigation_secondary,
    .kcf_footer {
        display: none !important;
    }

    .kcf_app,
    .kcf_app.kcf_app_has_secondary_navigation {
        display: block;
    }

    .kcf_app_main,
    .kcf_app.kcf_app_has_secondary_navigation
    .kcf_app_main {
        display: block;
    }

    .kcf_page_content,
    body.kcf_has_secondary_navigation
    .kcf_page_content {
        padding: 0;
    }

    .kcf_card,
    .kcf_settings_card,
    .kcf_plugin_card,
    .kcf_server_stat,
    .kcf_server_details_item {
        box-shadow: none;
    }
}

/* =========================================================
   KCF CORE – BENUTZERGRUPPEN / BERECHTIGUNGEN
   ========================================================= */

@media (max-width: 900px) {
    .kcf_user_group_info_grid {
        grid-template-columns: 1fr;
    }

    .kcf_user_group_description_field {
        grid-column: auto;
    }

    .kcf_user_permission_resource {
        grid-template-columns: 1fr;
        gap: var(--kcf_spacing_3);
    }

    .kcf_user_permission_actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .kcf_user_permission_section_header {
        align-items: flex-start;
        flex-direction: column;
    }

    .kcf_user_permission_section_actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .kcf_user_permission_actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kcf_user_permission_option {
        justify-content: flex-start;
    }
}

/* =========================================================
   KCF CORE – BENUTZERGRUPPEN / NEXT LEVEL RECHTE
   ========================================================= */

@media (max-width: 1100px) {
    .kcf_user_group_info_layout,
    .kcf_user_group_resource_card {
        grid-template-columns: 1fr;
    }

    .kcf_user_group_permission_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .kcf_user_group_card_header,
    .kcf_user_group_panel_header {
        flex-direction: column;
        align-items: stretch;
    }

    .kcf_user_group_header_badges {
        justify-content: flex-start;
    }

    .kcf_user_group_tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--kcf_spacing_3);
    }

    .kcf_user_group_tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .kcf_user_group_card_header,
    .kcf_user_group_info_layout,
    .kcf_user_group_tab_panel,
    .kcf_user_group_tabs {
        padding-left: var(--kcf_spacing_4);
        padding-right: var(--kcf_spacing_4);
    }

    .kcf_user_group_stats_grid,
    .kcf_user_group_permission_grid {
        grid-template-columns: 1fr;
    }

    .kcf_user_group_panel_actions {
        width: 100%;
    }

    .kcf_user_group_panel_actions .kcf_button {
        width: 100%;
    }

    .kcf_permission_toggle {
        width: 100%;
    }

    .kcf_permission_toggle_button {
        flex: 1 1 0;
    }

    .kcf_user_group_resource_card,
    .kcf_user_group_permission_item {
        padding: var(--kcf_spacing_3);
    }
}