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;
    
}
/*
.bild90           {
   object-fit: contain;
   width: 100%;
   height: auto;
   max-width: 90px;
}
*/
.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-rahmen200      {
    
    object-fit: contain;
    margin: 10px;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid;
    
    border-color: #000000;
    width: 100%;
    height: auto;
    max-width: 200px;
    
} 

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


.bild-rahmen300      {
    
    object-fit: contain;
    margin: 10px;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid;
    
    border-color: #000000;
    width: 100%;
    height: auto;
    max-width: 315px;
    
} 
*/
.bild-rahmen928      {
    
    object-fit: contain;
    margin: 10px;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid;
    
    border-color: #000000;
    width: 100%;
    height: auto;
    max-width: 928px;
    
}

.bild-rahmen230      {
    
    object-fit: contain;
    margin: 10px;
    margin-right: 30px;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid;
    
    border-color: #000000;
    width: 100%;
    height: auto;
    max-width: 230px;
    
} 



.kleinschr { font-size: 0.9rem; line-height:110%; }

main            {
	height: 100vh;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 140px 40px 1fr 40px 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 box7 box7"
    "box10 box10 box10 box10"
    "box11 box11 box11 box11";
   
    
   
	
}

.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;
    
   
	
}

.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: center;
    align-items: center;
    font-family: sans-serif;
    padding: 4px;
    background: #000000;
    color: #ffffcd;
    font-size: 1.4em;
}

.box4   {
    grid-area: box4;
    display: flex;
    justify-content: center;
    flex-direction: column;
   
    
    
    align-items: center;
    
    
    background: #000000 
}




.box5   {
    grid-area: box5;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end; 
    justify-content: flex-end;
    padding: 4px;
    background: #000000;
    
    
}
    

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

.box6   {
	grid-area: box6;
	

    
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    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;
    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: flex-end; 
    justify-content: flex-end;
    padding: 4px;
    background: #000000;
    
  
}


.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 20.06.2022 - Geschiwerkstatt Proj01*/