:root {
    /*font familie*/
    --page-header-font-familie: 'Dancing Script', Arial;
    --page-subheader-font-familie: 'Dancing Script', Arial;
    --menu-font-familie: 'Roboto', Arial;
    --willkommen-font-familie: 'Kalam', Arial;
    --header-font-familie: Kanit, Arial;
    --subheader-font-familie: 'Josefin Sans', Arial;
    --text-font-familie: Kanit, Arial;

    /*font size*/
    --page-header-font-size: 6em;
    --page-subheader-font-size: 4em;
    --menu-font-size: 1.1em;
    --willkommen-font-size: 4em;
    --willkommen-sub-font-size: 2em;

    --header-font-size: 6em;
    --subheader-font-size: 3em;
    --text-font-size: 1em;
    --text-bold-font-size: 1.15em;

    /* menu */
    --border-menu-radius: 0;
    --padding-menu: 0.4em;

/*DEBUG*/
/*
--DEBUG-border-width: 1px;
--DEBUG-border-style: solid;
--DEBUG-border-color: red;
*/
}

.nocopy {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    color: var(--text-color-dark);
    background-color: var(--color-middle);
 
    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}

img {
    pointer-events: none;
}
p {
    margin: 0;
    padding: 0 10px 0 10px;
    text-align: justify;
    font-family: var(--text-font-familie);
    line-height: 1.8;

    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
hr {
    height:2px;
    border-width:0;
    color:var(--color-dark);
    background-color:var(--color-dark);
}
@media (max-width: 512px) {
    hr {
        height: 1px;
        opacity: 0;
    }
}
h1 {
    margin: 0;
    padding: 0 0 40px 0;
    text-align: center;
    font-family: var(--header-font-familie);
    font-size: var(--subheader-font-size);
}
@media (max-width: 512px) {
    h1 {
        padding: 0 0 20px 0;
        font-size: 2.8em;
    }
}
h2 {
    margin: 0;
    padding: 0 0 20px 0;    

    height: 80px;
   
    font-family: var(--header-font-familie);
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;

    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);   
}
@media (max-width: 512px) {
    h2 {
        height: 30px;
        font-size: 1.4em;
    }
}
h3 {
    margin: 0;
    padding: 0 0 20px 0;    

    height: 80px;
   
    font-family: 'Oooh Baby', Arial;
    font-size: 2.6em;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;

    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);   
}
@media (max-width: 512px) {
    h3 {
        height: 30px;
        font-size: 2.4em;
    }
}

select, option {
    color: var(--text-color-dark); 
    background-color: var(--color-light);
}
.text {
    margin: 0;
    padding: 10px;
    text-align: justify;
    line-height: 2;
    color: var(--text-color-dark);

    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}

a {
    font-family: var(--text-font-familie);
    color: var(--text-color-dark);
    text-decoration: none;
}

bold {
    color: yellow;
}

#color-white {
    color: var(--text-color-white3);
    font-weight: 700;
    font-size: 1.1em;
}

#color-black {
    color: var(--text-color-white2);
    font-weight: 700;
    font-size: 1.1em;
}

#color-white2 {
    color: var(--text-color-white4);
    font-weight: 700;
    font-size: 1.1em;
}

/***********************************************************************/
/* MENU                                                                */
/***********************************************************************/
.menu {
    z-index: 1000;
    position: relative;
    display: flex;
    flex-direction: row;
    /*overflow-y: hidden; => prevents the menu to flow over the pages*/

    margin: 0;
    padding: 0;

    height: 250px;
    background-color: var(--color-light);

    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
@media (max-width: 512px) {
    .menu {
        height: 180px;
        flex-direction: column;
    }
}
#menu-hide {
    position: relative;
    display: flex;
    opacity: 1;
    top: -200px;
}
@media (max-width: 512px) {
    #menu-hide {
        position: relative;
        display: block;
        opacity: 0;
        top: -150px;
    }
}
.header-seelenfrieden {
	position: relative;
    display: inline-flexbox;
    margin: 0;
    padding: 0;

    top: -200px;
    width: auto;
    height: 140px;
    
    text-align: center;
    font-family: var(--page-header-font-familie);
    font-size:   var(--page-header-font-size);
    color: var(--text-color-dark);

	/*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
@media (max-width: 512px) {
    .header-seelenfrieden {
        top: -110px;
        left: 50px;
        height: 60px;
        font-size: 3em;
        text-align: center;
    }
}
.subheader-seelenfrieden {
	position: relative;
    display: inline-flexbox;
    margin: 0;
    padding: 0;
    width: auto;

    top: -230px;
    height: 60px;
    
    text-align: center;
    font-family: var(--page-subheader-font-familie);
    font-size:   var(--page-subheader-font-size);
    color: var(--text-color-dark);


	/*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
@media (max-width: 512px) {
    .subheader-seelenfrieden {
        top: -110px;
        left: 50px;
        height: 60px;
        font-size: 2em;
        text-align: center;
    }
}
.language-selector {
    z-index: 500;
    position: relative;
    display: block;

    float: right;
    border: 0;
    padding-top: 0;
}
@media (max-width: 512px)
{
    .language-selector {
        top: -30px;
    }
}
.icon-menu {
    z-index: 100;
	position: relative;
    display: block;
    margin: 0;
    padding: 0;

    top: -30px;
    height: 30px;	
	left: 0;
    visibility: hidden;

	/*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
@media (max-width: 512px) {
    .icon-menu {
        visibility: visible;
    }
}
.icon-taube {
    z-index: 100;
	position: relative;
    display: block;
    margin: 0;
    padding: 0;

    height: 160px;	
	top: 0;
	left: 120px;

	/*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
@media (max-width: 512px) {
    .icon-taube {
        display: flex;
        height: 80px;
        top: -10px;
        left: 40px;
    }
}

.menu-line {
    position: relative;
    display: block;

    top: -200px;
}
@media (max-width: 512px)
{
    .menu-line {
        top: -200px;
    }
}
/***********************************************************************/
/* PAGE                                                                */
/***********************************************************************/
.page-light,
.page-middle,
.page-braun,
.page-dark,
.page-wide,
.page-wide-light,
.page-wide-middle,
.page-wide-dark {
    position: relative;
    display: flex;
    flex-direction: row;
    /*overflow: hidden;*/

    margin: 0;
    padding: 0;

	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
@media (max-width: 512px) {
    .page-light,
    .page-middle,
    .page-braun,
    .page-dark,
    .page-wide,
    .page-wide-light,
    .page-wide-middle,
    .page-wide-dark {
        display: block;
        /*flex-direction: column;*/
    }
}
.menu,
.page-light,
.page-wide-light {
    color: var(--text-color-dark);
    background-color: var(--color-light);
}
.page-middle,
.page-wide-middle {
    color: var(--text-color-dark);
    background-color: var(--color-middle);
    box-shadow: 0px 15px 10px rgba(var(--color-dark-val), 0.3);
}
.page-dark,
.page-wide-dark {
    z-index: 10;
    color: var(--text-color-light);
    background-color: var(--color-dark);
    box-shadow: 0px 15px 10px rgba(var(--color-dark-val), 0.5);
}
.menu .left,
.menu .right,
.page .left,
.page .right,
.page-light .left,
.page-light .right,
.page-middle .left,
.page-middle .right,
.page-dark .left,
.page-dark .right,

.page-wide-light .left,
.page-wide-light .right,
.page-wide-middle .left,
.page-wide-middle .right,
.page-wide-dark .left,
.page-wide-dark .right {
    margin: 0;
    padding: 0;
    
    flex: 1;

    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
.page .work,
.page-light .work,
.page-middle .work,
.page-dark .work,
.page-wide-light .work,
.page-wide-middle .work,
.page-wide-dark .work
{
    position: relative;
    align-items: start;

    margin: 0;
    padding: 0 0 50px 0;

    width:     1024px;
    min-width: 1024px;
    max-width: 1024px;    

    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
@media (max-width: 512px) {
    .page-light .work,
    .page-middle .work,
    .page-dark .work,
    .page-wide-light .work,
    .page-wide-middle .work,
    .page-wide-dark .work {
        width: 90%;
        min-width: 100%;
        max-width: 100%;
    }
    .menu .work {
        height: 98px;
    }
    /*
    .page-light .work,
    .page-middle .work,
    .page-dark .work,
    .page-wide-light .work,
    .page-wide-middle .work,
    .page-wide-dark .work {
        padding: 0 5px 0 5px;
    }*/

}
.menu .work,
.page-wide-light .work,
.page-wide-middle .work,
.page-wide-dark .work
{
    width:     1200px;
    min-width: 1200px;
    max-width: 1200px;    
}
@media (max-width: 512px) {
    .menu .work,
    .page-wide-light .work,
    .page-wide-middle .work,
    .page-wide-dark .work {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
}
.page-light a {
    color: var(--text-color-dark);
}
.page-dark a {
    color: var(--text-color-light);
}
/***********************************************************************/
/* COLUMN                                                              */
/***********************************************************************/
.column {
    position: relative;
    display: flex;
    flex-direction: row;

    margin: 0;
    padding: 0;

    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
@media (max-width: 512px) {
    .column {
        display: block;
        flex-direction: column;
    }
}
.column .column-left,
.column .column-right {
    position: relative;
    display:  flex;
    flex-direction: row;

    margin: 0;
    padding: 0;
    width: 50%;

    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
@media (max-width: 512px) {
    .column .column-left,
    .column .column-right {
        display:  block;
        flex-direction: column;
        width: 100%;
    }
}
.column .column-left {
    left: 0;
}
.column .column-right {
    right: 0;
}


.column .image-center,
.column .image-right,
.column .image-left  {
    position: relative;
    display:  flex;
    flex-direction: row;

    margin: 0;
    padding: 0;
    right: 0;

    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
.column .column-3-1,
.column .column-3-2,
.column .column-3-3 {
    position: relative;
    display:  inline-flexbox;

    margin: 0;
    padding: 0;
    flex: 1;
    width: 33.33334%;
    align-items: center;

    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
@media (max-width: 512px) {
    .column .column-3-1,
    .column .column-3-2,
    .column .column-3-3 {
        width: 100%;
    }
}
.column .column-4-1,
.column .column-4-2,
.column .column-4-3,    
.column .column-4-4 {
    position: relative;
    display:  inline-flexbox;

    margin: 0;
    padding: 0;
    flex: 1;
    /*width: 342px;*/
    width: 25%;

    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);
}
@media (max-width: 512px) {
    .column .column-4-1,
    .column .column-4-2,
    .column .column-4-3,    
    .column .column-4-4 {
        width: 100%;
    }
}

.image-background {
    z-index: 0;
    position: absolute;
    display: inline-block;
    overflow: hidden; 
    object-fit: cover;
    object-position: 50% 50%; 
    opacity: 0.5;
    
    width: 100%; 
    
    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);    
}

.image-center {
    z-index: 0;
    overflow: hidden; 
    object-fit: cover;
    object-position: 50% 50%; 
    
    width: 100%;
    
    /*DEBUG*/
	border-width: var(--DEBUG-border-width);
	border-style: var(--DEBUG-border-style);
	border-color: var(--DEBUG-border-color);    
}

#footer-address {
    margin: 0; 
    padding: 0; 
    height: 200px;
}
@media (max-width: 512px) {
    #footer-address {
        /*height: auto;*/
        padding-bottom: 30px;
        width: 100%;
        height: 200px;
    }
}

#footer-impressum {
    margin: 0; 
    padding: 0; 
    height: 40px;
}
@media (max-width: 512px) {
    #footer-impressum {
        /*height: auto;*/
        width: 100%;
        height: 80px;
    }
}