@import url(photos-farben.css);
@import url(Stile.css);


/* MOBILE FIRST!!!
   ###############################################################
	iPhone-Auflösung: 414 x 736 (Pixel-Auflösung)
	
	min-width-Auflösungen aus dem Zeit-CSS:
	smartphone: 32.5em
	tablet: 48em
	desktop: 61.25em
*/


/* BODY
   ==============================================================
*/
body { 
								font-family: Verdana; font-size:1.0em; line-height: 1.3em; 
}


/* PFAD
   ==============================================================
*/
#pfad {
								margin-bottom: 5px;
								font-size: 0.7em;
	}

/* MAIN
   ==============================================================
*/
#main,
main {
								display: inline-grid;
								grid-template-columns: 100%;
								grid-gap: 10px;
								grid-auto-rows: minmax(20px, auto);

								padding: 0px;
								padding-right: 5px;

}


/* HEADER
   ==============================================================
*/
header {
								grid-column: 1; 
								grid-row: 1;
								padding: 1px;
}

/* ARTICLE
   ==============================================================
*/
#content,
article {
								grid-column: 1 ;
								grid-row: 2;
								counter-reset: img;
}

		section { 			padding: 0px; margin-bottom: 0px; }

/* ASIDE
   ==============================================================
*/
aside {
								grid-column: 1; 
								grid-row: 3;
								padding: 5px;
		}

aside img 					{width: 90px; height: 60px;}


/* FOOTER
   ==============================================================
*/
footer {
								margin-top: 10px;
								padding: 10px;
								padding-left: 20px;
								font-size: 0.8em;
								border: 1px dotted white;  
}

footer:before { 
								content: "(C) Ulrich Helmich 2022"; display:block;
}

footer .klein { 
								font-size: 1em; line-height:normal;
}






/* DESKTOP SECOND!!!
   ###############################################################
*/

@media (min-width: 641px) 
{

/* BODY
   ==============================================================
*/
body { 
								font-family: Verdana; font-size:1.0em; 
								font-kerning: normal;
								line-height: 1.6em; 
								max-width: 1280;
								overflow-wrap: break-word;
								word-wrap: break-word;
								-webkit-hyphens: auto;
								-moz-hyphens: auto; 
								-ms-hyphens: auto;
								hyphens: auto;
	
								padding-left: 0%;
								padding-right: 0%;
}


#pfad {
								margin-left: 5%; margin-right: 5%;
								margin-bottom: 5px;
								font-size: 0.7em;
	}

/* MAIN
   ==============================================================
*/
main {
								display: inline-grid;
								grid-template-columns: 87% 13%;
								grid-gap: 5px;
								border: 1px dotted black;
	
								padding: 0px;
								padding-right: 10px;
								margin-left: 5%;
								margin-right: 5%;
}

header {
								grid-column: 1/3; 
								grid-row: 1;
								padding: 1px;
								height: 0px;
}

article {
								grid-column: 1 ;
								grid-row: 2;
								counter-reset: img;
}

		section {			padding: 1px; margin-bottom: 1px;	}



aside {
								grid-column: 2 ; 
								grid-row: 2;
								padding: 4px;
								border-left: 1px dotted white;


}

		aside img { 
								visibility: visible;
								width: 98%; max-width: 640px; height: auto;
								margin-bottom: 20px; 
								margin-top: 15px;
}

footer {
								margin-top: 10px;
								margin-left: 5%;
								margin-right: 5%;
								font-size: 0.7em;
								padding: 10px;
								padding-left: 5px;
								border: 1px dotted black; 
								color: red;
}

footer:before				{ content: "(C) Ulrich Helmich 2022"; }

}




/* DESKTOP SECOND ENDE!!!
   Ab hier fuer alle Devices!
   ###############################################################
*/


/* Auszeichnungen im Haupttext */

section h3,
section h4,
section h5, 
section h6									{ margin: 0px;}


section img									{ width: 98%; heigt: auto;}

section .breitbild img					{width: 100%;}