@font-face {
    font-family: "Noto Sans";
    src: url("../fonts/noto-sans/NotoSans-VariableFont_wdth,wght.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans";
    src: url("../fonts/noto-sans/NotoSans-Italic-VariableFont_wdth,wght.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}


:root {
    /* =====================================================
       KCF CORE – FARBEN
       ===================================================== */

    --kcf_color_background: #f5f5f2;
    --kcf_color_surface: #ffffff;
    --kcf_color_surface_secondary: #f0f1ed;

    --kcf_color_text: #292929;
    --kcf_color_text_muted: #70736c;

    --kcf_color_border: #dedfd9;

    /*
     * KatRom-Akzentfarben
     * Grün = Bezeichnung / Kontext
     * Orange = Werte / konkrete Informationen
     */
    --kcf_color_label: #7d8f73;
    --kcf_color_value: #e67e22;

	--kcf_color_success: #2f7d32;
	--kcf_color_success_background: #e8f5e9;
	--kcf_color_success_border: #256528;

	--kcf_color_warning: #c48a32;

	--kcf_color_error: #b3261e;
	--kcf_color_error_background: #fdecea;
	--kcf_color_error_border: #8f1f18;

	--kcf_color_info: #58768a;


    /* =====================================================
       KCF CORE – SCHRIFT
       ===================================================== */

	--kcf_font_family:
		"Noto Sans",
		ui-sans-serif,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;

    --kcf_font_size_base: 16px;
    --kcf_line_height_base: 1.5;


    /* =====================================================
       KCF CORE – ABSTÄNDE
       ===================================================== */

    --kcf_spacing_1: 0.25rem;
    --kcf_spacing_2: 0.5rem;
    --kcf_spacing_3: 0.75rem;
    --kcf_spacing_4: 1rem;
    --kcf_spacing_5: 1.5rem;
    --kcf_spacing_6: 2rem;
    --kcf_spacing_7: 3rem;


    /* =====================================================
       KCF CORE – LAYOUT
       ===================================================== */

	--kcf_navigation_primary_width: 165px;
	--kcf_navigation_secondary_width: 300px;

	--kcf_header_height: 72px;

	--kcf_color_navigation_primary: #333333;
	--kcf_color_navigation_primary_hover: #414141;
	--kcf_color_navigation_secondary: #eef0e9;

    --kcf_content_max_width: 1600px;


    /* =====================================================
       KCF CORE – DESIGN
       ===================================================== */

    --kcf_border_radius: 4px;

    --kcf_shadow_small:
        0 1px 2px rgb(0 0 0 / 0.05);

    --kcf_shadow_medium:
        0 4px 18px rgb(0 0 0 / 0.07);

    --kcf_transition_fast: 150ms ease;
    --kcf_transition_normal: 220ms ease;
}