html{
    min-height:100%;
    /* Hintergründe wie Verläufe, Hintergrundbilder werden wenigstens bis zum unteren Browserrand  dargestellt. Ansonsten würden sie mit dem Inhalt enden und "in der Luft" hängen bzw. ein Verlauf "einen Knick" haben.*/
    overflow: scroll;
}
*{
	padding:0;
	margin:0;
	box-sizing: border-box;
}
body{
    font: 1.0625rem "Segoe UI",Segoe,Frutiger,"Frutiger Linotype","Dejavu Sans","Helvetica Neue",sans-serif;
    text-align:center;
    background: #828a89;
    background: linear-gradient(to bottom, #aaabad 0%,#535352 31.25rem); 
}
/*Layout*/
#aussen{
	/* border:5px dotted black; */
    max-width: 60rem; 
	/* 960px */
	margin: 1.875rem auto;
	/* Layout zentrieren */
}
header{
	background:#050a1a url(../bilder/hintergrund_oben.jpg);
    text-align: right;
}
#logo{
    min-height: 8.125rem;
    color:#99aca7;
    text-shadow: 0.125rem 0.0626rem 0.0625rem #000;
    /* 2px 1px 1px #000; */
    font-size: 2.125rem;
    padding: 2.8125rem 2.5rem;
    /* 45px 40px */
}
main{
	background: #fff;
	/* border: 5px solid red; */
	padding: 1.875rem 2.5rem;
	/* 30px 40px */
	min-height: 31.25rem;
	/* 500px */
    
}
/* Navigation */
nav ul{
    list-style-type: none;
    background: #585b6a;
    text-align:left;
    display: inline-block;
}
nav li{
    display: inline-block;
}
nav a, nav strong{
    font-weight: normal;
    text-decoration: none;
    padding: 0.5rem 1.5rem;
    display: inline-block;
    /* Verhält sich wie ein Block, d.h. padding wird nach innen abgetragen ist aber nur so breit wie sein Inhalt. */
}
nav a:link, nav a:visited{
    background: #bebfc7;
    color:#3b3a33;
}
nav a:focus, nav a:hover, nav a:active, nav strong{
    background: #9fa0a8;
    color: #121213;
}
/* Inhalte */
h1, h2, h3, h4, h5, h6, p, blockquote, figure{
    margin-bottom: 1rem;
}
img{
    max-width: 100%;
    /* höchstens 100% des Elternelements. */
    height: auto;
}
h1{
    font-size:2.125rem;/*34px*/
    font-weight:normal;
    text-align:center;
    color:#32364A;
    /* text-shadow: 2px 1px 1px #000; */
}
h2{
     font-size:1.5rem;/*24px;*/
     text-align:left;
     color:#32364A;
}
h3{
    color:#32364A;
    text-align:center;
    font-size:1.25rem;/*20px;*/
}
h4{
    font-size:1rem;
    color:#32364A;
    font-weight:normal;
    text-align:left;
    font-size:1rem;/*20px;*/
}
h5{
    font-size:1.5rem;
    color:#32364A;
    text-align:left;
    font-size:1.25rem;/*20px;*/
}
h6{
    font-size:1.25rem;
    color:#3b3a33;
    font-weight:normal;
    text-align:center;
    font-size:1.1rem;/*20px;*/
    background:#bebfc7;



}


a img{
    vertical-align:bottom;
    /* Entfernt "Schatten", der durch a:hover entsteht. */
}
a:link{
    color:black;
}
a:visited{
    color:#666;
}
a:focus, a:hover, a:active{
    color: #fff;
    background: #32364a;
    text-decoration: none;
    outline: none;
}