body 
	{	background		: black;
		font-family		: Arial, Helvetica, sans-serif;
		color				: #ff6600;  
		font-size		: 16px;
	}
/* +++++++++++++++++++++++++++++++++++++ ENDE body ENDE +++++++++*/
/* +++++++++++++++++++++++++++++++++++++ ENDE body ENDE +++++++++*/

/* +++++++++++++++++++++++++++++++++++++ CARDS  +++++*/
/* +++++++++++++++++++++++++++++++++++++ CARDS  +++++*/
/* +++++++++++++++++++++++++++++++++++++ CARDS  +++++*/
/* +++++++++++++++++++++++++++++++++++++ CARDS  +++++*/

.cards {
  max-width: 60vw;
  margin: 1em auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  grid-gap: 20px;
}

.card 
	{	border: 1px solid #999999;
		border-radius: 4px;
		grid-auto-flow:row;
		display: grid;
		grid-template-rows: max-content 200px 1fr;
	}

.myCard 
	{	border: 1px solid #999999;
		border-radius: 4px;
		grid-auto-flow:row;
		display: grid;
		grid-template-rows: max-content min-height:200px 1fr;
		
	}
	
.card img 
	{	object-fit: cover;
		width: 100%;
		height: 100%;
		
	}

.myCardLeft 
{		border: 20px solid #999999;
		border-radius: 4px;
		grid-auto-flow:row;
		display: grid;
		grid-template-rows: max-content min-height:200px 1fr;
		justify-self: left;
}



.card h2 
	{	margin: 0;
		padding: 0.5rem;
		
	}

.card .myContent 
	{	padding: 0.5rem;
	}

.card footer 
	{	background-color: #333333;
		color: white;
		padding: 0.5rem;
	}


	

/* +++++++++++++++++++++++++++++++++++++ CARDS  +++++*/
/* +++++++++++++++++++++++++++++++++++++ CARDS  +++++*/
/* +++++++++++++++++++++++++++++++++++++ CARDS  +++++*/
/* +++++++++++++++++++++++++++++++++++++ CARDS  +++++*/



/* +++++++++++++++++++++++++++++++++++++ links +++++++++*/	
a:link 
	{  color				: white;
		text-decoration: none;
		font-family    : courier;
		font-size		: clamp(1.1rem, 1.4rem, 1.9rem);
	}
	
.myLinkSmall a:link
	{ 	font-size		: clamp(0.8rem, 0.9rem, 1.0rem);
	}	
	
a:focus,
a:active,
a:hover
	{	background-color	: grey;
		color					: white;
		text-decoration	: underline;
	}	
a:visited 
	{  color					: white;
	}
/* +++++++++++++++++++++++++++++++++++++ ENDE links ENDE +++++++++*/
/* +++++++++++++++++++++++++++++++++++++ ENDE links ENDE +++++++++*/


/* +++++++++++++++++++++++++++++++++++++ fonts +++++++++++*/
.fontWhite
	{ 	color					: white;	
		font-size			: clamp(1.5rem, 1.6rem, 2rem);
	}
.fontSmall
	{	color					: white;	
		font-size			: clamp(1.1rem, 1.1rem, 1.2rem);
	}
.fontSmaller
	{	color					: white;	
		font-size			: clamp(0.9rem, 1.0rem, 1.1rem);
	}
.fontMini
	{	color					: white; 
		font-size			: clamp(0.7rem, 0.9rem, 1rem);
	}
/* +++++++++++++++++++++++++++++++++++++ ENDE fonts ENDE ++++++++++*/
/* +++++++++++++++++++++++++++++++++++++ ENDE fonts ENDE ++++++++++*/


/* +++++++++++++++++++++++++++++++++++++ image, button ++++++++++++*/
.myButtonSmall img
	{ 	width						: 2rem;
		height					: auto;
		margin					: 0;
		padding					: 0;
		display					: inline;
	}
/* +++++++++++++++++++++++++++++++++++++ ENDE image, button ENDE ++*/
/* +++++++++++++++++++++++++++++++++++++ ENDE image, button ENDE ++*/


/* +++++++++++++++++++++++++++++++++ ausrichten  ++++++++++++++*/
.ausrichtMiMi
	{	align-items		: center;			/* Inhalt vertikal Mitte */
		justify-content: center;			/* Inhalt horizontal zentriert*/
 	}	
.ausrichtMiRe	
	{	align-items		: center;			/* Inhalt vertikal Mitte */
		justify-content: flex-end;			/* Inhalt horizontal rechtsbündig*/
 	}	
.ausrichtUnMi	
	{	align-items		: flex-end;			/* Inhalt vertikal unten */
		justify-content: center;			/* Inhalt horizontal Mitte*/
	}
.ausrichtUnRe	
	{	align-items		: flex-end;			/* Inhalt vertikal unten */
		justify-content: flex-end;			/* Inhalt horizontal rechtsbündig*/
	}
.ausrichtMiLi	
	{	align-items		: center;			/* Inhalt vertikal Mitte */
		justify-content: flex-start;		/* Inhalt horizontal links*/
	}
.ausrichtObLi	
	{	align-items		: flex-start;		/* Inhalt vertikal oben */
		justify-content: flex-start;		/* Inhalt horizontal links*/
	}


/* +++++++++++++++++++++++++++++++++++++ ENDE ausrichten ENDE ++++++*/
/* +++++++++++++++++++++++++++++++++++++ ENDE ausrichten ENDE ++++++*/

/* +++++++++++++++++++++++++++++++++++++ Rahmen ++++++++++++*/
.rahmen
	{	border-style	: dotted;
		border-color	: white;
		
	}
.rahmenBlack
	{	border-style	: solid;
		border-color	: black;
	}
/* +++++++++++++++++++++++++++++++++++++ ENDE Rahmen ENDE ++++++*/
/* +++++++++++++++++++++++++++++++++++++ ENDE Rahmen ENDE ++++++*/


/* +++++++++++++++++++++++++++++++++++++ Seitenelemente ++++++++++++*/
.myHeader 										
	{ 	color				: #ff6600; 
	  	align-items		: center;			/* Inhalt vertikal Mitte */
		justify-content: center;			/* Inhalt horizontal zentriert*/
	}

/* +++++++++++++++++++++++++++++++++++++ ENDE Seitenelemente ENDE +++++++++*/
/* ++++++++++++++++++++++++++++++++++++++ENDE Seitenelemente ENDE +++++++++*/


/* ++++++++++++++++++++++++++++++++++ Display Desktop ++++++++++++++++++++++++++++*/
/* ++++++++++++++++++++++++++++++++++ Display Desktop ++++++++++++++++++++++++++++*/
/* ++++++++++++++++++++++++++++++++++ Display Desktop ++++++++++++++++++++++++++++*/

@media screen and (40rem<width) /* Mobilteile sind: @media screen and (width <= 50rem)*/
{


.justifyNormLinks a:link
	{	font-family    : courier;
		color				: white;	
		font-size		: clamp(1.1rem, 1.4rem, 1.9rem)
	}
.rechteckLeseProbe  					/* von Mobilteil kopiert */
	{display				: flex; 
    justify-content	: center; 
    align-items		: center; 
   }
.rechteckLeseProbe  img 			
	{	max-height		: 98%;
		max-width		: 98%;
		width				: auto;
		height			: auto;
	}

.rechteckLeseProbeDinA4Small  img 			/* NUR LESEPROBE */
	{	max-height		: 80vh;
		max-width		: 50vw;
		width				: auto;
		height			: auto;
	}


.zeilenContainer
	{	display 				: flex;
		flex-direction		: row;
		width					: 100%;
		height				: auto;
		justify-content	: center		
	}
	.linkeSeite
		{ 	display				: flex;
			width					: 33vw;
			justify-content	: flex-start;
			height				: auto;
		
		}
	.rechteSeite
		{ 	display				: flex;
			
			justify-content	: flex-start;
			height				: auto;
			
			
		}
		
.zeilenContainerTab
	{	display 				: flex;
		flex-direction		: row;
		width					: 100%;
		height				: auto;
		justify-content	: flex-start;
		align-items			: center;	
		padding-top			: 10px;	
		column-gap			: 10px
	}
.zeilenContainerTab	.linkeSeite
		{ 	display				: flex;
			width					: 40vw;
			height				: auto;
			justify-content	: flex-start;
			align-items			: center;	
			background-color	: grey;
			padding				: 10px;	
			
		}
.zeilenContainerTab	.rechteSeite
		{ 	display				: flex;
			align-items			: center;	
			justify-content	: flex-start;
			align-items			: center;	
			height				: auto;
			background-color	: grey;
			padding				: 10px;	
			
		}




.spaltenContainer
	{	display 				: flex;
		flex-direction		: column;
		width					: 100%;
		height				: auto;
		justify-content	: center		
	}
	.linkeSeite
		{ 	display				: flex;
			width					: 33vw;
			justify-content	: flex-start;
			height				: auto;
		}
	.rechteSeite
		{ 	display				: flex;
			width					: 67vw;
			justify-content	: flex-start;
			height				: auto;
			
		}
	
.myOverflow
	{ 	overflow			: scroll;
		overflow-x		: scroll;
	}
	
.fontBreadcrump
	{	color				: white;	
		font-family 	: courier;
		font-size		: clamp(1.3rem, 1.3rem, 1.3rem);
	}
.fontBreadcrumpTitel
	{	color				: white;	
		font-size		: clamp(1.6rem, 1.7rem, 1.5rem);
	}

/* ++++++++++++++++++++++++++++++++++ Desktop myContainerAlles +++++++++++++++++++*/
.myContainerAlles								
	{	display			: flex;
		flex				: 1;
		min-height		: 40vh;
		flex-direction	: column;
	}
	
	.myHeader
	{	display			: flex;
		min-height		: 10vh;
	   font-size		: clamp(2rem, 2.1vw, 2.2rem);
	}

	.myContentNav
	{	display			: flex;
		min-height		: 6vh;
	}
	
	/* ++++++++++++++++++++++++++++++++++ Desktop myContentContainer +++++++++++++++++++*/
	.myContentContainer 			
	{	display			: flex;	
		min-height		: 20vh;
		min-width		: 60vw;
		flex-direction	: row; 
		border-color	: grey;
	}
	
		.myContentContainerVerlinkLi
		{	display			: flex;
			flex-direction	: column; 
			min-width		: 18vw;
			order				: 1;
			padding-right	: 2%;
		}

			.myContentLinkLiMiRe	
			{	display			: flex;
				flex				: 1;	
				align-items		: center;			/* Inhalt vertikal mitte */
				justify-content: flex-end;			/* Inhalt horizontal rechts*/

			}		
			
			.myContentLinkLiMiMi
			{	display			: flex;
				flex				: 1;
				align-items		: center;			/* Inhalt vertikal Mitte */
				justify-content: center;			/* Inhalt horizontal Mitte*/

			}
			
			.myContentLinkLiMiLi
			{	display			: flex;
				flex				: 1;
				align-items		: center;			 /* Inhalt vertikal Mitte */
				justify-content: flex-start;			/* Inhalt horizontal links*/
			}	
			
	

	/* ++++++++++++++++++++++++++++++++++ Desktop myContentWide +++++++++++++++++++*/
	.myContentWide 				
		{	display			: flex;
			flex-direction	: column;
			flex				: 1;
			order				: 2;
			min-height		: 20vh;
			width				: 60vw;
			align-items		: center;			
			justify-content: center;			
		}
		
	.ausrichtObLiFlex	myContentWide        
	{	align-items		: flex-start;	
		justify-content: flex-start;	
		flex-direction	: column;
	}
	
	/* ++++++++++++++++++++++++++++++++++ ENDE Desktop myContentWide ENDE +++++++++*/	
	/* ++++++++++++++++++++++++++++++++++ ENDE Desktop myContentWide ENDE +++++++++*/

	

	.myContentContainerVerlinkRe	
	{	display			: flex;	
		flex-direction	: column; 
		width				: 18vw;
		order				: 3;
		padding-left	: 2%;
	}
	.myContentLinkReMiLi	
		{	display			: flex;
			flex				: 1;	
			align-items		: center;			/* Inhalt vertikal Mitte */
			justify-content: flex-start;		/* Inhalt horizontal links*/			
		}	
	.myContentLinkReMiMi	
		{	display			: flex;
			flex				: 1;
			align-items		: center;			/* Inhalt vertikal Mitte */
			justify-content: center;			/* Inhalt horizontal Mitte*/
		}	
	.myContentLinkReMiRe	
		{	display			: flex;
			flex				: 1;	
			align-items		: center;			/* Inhalt vertikal Mitte */
			justify-content: flex-end;		/* Inhalt horizontal rechts*/
		}	
	
.myFooter 
	{	display			: flex;
		flex				: 1;
		height			: 6vh;
		padding-top		: 40px;	
		
	}
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++ ENDE großes Display ENDE ++++*/
/* ++++++++++++++++++++++++++++++++++++++++++++++++ ENDE großes Display ENDE ++++*/
/* +++++++++++++++++++++++++++++++++++++++++++++ ENDE großes Display ENDE ++++*/
/* +++++++++++++++++++++++++++++++++++++++++++ ENDE großes Display ENDE ++++*/
/* +++++++++++++++++++++++++++++++++++++++++ ENDE großes Display ENDE ++++*/



/* ++++++++++++++++++++++++++++++++++ Display Mobilteile ++++++++++++++++++++++++++++*/
/* ++++++++++++++++++++++++++++++++++ Display Mobilteile ++++++++++++++++++++++++++++*/
/* ++++++++++++++++++++++++++++++++++ Display Mobilteile ++++++++++++++++++++++++++++*/

/* +++++++++++++++++++++++++++++++++++++++++ @media +++++++++++++++++*/
/* HINWEIS: Desktop ist dann @media screen and (50rem<width)*/

@media screen and (width <= 40rem) 
{	

.myCardLeft 
{		border: 20px solid #999999;
		border-radius: 4px;
		grid-auto-flow:row;
		display: grid;
		grid-template-rows: max-content min-height:200px 1fr;
		justify-self: left;
		border: 10px solid #999999;
}


body 
	{	background		: black;
		font-family		: Arial, Helvetica, sans-serif;
		color				: white;  
		font-size		: 16px;
	}
.myOverflow
{  overflow				: scroll;
	overflow-y			: scroll;
}

.zeilenContainer
	{	display 				: flex;
		flex-direction		: row;
		width					: 100%;
		height				: auto;
		
	}
	.linkeSeite
		{ 	display				: flex;
			width					: 33vw;
			justify-content	: flex-start;
			height				: auto;
		}
	.rechteSeite
		{ 	display				: flex;
			width					: 67vw;
			justify-content	: flex-start;
			height				: auto;
			
		}
.zeilenContainerTab
	{	display 				: flex;
		flex-direction		: row;
		width					: 100%;
		height				: auto;
		justify-content	: flex-start;
		align-items			: center;	
		margin-top			: 10px;	
		column-gap			: 10px;
	}
.zeilenContainerTab	.linkeSeite
		{ 	display				: flex;
			width					: 60%;
			height				: auto;
			align-items			: center;
			justify-content	: flex-start;
			background-color	: grey;
			padding				: 5px;	
			
			
		}
.zeilenContainerTab	.rechteSeite
		{ 	display				: flex;
			width					: 40%;
			height				: auto;
			align-items			: center;	
			justify-content	: flex-start;
			align-items			: center;	
			height				: auto;
			background-color	: grey;
			padding				: 5px;	
			
		}




.rechteckLeseProbe  					/* Mobilteile */
	{display				: flex; 
    justify-content	: center; 
    align-items		: center; 
    /*overflow			: scroll;*/
   }
.rechteckLeseProbe  img 			/* Mobilteile */
	{	max-height		: 98%;
		max-width		: 98%;
		width				: auto;
		height			: auto;
	}

.rechteckLeseProbeDinA4Small  img 			/* NUR LESEPROBE */
	{	max-height		: 98%;
		max-width		: 98%;
		width				: auto;
		height			: auto;
	}
.justifyNormLinks a:link 			/* Mobilteile */
	{	font-family    : courier;
		color				: white; 	
		font-size		: clamp(0.8rem, 0.9rem, 1.0rem);
	}

a:link 									
	{  color				: white;
		text-decoration: none;
		font-family    : courier;
		/*font-size		: clamp(1.0rem, 1.1rem, 1.3rem);*/
		font-size		: clamp(0.9rem, 1rem, 1.2rem);
	}

a:focus,
a:active,
a:hover
	{	background-color	: grey;
		color					: white;
		text-decoration	: underline;
	}	
a:visited 
	{  color					: white;
	}
					
.fontBreadcrump
	{	color				: white;	
		font-family 	: courier;
		font-size		: clamp(1.1rem, 1.1rem, 1.1rem);
	}
.fontBreadcrumpTitel
	{	color				: white;	
		font-size		: clamp(1.1rem, 1.1rem, 1.1rem);
	}
	
.myContainerAlles					 		
	{	display			: flex;
		flex-direction	: column;
		min-height		: 40vh;
		flex				: 1;
	}

.myHeader
	{	display			: flex;
		height			: 12vh;
		font-size		: clamp(1.6rem, 1.7vw, 1.7rem);
	}
	
	
.myContentNav
	{	display			: flex;
		min-height		: 6vh;
	}
	
.myContentContainer 								/* + (auch klein) ++++ umfasst Seitenmenü und Inhalte    ++++*/
	{	display			: flex;	
		flex-direction	: column; 
		min-height		: 60vh;
	}

.myContentContainerVerlinkLi				/* ++++++++++++++++++++ KLEIN +++++++++++++*/
	{	display			: flex;
		flex-direction	: column; 
		min-height		: 18vh;
		flex				: 1;	
		order				: 2;
		border			: dashed;				
		border-color	: lightgray;
		border-width	: thin;
		padding			: 6px;
	}
			.myContentLinkLiMiRe	
			{	display			: flex;
				flex				: 1;	
				height			: 2em;
				align-items		: center;			
				justify-content: flex-start;			
			}		
			
			.myContentLinkLiMiMi
			{	display			: flex;
				flex				: 1;
				height			: 2em;
				align-items		: center;			
				justify-content: flex-start;	
				padding-left	: 27vw;
			}
			
			.myContentLinkLiMiLi
			{	display			: flex;
				flex				: 1;
				height			: 2em;
				align-items		: center;			 
				justify-content: flex-start;	
				padding-left	: 60vw;
			}	
			
.myContentWide							/* ++++++++++++++++++++ KLEIN: Nur Inhalte (MItttelteil)  +++++++++++++*/
	{	display			: flex;
		min-height		: 30vh;
		flex				: 1;	
		flex-direction	: column; 
		order				: -1;
	}

.myContentContainerVerlinkRe				/* ++++++++++++++++++++ KLEIN +++++++++++++*/
	{	display			: flex;	
		flex-direction	: column; 
		min-height		: 18vh;
		/*justify-content: space-between;*/
		flex				: 1;	
		order				: 3;
		border			: dashed;				
		border-color	: lightgray;
		border-width	: thin;
		padding			: 6px;
	}
	.myContentLinkReMiLi	
		{	display			: flex;
			flex				: 1;	
			height			: 2em;
			align-items		: center;			
			justify-content: flex-start;		
			
		}	
	.myContentLinkReMiMi	
		{	display			: flex;
			flex				: 1;
			height			: 2em;
			align-items		: center;			
			justify-content: flex-start;	
			padding-left	: 27vw;
			
		}	
	.myContentLinkReMiRe	
		{	display			: flex;
			flex				: 1;	
			height			: 2em;
			align-items		: center;		
			justify-content: flex-start;
			padding-left	: 60vw;			
		}	

.myFooter 								/* ++++++++++++++++++++ KLEIN +++++++++++++*/
	{	display			: flex;
		flex				: 1;
		height			: 10vh;
		padding-top		: 20px;	
	}
}
/* +++++++++++++++++++++++++++++++++++++++++ ENDE Mobilteile ENDE      ++++*/
/* +++++++++++++++++++++++++++++++++++++++++ ENDE Mobilteile ENDE      ++++*/