/* Diese CSS ist für die Webseite Jahrgang 1954 Albstadt */
	body		
		@font-face {font-family: Eras Bold ITC;
		src: url(/fonts/ERASBD.otf) format("opentype")}
	
	{font-family: "Lucida Grande", sans-serif; font-size: 1rem; color: #515151; width: 98%; margin-top: 0rem;
    /* background-color:#eeeceb; */}
	
		/*  Typing animation */
		@keyframes typing {from { width: 0 }}
		@keyframes caret {50% { border-right-color: transparent; }}
	article {font-size: 1.6rem;}	
		#ueber1, #ueber2, #ueber3 {font: bold 1.7rem Consolas, Monaco, monospace; color: red; width: 59ch; max-width: 100%; white-space: nowrap; overflow: hidden; 
		border-right: .05rem transparent; animation: typing 8s steps(59), caret 1s steps(1) infinite;}
		#ueber4 {margin-bottom: 4rem;}
		/* Ende Typing animation */
		
		#wrapper {width: 100%; display: flex; flex-direction: row;}
		#stammtischzeiger, #ruecksprung {display: none;}
		#linke_spalte {order: 1;}
		#mitte {order: 2;}
		#rechte_spalte {order: 3;}

		#linke_spalte {display: block; width: 12%; font-size: 0.875rem;}

		#mitte {width: 65%; display: block;}
		#b60_mitte {margin-left: 15%;}
		#rechte_spalte {width: 19%; border: 1px hidden; margin-left: 1.5rem;}
		#kopf, #kopf60, #kopf2004 {color: #8EAADB; font-size: 2.8rem; text-align: center; margin: 2rem 0 5rem 0;}

		#kopf {width: 40%; margin: 0 auto 0 auto; display: flex; flex-direction: row; justify-content: space-between;}
		#kopftext {padding-top: 50px; font-family: Eras Bold ITC; text-shadow: 1px 1px blue, -1px -1px black;}
		#figur1, #figur2 {display: block; width: 20%;}
		#gruppe60 {max-width: 98%;}
		#logo60 {max-width: 98%;}
		#gruppe1, #gruppe2, #montage {width: 100%;}
	footer {margin-left: 22%; width: 64%;}

@media screen and (max-width: 1250px) {
	
		#kopf{width: 65%;}
}

@media screen and (max-width: 768px) {
	body {width: 98%; font-size: 100%;}
		#stammtischzeiger, #ruecksprung {display: block;}
		#kopf, #kopf60, #kopf2004 {margin-top: -4%;}
		/*  Typing animation */
		@keyframes typing {from { width: 0 }}
		@keyframes caret {50% { border-right-color: transparent; }}
		
		#ueber1, #ueber2, #ueber3, #ueber4 {font: bold 1.7rem Consolas, Monaco, monospace; color: red; width: 59ch; white-space: nowrap; overflow: hidden; 
		border-right: .05rem transparent; animation: typing 8s steps(59), caret 1s steps(1) infinite;}
		#ueber4 {margin-bottom: 4rem;}
		/* Ende Typing animation */
		#wrapper {flex-direction: column;}
		#linke_spalte {display: none;}
		#rechte_spalte {width: 95%;}		
		#kopf, #kopf60, #kopf2004 {color: #8EAADB; font-size: 2.8rem; text-align: center; margin: 2rem 0 5rem 0;}
		#mitte {width: 97%;}
		#b60_mitte {margin-left: 0%;}
		#kopftext { margin: 1%;}
		#kopf{width: 90%; margin: 0 auto 0 auto;}
		#gruppe60 {max-width: 98%;}
		#logo60 {max-width: 98%;}
	footer {margin: 0; width: 98%;}
	}
	
@media screen and (max-width: 414px) {
	body {width: 98%; font-size: 100%;}
		
		#stammtischzeiger, #ruecksprung {display: block;}
		#kopf, #kopf60, #kopf2004 {margin-top: -4%;}
		#wrapper {flex-direction: column;}
		/*  Typing animation */
		@keyframes typing {from { width: 0 }}
		@keyframes caret {50% { border-right-color: transparent; }}
		
		#ueber1, #ueber2, #ueber3, #ueber4 {font: bold 1.3rem Consolas, Monaco, monospace; color: red; width: 59ch; white-space: nowrap; overflow: hidden; 
		border-right: .05rem transparent; animation: typing 8s steps(59), caret 1s steps(1) infinite;}
		#ueber4 {margin-bottom: 4rem;}
		/* Ende Typing animation */
		
		#kopf, #kopf60, #kopf2004 {color: #8EAADB; font-size: 2rem; text-align: center; margin: 1.5rem 0 2rem 0;}
		#linke_spalte {display: none;}
		#rechte_spalte {width: 95%; margin-left: 2%;}
		#mitte {width: 97%;}
		#b60_mitte {margin-left: 0%;}
		#kopftext { margin: 1%;}
		#kopf {width: 100%; }
		#gruppe60 {max-width: 98%;}
		#logo60 {max-width: 98%;}
	footer {margin: 0; width: 98%;}
	}