@font-face {
    font-family: 'KhmerOsSystem';
    src: local('KhmerOsSystem'), local('Roboto-Regular'), local('Verdana'), local('Arial'), local('sans-serif'), url('Dateien/fonts/KhmerOS.ttf') format('opentype');
}


html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: KhmerOsSystem; Roboto-Regular; Verdana; Arial; sans-serif;
/*    line-height: 2em; /* braucht sorgfältige Abstimmung */
/* overflow: hidden; /* verhindert scrollen der Website */
}

/*------------------------------------*/
menu {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: fixed; /* fixiert die Navigationsleiste */
    top: 0;
    justify-content: flex-end;
    align-content: center;
    width: 100%;
    background: white; /* #f3f3f3 */
    font-size: 1.1em; /* Schriftgrösse des Menüs für Smartphones */
    line-height: 2.5em; /*-- Höhe der Navigationsleiste --*/
    float: left;
    z-index: 80;
    opacity: 0.92;
}

menu ul {
    float: left;
    min-width: 7em;
    list-style-type: none;
}

/*--definiert die Blocküberschriften--*/
menu h3 {
    font-weight: none;
    font-style: none;
    text-align: center;
    color: #000;
/* border: 1px solid #003366;
background: #f3f3f3; */
}

/*--definiert die "Drop-Down-Links" im Normalzustand--*/
menu a {
/*    font-size: 1.1em;*/
    text-decoration: none;
    display: block;
    background: white;
    text-align: center;
    background: white;
    color: black;
}

/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
menu a:hover {
    color: blue;
    font-weight: none;
/*border-radius: 12px;*/
    background: #eee;
/*    transform: scale(1.3);  /* netter Effekt: die Schrift bläht sich auf beim Focus */
/*    transition: 1.2s; /* netter Effekt: zeitl. Übergang 1,2sec */
    text-decoration:underline;
}

menu li {
    position: relative;
}

/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
menu ul ul {
    position: absolute;
    left: -2em;
    min-width: 11em;
    z-index: 2;
    display: none;
}

/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
menu ul li:hover ul {
    display: block;
}

/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
* html menu ul li {
    float: left;
    width: 100%;
}
/*--nur für IE 7 erkennbar--*/
*+ html menu ul li {
    float: left;
    width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
    behavior: url(csshover3-source.htc);
    font-size: 100%;
}

*html menu ul li a {
    height: 1%;
}

/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/
menu a.direkt:link {
/*    font-size: 1em;*/
/* font-weight: bold; /* fette Menüschrift */
    text-align: center;
    color: black;
/* border: 1px solid #003366;
background: #f3f3f3; */
}

/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/
menu a.direkt:hover {
    color: blue;
/* border-radius: 12px;
background: #003366;
border: 1px solid #ccc; */
    text-decoration:underline;
}

/*---- Headerbild ----------------------*/
.wrapper {
    display: flex;
    flex-wrap: wrap;
    width:100%; 
}

.container {
    display: flex;
    flex-wrap: wrap;
    width:100%; 
    position: relative;
    top: 2.5em;
}

@media (max-width: 616px) {
.container {
    display: flex;
    flex-wrap: wrap;
    width:100%; 
    position: relative;
    top: 6.9em; /* Position des Headerbilds für grosse Menüschrift */
}
}

.box {
    flex: 1
}

.bord {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
}

.crossfd img {
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;
}

.crossfd img:hover {
    opacity: 0.2;
}

@media (pointer: coarse) {
.crossfd img {
    opacity: 0.2;
    }
}

#logobox {
    display: inline;
    background: url("Dateien/img/drop_of_water_1004250_1280_heller3_sw_elipse_transparent.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 1em; 
    top: 1.4em;
    width: 20em; 
    max-width: 36%;
    height: 6em;
    z-index: 40;

}

/*------------------------------------*/
.contentbox {
    width: 100%;
}

.teaserbox {
	width: 50em; /* 100%;*/
    font-size: 1.7em;
    letter-spacing:1px;
    margin-top: 6em;
    margin-bottom: 4em;
	float: center;
    text-align: center;
    align-content: center;
}

linie {
    display: flex;
    flex: 1 100%;
    height:	0px;
    width: 90%;
	border: 1px solid;
    border-top-color: white;
    border-left-color: white;
    border-right-color: white;
    border-bottom-color: #A0A0A0;
	background-color: #efefef;
	padding: 0px;
	margin-left: 5%;
    margin-top: 1em;
}

/*---- Tabelle ----------------*/
zeile {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-top: 2em;
    padding-bottom: 2em;
}

spalte {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 30em;
    margin-top: 2em; 
    margin-right: 2em; 
    margin-bottom: 2em;
    margin-left: 2em;
}

spalterechts {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 49em;
    margin-top: 2em; 
    margin-right: 2em; 
    margin-bottom: 2em;
    margin-left: 2em;
}
/* 69.1em */
@media screen and (max-width: 1496px) {
spalterechts:nth-child(1){order: 2;}
spalterechts:nth-child(2){order: 1;}
}

spalteschmal {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 30em;
    margin-top: 2em; 
    margin-right: 2em; 
    margin-bottom: 2em;
    margin-left: 2em;
}
/* 69.1em */
@media screen and (max-width: 1110px) {
spalteschmal:nth-child(1){order: 2;}
spalteschmal:nth-child(2){order: 1;}
}

aside {
	flex: 1 1 0%;
    -webkit-flex: initial;
            flex: initial;
/*    width: 30em;*/
/*    background-color:#ff0000; */
}

aside img {
    width: 100%; /* Größe des Bildes in der Box */
/*    height: 100%; /* keine Verzerrung */
}

aside img a {
    border: none; 
    border-color: rgba(255,255,255,0) !important; 
    text-decoration: none !important;
}

aside img:visited {
/*    border: none; 
    border-color: rgba(255,255,255,0) !important; 
    text-decoration: inherit;
    text-decoration-line: none; */
    background-color:#ff0000; 
}

p { 
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto; 
}

article { /* wird nur noch im Impressum verwendet */
	flex: 1 1 0%;
    display: block;
    flex-direction:column;
    width: 30em;
    min-width: 20em;
    max-width: 20em;
	margin: 1em 0em 1em 1em;
    word-wrap: break-word;
/*	background-color:#aaeeff; */
}

.tabelleErlaeuterung { /* wird nur noch im Impressum verwendet */
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
/*	background-color:#00eeff; */
}

/*---- Box "Mehr erfahren" ----*/
.weiterbox {
    padding: 0.5em 1em 0.3em 1em;
    width: auto; 
    height: 45px; 
	float: center;
    text-align: center;
    outline:2px solid black;
    font-size: 1.4em;
    line-height: 1.8em;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
}

.weiterbox a:link {
color: black;
text-decoration: none;
}

.weiterbox a:visited {
    color: blue;
    text-decoration: none;
}


.mailbox {
    padding: 0.7em 1em 0.1em 1em;
    width: auto; 
    height: 45px; 
	float: center;
    text-align: center;
    outline:2px solid black;
    font-size: 1.3em;
    line-height: 1.8em;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    text-decoration: none;
}

.mailbox a:link {
color: black;
text-decoration: none;
}

.mailbox a:visited {
    color: blue;
/*    text-decoration: none;*/
}

.rtl {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
    font-weight: normal; 
} 

.position::before {
    display: block;
    content: "";
    height:0em;
    visibility: hidden;
    margin-top: 4em;
    } 

/*-- weiterleitung  
.refbutton{
	margin-top: 30px;
	padding: 10px 20px;
	background-color: #4CAF50;
	color: white;
	font-size: 1em;
	border: none;
	cursor: pointer;
} -----------*/

/*-- footer  -----------*/
.clearfooter {
    height:0; 
    clear:both;
}

.footer
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    flex-direction: row; 
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
	width:90%;
	height:4em;
	margin: 2em 5% 0 5%;
	color: #555;
	font-size:0.9em;
}

.footerleft {
    display: inline; 
    width: auto; 
    margin: 0 0 0 0;
}

.footerright {
    display: inline; 
    width: auto; 
    margin: 0 0 0 0;
}