.flex-cont, .flex-cont-center {
    display: flex;
    width: var(--flex-cont-width, auto);
    max-width: var(--flex-cont-max-width, 100%);
    height: var(--flex-cont-height);
    max-height: var(--flex-cont-max-height);
    flex-direction: var(--flex-cont-flex-direction, column);
    flex-wrap: var(--flex-cont-flex-wrap, nowrap);
    padding: var(--flex-cont-padding-t, 1rem) var(--flex-cont-padding-r, 1rem) var(--flex-cont-padding-b, 1rem) var(--flex-cont-padding-l, 1rem);
    margin: var(--flex-cont-margin-t, 0rem) var(--flex-cont-margin-r, 0rem) var(--flex-cont-margin-b, 0rem) var(--flex-cont-margin-l, 0rem);
    border-radius: var(--flex-cont-border-radius, 0);
    box-sizing: border-box;
    --flex-cont-solid-bg: var(--flex-cont-background-color, transparent);
    --flex-cont-gradient-bg: linear-gradient(var(--flex-cont-gradient-direction, to bottom), var(--flex-cont-gradient-color-start, var(--bgcolor2)), var(--flex-cont-gradient-color-end, transparent));
    --flex-cont-overlay-bg: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--flex-cont-overlay-color, black) var(--flex-cont-overlay-opacity, 50%), transparent),
        color-mix(in srgb, var(--flex-cont-overlay-color, black) var(--flex-cont-overlay-opacity, 50%), transparent)
    );
    --flex-cont-image-overlay: var(--flex-cont-overlay-bg), var(--flex-cont-background-image, none);
    background:  var(--flex-cont-background-type, var(--flex-cont-solid-bg)) !important;
    background-position: var(--flex-cont-background-position, center) !important;
    background-size: var(--flex-cont-background-size, cover) !important;
    background-repeat: var(--flex-cont-background-repeat, no-repeat) !important;
    background-attachment: var(--flex-cont-background-attachment) !important;
}

.flex-cont .flex-col{
    justify-content: var(--flex-cont-justify-content, flex-start);
    align-items: var(--flex-cont-align-items, flex-start);
}
.flex-cont-center{
--text-align: center;
--flex-item-align-items: center;
}
.flex-cont-center .flex-col{
    justify-content: var(--flex-cont-justify-content, flex-start);
    align-items: var(--flex-cont-align-items, center);
}

[class*="flex-row"] {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: var(--flex-row-flex-direction);
    flex-wrap: var(--flex-row-flex-wrap, wrap);
    justify-content: var(--flex-row-justify-content, center);
    align-items: var(--flex-row-align-items);
    gap: var(--flex-row-gap, 1rem);
    padding: var(--flex-row-padding-top, 16px) var(--flex-row-padding-right, 0px) var(--flex-row-padding-bottom, 16px) var(--flex-row-padding-left, 0px);
    margin: var(--flex-row-margin-top, 16px) var(--flex-row-margin-right, 0px) var(--flex-row-margin-bottom, 16px) var(--flex-row-margin-left, 0px);
    border-radius: var(--flex-row-border-radius, 0);
    box-sizing: border-box;
    height: auto;
    --flex-row-solid-bg: var(--flex-row-background-color, transparent);
    --flex-row-gradient-bg: linear-gradient(var(--flex-row-gradient-direction, to bottom), var(--flex-row-gradient-color-start, var(--bgcolor2)), var(--flex-row-gradient-color-end, transparent));
    --flex-row-overlay-bg: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--flex-row-overlay-color, var(--hicolor)) var(--flex-row-overlay-opacity, 30%), transparent),
        color-mix(in srgb, var(--flex-row-overlay-color, var(--hicolor)) var(--flex-row-overlay-opacity, 30%), transparent)
    );
    --flex-row-image-overlay: var(--flex-row-overlay-bg), var(--flex-row-background-image, none);

    /* Apply background in specified order: overlay, image, gradient/solid */
    background: var(--flex-row-background-type, var(--flex-row-solid-bg)) !important;
    background-position: var(--flex-row-background-position, center) !important;
    background-size: var(--flex-row-background-size, cover) !important;
    background-repeat: var(--flex-row-background-repeat, no-repeat) !important;
    background-attachment: var(--flex-row-background-attachment) !important;

}

.flex-row [class*="flex-item"] {
    max-width: var(--flex-item-max-width, 100%);
}
.flex-row-2 [class*="flex-item"] {
    max-width: calc(var(--flex-item-max-width, 50%) - ((var(--flex-row-gap, 1rem) * (2 - 1)) / 2));
}

.flex-row-3 [class*="flex-item"] {
    max-width: calc(var(--flex-item-max-width, 33%) - ((var(--flex-row-gap, 1rem) * (3 - 1)) / 3));
}

.flex-row-4 [class*="flex-item"] {
    max-width: calc(var(--flex-item-max-width, 25%) - ((var(--flex-row-gap, 1rem) * (4 - 1)) / 4));
}

.flex-row-5 [class*="flex-item"] {
    max-width: calc(var(--flex-item-max-width, 20%) - ((var(--flex-row-gap, 1rem) * (5 - 1)) / 5));
}



/* Modified styles for flex items to ensure equal height */
[class*="flex-item"] {
    display: var(--flex-item-display, flex) !important;
    flex-wrap: var(--flex-item-flex-wrap, wrap);
    gap: var(--flex-item-gap, 0.5em);
    flex-direction: var(--flex-item-flex-direction, column) !important;
    justify-content: var(--flex-item-justify-content, center);
    align-items: var(--flex-item-align-items, flex-start);
    flex-grow: 1;
    width: calc(var(--flex-item-width, 100%) - var(--flex-row-gap, 1rem));
    height: var(--flex-item-height, auto) !important;
    max-height: var(--flex-item-max-height, none);
    
    padding: var(--flex-item-padding-top, 1rem) var(--flex-item-padding-right, 1rem) var(--flex-item-padding-bottom, 1rem) var(--flex-item-padding-left, 1rem);
    
    margin: var(--flex-item-margin-top, 0px) var(--flex-item-margin-right, 0px) var(--flex-item-margin-bottom, 0px) var(--flex-item-margin-left, 0px);
    box-sizing: border-box;
    background-color: var(--flex-item-background-color, transparent);
    border: var(--flex-item-border-width, 1px) var(--flex-item-border-style, solid) var(--flex-item-border-color, transparent);
    border-radius: var(--flex-item-border-radius, 0.5em);
    box-shadow: var(--flex-item-box-shadow, none);
}

/* Ensure content inside flex items is centered */
[class*="flex-item"] > * {
    max-width: 100%;
    text-align: center;
}

.flex-item{
        background-color: var(--flex-item-background-color, transparent);
}
.flex-item-bg{
        background-color: var(--flex-item-background-color, var(--bgcolor2));
}

.flex-item-border {
    border: var(--flex-item-border-width, 1px) var(--flex-item-border-style, solid) var(--flex-item-border-color, var(--bgcolor2));
}

.flex-item-bg-shadow {
    background-color: var(--flex-item-background-color, var(--bgcolor2));
    box-shadow: var(--flex-item-box-shadow, 1px 2px 10px -5px var(--hicolor));
    border-radius: var(--flex-item-border-radius, 0.5em);
}

[class*="flex-item"]:hover {
	background: var(--flex-item-hover-background-color, color-mix(in srgb, var(--hicolor) 0%, transparent));
}

[class*="cms30-btn"] {
    margin-block: var(--cms30-btn-margin-top, 0.5rem) var(--cms30-btn-margin-bottom, 0.5rem);
    margin-inline: 0px !important;
    display: var(--cms30-btn-display, inline);
    text-align: var(--cms30-btn-text-align);
    --gradient-bg: linear-gradient(to var(--cms30-btn-gradient-direction, right), var(--cms30-btn-gradient-color-start, var(--hicolor)), var(--cms30-btn-gradient-color-end, transparent ));
    --solid-bg: var(--cms30-btn-bgcolor, var(--hicolor));
    --gradient-hover-bg: linear-gradient(to var(--cms30-btn-gradient-hover-direction, right), var(--cms30-btn-gradient-hover-color-start, color-mix(in srgb,  var(--hicolor, transparent) 50%, transparent)), var(--cms30-btn-gradient-hover-color-end, transparent ));
    --solid-hover-bg: var(--cms30-btn-hover-bgcolor, color-mix(in srgb,  var(--hicolor) 100%, black 10%));
}

[class*="cms30-btn"] a {
    display: inline-block;
    padding: var(--cms30-btn-padding-top, 0.8rem) var(--cms30-btn-padding-right, 1.6rem) var(--cms30-btn-padding-bottom, 0.8rem) var(--cms30-btn-padding-left, 1.6rem);
    margin-inline: var(--cms30-btn-margin-left, var(--baustein-margin-leftright,0px)) var(--cms30-btn-margin-right, var(--baustein-margin-leftright,0px)) ;
    border: var(--cms30-btn-border-width, 0px) var(--cms30-btn-border-style, solid) var(--cms30-btn-border-color, transparent);
    border-radius: var(--cms30-btn-border-radius, 50px);
    color: var(--cms30-btn-color, var(--bgcolor));
    background: var(--cms30-btn-bg-gradient, var(--solid-bg));
    text-align: center;
    text-decoration: none;
    font-family: var(--cms30-btn-font-family);
    font-size: var(--cms30-btn-font-size, 1rem);
    font-weight: var(--cms30-btn-font-weight, 600);
    text-transform: var(--cms30-btn-text-transform, none);
    letter-spacing: var(--cms30-btn-letter-spacing, normal);
    box-shadow: 0px 2px 8px 0px color-mix(in srgb, var(--cms30-btn-box-shadow, transparent) 30%, transparent);
    box-sizing: border-box;
    transition: all 0.3s ease;
    cursor: pointer;
    text-shadow: var(--cms30-btn-text-shadow, none);
    opacity: var(--cms30-btn-opacity, 1);
    transform: scale(var(--cms30-btn-scale, 1)); 
    transform-origin: var(--cms30-btn-transform-origin, center); 
    mix-blend-mode: var(--cms30-btn-blend-mode, normal);
}

[class*="cms30-btn"] a:hover {
    color: var(--cms30-btn-hover-color, var(--bgcolor));
    box-shadow: 0px 2px 8px 0px color-mix(in srgb, var(--cms30-btn-box--hover-shadow, var(--hicolor)) 30%, transparent);
    background: var(--cms30-btn-bg-hover-gradient, var(--solid-hover-bg));
    border-color: var(--cms30-btn-hover-border-color, var(--linkcolor));
    transform: scale(var(--cms30-btn-hover-scale, 1.05)); 
}

[class*="cms30-btn"] a:active {
    background: var(--cms30-btn-active-bgcolor, var(--locolor));
    color: var(--cms30-btn-active-color, var(--linkcolor));
    border-color: var(--cms30-btn-active-border-color, var(--bgcolor));
}

[class*="cms30-btn"] a:focus {
    outline: 2px dashed var(--cms30-btn-focus-outline-color, var(--linkcolor));
    outline-offset: 0px;
}

[class*="cms30-btn"] a[disabled] {
    color: var(--cms30-btn-disabled-color, var(--locolor));
    cursor: not-allowed;
    opacity: 0.6;
}

/* Existing extra button styles */
.cms30-btn-rounded a {
    border-radius: var(--cms30-btn-border-radius, 20rem);
}

.cms30-btn-outline a {
    background: var(--cms30-btn-bg-gradient, transparent);
    border: var(--cms30-btn-border-width, 2px) var(--cms30-btn-border-style, solid) var(--cms30-btn-border-color, var(--linkcolor));
    color: var(--cms30-btn-color, var(--linkcolor));
}

.cms30-btn-transparent a {
    background: var(--cms30-btn-bg-gradient, transparent);
    color: var(--cms30-btn-color, var(--linkcolor));
    border: var(--cms30-btn-border-width, 1px) var(--cms30-btn-border-style, solid) var(--cms30-btn-border-color, transparent);
}

/* Base headline styles for all h1 to h6 elements */
.headline {
    font-family: var(--headline-font-family, var(--gfont4));
    color: var(--headline-color, var(--hicolor));
    
    margin-block: var(--headline-margin-top, 0.5rem) var(--headline-margin-bottom, 0.5rem);
    margin-inline: var(--headline-margin-left, var(--baustein-margin-leftright)) var(--headline-margin-right, var(--baustein-margin-leftright)) !important;
    
    padding-block: var(--headline-padding-top, 0px) var(--headline-padding-bottom, 0px);
    padding-inline: var(--headline-padding-left, 0px) var(--headline-padding-right, 0px);
    
    text-align: var(--headline-text-align, left);
    align-self: var(--headline-align-self);
    font-weight: var(--headline-font-weight, 700);
    line-height: var(--headline-line-height, 1.2);
    text-transform: var(--headline-text-transform, none);
    font-size: var(--Standardschrift-font-size);
    max-width: var(--headline-max-width, 100%);

    /* Additional styling following the text logic */
    letter-spacing: var(--headline-letter-spacing, 3px);
    font-style: var(--headline-font-style, normal);
    text-decoration: var(--headline-text-decoration, none);
    font-variant: var(--headline-font-variant, normal);
    text-indent: var(--headline-text-indent, 0px);
    text-overflow: var(--headline-text-overflow, clip);
    word-spacing: var(--headline-word-spacing, normal);
    line-break: var(--headline-line-break, auto);

    mix-blend-mode: var(--headline-blend-mode, normal);
    opacity: var(--headline-opacity, 1);

    text-orientation: var(--headline-orientation, mixed);
    transform: rotate(var(--headline-rotation, 0deg));
    transform-origin: var(--headline-transform-origin, center);

    overflow-wrap: var(--headline-overflow-wrap, normal);
    hyphens: var(--headline-hyphens, none);
    box-sizing: border-box;

    background-color: var(--headline-background-color, transparent);
    border-width: var(--headline-border-width, 0px);
    border-style: var(--headline-border-style, solid);
    border-color: var(--headline-border-color, transparent);
    border-radius: var(--headline-border-radius, 0px);
}

.headline h1, .headline h2, .headline h3, .headline h4, .headline h5, .headline h6 {
    font-family: var(--headline-font-family, var(--Standardschrift-h1-6-font-family));
    letter-spacing: var(--headline-letter-spacing, normal);
    margin: 0;
    text-align: var(--headline-text-align, left);
}

/* Specific styles for each heading level */
.headline h1 {
    font-size: var(--headline-font-size, var(--h1-font-size, 2.5em));
}
.headline h2 {
    font-size: var(--headline-font-size, var(--h2-font-size, 2em));
}
.headline h3 {
    font-size: var(--headline-font-size, var(--h3-font-size, 1.75em));
}
.headline h4 {
    font-size: var(--headline-font-size, var(--h4-font-size, 1.5em));
}
.headline h5 {
    font-size: var(--headline-font-size, var(--h5-font-size, 1.25em));
}
.headline h6 {
    font-size: var(--headline-font-size, var(--h6-font-size, 1em));
}

.text {
    font-family: var(--text-font-family);
    color: var(--text-color, var(--color));
    font-size: var(--text-font-size, 1em);
    font-weight: var(--text-font-weight);
    line-height: var(--text-line-height);
    letter-spacing: var(--text-letter-spacing, normal);
    text-align: var(--text-align, left);
    text-transform: var(--text-transform, none);
    font-style: var(--text-font-style, normal);
    text-decoration: var(--text-decoration, none);
    font-variant: var(--text-font-variant, normal);
    text-indent: var(--text-indent, 0px);
    text-overflow: var(--text-overflow, clip);
    box-sizing: border-box;
    max-width: var(--text-max-width);

    margin-block: var(--text-margin-top, 0.5rem) var(--text-margin-bottom, 0.5rem);
    margin-inline: var(--text-margin-left, var(--baustein-margin-leftright)) var(--text-margin-right, var(--baustein-margin-leftright)) !important;
    
    padding-block: var(--text-padding-top, 0px) var(--text-padding-bottom, 0px);
    padding-inline: var(--text-padding-left, 0px) var(--text-padding-right, 0px);
    
    word-spacing: var(--text-word-spacing, normal);
    line-break: var(--text-line-break, auto);

    mix-blend-mode: var(--text-blend-mode, normal);
    opacity: var(--text-opacity, 1);

    text-orientation: var(--text-orientation, mixed);
    transform: rotate(var(--text-rotation, 0deg));
    transform-origin: var(--text-transform-origin, center);

    overflow-wrap: var(--text-overflow-wrap, normal);
    hyphens: var(--text-hyphens, none);
    box-sizing: border-box;

    background-color: var(--text-background-color, transparent);
    border-width: var(--text-border-width, 0px);
    border-style: var(--text-border-style, solid);
    border-color: var(--text-border-color, transparent);
    border-radius: var(--text-border-radius, 0px);
}

.text p {
    margin: 0;
    font-size: var(--text-font-size, var(--p-font-size, 1em));
    text-align: var(--text-align, left);

}

[class*="cms30-image"] {
    display: inline-block;
    width: 100%;
    max-width: var(--cms30-image-width, 500px);
    height: var(--cms30-image-height, 500px);
    aspect-ratio: var(--cms30-image-aspect-ratio, 1/1);
    padding: var(--cms30-image-padding-top, 0px) var(--cms30-image-padding-right, 0px) var(--cms30-image-padding-bottom, 0px) var(--cms30-image-padding-left, 0px);
    margin: var(--cms30-image-margin-top, 16px) var(--cms30-image-margin-right, 0px) var(--cms30-image-margin-bottom, 16px) var(--cms30-image-margin-left, 0px);
    align-self: var(--cms30-image-align, center);

    /* Border */
    border-width: var(--cms30-image-border-width, 0px);
    border-style: var(--cms30-image-border-style, none);
    border-color: var(--cms30-image-border-color, transparent);
    border-radius: var(--cms30-image-border-radius, 12px);

    /* Opacity */
    opacity: var(--cms30-image-opacity, 1);

    /* Transformations */
    transform: 
        scale(var(--cms30-image-scale, 1)) 
        rotate(var(--cms30-image-rotate, 0deg)) 
        skew(var(--cms30-image-skew-x, 0deg), var(--cms30-image-skew-y, 0deg)) 
        translate(var(--cms30-image-translate-x, 0px), var(--cms30-image-translate-y, 0px));
    transform-origin: var(--cms30-image-transform-origin, center);

    /* Positioning */
    position: var(--cms30-image-position, static);
    top: var(--cms30-image-top, 10px);
    right: var(--cms30-image-right, 10px);
    bottom: var(--cms30-image-bottom, 10px);
    left: var(--cms30-image-left, 10px);
    z-index: var(--cms30-image-z-index, 1);

    /* Cursor */
    cursor: var(--cms30-image-cursor, auto);

    /* Overflow */
    overflow: var(--cms30-image-overflow, visible);

    /* Blend Modes */
    mix-blend-mode: var(--cms30-image-mix-blend-mode, normal);

    /* Clip Path */
    clip-path: var(--cms30-image-clip-path, none);
}

[class*="cms30-image"] img,[class*="cms30-image"] video {
    width: 100%;
    height: 100%;
    border-radius: var(--cms30-image-border-radius, 12px);
    object-fit: var(--cms30-image-object-fit, cover);
    box-shadow: var(--cms30-image-box-shadow, none);
    box-shadow: 0px 2px 8px 0px color-mix(in srgb, var(--cms30-image-box-shadow, transparent) 30%, transparent);
    background-blend-mode: var(--cms30-image-background-blend-mode, normal);
}

/* Variants based on size */
.cms30-image-500 {
    max-width: var(--cms30-image-width, 500px);
    max-height: var(--cms30-image-height, 500px);
}
.cms30-image-350 {
    max-width: var(--cms30-image-width, 350px);
    max-height: var(--cms30-image-height, 350px);
}
.cms30-image-100 {
    max-width: var(--cms30-image-width, 100px);
    max-height: var(--cms30-image-height, 100px);
}
.cms30-image-75 {
    max-width: var(--cms30-image-width, 75px);
    max-height: var(--cms30-image-height, 75px);
}


@media (max-width:800px) /* responsive */ {
    [class*="flex-row-"] [class*="flex-item"] {
        --flex-item-max-width: 100% !important;
    }
    .headline h1{
        font-size: 1.8rem;
    }
    .headline h2{
        font-size: 1.6rem;
    }
    .text, .text p{
        --text-font-size: 0.95rem;
        --text-line-height: 1.3;
    }
    [class*="cms30-btn"] a {
        --cms30-btn-padding-top: 6px;
        --cms30-btn-padding-bottom: 6px;
        --cms30-btn-padding-left: 12px;
        --cms30-btn-padding-right: 12px;
        --cms30-btn-font-size: 0.9rem;
        --cms30-btn-font-weight: 700;
    }
}