/* 
 Theme Name:   FoE Übersicht
 Theme URI:    
 Description:  
 Author:       CMC
 Author URI:   https://cmc-foe.com
 Template:     hello-elementor
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/

html {
    font-size: 62.5%;
}
:root {
    --cfv-min-screen-width: 320px;
    --cfv-max-screen-width: 1600px;
    --cfv-space-xs: clamp(0.8rem, calc(0.31vw + 0.7rem), 1.2rem);
    --cfv-space-s: clamp(1.2rem, calc(0.31vw + 1.1rem), 1.6rem);
    --cfv-space-m: clamp(1.6rem, calc(0.31vw + 1.5rem), 2rem);
    --cfv-space-l: clamp(1.8rem, calc(0.55vw + 1.63rem), 2.5rem);
    --cfv-space-xl: clamp(2rem, calc(0.78vw + 1.75rem), 3rem);
    --cfv-space-2xl: clamp(2.4rem, calc(1.25vw + 2rem), 4rem);
    --cfv-space-3xl: clamp(3rem, calc(1.41vw + 2.55rem), 4.8rem);
    --cfv-space-4xl: clamp(3.6rem, calc(1.88vw + 3rem), 6rem);
    --cfv-text-s: clamp(1.42rem, calc(0.01vw + 1.42rem), 1.44rem);
    --cfv-text-m: clamp(1.6rem, calc(0.16vw + 1.55rem), 1.8rem);
    --cfv-text-l: clamp(1.8rem, calc(0.35vw + 1.69rem), 2.25rem);
    --cfv-text-xl: clamp(2.02rem, calc(0.62vw + 1.83rem), 2.81rem);
    --cfv-text-2xl: clamp(2.28rem, calc(0.97vw + 1.97rem), 3.52rem);
    --cfv-text-3xl: clamp(2.56rem, calc(1.43vw + 2.1rem), 4.4rem);
    --cfv-text-4xl: clamp(2.88rem, calc(2.04vw + 2.23rem), 5.49rem);
    --cfv-text-5xl: clamp(3.24rem, calc(2.83vw + 2.34rem), 6.87rem);
    --cfv-hero-title-size: var(--cfv-text-5xl);
    --cfv-post-title-size: var(--cfv-text-2xl);
    --cfv-nav-link-size: var(--cfv-text-m);
    --cfv-header-space: var(--cfv-space-s);
    --cfv-btn-space: var(--cfv-space-xs) var(--cfv-space-s);
    --cfv-card-space: var(--cfv-space-s);
    --cfv-footer-space: var(--cfv-space-s) var(--cfv-space-m);
    --cfv-radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
    --cfv-radius-s: clamp(0.6rem, calc(-0.16vw + 0.85rem), 0.8rem);
    --cfv-radius-m: clamp(1rem, calc(-0.16vw + 1.25rem), 1.2rem);
    --cfv-radius-l: clamp(1.6rem, calc(-0.31vw + 2.1rem), 2rem);
    --cfv-radius-xl: clamp(2.6rem, calc(-0.47vw + 3.35rem), 3.2rem);
    --cfv-radius-full: 999rem;
}
/* Color System */
/* Fluid Spacing */
.cf-padding-xs {
    padding: var(--cfv-space-xs);
}
.cf-padding-s {
    padding: var(--cfv-space-s);
}
.cf-padding-m {
    padding: var(--cfv-space-m);
}
.cf-padding-l {
    padding: var(--cfv-space-l);
}
.cf-padding-xl {
    padding: var(--cfv-space-xl);
}
.cf-padding-2xl {
    padding: var(--cfv-space-2xl);
}
.cf-padding-3xl {
    padding: var(--cfv-space-3xl);
}
.cf-padding-4xl {
    padding: var(--cfv-space-4xl);
}
.cf-padding-left-xs {
    padding-left: var(--cfv-space-xs);
}
.cf-padding-left-s {
    padding-left: var(--cfv-space-s);
}
.cf-padding-left-m {
    padding-left: var(--cfv-space-m);
}
.cf-padding-left-l {
    padding-left: var(--cfv-space-l);
}
.cf-padding-left-xl {
    padding-left: var(--cfv-space-xl);
}
.cf-padding-left-2xl {
    padding-left: var(--cfv-space-2xl);
}
.cf-padding-left-3xl {
    padding-left: var(--cfv-space-3xl);
}
.cf-padding-left-4xl {
    padding-left: var(--cfv-space-4xl);
}
.cf-padding-right-xs {
    padding-right: var(--cfv-space-xs);
}
.cf-padding-right-s {
    padding-right: var(--cfv-space-s);
}
.cf-padding-right-m {
    padding-right: var(--cfv-space-m);
}
.cf-padding-right-l {
    padding-right: var(--cfv-space-l);
}
.cf-padding-right-xl {
    padding-right: var(--cfv-space-xl);
}
.cf-padding-right-2xl {
    padding-right: var(--cfv-space-2xl);
}
.cf-padding-right-3xl {
    padding-right: var(--cfv-space-3xl);
}
.cf-padding-right-4xl {
    padding-right: var(--cfv-space-4xl);
}
.cf-padding-top-xs {
    padding-top: var(--cfv-space-xs);
}
.cf-padding-top-s {
    padding-top: var(--cfv-space-s);
}
.cf-padding-top-m {
    padding-top: var(--cfv-space-m);
}
.cf-padding-top-l {
    padding-top: var(--cfv-space-l);
}
.cf-padding-top-xl {
    padding-top: var(--cfv-space-xl);
}
.cf-padding-top-2xl {
    padding-top: var(--cfv-space-2xl);
}
.cf-padding-top-3xl {
    padding-top: var(--cfv-space-3xl);
}
.cf-padding-top-4xl {
    padding-top: var(--cfv-space-4xl);
}
.cf-padding-bottom-xs {
    padding-bottom: var(--cfv-space-xs);
}
.cf-padding-bottom-s {
    padding-bottom: var(--cfv-space-s);
}
.cf-padding-bottom-m {
    padding-bottom: var(--cfv-space-m);
}
.cf-padding-bottom-l {
    padding-bottom: var(--cfv-space-l);
}
.cf-padding-bottom-xl {
    padding-bottom: var(--cfv-space-xl);
}
.cf-padding-bottom-2xl {
    padding-bottom: var(--cfv-space-2xl);
}
.cf-padding-bottom-3xl {
    padding-bottom: var(--cfv-space-3xl);
}
.cf-padding-bottom-4xl {
    padding-bottom: var(--cfv-space-4xl);
}
.cf-padding-horizontal-xs {
    padding-left: var(--cfv-space-xs);
    padding-right: var(--cfv-space-xs);
}
.cf-padding-horizontal-s {
    padding-left: var(--cfv-space-s);
    padding-right: var(--cfv-space-s);
}
.cf-padding-horizontal-m {
    padding-left: var(--cfv-space-m);
    padding-right: var(--cfv-space-m);
}
.cf-padding-horizontal-l {
    padding-left: var(--cfv-space-l);
    padding-right: var(--cfv-space-l);
}
.cf-padding-horizontal-xl {
    padding-left: var(--cfv-space-xl);
    padding-right: var(--cfv-space-xl);
}
.cf-padding-horizontal-2xl {
    padding-left: var(--cfv-space-2xl);
    padding-right: var(--cfv-space-2xl);
}
.cf-padding-horizontal-3xl {
    padding-left: var(--cfv-space-3xl);
    padding-right: var(--cfv-space-3xl);
}
.cf-padding-horizontal-4xl {
    padding-left: var(--cfv-space-4xl);
    padding-right: var(--cfv-space-4xl);
}
.cf-padding-vertical-xs {
    padding-top: var(--cfv-space-xs);
    padding-bottom: var(--cfv-space-xs);
}
.cf-padding-vertical-s {
    padding-top: var(--cfv-space-s);
    padding-bottom: var(--cfv-space-s);
}
.cf-padding-vertical-m {
    padding-top: var(--cfv-space-m);
    padding-bottom: var(--cfv-space-m);
}
.cf-padding-vertical-l {
    padding-top: var(--cfv-space-l);
    padding-bottom: var(--cfv-space-l);
}
.cf-padding-vertical-xl {
    padding-top: var(--cfv-space-xl);
    padding-bottom: var(--cfv-space-xl);
}
.cf-padding-vertical-2xl {
    padding-top: var(--cfv-space-2xl);
    padding-bottom: var(--cfv-space-2xl);
}
.cf-padding-vertical-3xl {
    padding-top: var(--cfv-space-3xl);
    padding-bottom: var(--cfv-space-3xl);
}
.cf-padding-vertical-4xl {
    padding-top: var(--cfv-space-4xl);
    padding-bottom: var(--cfv-space-4xl);
}
.cf-margin-xs {
    margin: var(--cfv-space-xs);
}
.cf-margin-s {
    margin: var(--cfv-space-s);
}
.cf-margin-m {
    margin: var(--cfv-space-m);
}
.cf-margin-l {
    margin: var(--cfv-space-l);
}
.cf-margin-xl {
    margin: var(--cfv-space-xl);
}
.cf-margin-2xl {
    margin: var(--cfv-space-2xl);
}
.cf-margin-3xl {
    margin: var(--cfv-space-3xl);
}
.cf-margin-4xl {
    margin: var(--cfv-space-4xl);
}
.cf-margin-left-xs {
    margin-left: var(--cfv-space-xs);
}
.cf-margin-left-s {
    margin-left: var(--cfv-space-s);
}
.cf-margin-left-m {
    margin-left: var(--cfv-space-m);
}
.cf-margin-left-l {
    margin-left: var(--cfv-space-l);
}
.cf-margin-left-xl {
    margin-left: var(--cfv-space-xl);
}
.cf-margin-left-2xl {
    margin-left: var(--cfv-space-2xl);
}
.cf-margin-left-3xl {
    margin-left: var(--cfv-space-3xl);
}
.cf-margin-left-4xl {
    margin-left: var(--cfv-space-4xl);
}
.cf-margin-right-xs {
    margin-right: var(--cfv-space-xs);
}
.cf-margin-right-s {
    margin-right: var(--cfv-space-s);
}
.cf-margin-right-m {
    margin-right: var(--cfv-space-m);
}
.cf-margin-right-l {
    margin-right: var(--cfv-space-l);
}
.cf-margin-right-xl {
    margin-right: var(--cfv-space-xl);
}
.cf-margin-right-2xl {
    margin-right: var(--cfv-space-2xl);
}
.cf-margin-right-3xl {
    margin-right: var(--cfv-space-3xl);
}
.cf-margin-right-4xl {
    margin-right: var(--cfv-space-4xl);
}
.cf-margin-top-xs {
    margin-top: var(--cfv-space-xs);
}
.cf-margin-top-s {
    margin-top: var(--cfv-space-s);
}
.cf-margin-top-m {
    margin-top: var(--cfv-space-m);
}
.cf-margin-top-l {
    margin-top: var(--cfv-space-l);
}
.cf-margin-top-xl {
    margin-top: var(--cfv-space-xl);
}
.cf-margin-top-2xl {
    margin-top: var(--cfv-space-2xl);
}
.cf-margin-top-3xl {
    margin-top: var(--cfv-space-3xl);
}
.cf-margin-top-4xl {
    margin-top: var(--cfv-space-4xl);
}
.cf-margin-bottom-xs {
    margin-bottom: var(--cfv-space-xs);
}
.cf-margin-bottom-s {
    margin-bottom: var(--cfv-space-s);
}
.cf-margin-bottom-m {
    margin-bottom: var(--cfv-space-m);
}
.cf-margin-bottom-l {
    margin-bottom: var(--cfv-space-l);
}
.cf-margin-bottom-xl {
    margin-bottom: var(--cfv-space-xl);
}
.cf-margin-bottom-2xl {
    margin-bottom: var(--cfv-space-2xl);
}
.cf-margin-bottom-3xl {
    margin-bottom: var(--cfv-space-3xl);
}
.cf-margin-bottom-4xl {
    margin-bottom: var(--cfv-space-4xl);
}
.cf-margin-horizontal-xs {
    margin-left: var(--cfv-space-xs);
    margin-right: var(--cfv-space-xs);
}
.cf-margin-horizontal-s {
    margin-left: var(--cfv-space-s);
    margin-right: var(--cfv-space-s);
}
.cf-margin-horizontal-m {
    margin-left: var(--cfv-space-m);
    margin-right: var(--cfv-space-m);
}
.cf-margin-horizontal-l {
    margin-left: var(--cfv-space-l);
    margin-right: var(--cfv-space-l);
}
.cf-margin-horizontal-xl {
    margin-left: var(--cfv-space-xl);
    margin-right: var(--cfv-space-xl);
}
.cf-margin-horizontal-2xl {
    margin-left: var(--cfv-space-2xl);
    margin-right: var(--cfv-space-2xl);
}
.cf-margin-horizontal-3xl {
    margin-left: var(--cfv-space-3xl);
    margin-right: var(--cfv-space-3xl);
}
.cf-margin-horizontal-4xl {
    margin-left: var(--cfv-space-4xl);
    margin-right: var(--cfv-space-4xl);
}
.cf-margin-vertical-xs {
    margin-top: var(--cfv-space-xs);
    margin-bottom: var(--cfv-space-xs);
}
.cf-margin-vertical-s {
    margin-top: var(--cfv-space-s);
    margin-bottom: var(--cfv-space-s);
}
.cf-margin-vertical-m {
    margin-top: var(--cfv-space-m);
    margin-bottom: var(--cfv-space-m);
}
.cf-margin-vertical-l {
    margin-top: var(--cfv-space-l);
    margin-bottom: var(--cfv-space-l);
}
.cf-margin-vertical-xl {
    margin-top: var(--cfv-space-xl);
    margin-bottom: var(--cfv-space-xl);
}
.cf-margin-vertical-2xl {
    margin-top: var(--cfv-space-2xl);
    margin-bottom: var(--cfv-space-2xl);
}
.cf-margin-vertical-3xl {
    margin-top: var(--cfv-space-3xl);
    margin-bottom: var(--cfv-space-3xl);
}
.cf-margin-vertical-4xl {
    margin-top: var(--cfv-space-4xl);
    margin-bottom: var(--cfv-space-4xl);
}
.cf-gap-xs {
    gap: var(--cfv-space-xs);
}
.cf-gap-s {
    gap: var(--cfv-space-s);
}
.cf-gap-m {
    gap: var(--cfv-space-m);
}
.cf-gap-l {
    gap: var(--cfv-space-l);
}
.cf-gap-xl {
    gap: var(--cfv-space-xl);
}
.cf-gap-2xl {
    gap: var(--cfv-space-2xl);
}
.cf-gap-3xl {
    gap: var(--cfv-space-3xl);
}
.cf-gap-4xl {
    gap: var(--cfv-space-4xl);
}
/* Fluid Typography */
.cf-text-s {
    font-size: var(--cfv-text-s);
}
.cf-text-m {
    font-size: var(--cfv-text-m);
}
.cf-text-l {
    font-size: var(--cfv-text-l);
}
.cf-text-xl {
    font-size: var(--cfv-text-xl);
}
.cf-text-2xl {
    font-size: var(--cfv-text-2xl);
}
.cf-text-3xl {
    font-size: var(--cfv-text-3xl);
}
.cf-text-4xl {
    font-size: var(--cfv-text-4xl);
}
.cf-text-5xl {
    font-size: var(--cfv-text-5xl);
}
/* Contextual variables */
/* Headings */

H1 {
	font-size: var(--cfv-text-4xl);
    line-height: 1.2;
}
H2 {
    font-size: var(--cfv-text-3xl);
    line-height: 1.3;
}
H3 {
    font-size: var(--cfv-text-2xl);
    line-height: 1.3;
}
H4 {
    font-size: var(--cfv-text-xl);
    line-height: 1.3;
}
H5 {
    font-size: var(--cfv-text-l);
    line-height: 1.3;
}
H6 {
    font-size: var(--cfv-text-m);
    line-height: 1.4;
}
.hero {
	font-size: var(--cfv-text-5xl);
	font-weight: 600;
    line-height: 1.2;
	color: green;
}


/* Line heights */
.cf-line-height-xs {
    line-height: 1;
}
.cf-line-height-s {
    line-height: 1.2;
}
.cf-line-height-m {
    line-height: 1.3;
}
.cf-line-height-l {
    line-height: 1.4;
}
.cf-line-height-xl {
    line-height: 1.5;
}
.cf-line-height-2xl {
    line-height: 1.8;
}
.cf-line-height-3xl {
    line-height: 2;
}
/* Text Modifiers */
.cf-italic {
    font-style: italic;
}
.cf-bold {
    font-weight: bold;
}
.cf-lowercase {
    text-transform: lowercase;
}
.cf-uppercase {
    text-transform: uppercase;
}
.cf-underline {
    -webkit-text-decoration: underline;
    text-decoration: underline;
}
.cf-font-100 {
    font-weight: 100;
}
.cf-font-200 {
    font-weight: 200;
}
.cf-font-300 {
    font-weight: 300;
}
.cf-font-400 {
    font-weight: 400;
}
.cf-font-500 {
    font-weight: 500;
}
.cf-font-600 {
    font-weight: 600;
}
.cf-font-700 {
    font-weight: 700;
}
.cf-font-800 {
    font-weight: 800;
}
.cf-font-900 {
    font-weight: 900;
}
/* Text Alignment */
.cf-text-left {
    text-align: left;
}
.cf-text-center {
    text-align: center;
}
.cf-text-right {
    text-align: right;
}
.cf-text-justify {
    text-align: justify;
}
/* Border Radius */
.cf-radius-xs {
    border-radius: var(--cfv-radius-xs);
}
.cf-radius-s {
    border-radius: var(--cfv-radius-s);
}
.cf-radius-m {
    border-radius: var(--cfv-radius-m);
}
.cf-radius-l {
    border-radius: var(--cfv-radius-l);
}
.cf-radius-xl {
    border-radius: var(--cfv-radius-xl);
}
.cf-radius-full {
    border-radius: var(--cfv-radius-full);
}
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
}
