@charset "UTF-8";
/* CSS Document */

/* ========= F A R B E N  ===================================================================================== */
/*
dunkel: #025710;
hell: #237f52;
blau: 1d49a6
*/

/* ========= T Y P O ========================================================================================== */

/*iPhone 11 Pro Max*/

/* 2688x1242px at 458ppi */
/*
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) { }
This media query is also for: iPhone Xs Max
*/

/* ========= B A S I C ========================================================================================== */

html {
	height: 100%;
	/*-webkit-text-size-adjust: none;*/
}

body {
	display: grid;
	grid-template-columns: 140px 120px 1fr 1fr;
    display: -ms-grid;
	-ms-grid-columns: 140px 120px 1fr 1fr;
    color: #000;
	font-family:Arial;
	font-size: 100%;
	line-height: 135%;
	background-color:#FFF;
	margin: 0;
	padding: 0;
}

/* ========= S E I T E ========================================================================================== */

header {
	grid-column: 1 / -1;
	grid-row: 1 / 3;
	-ms-grid-column: 1;
	-ms-grid-column-span: 5;
	-ms-grid-row: 1;
    -ms-grid-row-span: 2;
    background-image: url(../_i/top.jpg);
	background-repeat: repeat-x;
	margin:0;
}

#kopf {
    height: 240px;
    margin: 0 0 20px 0;
}

#kopf img {
	margin: 0;
	width:100%;
	height:auto;
}

#headline {
    grid-column: 3 / -1;
	grid-row: 2 / 3;
    -ms-grid-column: 3;
	-ms-grid-column-span: 3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
	margin: 0 0 20px 0;
    padding: 0;
}

#headline h1 {
    font-family:Arial, sans-serif;
    font-size: 2.25vw;
    font-style: bold;
    color: #FFF;
}


/* ------------------------------------------------------------- */

#spalteli, #spaltere, #spaltekplt, #spalteliKlein, #spalteReBreit {
    grid-row: 4 / 5;
    -ms-grid-row: 3;
    -ms-grid-row-span: 2;
    margin: 0 20px 0 0;
}

#spalteli {
    grid-column: 3 / 4;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
}

#spaltere {
    grid-column: 4 / 5;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
}

#spaltekplt {
    grid-column: 3 / 5;
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
}

#spalteli.tschau {
    display: block;
}

#spaltekplt p, #spaltekplt ul, #spaltekplt h2, #spaltekplt h3 {
    max-width: 14cm;
}

#spaltekplt p, #spaltekplt ul, #spaltekplt h2, #spaltekplt h3 {
    margin-right: 5%;
    /*margin-top: 5px;*/
}

#spalteliKlein {
    grid-column: 3 / 4;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
}

#spalteReBreit {
    grid-column: 3 / 5;
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
}

#spalteli img,
#spaltere img,
#spaltekplt img,
#spalteliKlein img,
#spalteReBreit img {
    width: 100%;
    height: auto;
    /*border-radius: 10px;*/
}

#spaltekplt img {
    max-width:1000px;
}

#spaltere.txt {
    margin-left: 10%;
}

#spalteHead {
    grid-row: 3 / 4;
    grid-column: 3 / 5;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
}
    

/* ========= N A V I ========================================================================================== */

nav {
	grid-column: 1 / 2;
	grid-row: 3 / 6;
    -ms-grid-column: 1;
	-ms-grid-column-span: 1;
	-ms-grid-row: 3;
    -ms-grid-row-span: 3;
}

#subnavi {
    grid-column: 2 / 3;
	grid-row: 3 / 5;
    -ms-grid-column: 2;
	-ms-grid-column-span: 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 2;
	margin:82px 0 0 0;
	padding:0;
}

#subnavi.fotos {
    margin:123px 0 0 0;
}

nav, #subnavi {
    display:block;
	font-size:1.2em;
	font-family: Arial, sans-serif;
	padding:0;
}

nav ul, #subnavi ul {
	font-weight:300;
	margin: 0;
	padding:0 0 0 20px;
    line-height: 40px;
	transform:scale(1.025,1);
}

#subnavi ul {
    text-align: right;
    margin:0 10px 0 0;
    padding:0 0 0 10px;
}

nav ul li, #subnavi ul li {
	list-style: none;
	margin: 0;
	padding: 0 0 0 -40px;
	height: 100%;
	/*transition: height .25s ease-out;*/
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #DDD;
}

/* a: in einzelnen Päckchen, sonst stellen Edge und IE das falsch dar!!! */
nav a:link {
	color:#025710;
    text-decoration:none;
}

nav a:visited {
	color:#025710;
    text-decoration:none;
}

#subnavi a:link {
	color:#025710;
    text-decoration:none;
}

#subnavi a:visited {
	color:#025710;
    text-decoration:none;
}

nav a:hover {
	color:#1d49a6;
}

#subnavi a:hover {
	color:#1d49a6;
}

nav ul .binhier, #subnavi ul .binhier {
	color:#1d49a6;
    font-weight: 700;
	/*cursor: not-allowed;*/
}

#navigation {

}

#smartmenu {
	display:none;
}


/* ========= F O O T E R ========================================================================================== */

footer {
	grid-column: 1 / -1;
	grid-row: 6 / 7;
    -ms-grid-column: 1;
	-ms-grid-column-span: 5;
    -ms-grid-row: 6;
    -ms-grid-row-span: 2;
	display: block;
    background-color:#237f52;
	font-family: Arial, sans-serif;
	width: 100%;
	height:180px;
	margin: 10px 0 0 0;
	padding: 0;
	font-size: 0.95em;
	font-weight:300;
}

footer ul {
	display: block;
	margin: 5px 0 5px 0;
	padding: 0;
}

footer #blockLi,footer #blockRe {
    display: block;
	float: left;
	width: 20%;
	float:left;
    padding:0;
}

footer #blockRe {
	margin: 10px 0 0 0;
}

footer #blockLi {
    margin: 10px 0 0 15px;
}
    
footer ul li {
	float: none;
	list-style: none;
	margin-bottom:4px;
}

footer #blockLi ul {
	display: block;
}

footer a:link {
	color:#FFF;
	padding: 0 10px 0 10px;
    text-decoration:none;
}

footer a:visited {
	color:#FFF;
	padding: 0 10px 0 10px;
    text-decoration:none;
}

footer a:hover {
	background-color:#ccc;
	color:#360;
}


/* ------------------------------------------------------------- */

p {
    line-height: 135%;
}

p a:link {
    color:#1d49a6;
	text-decoration:none;
	text-align:left;
}

p a:visited {
	color:#1d49a6;
	text-decoration:none;
	text-align:left;
}

.ausz {
	font-weight:700;
}

.ausz.abstandOben {
	margin-top: 15px;
}

/* ------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    color:#1d49a6; /*color: #666;/*color:#237f52;*/
}

h1 {
	font-size:2rem;
	/*margin: 10px 0 30px 2px;*/
	line-height: 110%;
}

h2 {
	font-size: 1.5rem;
	line-height: 110%;
	margin: 20px 0 15px 0;
}

h3 {
	font-size: 1.25rem;
	line-height: 120%;
	margin:0 0 5px 0;
	padding:0;
}

h4 {
	font-size: 1.1rem;
	margin: 10px 0 0 0;
}

h5 {
	clear:both;
	margin:0 0 2px 0;
	padding:10px 0 0 0;
	font-weight:lighter;
	font-size:1em;
	line-height: 120%;
}

h6 {
    font-size:0.95em;
    line-height: 125%;
    margin:0 0 20px 0;
}
/* ------------------------------------------------------------- */

.abstand20 {
	height:20px;
}


/* ============================================================================================================================================================ */
/* ============================================================================================================================================================ */
/* ============================================================================================================================================================ */
/* ============================================================================================================================================================ */
/* ============================================================================================================================================================ */


/* ----- Seitenanpassung smart ---------------------------------------------------------*/

@media screen and (max-width:940px) {

body {
    grid-template-columns: 0 120px 1fr 1fr;
    -ms-grid-columns: 0 120px 1fr 1fr;
}
    
body.fotos {
	grid-template-columns: 10px 120px 1fr 1fr;
    -ms-grid-columns: 10px 120px 1fr 1fr;
}

#headline h1 {
    font-size: 3.5vw;
}

#spalteli {
    grid-row: 4 / 5;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
}

#spaltere {
    grid-row: 5 / 6;
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
}

#spalteli, #spaltere {
    grid-column: 3 / 5;
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
}
    
#spalteli.grundriss {
    margin-left: 7%;
}

#spaltere.txt {
    margin-left: 0;
}

/* Schmuckbild [spalteli] wird bei Smart ausgeblendet, statt dessen als bg [spaltere]( 1 row höher) unter Text: */
#spalteli.tschau {
    display: none;
}
 
#spaltere.txt.bg {
    grid-row: 4 / 5;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    background-image: url(../_i/selbstauskunft-bg.jpg);
    background-position: 100% 5%;
    background-repeat: no-repeat;
    background-size: 40%;
}


/* ------------------------------------------------------------- */

nav {
	grid-column: 2 / 5;
	-ms-grid-column: 2;
	-ms-grid-column-span: 3;

	display:none;
	box-shadow:0 5px 10px #666;
	left:0;
	right:0;
	background-color:#FFF;
    padding-right: 15px;
    z-index: 10;
}

nav ul {
	margin: 10px 0 0 15px;
}

#navigation {
    margin: -2px 0 0 50px;
}
    
#smartmenu {
	display:block;
	position:fixed;
	z-index:50;
	vertical-align:top;
	margin: 25px 0 0 15px;
	cursor: pointer;
}


/* ------------------------------------------------------------- */

footer {
	width:100%;
	height:13em;
	font-size:1.0em;
}

footer ul {
	display: block;
	margin:10px 0 0 4px;
}

footer ul li {
	float: none;
	border: none;
	margin-top:0.5em;
}

footer #blockLi {
	width: 40%;
}

footer #blockMi, footer #blockRe {
	width: 40%;
}

}

/* ============================================================================================================================================================ */
/* ============================================================================================================================================================ */
/* ============================================================================================================================================================ */

    
@media screen and (max-height:400px) {
/* Damit die Navi ins kleine Querformat-Smartphone passt */

nav ul {
	line-height: 30px;
}

/* ============================================================================================================================================================ */
/* ============================================================================================================================================================ */

    
@media screen and (max-width:500px) {

body {
	grid-template-columns: 0 90px 1fr;
    -ms-grid-columns: 0 90px 1fr;
}

#headline h1 {
    font-size: 4vw;
}

nav {
    width: auto;
}

#subnavi {
    font-size:0.9em;
}

#spalteli {
    grid-row: 4 / 5;
    grid-column: 3 / 4;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
}

#spaltere {
    grid-row: 5 / 6;
    grid-column: 3 / 4;
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
}
    
#spalteHead {
    grid-row: 3 / 4;
    grid-column: 3 / 4;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
}

#spaltere.txt.bg {
    background-position: 100% 5%;
    background-size: 70%;
}


/* ------------------------------------------------------------- */

footer {
	padding-top: 10px;
	height:270px;
}

footer #blockLi, footer #blockMi, footer #blockRe {
	float:none;
	width: 80%;
}

footer #blockLi, footer #blockMi, footer #blockRe {
	margin-left:46px;
	margin-bottom: 23px;
}

footer a, footer a:visited, footer a:any-link, a:link {
    color:#FFF;
	padding: 0;
    text-decoration:none;
}

/* ============================================================================================================================================================ */
/* ============================================================================================================================================================ */

    
@media screen and (max-width:360px) {

#headline h1 {
    font-size: 5.5vw;
}

nav {
	font-size:0.95em;
}

}