/*  Dateiweite Einstellungen  ..............................................................  */

html {
	padding:0em;
	margin:0em;
}

body {
	font-family:'Palatino Linotype', 'Times New Roman', Times, serif;
	margin:0em;
	padding: 15px;
	cursor:default;
	color:#000;
	overflow: scroll;

	
	background-color: #fff;
	
}

/*
head,
nav,
#content {
	font-size: 200%;
}
@media only screen and (min-width: 70rem) {
	head,
	nav,
	#content {
		font-size: 100%;
	}
}
*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

img {
	border:0em;
}

em, .erlauterung {
	font-family:'Times New Roman', Times, serif;
	font-style:italic;
}

acronym {
	border-bottom:0.1em dotted #888;
	cursor:help;
}

.help {
	border-bottom:0.1em dotted #888;
	cursor:help;
}

a.help {
	border-bottom:none;
	cursor:help;
}

acronym:hover, .help:hover {
	cursor:help;
}

sup a {
	background-color:#fff;
	border:1px solid #aaa;
	text-decoration:none;
	font-size:0.8em;
	padding-left:0.5em;
	padding-right:0.5em;
}

a:link {
	color:#800;
}

a:visited {
	color:#000;
}

a:active, a:focus, a:hover {
	color:#f00;
	background-color:#fff;
}

a:active, a:focus, a:hover {
	color:#fff;
	background-color:#555;
}

hr {
	width: 95%;
}

.pic {
}

/*  Klasse zur Kennzeichnung von Elementen, die nur von Audio-Geraeten und der Braille-Zeile  */
/*  wiedergegeben werden sollen ............................................................  */

.sr-hint {
	position:absolute;
	left:-1000px;
	top:-1000px;
	width:0px;
	height:0px;
	overflow:hidden;
	display:inline;
}


/* Container:    ...........................................................................  */

#container {
	position: relative;
	max-width: 160em;
	margin: 1em auto;
}


/* Seitentitel:  ...........................................................................  */

div#head {
	margin: 16px;
	margin: 1rem;
	height:150px;
	background-color: #fff;
}
div#head a {
	display: inline-block;
	width: 100%;
	text-decoration: none;
}
@media only screen and (min-width:45em) {
	div#head a {
		width: 50%;
	}
}
div#head a:focus,
div#head a:hover {
	color: inherit;
	background-color: inherit;
}
h1 {
	padding:0em;
	padding-top:20px;
	margin:0em;
	background-color:#fff;
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
}

.slogan {
	display: none;
	position: absolute;
	right: 1rem;
	top: 2rem;
	width: 300px;
	width: 30%;
	height: 150px;
	height: 9.375rem;
	font-size: 1rem;
}
.slogan span:last-child {
	text-align: right;
}
@media screen and (min-width: 45em) {
	.slogan {
		display: block;
		font-size: 2rem;
		width: 40%;
	}
}
.slogan span {
	display: block;
	text-align: center;
	color: #bbb;
}
.slogan span:first-child {
	text-align: left;
}


p.image {
	padding:0em;
	margin:0em;
	float:left;
}

p.image img {
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
}

.illu {
	float:right;
	width:250px;
	padding:0em;
	margin:0em;
	text-align:right;
}


div#head .in-slogan {
	margin-left:3em;
}


/* Menu:  ..................................................................................  */


nav {
	color: #fff;
	background-color:#800;
	margin: 16px;
	margin: 1rem;
	border-radius: 8px;
	border-radius: 0.5rem;
  -webkit-box-shadow: 4px 4px 12px 0px #eee;
          box-shadow: 4px 4px 12px 0px #eee;
	background-clip: padding-box;
}
nav ul {
		margin: 0;
		padding: 0;
}
@media only screen and (min-width: 60rem) {
	nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	nav li {
		flex: 1 1 0;
	}
	nav li:nth-child(3) {
		flex: 1.5 1 0;
	}
	nav li:first-child {
		border-top-left-radius: 8px;
		border-top-left-radius: 0.5rem;
	}
	nav li:last-child,
	nav li:last-child a,
	nav li:last-child strong {
		border-top-right-radius: 8px;
		border-top-right-radius: 0.5rem;
		border-bottom-right-radius: 8px;
		border-bottom-right-radius: 0.5rem;
	}
}
nav ul ul {
	display: none;
}
nav li {
	list-style-type: none;
	text-align: center;
}
nav li a:link,
nav li a:visited {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	color: #fff;
}
nav li a:hover,
nav li a:focus {
	text-decoration: underline;
}
nav li strong,
nav li a:link {
	border-top: 2px solid #fff;
}
@media only screen and (min-width: 60em) {
	nav li strong,
	nav li a:link {
		border-left: 1px solid #fff;
		border-top: none;
	}
	nav li:first-child strong,
	nav li:first-child a:focus,
	nav li:first-child a:hover,
	nav li:first-child a:link {
		border-left: none;
		border-top-left-radius: 8px;
		border-top-left-radius: 0.5rem;
		border-bottom-left-radius: 8px;
		border-bottom-left-radius: 0.5rem;
	}
}
nav li:first-child strong,
nav li:first-child a:link {
	border-top: none;
}
nav li strong {
	display: block;
	background-color: #aaa;
	padding: 0.5rem 1vw;
	color: #fff;
}



/*  Aufklappmenue 

nav {
	display: table;
	width: 100%;
	background-color:#444;
	height: 2em;
}

nav ul 
nav li 
nav a {
	box-sizing: border-box;
}

nav ul {
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
}

nav > ul {
	display: table-row;
	position: relative;
	height: 2em;
}

nav > ul > li {
	display: table-cell;
	background-color: #ccc;
	position: relative;
	width: 20%;
	vertical-align: middle;
	text-align: center;
}

nav > ul > li a:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 2em;
}


nav ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 0;
	height: 0;
	line-height: 0;
	border-top: 0;
	display: inline-block;
  -webkit-box-shadow: 0px 0px 0px 0px #fff;
          box-shadow: 0px 0px 0px 0px #fff;

		
  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;

}

nav ul li:hover ul {
	display: block;
	top: 2.25em;
	opacity: 1;
	width: 100%;
	height: 20em;
	line-height: 0;
	
  -webkit-box-shadow: 0px 8px 8px 0px #aaa;
          box-shadow: 0px 8px 8px 0px #aaa;
}

nav ul li:hover ul li,
nav ul li:hover ul a {
	display: block;
	width: 100%;
	line-height: 2em;
}

nav ul li:hover ul li {
	color: #fff;
	background-color: #444;
}

nav a {
	display:block;
	padding: 0;
	color:#800;
	background-color:#edd;
	text-decoration:none;

  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

nav a:focus, nav a:active, nav a:hover {
	color:#fff;
	background-color:#800;
}
*/

/* Inhaltsbereich:  ........................................................................  */

#content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin:0em;
	color:#000;
/*	background-color:#fff;*/
*	background-image:url(../images/inhalt-bg.jpg);*/
	background-repeat:repeat-y;
	background-position:right;
}

#content h2 {
	flex: 0 0 calc(100% - 4rem);
	padding: 16px;
	padding: 1rem;
	text-align:center;
	font-size: 2em;
	font-weight:bold;
	color:#800;
	background-image: url(../images/pink_rice/pink_rice.png);
 }
#content h3 {
	font-size: 24px;
	font-size: 1.5rem;
	color: #800;
}
#content h4 {
	font-size: 20px;
	font-size: 1.25rem;
	color: #800;
}

div.important {
	  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */        
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;


  -webkit-box-shadow: 4px 4px 12px 0px #eee;
          box-shadow: 4px 4px 12px 0px #eee;


	padding:0.3em;
	margin: 1em 2em;
	margin-right:38%;
	background-image: url('../images/laden/Fotolia_26945550_M.jpg');
	background-color:#eee;
}

#content .catalog {
	justify-content: space-around;
	flex: 2 1 50em;
	background-image: url(../images/pink_rice/pink_rice.png);
	text-align: center;
	vertical-align: middle;
}
#content .catalog img {
	margin: 16px;
	margin: 1rem;
}

.pics {
	text-align:right;
}

#gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#gallery > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 0 0 250px;
	margin: 16px;
	margin: 1rem;
	border: 12px solid #800;
	text-align: center;
	background-color: #666;
	line-height: 0;
	
  -webkit-box-shadow: 4px 4px 12px 0px #eee;
          box-shadow: 4px 4px 12px 0px #eee;

          -webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
          -webkit-border-radius: 0.5rem; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 8px; /* FF1-3.6 */
     -moz-border-radius: 0.5rem; /* FF1-3.6 */
          border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
          border-radius: 0.5rem; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */        
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

#gallery > div img {
	width: 100%;
}

.catalog a {
	line-height:187px;
	height:187px;
	border:#fff 0.3em solid;
}

.catalog a:hover {
	line-height:187px;
	height:187px;
	border:#555 0.3em solid;
	background-color:#fff;
}

#content p {
	font-size:1.2em;
}

#content p.image {
	float:left;
	width:300px;
	height:350px;
	padding:1em;
	margin: 16px;
	margin: 1rem;
	text-align:left;
	background-color:#fff;
	font-size:1em;
}

p.image-quer {
	float:right;
	width:450px;
	overflow:hidden;
	padding:1em;
	margin: 16px;
	margin: 1rem;
	text-align:right;
	font-size:1em;
}

.warning {
	display:block;
	background-color:#ff0;
}

div.code {
	margin:0.4em;
	margin-left: 16px;
	margin-left:1rem;
	padding:3em;
	padding-right:0em;
	border:0.2em #008 outset;
	background-color:#eef;
	color:#008;
	cursor:text;
	font-family:Courier New, Courier, monospace;
	text-indent:-2em;
}

div.code p {
	margin:0em;
	text-indent:-2em;
	padding:0em;
}

div.code p.hint {
	margin:0em;
	text-indent:0em;
}

span.code {
	color:#008;
	font-family:Courier New, Courier, monospace;
	text-indent:-2em;
}

#content > article {
	flex: 1 1 25em;
	padding: 16px;
	padding: 1rem;
	background-image: url(../images/pink_rice/pink_rice.png);
}
#content > article.googleMap {
	flex: 2 1 50em;
}
#content > article.googleMap iframe {
	width: 100%;
	height: 480px;
	box-sizing: border-box;
}
#content > article figure {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}
#content > article figure figcaption {
	opacity: 0.75;
	font-size: 0.75em;
	font-size: 0.75rem;
	background-color: #fee;
}
#content > article figure img {
	width: 100%;
}

#content > * {
	margin: 16px;
	margin: 1rem;
	border-radius: 8px;
	border-radius: 0.5rem;
	
  -webkit-box-shadow: 4px 4px 12px 0px #eee;
          box-shadow: 4px 4px 12px 0px #eee;

}

#content div.hint {
	display: flex;
	flex-wrap: wrap;
}
#content div.hint article {
	flex: 1 0 20em;
}

#content article h3 img {
	float: right;
}

/* Bilder */

.inTextRight {
	float:right;
	width: 220px;
	max-width: 100%;
	overflow: hidden;
}

div#glossar h3 {
	margin-top:3em;
	background-color:#fff;
}

div.clear {
	clear:both;
}
div#fussnoten {
	width:100%;
	padding:0em;
	margin:0em;
	border-top:#555 solid 0.2em;
	border-bottom:#555 solid 0.2em;
	font-size:80%;
	color:#631;
	background-color:#eee;
}