<!doctype css>
<style>

html, body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 1em;

	background-color: white;	



}

body {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em;

  padding-top: 0.2em;
  padding-right: 0.5em;
  padding-bottom:  0.2em;
  padding-left: 0.5em;

  margin: 0 auto;
								max-width: 30em;
}
header {
  border-bottom-style: solid;
  border-bottom-color: lightblue;
  border-bottom-width: 2px;
  
  padding-top: 4px;
  padding-bottom: 4px;
  min-height: 65px;
  
 display: grid;
  grid-template-columns: 3fr 2fr; 
  grid-gap: 0.5em;
 align-items: end;
}

.header_icon {
  width: auto; height: 65px;
}

.bannertext {
  text-align: right;

  line-height: 120%;
  font-size: 0.8em;
  
   margin-top: 0.2em;
   margin-bottom: 0.2em;
   
   padding-left: 0.5em;
}

.logo_body {
  text-align: right;
  /* font-weight: bold; */
  font-style: italic;
  font-size: 0.7em;
  margin-top: 0.1em;
  margin-bottom: 0;
}



nav {

  border-style: double;
  border-color: grey;
  border-radius: 0.5em;
  padding: 0.2em;

	margin = 0.1em;
   text-align: left;
   
     font-size: 0.9em;
	 
	 /* instead of &raquo;&nbsp;
	 try inline-embedded icons with:
	 https://wiki.selfhtml.org/wiki/Boxmodell#Warum_man_manchmal_inline-block_ben.C3.B6tigt
	 
	 https://wiki.selfhtml.org/wiki/Rahmen_und_Ribbons#box-shadow
	 
	 https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/border
	 */
}


h1 {

   font-style: italic;
   font-size: 1em;
   
   padding-top: 0em;
   padding-bottom: 0em;
   
   margin-top: 0.2em;
   margin-bottom: 0;
   
}	

content_body {
 display: grid;
 grid-column-gap: 1em;
 grid-row-gap: 0.2em;

 grid-template-columns: 1fr 1fr; 
 justify-content: center;

}



h2 {
  color: black;
  font-size: 0.9em;
  font-style: regular;
  margin-bottom: 0.2em;
}
h3 {
  font-size: 0.9em;
  margin-bottom: 0.2em;
}
h4 {
  font-size: 0.8em;
  padding-left: 1em;
  margin-bottom: 0.2em;
}


.bodytext {
  line-height: 120%;
  font-size: 0.8em;
   margin-top: 0.2em;
   margin-bottom: 0em;
}


.bodytext {
  line-height: 120%;
  font-size: 0.9em;
   margin-top: 0.5em;
   margin-bottom: 0em;
}

.bodysmalltext {
  line-height: 110%;
  font-size: 0.7em;
   margin-top: 0.5em;
   margin-bottom: 0em;
}


sonderangebot {
	color: red;
	text-align: right;
}

aufforderung {
   color: mediumblue;
}

happyindanger {
   color: red;
}
happyhope {
   color: green;
}
happycreative {
   color: yellow;
}

footer {
  margin-top: 1em;
  margin-bottom: 1em;
  
  text-align: right;
  font-size: 0.6 em;

}


.version_body {
  text-align: left;
  font-size: 0.3em;
}


.motivbox {
  margin: 3px;
/*
  border-style: solid;
  border-color: lightgrey;
  border-width: 2px;
  padding-top:    1px;
  padding-bottom: 1px;
  padding-left:  2px;
  padding-right: 2px;
*/
}


motivliste {

 margin-top: 1em;
 margin-left: 0em;
 margin-right: 0em;
 margin-bottom: 4em;

 display: grid;
 grid-column-gap: 0.5em;
 grid-row-gap: 3em;

 
 grid-template-columns: repeat(auto-fill, 140px);

 justify-content: space-between; 

}

.inDinLangQuer {
  width: 100%;
  height: auto; 

  max-width: 135px; 
  max-height: 95px; 
}

.inDinLangHoch {
  width: auto;
  height: 100%;

  max-width: 95px; 
  max-height: 135px; 
}

.inDinA6Quer {
  max-width: 145px;
  max-height: 105px;
}

.inDinA6Hoch {
  max-height: 145px;
  max-width: 105px;
}


motivtitel {

  color: DimGray;
  font-size: 0.8em;

  font-weight: normal;
  font-style: italic;
  margin: 0;  
  padding: 0;
  
}
motivsubtitel {

  font-size: 0.65em;
  
}


jumper {
	font-weight: bold;
}


</style>
