html {font-size: 100%}

body		{
	margin: 0.4rem auto;
	padding: 0;
  	box-sizing: border-box;
    
	background: url(../site-img/khv-logo-150x150kachel.jpg) ;
	background-repeat: repeat;
	
    font-size: calc(10px + (16 - 10) * ((100vw - 320px) / (1200 - 320)));
    
    max-width: 1200px;
}

a {text-decoration: none; }

/*
Die oben gezeigte calc()-Funktion basiert auf folgender Formel:

body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
Ausgangsformel war: 
body {
 font-size: calc(16px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
}

*/

.bild           {
   object-fit: contain;
   width: 100%;
   height: auto;
    
}
.bild-link      {
   object-fit: contain;
   width: 100%;
   height: auto;
   max-width: 100px;
}

.bild-banner    {
    object-fit: contain;
    width: 100%;
    height: auto;
    max-width: 1200px;
}
.bild-rund      {
    object-fit: contain;
    border-radius: 10px;
    width: 100%;
    height: auto;
    max-width: 799px;
    
    
}

.bild-rahmen1      {
    
    object-fit: contain;
    margin: 10px;
    padding: 10px;
    background: #EEF3E2;
    border: 1px solid;
    
    border-color: #000000;
    width: 100%;
    height: auto;
    max-width: 405px;
    
} 


main            {
	height: 100vh;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 140px 40px 1fr 40px 1fr 1fr 1fr 40px 32px;
	grid-template-areas:
	"box1 box1 box1 box2"
	"box3 box3 box3 box3"
    "box4 box4 box4 box4"
	"box5 box5 box5 box5"
    "box6 box6 box6 box6"
    "box7 box7 box8 box8"   
	"box9 box9 box9 box9"
    "box10 box10 box10 box10"
    "box11 box11 box11 box11";
    margin: 0px; background-color: #aae1ef;
    padding: 0px;
    border: 0px solid #000;
   
	
}

.box1   {
	grid-area: box1;
	display: flex;
	justify-content: center;
	flex-direction: column;
    align-items: left;
    font-family: sans-serif;
    font-size: 2em;
	padding: 10px;
	background: #993300; color: #ffffff;
    border: 0px solid #000;
   
	
}

.box2   {
	grid-area: box2;
	display: flex;
	justify-content: center;
	flex-direction: column;
    align-items: center;
    padding: 10px;
	background: #993300;

}

.box3   {
    grid-area: box3;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: sans-serif;
    padding: 4px;
    background: #333333;
    color: #ffffcd;
    font-size: 1.4em;
  
}

.box4   {
    grid-area: box4;
    display: flex;
    justify-content: center;
    flex-direction: column;
   
    align-items: center;
    
    padding: 0px;
    background: #ffffff;

}


.box5   {
    grid-area: box5;
    display: flex;
    flex-flow: row wrap;
    align-items: center; 
    justify-content: space-around;
    background-color: #999999;
    padding: 1px;
    border-top: 4px solid #999999; 
}
    


.box6   {
	grid-area: box6;
	display: flex;
    align-items: center;
    flex-direction: column;
    padding: 5px;
    background: #eeeeee;
   
    font-family: sans-serif;
    font-size: 1em;
    padding: 20px;
    text-align: justify;
    color: #000000;
}
.box7   {
	grid-area: box7;
	display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: #eeeeee;
   
    font-family: sans-serif;
    font-size: 1em;
    text-align: justify;
    color: #000000;
    
}

.box8   {
	grid-area: box8;
	display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: #eeeeee;
   
    font-family: sans-serif;
    font-size: 1em;
    text-align: justify;
    color: #000000;
    
}

.box9  {
	grid-area: box9;
	display: flex;
    align-items: center;
    flex-direction: column;
    padding: 5px;
    background: #eeeeee;
   
    font-family: sans-serif;
    font-size: 1em;
    padding: 20px;
    text-align: justify;
    color: #000000;
}


.box10    {
    grid-area: box10;
    display: flex;
    flex-flow: row wrap;
    align-items: center; 
    justify-content: space-around;
    background-color: #999999;
    padding: 1px;
    border-top: 4px solid #999999;
   
  
}


.box11   {
	grid-area: box11;
	display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
   
    font-family: sans-serif;
    font-size: 1em;
    padding: 4px;
    background: #000000;
    color: #ffffff;
}

/* Version vom 24.10.2020 - Text Blocksatz*/