/* style cheet bettina-glatz.de */

/* Open Sans local hosted */
@import url("fonts.css");

/* some main definitions */
html {scroll-behavior: smooth;}

body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    line-height: 1.5;
    font-size: 1.1rem;
    padding: 0; margin: 0;
    color: #333;
    }

/* Rahmen ausblenden
.page {
	max-width: 960px;
	margin: 0 auto;
	box-shadow: 1px 1px 1px 1px #DDD;
	border-radius: 0.25em;
}
*/

h1, h2, h3, h4 { margin: 18pt 0pt 4pt 0pt; padding: 0; }
h5, h6 { margin: 14pt 0pt 2pt 0pt; padding: 0; }
p { margin: 6pt 0pt 2pt 0pt; }
ul { margin: 2pt 0pt 2pt 0pt; }

a {
	color: #336;
	font-weight: 700;
	text-decoration: none;
}
a:hover {
	color: #999;
	font-weight: 700;
	text-decoration: none;
}

.innen {
    max-width: 960px;
    margin: 0 auto; 
    padding: 1.5rem 1rem 2rem 1rem; 
}
header {background-color: #ECECEF;}
main {background-color: #F3F3FC;}
footer {background-color: #FCFCFF;}

/* #FDF9EC oder #EFEFFE */

main img {
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    border-radius: 0.25em;
}

/* different zones */
header .innen, .brand, footer .innen, .startseite {
    display: flex;
    justify-content: space-between;
}

/* header */
.brand {padding: 1.75rem 0 2rem 0;}
.slogan h1, .slogan h2, .slogan p {
	margin: 0; 
	line-height: 1.2;
	color: #444;
	}
.slogan h1 {font-size: 1.5rem;}
.slogan {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* h1, h2, h3, h4, h5, h6 {font-weight: normal;} */

/* main */
.sfoto, .stext {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sfoto {width: 40%}
.stext {width: 60%}
/* navigation */
.navi {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.navi ul {
    list-style: none; 
    padding: 0; 
    margin: 36px 0px 0px 0px;
    text-align: right;
}
.navi ul li {
    	display: inline-block;
    	padding: 0px 12px;
    	margin: 0;
    	}


/* mobile devices */

@media only screen and (max-width: 730px) {
	.page {width: 100%}
    .sfoto, .stext {width: 100%;}
    header .innen, .brand, footer .innen, .startseite {display: block;}
    .slogan {padding-left: 0;} 
    .navi ul {text-align: left; margin: 0;}  
    .navi ul li {display: inline-block; padding: 0px 24px 0px 0px;}
}

@media only screen and (max-width: 378px) {
	.page {width: 100%}
    .sfoto, .stext {width: 100%;}
    header .innen, .brand, footer .innen, .startseite {display: block;}
    .slogan {padding-left: 0;} 
	.slogan h1 {font-size: 1.4rem;}
    .navi ul {text-align: left; margin: 0;}  
    .navi ul li {display: inline-block; padding: 0px 24px 0px 0px;}
}

@media only screen and (max-width: 280px) {
	body { font-size: 1rem; }
	h1 { font-size: 1.2rem; }
	.page {width: 100%}
    .sfoto, .stext {width: 100%;}
    header .innen, .brand, footer .innen, .startseite {display: block;}
    .slogan {padding-left: 0;} 
	.slogan h1 {font-size: 1.2rem;}
    .navi ul {text-align: left; margin: 0;}  
    .navi ul li {display: inline-block; padding: 0px 12px 0px 0px;}
}