/********************************************************
 * 			@ Style für das Template				    *
 * 			@ copyright Stefan Braun					*
 ********************************************************/																

body 	{ 	XXX_border: 2px dotted grey; 
			background-image: url("body_bg.png"); 
			XX_background-image: url("winter.jpg"); 
		
}

div  { 					XXX_border: 1px dotted grey; 
						overflow: hidden;
						}
						
#banner,
#strichgrafik {
	max-width: 650px;
    width: 100%;
    height: 100%;
	object-fit: cover;
}

#WRAPPER { 
	display: flex;
	justify-content: center;
}


/** >>>>>   HAUPT-Template    <<<<<   	**/
/**   @Desktop - ab 960px  				**/
/**   4 Spalten   						**/	

						
#TEMPLATE { 			width: 60rem;
						display: grid;
						grid-template-columns: 35% 35% 30%;
						grid-template-rows: 4rem auto auto 1fr 5rem;  					   
						gap: 0px 0px;
						grid-template-areas:
						"HEADER 	HEADER		HEADER	"
						"NAV 		NAV			NAV		"
						"MAIN		MAIN 		ASIDE	"
						"FOOTER1	FOOTER2		FOOTER3	"
						"BOTTOM		BOTTOM		BOTTOM	"; 
						text-align: left;
						}						

HEADER { 				grid-area: HEADER;
						background-color: #76b900;
						border-radius: 20px 20px 0 0; 
						XXXbackground-image: linear-gradient(#76b900, #FFFFFF);			/**   grüner Farbverlauf   ***/
						}

NAV { 					grid-area: NAV; 
						background-color: white;
						}

MAIN { 					grid-area: MAIN;
						background-color: white;
						padding-left: 1rem;
						padding-right: 1rem;
						grid-template-rows: 1fr; 
						}						

ASIDE { 				grid-area: ASIDE;
						background-color: white;			
						
						}
						

.aside_innen {
						border-radius: 0px 0px 0px 0px;
						box-shadow: 0 0 0.5rem rgba(0,0,0,0.1);
						padding: 10px 15px 25px;
						margin: 5rem 1rem 1rem 1rem;		/**   Außenabstand: top, right, bottom, left   ***/
						background-color: #FCFCFC;
						border: 1px solid #EBEBEB;
						}				

FOOTER1 { 				grid-area: FOOTER1;
						background-color: white;
						}

FOOTER2 { 				grid-area: FOOTER2;
						background-color: white;
						}

FOOTER3 { 				grid-area: FOOTER3;
						background-color: white;
						}

.footer {
						border-radius: 0px 0px 0px 0px;
						box-shadow: 0 0 0.5rem rgba(0,0,0,0.1);
						padding: 10px 15px 25px;
						margin: 5rem 1rem 3rem 1rem;		/**   Außenabstand: top, right, bottom, left   ***/
						background-color: #FCFCFC;
						border: 1px solid #EBEBEB;
						height: 8rem;
						}						
						
BOTTOM { 				grid-area: BOTTOM;
						background-color: #76b900;
						border-radius: 0 0px 20px 20px;
						min-height: 80px;
						text-align: center;
						color: white;
						font-size: 0.8rem;
						}



/** >>>>>   START-Template    <<<<<     	**/
/**   Startseite, Vereine, Funktionäre  	**/
#START,
#VEREIN { 				grid-area: MAIN;
						background-color: white;
						display: grid;											/* Elemente nebeneinander platzieren */
						grid-template-columns: repeat(auto-fill, 33% 67%);		/* 'auto-fill' macht soviele Einträge wie Elemente vorhanden sind / 2 Spalten */
						grid-template-rows: auto;
						}
																		
.BILD_breit  {			display: grid;
						justify-self: center;
						align-self: center;
						border-radius: 10px 10px 10px 10px;
						width: 10rem;
						}	

.BILD_hoch  {			display: grid;
						justify-self: center;
						align-self: center;
						border-radius: 10px 10px 10px 10px;
						height: 8rem;
						}							

.BILD_verein  {			display: block;				/**   mittig zentrieren mit marigin auto bei 'Block' Elementen  **/		
						margin-top: 1.2rem;
						margin-left: auto;
						margin-right: auto;
						height: 8rem;
						}
						
.ADRESSE { 				text-align: left;
						padding-left: 2rem;
						}
						
.LINIE {				grid-column: 1/-1;
						border-bottom: 1px solid red;
						}	



/** >>>>>   KSM-Template    <<<<<  		 **/
/**   Kreismeisterschaften / RWK  		 **/											
#KSM { 					grid-area: MAIN;
						background-color: white;
						display: grid;											/* Elemente nebeneinander platzieren */				 			
						grid-template-columns: repeat(auto-fill, 1fr);			/* die Spalten werden im '.subgrid_ksm' erstellt 	 */								 			
						}
						
.subgrid_ksm  {			/* section */
						display: grid;
						grid-template-rows: subgrid;
						grid-template-columns: 35% 35% 30%;	
						grid-template-areas:
						"TABKOPF	TABKOPF		TABKOPF	"
						"ITEM1		ITEM2		ZIEL	"
						"PHP		PHP			ZIEL	";
						grid-row: span 3;			/* 3 Zeilen in der 'grid-template-area'  */		
						margin-bottom: 3rem;		/* Abstand zur nächsten SECTION */	
						}
 
.subgrid_rwk {			/* section */
						display: grid;
						grid-template-rows: subgrid;
						grid-template-columns: 35% 35% 30%;	
						grid-template-areas:
						"TABKOPF	TABKOPF		TABKOPF	"
						"PHP		PHP			ZIEL	";
						grid-row: span 2;			/* 2 Zeilen in der 'grid-template-area'  */		
						margin-bottom: 3rem;		/* Abstand zur nächsten SECTION */	
						}

.TABKOPF { 				/* Für die rote Überschrift - Caption (geht nur als Tabellenkopf) */
						grid-area: TABKOPF;
						}
						
table {	
						width: 96%;
						border-collapse: collapse;
						border-spacing: .2em;
						margin-left: 1em;
						box-shadow: 0 0 .1em #666;
						position: relative;
						z-index: 1;
						}

table th {
						padding: .2em .5em;
						border-radius: .1em;
						background-image: linear-gradient(#f9f9f9, #e3e3e3);
						border: thin solid #a0a0a0;
						}
				
table caption { 		
						color: white;
						background: red;
						font-size: 1.1rem;
						box-shadow: .1em .1em .1em 0 hsl(0 0% 50%);
						padding: .2em .2em .2em 2em;
						width: 20em;
						margin-left: -.6em;
						position: relative;
						}
						
table caption::before {
						content: "";
						position: absolute;
						display: block;
						height: 0;
						width: 0;
						top: 1em;
						left: -.6em;
						border-style: solid;
						border-width: .6em;
						border-color: transparent hsl(13 96% 35%) transparent transparent;
						z-index: -1;
}	

.ksm_drf {				/* Durchführung der KSM - DIV ohne Zielscheibe */
						display: grid;
						grid-column: span 3;			/* 3 Zeilen in der 'grid-template-area'  */		
						margin-left: 4rem;		/* Abstand zur nächsten SECTION */	
						}
						
.ITEM1 { 				grid-area: ITEM1;
						background-color: white;
						border: 1px dotted grey; 
						padding-left: 1rem;
						}

.ITEM2 { 				grid-area: ITEM2;
						background-color: white;
						border: 1px dotted grey; 
						padding-left: 1rem;
						}

.PHP { 					grid-area: PHP;
						background-color: white;
						border: 1px dotted grey; 
						padding-left: 3rem;
						}

.ZIEL { 				grid-area: ZIEL;
						display: grid;
						place-items: center;
						border: 1px dotted grey; 
						}

					





/** >>>>>   Mobile Templates    <<<<<   **/						

						


/**   @Mobil - 480px   **/
/**   3 Spalten   **/										
@media screen and (max-width: 59rem) {									
#TEMPLATE { 			width: 40rem;
						display: grid;
						grid-template-columns: 33% 33% 34% ;
						grid-template-rows: 4rem 1fr auto 1fr 5rem;  					   
						gap: 0px 0px;
						grid-template-areas:
						"HEADER 	HEADER		HEADER	"
						"NAV 		NAV			NAV	"
						"MAIN		MAIN 		MAIN	"
						"FOOTER1	FOOTER2		FOOTER3 	"
						"BOTTOM		BOTTOM		BOTTOM 	"; 
						}

#START,
#VEREIN		 { 			grid-area: MAIN;
						background-color: white;
						display: grid;											/* Elemente nebeneinander platzieren */
						grid-template-columns: repeat(auto-fill, 1fr 1fr);		/* 'auto-fill' macht soviele Einträge wie Elemente vorhanden sind / 2 Spalten */
						grid-template-rows: auto;
						}

#KSM { 					/* wird von oben 'KSM-Template' übernommen */						 			
						}
						
.subgrid_ksm {			/* section */
						display: grid;
						grid-template-rows: subgrid;
						grid-template-columns: 70% 30%;	
						grid-template-areas:
						"TABKOPF	TABKOPF	"
						"ITEM1		ZIEL	"
						"ITEM2		ZIEL	"
						"PHP		PHP		";
						grid-row: span 4;			/* 4 Zeilen in >> .subgrid_ksm << 	 */	
						margin-bottom: 3rem;		/* Abstand zur nächsten SECTION */	
}

.subgrid_rwk {			/* section */
						display: grid;
						grid-template-rows: subgrid;
						grid-template-columns: 70% 30%;	
						grid-template-areas:
						"TABKOPF	TABKOPF	"
						"PHP		ZIEL	";
						grid-row: span 2;			/* 2 Zeilen in >> .subgrid_ksm << 	 */	
						margin-bottom: 3rem;		/* Abstand zur nächsten SECTION */	
}
											
ASIDE { 				display: none;
						}							
}	




/**   @Mobil - bis 320px   **/		
/**   2 Spalten   **/
@media screen and (max-width: 39rem) {									
#TEMPLATE { 			width: 100%;
						display: grid;
						grid-template-columns: 1fr 1fr ;
						grid-template-rows: 4rem 1fr auto 1fr 5rem;  	
						gap: 0px 0px;
						grid-template-areas:
						"HEADER 		HEADER	"
						"NAV 			NAV		"
						"MAIN			MAIN 	"
						"FOOTER1		FOOTER3	"
						"BOTTOM			BOTTOM	"; 
						}

MAIN {					padding-left: 0rem;
						padding-right: 0rem;
						}
						
ASIDE { 				display: none;
						}
						
FOOTER2 { 				display: none;
						}

#START { 				grid-area: MAIN;
						display: block;				/**   1 Spalte - alles untereinander   **/
						background-color: white;
						text-align: center;
						}
						
.BILD_breit  {			display: block;				/**   mittig zentrieren mit marigin auto bei 'Block' Elementen  **/		
						margin-top: 1rem;
						margin-left: auto;
						margin-right: auto;
						width: 15rem;					/**   Bild wird breiter dargestellt (bei 960px sind es nur 10rem)  **/	
						}
						
.BILD_hoch  {			display: block;				/**   mittig zentrieren mit marigin auto bei 'Block' Elementen  **/		
						margin-top: 1rem;
						margin-left: auto;
						margin-right: auto;
						height: 7rem;
						}

.ARTIKEL { 				text-align: left;
						margin-left: 1.5rem;
						margin-right: 1.5rem;
						}
						

						
.BILD_verein  {			display: block;				/**   mittig zentrieren mit marigin auto bei 'Block' Elementen  **/		
						margin-top: 1.5rem;
						height: 7rem;
						}	
						
.ADRESSE { 				text-align: left;
						padding-left: 0px;
						}

	

#KSM { 					/* wird von oben 'KSM-Template' übernommen */						 			
						}
						
.subgrid_ksm {			/* section */
						display: grid;
						grid-template-rows: subgrid;
						grid-template-columns: 50% 50%;	
						grid-template-areas:
						"TABKOPF	TABKOPF	"
						"ITEM1		ITEM2	"
						"PHP		PHP		";
						grid-row: span 3;			/* 3 Zeilen in >> .subgrid_ksm << 	 */	
						margin-bottom: 3rem;		/* Abstand zur nächsten SECTION */	
						}
						
.subgrid_rwk {			/* section */
						display: grid;
						grid-template-rows: subgrid;
						grid-template-columns: 50% 50%;	
						grid-template-areas:
						"TABKOPF	TABKOPF	"
						"PHP		PHP		";
						grid-row: span 2;			/* 2 Zeilen in >> .subgrid_ksm << 	 */	
						margin-bottom: 3rem;		/* Abstand zur nächsten SECTION */	
						}
						
.ZIEL { 				display: none;
						}