/* === A L L   O V E R   T H E   W E B S I T E ================================================= */
/*
 *  Wichtig für RESPONSIVE GRID (@media ..)  (siehe auch java/global.js)
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *  breakPoint_0 = 1680		weit
 *  breakPoint_1 = 1280		normal
 *  breakPoint_2 =  980		schmal
 *  breakPoint_3 =  840		schmaler
 *  breakPoint_4 =  736		mobil
 *  breakPoint_5 =  480		mobil (hochkant)
 *
 *
 *
 *  z-index - Plazierung überlappender Objekte (Boxen) / stack order
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *  Kleinster Index  =>  Box im Hintergrund
 *  Je größer der Index umso weiter ist die Box im Vordergrund.  
 *
 *  +---------+----------------------------------------------------+
 *  | z-index | O b j e k t                                        |
 *  |---------|----------------------------------------------------|
 *  |    0    | grid-container                                     |
 *  |---------|----------------------------------------------------|
 *  |   1-7   | Bilder-Gallerie: 7 Netzentwürfe auf der Startseite |
 *  |---------|----------------------------------------------------|
 *  |    8    | aktives Bild aus o.a. Bilder-Gallerie              |
 *  |---------|----------------------------------------------------|
 *  |    9    | header, nav inkl. Submenüs (s. auch 11)            |
 *  |---------|----------------------------------------------------|
 *  |   10    | modales grid-overlay                               |
 *  |         | Wenn aktiv, bekommt nav temporär den z-index 11.   |
 *  |---------|----------------------------------------------------|
 *  |   11    | für nav bei aktiviertem modalen grid-overlay       |
 *  +---------+----------------------------------------------------+
 *
 *  Sollte die Anzahl der Bilder auf der Startseite erhöht werden,
 *  müssen die folgenden Indizes analog erhöht werden! 
 */
 
 

html, input, textarea {
    box-sizing:      border-box;
	font-family:     arial, sans-serif;
	font-size:       100%;               /* standard: 1em = 16px */
	font-weight:     300;
	text-decoration: none;
}

textarea {
    resize: none;
}

	input:focus, textarea:focus {
		color:       rgba(0, 74, 128, 1);
		font-weight: 600;
	}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	background-image:      linear-gradient(0deg, rgba(64, 64, 64, 1), rgba(255, 255, 255, 1));
	background-attachment: fixed;
	margin:                0;
	overflow:              auto;
}

div.zweifach_zentrieren_aussen {
	display:          table;
	position:         fixed;
	background-color: rgba(0, 0, 64, 1);
	width:            100%;
	height:           100%;
}

div.zweifach_zentrieren_mitte {
	display:        table-cell;
	vertical-align: middle;
}

div.zweifach_zentrieren_innen {
	text-align: center;
}

a {
	-moz-transition:    color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
	-ms-transition:     color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
	transition:         color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
	
	color: 				rgba(0, 74, 128, 1);
}

	a:link, a:visited { 
		text-decoration: none; 
		color:           rgba(0, 74, 128, 1);
	}

	a:hover {
		text-decoration: underline;
	} 

p.anf {	margin-top:             }
p.end { margin-bottom: 3.125em; }

p.ueb-1-ls {
	margin-top:     0;
	font-size:      1.75em;
	letter-spacing: 1px;  
}

p.ueb-1 {
	margin-top:     0;
	font-size:      1.75em;
}

p.ueb {
	margin-top:     0;
	font-size:      1.375em;
}

strong {
	/* wichtiger Text */
    font-weight: 600;
}

cite {
	/* Titel eines Werks */
    font-style: italic;
}

em {
	/* hervorgehobener Text */
    font-style: italic;
}
    
.modal {
    display:          none;
    position:         fixed;
    z-index:          10;
    padding-top:      100px;
    left:             0;
    top:              0;
    width:            100%;
    height:           100%;
    overflow:         auto;
    background-color: rgb( 0, 0, 0);        /* Fallback color */
    background-color: rgba(0, 0, 0, 0.6);
    cursor:           not-allowed;
}

#toTop {
	width:  25px;
    height: 25px;
}

	#toTop:hover {
		opacity: 0.6; 
	}

.zentriert {
	text-align: center;
}

/* === A L L   O V E R   T H E   W E B S I T E (Ende) ========================================== */




/* === G R I D - L A Y O U T =================================================================== */
/*
 *     inner-width <= breakPoint_x  =>  Responsive grid design (s. unten) 
 *
 *     width <= 1280 pixel (80.0 em) ~~~~~~~~~        width <= 840 pixel (52.5 em) ~~~~~~~~~~     
 *
 *     +-------------------------------------+        +---------+---------------------------+
 *     | header                              |        |         | header                    |
 *     |                                     |        |         |---------------------------|
 *     |-------------------------------------|        |         |                           |
 *     | nav                                 |        |         |                           |
 *     |-------------------------------------|        |         |                           |
 *     |                                     |        | nav     | main                      |
 *     | main                                |        |         |                           |
 *     |                                     |        |         |                           |
 *     |                                     |        |         |                           |
 *     |-------------------------------------|        |         |---------------------------|
 *     | footer                              |        |         | footer                    |
 *     +-------------------------------------+        +---------+---------------------------+
 *     
 */


/* --- G R I D - L A Y O U T - C O N T A I N E R ----------------------------------------------- */
 
#grid {
	
	display: grid;   
	display: -ms-grid;

	
	grid-template-columns: 1fr minmax(min-content, max-content);   
	-ms-grid-columns:      1fr minmax(min-content, max-content);

	 	
	grid-template-areas: 'header header' 
						 'nav    nav' 
						 'main   main' 
						 'footer footer' ;
						 
	max-width:            80.0em;
	width:                100%;
	margin:               0 auto;
	padding:              0;
}
	
	#grid > #main {
		
		background-color: #ffffff;
	}

/* --- G R I D - L A Y O U T - C O N T A I N E R (Ende) -----------------------------------------*/



/* --- H E A D E R ----------------------------------------------------------------------------- */

#header {
	
	grid-area: header;
	
  	-ms-grid-row:         1; 
	-ms-grid-column:      1;
	-ms-grid-column-span: 2; 
	
	height:     9.375em;
	width:      100%;
	background: -moz-radial-gradient(   rgba(0, 119, 204, 1), rgba(0, 74, 128, 1));
	background: -webkit-radial-gradient(rgba(0, 119, 204, 1), rgba(0, 74, 128, 1));
	background: -ms-radial-gradient(    rgba(0, 119, 204, 1), rgba(0, 74, 128, 1));
	background: linear-gradient(        rgba(0, 119, 204, 1), rgba(0, 74, 128, 1));
	z-index: 	9;   
}

	#header table {
		height:              100%;
		width:               100%;
		background-image:    url(../bilder/header_brille.png);   /*  Höhe: max. 150px ! */
		background-position: right center;
		background-repeat:   no-repeat;
	}

		#header table td {
			padding:        0 25px;
			color:          rgba(255, 255, 255, 1);
			font-style:     italic;
			font-size:      3.0em;
			white-space:    nowrap;
			letter-spacing: 0.0625em;
			text-shadow:    1px 1px 0px hsla(0, 0%, 70%, 1), 
						    2px 2px 0px hsla(0, 0%, 60%, 1), 
						    3px 3px 0px hsla(0, 0%, 50%, 1), 
				        	4px 4px 0px hsla(0, 0%, 40%, 1), 
						    5px 5px 0px hsla(0, 0%, 30%, 1);
		}

			#nav-button {
			    display:             none;
			    width:               37px;
			    height:              25px;
			    margin:              0 15px 10px 0;
			    background-color:    inherit;
			    background-color:    transparent;
			    background-image:    url(../bilder/nav_zeigen.gif);
				background-position: center center;
				background-repeat:   no-repeat;
		    	border:              0;
				text-align:          center;
				vertical-align:      middle;
			    cursor:              pointer;
			}
			
/* --- H E A D E R (Ende) ---------------------------------------------------------------------- */



/* --- N A V ----------------------------------------------------------------------------------- */

/*
	.aktuell {
		font-weight: 600;
	}
*/

	#nav {
		grid-area: nav;
	
  		-ms-grid-row:         2; 
		-ms-grid-column:      1;
		-ms-grid-column-span: 2; 

		height:     3.125em;           /*  1/3 des Headers  */  
		width:      100%;
	    margin:     0;
    	padding:    0;
    	z-index:    9;
       	float:      none;
		outline:    0;
	}

		#nav:after {
			content:          '';
			display:          block;
			width:            100%;
			height:           0.75em;
			margin:           0;
			background-color: rgba(0, 74, 128, 1);
			box-shadow:       0 0.5em 1em rgba(0, 0, 0, 0.5);
		}

		#nav > ul {
			background-color: rgba(64, 64, 64, 1);
			background-image: -moz-linear-gradient(   top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
			background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
			background-image: -ms-linear-gradient(    top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
			background-image: linear-gradient(        top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
			height:           100%;
			width:            100%;
			margin:           0;
			padding:          0;
		}

			#nav > ul > li:first-child {
				display:           none;
				background-color:  rgba(192, 192, 192, 1);
			}
					#nav > ul > li:first-child > a {
						text-align:      right; 
						color:           rgba(0, 0, 0, 1);
						text-decoration: none;
						cursor:          pointer;
					}
								
			#nav > ul > li {
				margin:   0;
				padding:  0;
				position: relative;
				display:  inline-block;
			}

				#nav > ul > li > a {
					color:           rgba(192, 192, 192, 1);
					text-decoration: none;
					border:          0;
					display:         block;
					margin:          0;
					padding:         1em 1.25em;
				}

				#nav > ul > li:hover > a {
					color: rgba(255, 255, 255, 1);
				}

				#nav > ul > li.aktuell > a {
					color:       rgba(255, 255, 255, 1);
					font-weight: 600;
				}

					#nav > ul > li.aktuell:before {
						-moz-transform:    rotateZ(45deg);
						-webkit-transform: rotateZ(45deg);
						-ms-transform:     rotateZ(45deg);
						transform:         rotateZ(45deg);
						width:             0.75em;
						height:            0.75em;
						content:           '';
						display:           block;
						position:          absolute;
						bottom:            -0.375em;
						margin-left:       -0.375em;
						left:              50%;
						background-color:  rgba(0, 74, 128, 1);
					}

						#nav > ul > li > ul {
							display:          none;
							background-color: rgba(64, 64, 64, 1);
							background-image: -moz-linear-gradient(   top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), url("bilder/bg01.png");
							background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), url("bilder/bg01.png");
							background-image: -ms-linear-gradient(    top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), url("bilder/bg01.png");
							background-image: linear-gradient(        top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), url("bilder/bg01.png");
							list-style-type:  none;
							margin:           -0.75em 0 0 0;
							padding:          0;
						    position:         absolute;
							border-radius:    0 0 0.375em 0.375em;
							box-shadow:       0.625em 0.625em 1em rgba(0, 0, 0, 0.5);
					    	z-index:          9;
						}

						#nav > ul > li:hover > ul {
							display: block;
						}
						
						#nav > ul > li.aktuell:hover > ul {
							display: block;
						}

							#nav > ul > li > ul > li:first-child {
								margin-top: 0.75em;
							}

								#nav > ul > li > ul > li > a {
									color:           rgba(192, 192, 192, 1);
								    display:         block;
								    text-align:      left;
									padding:         1em 1.5em;
								    text-decoration: none;
								}

								#nav > ul > li > ul > li > a:hover {
									color: rgba(255, 255, 255, 1);
								}

								#nav > ul > li > ul > li.aktuell > a {
									color:       rgba(255, 255, 255, 1);
									font-weight: 600;
								}
			
/* --- N A V (Ende) ---------------------------------------------------------------------------- */



/* --- M A I N --------------------------------------------------------------------------------- */

/* ~~~ M A I N - all over ~~~ */
 
#main {
	grid-area: main;   
	
  	-ms-grid-row:   		3; 
	-ms-grid-column: 		1;
	-ms-grid-column-span: 	2; 
	
	padding: 35px 25px;	
}
	
	#main p.main_strip {
		width:            100%;
		line-height:      3.125em;
		background-color: rgba(  0, 74, 128, 1);
		color:            rgba(255, 255, 255, 1);
		font-size:        1.5em;
		letter-spacing:   1px;
		padding-left:     0.625em;
		margin-top:       0;
	}



/* ~~~ M A I N - start ~~~ */

	.start {
		max-width: 810px;	
		display:   -webkit-flex;
		display:   -ms-flex;
		display:   flex;
		flex-flow: row wrap;

		height:              100%;
		width:               100%;
		background-image:    url(../bilder/intro.png); 
		background-position: top left;
		background-repeat:   no-repeat;
		background-size: 	 cover;
	}






/* ~~~ M A I N - Beschreibung ~~~ */


	#administration          { width: 400px; height: 288px; border: 0; cursor: pointer; transition: 0.3s; }	         #administration:hover { opacity: 0.3; }          #administration-g-content { max-width: 800px; max-height: 576px; border: 0; display: block; }
	#dokumente               { width: 400px; height: 200px; border: 0; cursor: pointer; transition: 0.3s; }	              #dokumente:hover { opacity: 0.3; }               #dokumente-g-content { max-width: 800px; max-height: 400px; border: 0; display: block; }
	#faecher                 { width: 400px; height: 231px; border: 0; cursor: pointer; transition: 0.3s; }	                #faecher:hover { opacity: 0.3; }                 #faecher-g-content { max-width: 800px; max-height: 462px; border: 0; display: block; }
	#ferientage              { width: 400px; height: 288px; border: 0; cursor: pointer; transition: 0.3s; }	             #ferientage:hover { opacity: 0.3; }              #ferientage-g-content { max-width: 800px; max-height: 576px; border: 0; display: block; }
	#fotoliste               { width: 400px; height: 252px; border: 0; cursor: pointer; transition: 0.3s; }	              #fotoliste:hover { opacity: 0.3; }               #fotoliste-g-content { max-width: 800px; max-height: 504px; border: 0; display: block; }
	#funktionsumfang         { width: 400px; height: 288px; border: 0; cursor: pointer; transition: 0.3s; }     	#funktionsumfang:hover { opacity: 0.3; }         #funktionsumfang-g-content { max-width: 800px; max-height: 576px; border: 0; display: block; }
	#kalender_lue            { width: 400px; height: 288px; border: 0; cursor: pointer; transition: 0.3s; }	           #kalender_lue:hover { opacity: 0.3; }            #kalender_lue-g-content { max-width: 800px; max-height: 576px; border: 0; display: block; }
	#lerngruppen             { width: 400px; height: 231px; border: 0; cursor: pointer; transition: 0.3s; }	            #lerngruppen:hover { opacity: 0.3; }             #lerngruppen-g-content { max-width: 800px; max-height: 462px; border: 0; display: block; }
	#notizen                 { width: 400px; height: 288px; border: 0; cursor: pointer; transition: 0.3s; }	                #notizen:hover { opacity: 0.3; }                 #notizen-g-content { max-width: 800px; max-height: 576px; border: 0; display: block; }
	#schueler_daten          { width: 400px; height: 288px; border: 0; cursor: pointer; transition: 0.3s; }	         #schueler_daten:hover { opacity: 0.3; }          #schueler_daten-g-content { max-width: 800px; max-height: 576px; border: 0; display: block; }
	#stundenplan             { width: 400px; height: 288px; border: 0; cursor: pointer; transition: 0.3s; }	            #stundenplan:hover { opacity: 0.3; }             #stundenplan-g-content { max-width: 800px; max-height: 576px; border: 0; display: block; }
	#unterrichtsvorbereitung { width: 400px; height: 282px; border: 0; cursor: pointer; transition: 0.3s; }	#unterrichtsvorbereitung:hover { opacity: 0.3; } #unterrichtsvorbereitung-g-content { max-width: 800px; max-height: 564px; border: 0; display: block; }


	.entwurf-table {
		position:  relative;
		max-width: 400px;
		width:     100%;	
		}
		.entwurf-table-cell {
			display:    bock;
			max-width:  400px;
			text-align: center;
			}

	    
	.entwurf-overlay {
	    display:          none;
	    position:         fixed;
	    z-index:          100;
	    padding-top:      100px;
	    text-align:       center;
	    left:             0;
	    top:              0;
	    width:            100%;
	    height:           100%;
	    overflow:         auto;
	    background-color: rgba(64, 64, 64, 0.95);
		background-image: -moz-linear-gradient(   left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
		background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
		background-image: -ms-linear-gradient(    left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
		background-image: linear-gradient(        left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
	}
		
		.entwurf-overlay-caption {
		    margin:     auto;
		    display:    block;
		    z-index:    101;
		    width:      80%;
		    max-width:  800px;
		    text-align: center;
		    color:      rgba(224, 224, 224, 1);
		    padding:    10px 0;
		    height:     150px;
		}
	
		.entwurf-overlay-content {
		    display:    block;
			margin:     -2em auto auto auto;
		    max-width:  800px;
		    width:      98%;
		}
	
		.entwurf-overlay-content, .entwurf-overlay-caption {
		    animation-name:     entwurf-zoom;
		    animation-duration: 750ms;
		}
	
			@keyframes entwurf-zoom {
			    from { transform:scale(0) }
			    to   { transform:scale(1) }
			}
	
		.entwurf-overlay-close {
		    position:    absolute;
		    top:         15px;
		    right:       35px;
		    color:       rgba(192, 192, 192, 1);
		    font-size:   4em;
		    transition:  0.3s;
		}
		
		.entwurf-overlay-close:hover,  .entwurf-overlay-close:focus {
		    color:           rgba(255, 255, 255, 1);
		    text-decoration: none;
		    cursor:          pointer;
		}



/* ~~~ M A I N - Kontakt ~~~ */

	/*
	#prgGUI-table {
		width:           770px;
		border:          0 solid red;
		border-collapse: collapse;
		line-height:     0;
		border-spacing:  0;
		padding:         0;
		margin:          0;
	}
	
		#prgGUI-table tr, #prgGUI-table td  {
			border:          0 solid red;
			border-collapse: collapse;
			border-spacing:  0;
			padding:         0;
			margin:          0;
		}
		
	.m602-1        { width: 770px; height:  56px; border: 0; margin: 0; padding: 0; }
	.m602-2-aa-btn { width:  13px; height:  30px; border: 0; margin: 0; padding: 0; }
	.m602-2-tb-btn { width:  31px; height:  30px; border: 0; margin: 0; padding: 0; }
	.m602-2-sp-btn { width:   8px; height:  30px; border: 0; margin: 0; padding: 0; }
	.m602-2-zz-btn { width:  42px; height:  30px; border: 0; margin: 0; padding: 0; }
	.m602-3        { width: 770px; height: 768px; border: 0; margin: 0; padding: 0; }
	*/
		
		
	#hrefCursor  {
		cursor: pointer;
	}
	
	#prgGUI-img  { 
		max-width:  770px; 
		max-height: 859px; 
		border:     0; 
		display:    block; 
	}

	#input_label_frau {
		margin-left: 1.25em;
	}
	
	#input_vorname, #input_nachname, #input_email, #input_email_match {
		width:  15em;
		margin: 0;
	}

	#input_countLizenz {
		width:  6em;
		margin: 0;
	}
		
	#input_msg {
		width:  30em;
		margin: 0;
	}



/* ~~~ M A I N - Sitemap ~~~ */

	#sitemap {
		color: black;
	}
		#sitemap a {
			color: black;
	 	}
			#sitemap a:hover {
				color: rgba(0, 74, 128, 1);
		 	}
		#sitemap ul {
	 		list-style-type: none;
	 	}
			#sitemap ul ul {
		 		margin-top:    0.4em;
		 		margin-bottom: 0.4em;
		 		font-size:     0.8em;
		 	}

/* --- M A I N (Ende) -------------------------------------------------------------------------- */



/* --- F O O T E R ----------------------------------------------------------------------------- */

#footer {
	
	grid-area: footer;
	
  	-ms-grid-row:         4; 
	-ms-grid-column:      1;
	-ms-grid-column-span: 2; 
	
	min-height: 3.125em;  
}
#footer > table {

	width:            100%;
	table-layout:     fixed;
	padding:          0 10px;
	background-color: rgba(64, 64, 64, 1);
	background-image: -moz-linear-gradient(   top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
	background-image: -ms-linear-gradient(    top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
	background-image: linear-gradient(        top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
	box-shadow:       0 0.5em 1em rgba(0, 0, 0, 0.5);
}

	#footer > table td {
		padding:        15px;
		text-align:     center; 
		vertical-align: top;
	}

#footer font {
	font-size:       0.875em;
	text-decoration: none; 
	color:           rgba(192, 192, 192, 1);	
}

#footer a:link, #footer a:visited { 
	color: rgba(192, 192, 192, 1);
}

#footer a:hover {
	color: rgba(255, 255, 255, 1);
	text-decoration: none;
}

#footer a:hover font {
	-moz-transition:    color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
	-ms-transition:     color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
	transition:         color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
	color: rgba(255, 255, 255, 1);
}
/* --- F O O T E R (Ende) ---------------------------------------------------------------------- */



/* === G R I D - L A Y O U T (Ende) ============================================================ */





/* === S T I C K Y   N A V / H E A D E R ======================================================= */

@supports (position: sticky) or (position: -webkit-sticky) {
	
	@media screen and (min-width: 841px) {
	
		#nav {
    		position: sticky; 
    		position: -webkit-sticky;
    		top:      0;
			z-index:  9;
		}
	}
	
	
	@media screen and (max-width: 840px) {
	
		#header {
			position:  sticky; 
			position: -webkit-sticky;
    		top:       0;
			z-index:   9;
		}
	}
}
/* === S T I C K Y - N A V (Ende) ============================================================== */





/* === R E S P O N S I V E   W E B - D E S I G N =============================================== */
/*
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   "schmal":  innerWidth <= 980 pixel
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
	@media screen and (max-width: 980px) {
	 
		
		html { 
			/* 16px -> 14px  */
			font-size: 87.5%;
		}
		
		#nav > ul > li > a {
			padding: 15px 15px;
		}
		
		#nav > ul > li.aktuell:before {
			bottom: -0.125em;
		}
	}


/*
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   "schmaler":  innerWidth <= 840 pixel
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
	@media screen and (max-width: 840px) {
	    
	    #grid {
			grid-template-columns: 	auto 1fr;
			-ms-grid-columns:       auto 1fr;
			
			grid-template-areas:   'nav header'
							       'nav main'
							       'nav footer' ;
	    }
		
		#header {
			-ms-grid-row:    1; 
			-ms-grid-column: 2;
		}
		
			#header table {
				background-image: none;
			}
		
			#header:after {
				content:          '';
				display:          block;
				width:            100%;
				height:           0.75em;
				margin:           0;
				background-color: rgba(64, 64, 64, 1);
				box-shadow:       0 0.5em 1em rgba(0, 0, 0, 0.5);
				z-index:          9;
			}
	
	    #nav-button {
	        display:          inline-block;
	       	background-color: inherit;
	       	padding:          0 10px 0 0;
	        border:           none;
	        cursor:           pointer;
	    }
	
		#nav {
			-ms-grid-row:      1; 
			-ms-grid-column:   1;
			-ms-grid-row-span: 3; 
			
			display:    none;
			box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.5);
	
			position:   fixed;
			height:	    100%;
			width:      17.5em;
			max-width:  17.5em;
			z-index:    11;
			overflow:   auto;
			animation:  navAnimateOpen 0.4s;
			
		}
	
		@keyframes navAnimateOpen {
			from { left: -17.5em; opacity: 0 }
		  	to   { left:       0; opacity: 1 }
		}
		
			#nav:after {
				display: none;
			}
	
			#nav > ul {
				background-color: rgba(64, 64, 64, 1);
				background-image: -moz-linear-gradient(   left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
				background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
				background-image: -ms-linear-gradient(    left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
				background-image: linear-gradient(        left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
			}
	
				#nav > ul > li {
					display: block;
					background-color: rgba(64, 64, 64, 1);
					background-image: -moz-linear-gradient(   left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
					background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
					background-image: -ms-linear-gradient(    left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
					background-image: linear-gradient(        left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url("bilder/bg01.png");
				}
	
				#nav > ul > li:first-child {
					display: block;
				}
	
				#nav > ul > li.aktuell:before {
					display: none;
				}
	
					#nav > ul > li > ul {
						margin-left: 10px;
						z-index: 11;	
					}
	
		#gallery {
			width: 100%;            
		}
	
		#main {
			-ms-grid-row:    2; 
			-ms-grid-column: 2;
		}
	
		#footer {
			-ms-grid-row:    3; 
			-ms-grid-column: 2;
		}
	
		#footer table td {
			display: block;
		}
	}


/*
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   "mobil (hochkant)":  innerWidth <= 480 pixel
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
	@media screen and (max-width: 480px) {
	
	
		#header {
			height: 6.25em;
		}
		
			#header table {
				background-image: none;
			}
		
				#header table td {
					padding:        0 15px;
					font-size:      2.0em;
					letter-spacing: 1px;
				}

			#nav-button {
			    margin: 5px 15px 10px 0;
			}
	}
/* === R E S P O N S I V E   W E B - D E S I G N (Ende) ======================================== */