*,
*::before,
*::after {
  box-sizing: border-box;
}
@font-face{
	font-family: Ubuntu;
	src: url(../../fonts/Ubuntu-Regular.ttf),
		url(../../fonts/Ubuntu-Bold.ttf),
		url(../../fonts/Ubuntu-Italic.ttf),
		url(../../fonts/Ubuntu-Medium.ttf),
		url(../../fonts/Ubuntu-Light.ttf);
}
@font-face{
	font-family: Reckless;
	src: url(../../fonts/RecklessNeue-Regular.ttf);
}
/**********************************************************************************************************************************************************************************/
.container {
	display: grid;
	grid-template-columns: 7.6% 12.2% 80.2%;
	grid-template-rows: auto;
	grid-template-areas: 
		"header header header"
		"sidebar navbar main"
		"sidebar leer main"
		"sidebar leer footer";
	column-gap: 0;
	row-gap: 0;
	justify-items: center;
	align-items: stretch;
	place-items: stretch;
	justify-content: space-between;
	align-content: stretch;
	place-content: center; 
}
.box {
	background-color: var(--my-background-color2);
	margin: 0;
}
.header {
	grid-area: header;
	background-color: var(--my-background-color2);
	box-shadow: 0px 2px 20px 5px rgb(105,128,170);
	z-index: 10;	
}
.sidebar {
	grid-area: sidebar;
	background-color: var(--my-background-color2);
	z-index: 5;
}
.navbar {
	grid-area: navbar;
	background-color: var(--my-background-color1);
	font-family: Lato; /* Arial, Helvetica, Times New Roman, Georgia, Verdana, Roboto, Lato */
	font-size: 110%;
	font-variant: small-caps;
	box-shadow: 2px 2px 20px 5px rgb(105,128,170);
	z-index: 10;
}
.leer {
	grid-area: leer;
	background-color: var(--my-background-color2);
	z-index: 5;
}
.main {
	grid-area: main;
	background-color: var(--my-background-color2);
	padding: 40px;
}
.footer {
	grid-area: footer;
	background-color: var(--my-background-color2);
}
/**********************************************************************************************************************************************************************************/
html {
	font-family: "Lucida Sans", sans-serif;
}
body {
	--my-background-color1: #9eb6da;  /* Headerfarbe */
	--my-background-color2: #c0c8ec;  /* Footerfarbe */
	background-color: var(--my-background-color2);
	font-family: Ubuntu, sans-serif;  /* Arial, Helvetica, Times New Roman, Georgia, Verdana, Roboto, Lato */
	font-size: 98%;
}
h1 {
	margin: 100px 0 40px 0;
	text-align: center;
	font: 300% "Times New Roman", serif;
	font-variant: small-caps;
	color: darkslateblue;
}
h2 {
	margin: 50px 0 30px 0;
	text-align: left;
	font: 200% "Times New Roman", serif;
	color: darkslateblue;
}
h3 {
	margin: 30px 0 15px 0;
	text-align: left;
	font: 150% "Times New Roman", serif;
	color: darkslateblue;
}
h4 {
	margin: 25px 0 5px 0;
	text-align: left;
	font: 120% "Times New Roman", serif;
	font-style: italic;
	color: darkslateblue;
}
h5 {
	margin: 25px 0 1px 0;
	text-align: left;
	font: 110% "Times New Roman", serif;
	font-style: italic;
	color: darkslateblue;
}
hr {
	color: #2252c3;
}
/**********************************************************************************************************************************************************************************/
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/**********************************************************************************************************************************************************************************/
.navbar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.navbar ul li {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	}
.navbar ul li a {
	margin-top: 20px;
	padding: 5px;
	display: block;
	background-color: #6980aa;
	color: #FFFFFF;
	text-decoration: none;
	padding-right:10px;
}
.navbar ul li a:hover {
	background-color: #6495ED;
	font-size: 110%;	
	color:#000fff;
}
.navbar ul li a:visited {
	color: #cccccc;
}
.navbar_sel ul li {
	margin-top: 20px;
	padding: 5px;
	display: block;
	background-color: #59709a;
	color: #FFFFFF;
	text-decoration: none;
	padding-right:10px;
}
/**********************************************************************************************************************************************************************************/
.main ul {
	list-style: square;
}
.main td {
	text-align: left;
}
.main ul li a {
	margin-top: 20px;
	padding: 5px;
	display: inline;
	text-decoration: none;
	padding-right:10px;
}
.main img {
	display: table-row;
	margin-left: auto;
	margin-right: auto;
} 
/**********************************************************************************************************************************************************************************/
#chor-foto {
	float: left;
	/*width: 512px;*/   /* 1024 768 512 */
	width: 642px;
	padding: 0;
	margin: 0 20px 10px 0;
	/*background: #257 url("../images/Chorwerkstatt_2023-12-03_IMG_3137_(512x384).jpg");*/
	background: #257 url("../images/Chorwerkstatt_2025-05-02_(642x384).jpg");
	color: #fff;
}
#chor-foto a {
	display: block;
	font: bold 12px Arial, Helvetica, sans-serif;
	text-align: right;
	text-decoration: none;
	border: 1px solid #fff;
	/*width: 512px;*/   /* 1024 768 512 */
	width: 642px;
	height: 384px;  /* 768 576 384 */
	color: #fff;
	/*background: #257 url("../images/Chorwerkstatt_2023-12-03_IMG_3142_(512x384).jpg");*/
	background: #257 url("../images/Chorwerkstatt_2025-05-02_(642x384).jpg");
}
#chor-foto a:hover {
	color: #9ff;
	/*background: #ccc url("../images/Chorwerkstatt_2023-12-03_IMG_3137_(512x384).jpg");*/
	background: #257 url("../images/Chorwerkstatt_2025-05-02_(642x384).jpg");
}
/**********************************************************************************************************************************************************************************/
.lorem {
	color: green;
}
p.lorem:before {
	color: black;
	content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
}
p.lorem:after {
	color: black;
	content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
}