/* /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
/* ----------------------------------------- CSS-Reset Ende ----------------------------------------- */

/* --- Default CSS Value --- */
a:link	{
	text-decoration: underline;
	cursor: auto;
	}
a:visited {	
	text-decoration: underline;
	cursor: auto;
	}
address	{
	display: block;
	font-style: italic;
	}
area {
	display: none;
	}
article	{
	display: block;
	}
aside	{
	display: block;
	}
b	{
	font-weight: bold;
	}
bdo	{
	unicode-bidi: bidi-override;
	}
blockquote {
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 40px;
	margin-right: 40px;
	}
body	{
	display: block;
	margin: 8px;
	}
body:focus body	{
	display: block;
	margin: 8px;
	outline:none; 
	}
caption	{
	display: table-caption;
	text-align: center;
	}
blockquote {
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 40px;
	margin-right: 40px;
	}
cite	{
	font-style: italic;
	}
code	{
	font-family: monospace;
	}
col	{
	display: table-column;
	}	
colgroup {
	display: table-column-group;
	}
dd	{
	display: block;
	margin-left: 40px;
	}
del	{
	text-decoration: line-through;
	}
details	{
	display: block;
	}
dfn	{
	font-style: italic;
	}
div	{
	display: block;
	}
dl	{
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	}
dt	{
	display: block;
	}
em	{
	font-style: italic;
	}
embed:focus {
	outline: none;
	}
fieldset {
	display: block;
	margin-left: 2px;
	margin-right: 2px;
	padding-top: 0.35em;
	padding-bottom: 0.625em;
	padding-left: 0.75em;
	padding-right: 0.75em;
	border: 2px groove gray;
	}
figcaption {
	display: block;
	}
figure	{
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 40px;
	margin-right: 40px;
	}
footer {
	display: block;
	}
form {
	display: block;
	margin-top: 0em;
	}
h1 {
	display: block;
	font-size: 2em;
	margin-top: 0.67em;
	margin-bottom: 0.67em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	}
h2 {
	display: block;
	font-size: 1.5em;
	margin-top: 0.83em;
	margin-bottom: 0.83em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	}
h3 {
	display: block;
	font-size: 1.17em;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	}
h4 {
	display: block;
	margin-top: 1.33em;
	margin-bottom: 1.33em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	}
h5 {
	display: block;
	font-size: .83em;
	margin-top: 1.67em;
	margin-bottom: 1.67em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	}
h6 {
	display: block;
	font-size: .67em;
	margin-top: 2.33em;
	margin-bottom: 2.33em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	}
header {
	display: block;
	}
hr {
	display: block;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: auto;
	margin-right: auto;
	border-style: inset;
	border-width: 1px;
	}
html {
	display: block;
	}
html:focus {
	outline: none;
	}
i {
	font-style: italic;
	}
iframe:focus {
	outline:none ;
	}
iframe[seamless] {
	display: block;
	}
img {
	display: inline-block;
	}
ins {
	text-decoration: underline;
	}
kbd {
	font-family: monospace;
	}
label {
	cursor: default;
	}
legend {
	display: block;
	padding-left: 2px;
	padding-right: 2px;
	border: none;
	}
li {
	display: list-item;
	}
link {
	display: none;
	}
map {
	display: inline;
	}
mark {
	background-color: yellow;
	color: black;
	}
menu {
	display: block;
	list-style-type: disc;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	padding-left: 40px;
	}
nav {
	display: block;
	}
object:focus {
	outline:none ;
	}
ol {
	display: block;
	list-style-type: decimal;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	padding-left: 40px;
	}
output {
	display: inline;
	}
p {
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	}
param {
	display:none;
	}
pre {
	display: block;
	font-family: monospace;
	white-space: pre;
	margin: 1em 0;
	}
q {
	display: inline;
	}
q::before {
	content: open-quote;
	}
q::after {
	content: close-quote;
	}
rt {
	line-height: normal;
	}
s {
	text-decoration: line-through;
	}
samp {
	font-family: monospace;
	}
section {
	display: block;
	}
small {
	font-size: smaller;
	text-decoration: line-through;
	}
strong {
	font-weight: bold;
	}
sub {
	vertical-align: sub;
	font-size: smaller;
	}
summary {
	display: block;
	}
sup {
	vertical-align: super;
	font-size: smaller;
	}
table {
	display: table;
	border-collapse: separate;
	border-spacing: 2px;
	border-color: gray;
	}
tbody {
	display: table-row-group;
	vertical-align: middle;
	border-color: inherit;
	}
td {
	display: table-cell;
	vertical-align: inherit;
	}
tfoot {
	display: table-footer-group;
	vertical-align: middle;
	border-color: inherit;
	display:none;
	}
tr {	display: table-row;
	vertical-align: inherit;
	border-color: inherit;
	}
u {
	text-decoration: underline;
	}
ul {
	display: block;
	list-style-type: disc;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	padding-left: 40px;
	}
var {
	font-style: italic;
	}

/* --- Default CSS Value --- */




/* --- Grundeinstellungen Stadtchronik --- */
/* --- Grundeinstellungen Stadtchronik --- */
	
body {
	width: 100%;
	color: #4B4B4B; 
	font-family: 'Open Sans', Raleway, sans-serif;
	font-weight:400;
	font-style: italic;
	font-size: 80% ;
	letter-spacing: 0.1em;
	background: linear-gradient(to bottom right, #B79B5E, white);
	padding: 0;
	margin: 0;
	}
	
/* Formularbereiche */

#startpage {
	min-height: 100vh;
	}

header {
	width: 93%;
	height: auto;
	} 

main {
	width: 93%;
	height: auto;
	
	}	
.page-wrapper {
	width: 100%;
	}
	
section {
	width: 100%;
	margin: 2% 0% 2% 0%;
	padding: 2% 2%; 
	background: linear-gradient(to bottom right, #B79B5E, lightyellow);
	box-shadow: 0.3em 0.3em 0.3em gray;
	border-radius: 1em;
	}
	
/* --- Überschriften --- */
 h1 {
	font-size: 1.5em;
	margin: 2em;
	color: darkred;
	}
h2 {
	font-size: 1.2em;
	margin: 2em;
	}
	
/* --- automatische Silbentrennung /funktioniert nicht in Chrom ---*/
p {
	hyphens: auto;
	}
	
hr {
	clear: both;
	}
	

section h1 {
	color: darkred;
	border: 0.01em solid lightgray;
	background: linear-gradient(to bottom right, #B79B5E, white);
	box-shadow: 0.3em 0.3em 0.3em gray;
	text-shadow: 0.3em 0.3em 0.3em gray;
	border-radius: 1em;
	text-align: center;	
	width: 50%;
	margin: 4% auto;
	padding: 2%;
	}	

section h2 {
	width: 60%;
	color: brown;
	background: linear-gradient(to bottom right, #B79B5E, white);
	box-shadow: 0.3em 0.3em 0.3em gray;
	text-shadow: 0.1em 0.1em 0.1em gray;
	border-radius: 1em;
	margin: 2em auto;
	padding: 0.5em;
	text-align: center;
	}
	
section h3 {
	width: 60%;
	color: darkred;
	background: linear-gradient(to bottom right, #B79B5E, white);
	box-shadow: 0.3em 0.3em 0.3em gray;
	text-shadow: 0.1em 0.1em 0.1em gray;
	border-radius: 1em;
	margin: auto;
	padding: 0.5em;
	text-align: center;
	}	
/* --- Verlauf mit braun als Hintergrund --- */
header section h3 {
	background: linear-gradient(to bottom right, #B79B5E, white);
	}
	
article {
	padding: 2em;
	}

/* --- Kontaktformular --- */
#asidekontakt {
	width: 98%;
	height: auto;
	margin: 2%;
	} 
	
#asidekontakt  p {
	margin: 2%;
	}
	
/* -- Anmeldung --- */	
#anmeldung {
	margin: 2%;
	border-radius: 1em;	
	} 
	
/* --- Kontaktangaben, vorformatierte H-Überschriften ans Formular anpassen --- */

.kontakt_h1 {
	margin: 5% 2% 10% 2%;
	width: 93%;
	}
	
.kontakt_h2 {
	width: 80%;
	margin: 5% 0% 10% 2%;
	padding: 3%;
	text-align: center;
	font-size: 120% ;
	border-radius: 1em;	
	color: darkred;
	background: linear-gradient(to top left, #B79B5E 10%, lightyellow 100%);
	box-shadow: inset -10px 0px 10px -5px rgba(0,0,0,0.5);
	border-bottom: 1px solid gray;
	text-shadow: none;
	 }
	 
/* --- kurze Stadtgeschichte --- */
#kontakt_chronik_section {
	height: auto;
	}
	 
#kontakt_h2_chronik {
	width: 50%;
	margin: 5% 0% 0% 2%;
	}

#kontakt_chronik1 {
	margin: 1% 0% 0% 2%;
	width: 93%;
	}	
#kontakt_chronik2{
	width: 93%;
	}
	
#einleitung_article2  {
	width: 93%;
	}
	
/*--- Begriffserklärungen --- */	
abbr {
	color: darkblue;
	text-decoration: none;
	}
	
/* --- Pfeil (⇒)+ nbsp \00A0 + Leerzeichen vor Links + Abstand links --- */	

a[href]:before { 
	content: ' \a0\0021D2\00A0\a0\00A0'; 
	padding-left: 1em;
	}
	
/* --- Rückname des Pfeils für Navigationen --- */	
nav  a[href]:before { 
	content: ' \a0'; 
	padding-left: 1em;
	}
	
/* Hervorhebung der Begriffe */	
span{
	font-weight: bold;
	}

/* --- Bilder scalierbar --- */
img {
	width: 100%;
	height: auto;
	}

/* --- Bild mit max. Größe --- */	
.ausdruck {
	width: 20%;
	max-width: 100%;
	float: right;
	visibility: hidden;
	}
/*--- Rückname des Link Pfeils --- 	*/
.ausdruck a[href]:before { 
	content: ' \a0'; 
	}
picture {
	width: 100%;
	height: auto;
	}	
	
#wappen_kontakt {
	float: right;
	width: 10%;
	margin: 2% 6%;
	margin-bottom: 15%;
	padding: 1% ;
	border: 0.1em solid silver;
	box-shadow: 1em 1em 1em rgba(0,0,0,0.5);
	}

.fotos_kontakt {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-around;
	width: 30%;
	margin: 3%;
	border: 0.1em solid silver;
	box-shadow: 1em 1em 1em rgba(0,0,0,0.5);
	}
	
.fotos_kontakt source{
	flex: 1 1;
	}

.fotos_gallerie {
	float: left;
	position: relative;
	margin: 2%;
	width: 20% ;
	border: 0.1em solid silver;
	box-shadow: 1em 1em 1em rgba(0,0,0,0.5);
	}
	
#rathaus_kontakt {
	float: right;
	position: relative;
	width: 20% ;
	display: block;
	border: 0.1em solid silver;
	box-shadow: 1em 1em 1em rgba(0,0,0,0.5);
	}
	
#rathaus_startseite {
	float: right;
	position: relative;
	width: 20% ;
	display: block;
	border: 0.1em solid silver;
	box-shadow: 0.5em 0.5em 0.5em rgba(0,0,0,0.5);
	}
	
#visitenkarte1 {
	float: right;
	width: 10%;
	margin-right: 30%;
	padding: 1% ;
	border: 0.1em solid silver;
	box-shadow: 1em 1em 1em rgba(0,0,0,0.5);
	}
	
#visitenkarte2 {
	float: right;
	width: 10%;
	border: 0.1em solid silver;
	box-shadow: 1em 1em 1em rgba(0,0,0,0.5);
	}

/* --- Animation von Wappen, visitenkarte ... vergrößert, drehend --- */
#wappen_kontakt:hover {
	transform: rotate(360deg) scale(1.01);
	transition: all 3s cubic-bezier(0.5, 1, 0.5, 5);
	}

.fotos_kontakt:hover {
	transform-origin: left;
	transform: scale(3);
	transition: all 5s cubic-bezier(0.5, 1.5, 0.5, 1);
	}
	
.fotos_gallerie:hover {
	transform-origin: bottom left;
	transform: scale(2);
	transition: all 5s cubic-bezier(0.5, 1.5, 0.5, 1);
	}
	
#rathaus_kontakt:hover {
	transform-origin: top right;
	transform: scale(2);
	transition: all 5s cubic-bezier(0.5, 1.5, 0.5, 1);
	}
	
#rathaus_startseite:hover {
	transform-origin: top right;
	transform: scale(1.5);
	transition: all 5s cubic-bezier(0.3, 1.5, 0.5, 1);
	}
	
#visitenkarte1:hover {
	transform-origin: right;
	transform: scale(5);
	transition: all 5s cubic-bezier(0.5, 1.5, 0.5, 1);
}
	
#visitenkarte2:hover {
	transform-origin: bottom left;
	transform: scale(5);
	transition: all 5s cubic-bezier(0.5, 1.5, 0.5, 1);
}

/* --- Navigation Flexboxmenü --- */
ul {
	width: 80%;
	margin: 0.1em;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	}
  
li {
	width: 10em;
	padding: 0.3em 0.3em;
	flex: auto;
	border-radius: 1em;
	border: 0.1em solid silver;
	margin: 0.1em;
	}
  
li a {
	display: block;
	color: #000;
	padding: 0.3em 0.3em;
	width: 95%;
	font-weight: normal;
	text-align: center;
	border-radius: 1em;
	}
  
 /*--- Farbverlauf der Menuepunkte --- */
li {
	background: linear-gradient(to top left, #B79B5E 10%, 
	lightyellow 100%);
	box-shadow: inset -1em 0em 1em -0.5em rgba(0,0,0,0.3);
	border-bottom: 0.1em solid gray;
	}
  
li a:hover,
li a:focus,
li a:active {
	color: gray;
	border-radius: 1em;
	}
	
li a:active {
	color: darkred;
	border-radius: 1em;
	padding: 0.3em;
	}

a:link, a:visited {	
	text-decoration: none;
	} 

/* --- Eingabebereich Formular --- */
form {
	background-color: lightyellow;
	width: 98%;
	margin: 2% 2%; 			/* damit Formular oben anfängt und in die Mitte gelangt */
	text-align: left;
	border: 0.1em solid silver;
	border-radius: 1em;	
	box-shadow: inset -10px 0px 10px -5px rgba(0,0,0,0.3);
	}
	
/* -- Kontaktformular --- */		
#kontakt {
	margin: 2% 3%;
	}
	
fieldset {
	margin: 1%;
	padding: 3%;
	border-radius: 1em;	
	}
	
legend {
	margin: 3%;
	}

label {
	width: 100%;
	display: inline-block;
	text-align: left;
	margin: 1%;
	}

input, select, textarea {
	border: outset;
	border-bottom: 1px solid silver;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.5);	/* Box-Schatten */
	border-radius: 1em;						/* runde Eccken */
	width: 85%;
	margin:  0.5%;				/*Abstand zum nächsten Fenster */
	padding: 1% 5%;
	}
	
/* Massentexteingabe */
textarea {
	width: 94%;
	margin: 0.5%;				/*Abstand zum nächsten Fenster */
	padding: 1%;
	}
label textarea {
	vertical-align: top;      /* Bezeichnung soll nach oben */
	}
/* Auswahlfenster verlängern */
select {
	width: 96%;
	}
	
input[type="reset"] {
	width: 97%;
	margin: 10% 1% 3% 1%;
	background-image: linear-gradient(rgb(250,250,250),rgb(204,204,204));	/* Farbverlauf silbrig*/
	}
	
input[type="submit"] {
	width: 97%;
	margin: 5% 1% 3% 1%;
	color: darkred;
	background-image: linear-gradient(rgb(150,150,150),rgb(200,200,200));	/* Farbverlauf silbrig*/
	}
	
button{
	margin: 10% 10%;
	}

/* --- Animation der Texteingaben --- */
input, select, textarea { 
  border-bottom-color: darkblue; 
  color:darkblue;
  transition: color 5s;
	}

input:focus, select:focus, textarea:focus { 
  border-bottom-color: darkred; 
  transition: border-bottom-color 5s;
  color: darkred;
  transition: color 5s;
	}
	
.anmeldebutton {
	margin: 2%;
	}
	
/* --- Formularende --- */	


footer {
	width: 90%;
	margin: 5% 0%;
	padding: 0% 5%;
	clear: both;
	}

#footer_stadtgeschichte {
	text-align: right;	
	}
		
/* --- footermenue --- */
#h3_netzwerke {
	 text-align: left;
	 width: 80%;
	 margin: 1em 0em;
	 padding: 1em 1em;
	 color: darkred;
	}

.netzwerke_sozial {
	width: 70%;
	}
	
#liste_sozial {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-around;
	}
	
.footer_menue {
	margin: 0.5em;
	flex: 1 1;
	background: linear-gradient(to top left, #B79B5E 10%, 
	lightyellow 100%);
	}
	
.footer_menue a {
	padding: 0.1em;
	}
	
/* --- Element in der Fusszeile gleichmäßig verteilen --- */
.wichtig {
	display: flex;
	justify-content: space-between;
}

/*--- Anzeige Zeit + Datumswerte aus JS --- */
#uhrzeit, #aktuellesCopyright {
	display: none;
	} 
	
/* --- Test Zitatkennzeichen --- */
footer::after{
	content: " \a0 \201E Hier bin ich Mensch, hier darf ich sein..." "\201C" "\2028"  "\a0\a0\a0" "\201A von Goethe" "\2018";
	}	

/* --- Ende Grundeinstellungen Stadtchronik --- */	
	
	
	

/* --- min-device-width: 640px ----------------------------------*/
/* --- min-device-width: 640px ----------------------------------*/

@media only screen and (min-device-width: 640px) {

body {
	font-size: 100% ;
 }

/* --- Überschriften --- */
 h1 {
	font-size: 1.5em;
	}
h2 {
	font-size: 1.2em;
	}

header {
	width:100%;
	height: auto;
	} 

main {
	width: 98%;
	height: auto;
	}	
	
section {
	width: 95%;
	margin: 2% 1% 2% 0%;
	padding: 2% 2%; 
	background: linear-gradient(to bottom right, #B79B5E, lightyellow);
	box-shadow: 0.3em 0.3em 0.3em gray;
	border-radius: 1em;
	}

section h2, #h3_netzwerke {
	width: 80%;
	padding: 0.5em 1em;
	}
 
.spalten {
	column-count: 2;
	}
	
/* ---Druckersymbol anzeigen --- */	
.ausdruck {
	width: 25%;
	visibility: visible;
	}
	
#wappen_kontakt {
	float: right;
	width: 10%;
	margin: 2% 6%;
	margin-bottom: 15%;
	padding: 1% ;
	border: 0.1em solid silver;
	box-shadow: 1em 1em 1em rgba(0,0,0,0.5);
	}
/* --- Kontaktformular --- */
form {
	background-color: lightyellow;
	width: 32%;
	margin: 2% 2%; 			/* damit Formular oben anfängt und in die Mitte gelangt */
	text-align: left;
	border: 0.1em solid silver;
	border-radius: 1em;	
	box-shadow: inset -10px 0px 10px -5px rgba(0,0,0,0.3);
	}
#kontakt {
	margin: 2% 3%;
	float: right;
	}
	
#asidekontakt {
	width: 58%;
	height: auto;
	margin: 2%;
	} 
	
#asidekontakt  p {
	margin: 2%;
	}
	
/* -- Anmeldung --- */	
#anmeldung {
	float: left;
	margin: 2%;
	border-radius: 1em;	
	} 
	
.kontakt_h1 {
	margin: 75% 2% 10% 2%;
	width: 100%;
	}
	
.kontakt_h2 {
	width: 80%;
	margin: 5% 0% 10% 2%;
	padding: 3%;
	}
	
/* --- Navigation Flexboxmenü --- */
ul {
	width: 90%;
	
	}
  
li {
	width: 10em;
	padding: 0.5em 0.3em;
	}
  
li a {
	padding: 0.5em 0.3em;
	width: 95%;
	}

li a:active {
	padding: 0.5em 0.3em;
	}	
	
/* --- Kontakt Flexbox Spaltenlayout --- */

article {
	padding: 2%;
	}

/* --- Schlösser --- */	
#flex_h2 {
	width: 10%;
	}
	
.schloss_article {
	column-count: 2;
	}
	
footer {
	width: 85%;
	margin: 5%;
	}
#h3_netzwerke {
	 text-align: left;
	 padding: 0.5em 1em;
	}	
	
.netzwerke_sozial {
	width: 50%;
}
	
/*--- Anzeige Zeit + Datumswerte aus JS --- */	
#aktuellesCopyright {
	display: inline;
	} 

 
} /* --- Ende min-device-width: 640px --- */





/* --- min-device-width: 1280px ----------------------------------*/

@media only screen and (min-device-width: 1280px) {

body {
	font-size: 100% ;
 }

/* --- Überschriften --- */
 h1 {
	font-size: 1.5em;
	}
h2 {
	font-size: 1.2em;
	}

 hr  {
	  display: none;
	}

header {
	width:100%;
	height: auto;
	} 
	
#kopf_chronik {
	width: 98%;
	height: auto;
	margin: auto;
	}
	
#kopf_chronik{
	background: transparent url('../images/100_Wappen_Gera.gif') no-repeat top right;
	}
	
main {
	width: 98%;
	height: auto;
	margin: auto;
	}	
	
section {
	width: 95%;
	margin: 2% 1% 2% 0%;
	padding: 2% 2%; 
	background: linear-gradient(to bottom right, #B79B5E, lightyellow);
	box-shadow: 0.3em 0.3em 0.3em gray;
	border-radius: 1em;
	}

section h2 {
	width: 80%;
	padding: 0.5em 1em;
	}
 
#h3_netzwerke {
	 text-align: left;
	 padding: 0.5em 1em;
	}
	
.spalten {
	column-count: 2;
	}

.schloss_article {
	column-count: 1;
	}	
	
/* --- Navigation Flexboxmenü --- */
ul {
	width: 90%;
	
	}
  
li {
	width: 10em;
	padding: 0.5em 0.3em;
	}
  
li a {
	padding: 0.5em 0.3em;
	width: 95%;
	}

li a:active {
	padding: 0.5em;
	}	
	
/* --- Kontaktformular --- */
form {
	background-color: lightyellow;
	width: 32%;
	margin: 2% 2%; 			/* damit Formular oben anfängt und in die Mitte gelangt */
	text-align: left;
	border: 0.1em solid silver;
	border-radius: 1em;	
	box-shadow: inset -10px 0px 10px -5px rgba(0,0,0,0.3);
	}

#kontakt {
	margin: 2% 3%;
	float: right;
	}

#asidekontakt {
	width: 58%;
	height: auto;
	margin: 2%;
	} 
	
#asidekontakt  p {
	margin: 2%;
	}

#wappen_kontakt {
	float: right;
	width: 10%;
	margin: 2% 6%;
	margin-bottom: 15%;
	padding: 1% ;
	border: 0.1em solid silver;
	box-shadow: 1em 1em 1em rgba(0,0,0,0.5);
	}

.kontakt_h2 {
	width: 50%;
 }
	
/* -- Anmeldung --- */	
#anmeldung {
	float: left;
	margin: 2%;
	border-radius: 1em;	
	} 
	
/* --- kurze Stadtgeschichte --- */
#kontakt_chronik_section {
	height: auto;
	}
	 
#kontakt_h2_chronik {
	width: 50%;
	margin: 5% 0% 0% 2%;
	}

#kontakt_chronik1 {
	margin: 1% 0% 0% 2%;
	width: 100%;
	}	
#kontakt_chronik2{
	width: 100%;
	clear: both;
	}
	
#einleitung_article2  {
	width: 60%;
	float: right;
	}

/* --- Flugbahn der Visitenkarte geändert --- */	
#visitenkarte2:hover {
	transform-origin: bottom right;
}
	
/* --- Kontakt Flexbox Spaltenlayout --- */

.flex_schloss {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	}

.flex_schloss article {
	flex: 1;
	padding: 2%;
	}

/* --- Breite des linken Überschriftbalkens --- */	
#flex_h1 {
	width: 10%;
	}

/* ---Druckersymbol anzeigen --- */	
.ausdruck {
	width: 20%;
	visibility: visible;
	}
	
footer {
	width: 85%;
	margin: 5%;
	}
	
#h3_netzwerke {
	 text-align: left;
	 width: 50%;
	 margin: 1em 0em;
	 padding: 1em;
	}
	
.netzwerke_sozial {
	width: 50%;
	}
	
/*--- Anzeige Zeit + Datumswerte aus JS --- */	
#uhrzeit, #aktuellesCopyright {
	display: inline;
	} 

} /* --- Ende min-device-width: 1280px --- */