:root {
    --header_border_bottom: 1px solid #ddd;
}
#container:has(.unterKopfzeile) { margin-top: calc( var(--header_height, 0) * -1px ); } 
.überKopfzeile {
	--padding_left_right: 20px;
	padding: 0 var(--padding_left_right);
	position: relative;
	z-index: 2;
	background-color: #f8f8f8;
	& > .inside {
		width: var(--header_width, 1024px);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: auto;
		max-width: 100%;
		padding: 5px 0;
        a { 
            text-decoration: none; 
            color: var(--font_color);
            &:hover { text-decoration: underline; }
        }
	}
}
header {
    display: contents;
    --padding_left_right: 20px;
    background-color: var(--header_background);
    & > .content-element-group {
        display: contents;
        position: relative;
        padding: 0 var(--padding_left_right);
        width: 100vw; 
        margin: auto; 
        overflow: visible;
        z-index: 1;
        @media(max-width:1023px){ 
            background: #fff;
            height: auto; 
            padding: 0;
        }
        .Kopfzeile {
            position: sticky;
            top: 0;
            z-index: 3;
            border-bottom: var(--header_border_bottom); 
            & > .content-element-group {
                min-height: var(--header_height_mobile);
                width: var(--header_width); 
                position: relative;
                display: flex;
                flex-wrap: wrap;
                align-items: end;
                justify-content: stretch;
                margin: auto; 
                max-width: calc( 100vw - ( var(--padding_left_right) * 2 ) );
                @media(max-width:1023px){ 
                    padding: 0px 2.5%; 
                    margin: 0; 
                    width: 100%; 
                    max-width: 100%;
                    justify-content: space-between;
                }
                .mod_logo {
                    margin: 0 70px 0 0;
                    overflow: visible; 
                    height: 100%;
                    @media(max-width:1023px){ margin-right: 10px; }
                    a {
                        height: 100%;
                        display: flex;
                        &:focus-visible {
                            outline: 1px solid var(--color_1);
                            outline-offset: 2px;
                            border-radius: 2px;
                            display: block;
                        }
                    }
                    figure { 
                        height: 100%;
                        display: inline-block;
                        picture { 
                            display: inline-block;
                            display: flex; 
                            height: 100%; 
                            align-items: center; 
                        }
                        img {
                            --logo_padding_top: 10px; 
                            --logo_padding_bottom: 10px; 
                            padding: var(--logo_padding_top) 0 var(--logo_padding_bottom) 0; 
                            width: auto;
                            object-fit: contain;
                            @media(max-width:1023px){ 
                                --logo_padding: 3px;
                                max-height: var(--header_height_mobile); 
                            }
                        }
                    } 
                }
            }
        }
    }
}
body.HeaderHintergrundUnscharf header .Kopfzeile {
	background: transparent;
	&:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		background: rgba(255, 255, 255, 0.69);
		z-index: -1;
	}
}

footer { 
    background-color: var(--footer_background); 
    margin-top: 0px; 
    margin-bottom: 0px; 
    font-weight: 400; 
    position: relative;
	z-index: 2;
	div[class^="content-"], div[class*=" content-"] { margin-top: 0; margin-bottom: 0; }
	div[class^="content-"] a, div[class*=" content-"] a { text-decoration: none; }
    .Fußzeile > .inside { 
        width: var(--footer_width); 
        margin: auto; 
        max-width: 100%; 
        z-index: 1; 
        line-height: 1.6; 
        padding: 60px var(--content_margin, 20px) 50px;
		&.arrow { padding: 0;
			svg { border-radius: 0 0 3px 3px; transition: all 0.25s ease-in-out;
				&:hover { transform: scale(1.2); }
			}
		}
		h1, h2, h3, h4, h5, h6, .ce_text strong em, .ce_text em strong { 
            font-style: normal; 
            color: #fff; 
            margin-top: 0; 
            margin-bottom: 20px; 
            font-size: 21px; 
            font-weight: 700; 
            border-bottom: 0px solid var(--border_color); 
            display: block; 
        }
		form.move_labels .widget, form .widget {
		    --widget_padding_top: 5px;
			--form_gap: 5px;
		}
		p, a, span { color: var(--footer_font_color); }
		a:hover { color: var(--footer_font_color); text-decoration: underline; }
		strong { font-weight: 600; }
		hr { border-top: 0; border-bottom: 1px solid var(--border_color); }
		ul { display: none; }
		ul.level_1 { display: block; padding-left: 0;
			li { 
                list-style: none; 
                line-height: 2; 
                color: var(--footer_font_color); 
                position: relative; 
				padding-left: 14px;
				transition: all 0.25s ease-in-out;
				a, strong.active { line-height: 2.8; font-weight: normal; } 
				strong.active { color: var(--color_1); } 
				&::before { 
					content: '›'; 
					position: absolute; 
					left: 0; 
					top: 50%; 
					transform: translateY(-50%);
					transition: all 0.25s ease-in-out;
				}
				&:not(.active):hover::before { left: 5px; } 
			}
		}
	}
	svg { fill: var(--footer_font_color); }
}

body.scrolled footer .nachObenScrollen { opacity: 1; width: auto; }
footer .nachObenScrollen {
	position: fixed;
	width: auto;
    right: 35px;
    bottom: 7px;
	padding: 0;
	z-index: 99;
	opacity: 0;
	transition: all .25s ease-in-out;
	a { color: var(--font_color); 
		svg { 
			width: 2em;
			height: 2em;
			fill: var(--color_1, #444); 
			background: #fff;
			border-radius: 50%;
			padding: 1px;
			transition: all .25s ease-in-out;
			&:hover { transform: scale(1.2); }
		}
	}
}
.content-text:has(.mod_cookiebar_opener) {
	p { display: inline-block; }
	.mod_cookiebar_opener { display: inline-block; }
}

.unterFußzeile { 
	width: 100%; 
	font-size: 14px; 
	background: var(--color_1); 
	border-top: 1px solid rgb(0 0 0 / 7%);
	position: relative;
	z-index: 1;
	.content-text { 
		width: min(1230px,100%); 
		margin: auto; 
		padding: 15px var(--content_margin, 20px); 
		p, a { color: #fff; }
	}
}