/* @gula-code */

.module     { width: 100%; }
.block      { margin-inline: auto; }
.block-wide { width: 100%; }


section {
    padding-left: var(--size-2);
    padding-right: var(--size-2);
    position: relative;
}
section-wide {
    position: relative;
    display: block; 
}

 .contentwidth-90, 
 .contentwidth-80 {
    padding-left: 0px;
    padding-right: 0px;
}
 .contentwidth-70 {
    padding-left: 5%;
    padding-right: 5%;
}
 .contentwidth-60 {
    padding-left: 10%;
    padding-right: 10%;
}
    @media (min-width: 576px) {
        section {
            padding-left: var(--size-4);
            padding-right: var(--size-4);
            position: relative;
        }
        .contentwidth-90 {
            padding-left: 0px;
            padding-right: 0px;
        }
        .contentwidth-70 {
            padding-left: 5%;
            padding-right: 5%;
        }
        .contentwidth-60 {
            padding-left: 10%;
            padding-right: 10%;
        }
    }
    @media (min-width: 768px) { 
        section {
            padding-left: var(--size-8);
            padding-right: var(--size-8);
            position: relative;
        }
       .contentwidth-90 {
            padding-left: 5%;
            padding-right: 5%;
        }
        .contentwidth-80 {
            padding-left: 10%;
            padding-right: 10%;
        }
        .contentwidth-70 {
            padding-left: 15%;
            padding-right: 15%;
        }
        .contentwidth-60 {
            padding-left: 20%;
            padding-right: 20%;
        }
    }

html {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	display: block;
	flex: 1;
}

body:not(:has(main)) #footer {
	margin-top: auto;
}

body:not(:has(main)):not(:has(#footer)) #copyright {
	margin-top: auto;
}
main img {
    display: block;
    height: auto;
    max-width: 100%;
}

.fadeInBlock {
    opacity:1;
}

.vhtheme {
    height: calc( 100vh - var( --gula-nav-hoehe, 0px ) );
    display: grid;
}
.vh100 {
    height: 100vh;
    display: grid;
    min-height:fit-content;
}
.vh75 {
    height: 75vh;
    display: grid;
    min-height: fit-content;
}
.vh50 {
    height: 50vh;
    display: grid;
    min-height: fit-content;
}

img.cover,
img.gula-bild {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: 50% 50%;
}

.module.cover {
	position: relative;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important; 
}