@charset "utf-8";
/* zusaetzliche CSS-Style-Definitions */

/* ============================== Grundgerüst ============================== */
body {
	background-color: lightyellow;
/*	background-image: url(../pics/Hintergrund.jpg);*/
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
}
/*
body {
    background-attachment: fixed;
}
body {
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:14px;
	line-height:1.42857143;
	color:#333;
}

header, footer {
	padding: 0em;
	color: black;
    clear: left;
	font-size: small;
	text-align: center;
	font-family: "Times New Roman", Times, serif;
}

div.box {
	border-radius: 5px;
	padding: 20px;
	font-size: medium;
	clear: both;
}
*/
h1, h2, h3 {
	letter-spacing: 0.1em;			/* gestreckt */
	font-weight: normal;
}

/* ============================== Logo Menu ============================== */
/*
.probootstrap-navbar .logoKoenig {
	float: left;
	width:20%;
	-webkit-transition:.4s all;
	transition:.4s all
}
.probootstrap-navbar .logoDiamant {
	float: right;
	width: 10%;
	-webkit-transition:.4s all;
	transition:.4s all
}
.probootstrap-navbar.scrolled .logoKoenig {
	width:10%;
}
.probootstrap-navbar.scrolled .logoDiamant {
	width:5%;
}
*/
/* speziell f. das Logo im Short-Menu */
.navbar-logo {
	width:100px;
	margin-left:5px;
	margin-top:5px;
}
.probootstrap-navbar .border-bottom-gradient {
}
.probootstrap-navbar.scrolled .border-bottom-gradient {
 	border: 1px solid;
	border-image: linear-gradient(to left, white 1%, goldenrod 50%, white 100%) 0 0 1%;
}

/* OVERRULEN oder ERGAENZEN von style. ... .css: */
/* ==================================================================== */

.probootstrap-heading .primary-heading {
	font-family: "Times New Roman", Times, serif;
	color:gold;
	font-size:80px;
	font-style: oblique;
	position:relative;
	top:0.35em;
	text-shadow: 0px 0px 25px black;
}
@media screen and (max-width:768px) {
	.probootstrap-heading .primary-heading {
		font-size:45px
	}
}
.probootstrap-heading .secondary-heading {
	text-transform:uppercase;
	color:white;
	letter-spacing:.05em;
	font-size:65px;
	position:relative;
	top:0px;
	font-weight:700;
	line-height:40px;
	text-shadow: 0px 0px 25px black;
}
@media screen and (max-width:768px) {
	.probootstrap-heading .secondary-heading{
		font-size:30px
	}
}

.probootstrap-custom-link {
	text-transform:none;
}

/* Hoehe Slider: */
/*
ACHTUNG: SO NICHT AKTIVIEREN !!! SONST IST SLIDER AUF HANDY ZU HOCH !!!
.flexslider,.flexslider .slides>li,.slider-height {
	height:750px;
}
*/
/* Infokarten link hover */
.probootstrap-custom-link:hover {
	color:#FFA33E;
}
/*
a:active, a:focus, a:hover {
	color:goldenrod;
	text-decoration:none
}*/
/* xxxx: menu-farbe unscrolled: inaktiv */
/*
.probootstrap-navbar .navbar-nav>li>a {
	color: black;
	font-size:15px;
	position:relative;
	text-transform:uppercase;
}
*/
/* xxxx: menu-farbe unscrolled: inaktiv hover */
.probootstrap-navbar .navbar-nav>li>a:active, .probootstrap-navbar .navbar-nav>li>a:focus, .probootstrap-navbar .navbar-nav>li>a:hover {
	color:goldenrod;
}
/* xxxx: menu-farbe unscrolled: aktiv */
.probootstrap-navbar .navbar-nav>li.active>a {
/*	background:0 0;*/
	color:goldenrod!important;
}
/* xxxx: menu-farbe unscrolled: aktiv hover */
/*	
.probootstrap-navbar .navbar-nav>li.active>a:active, .probootstrap-navbar .navbar-nav>li.active>a:focus, .probootstrap-navbar .navbar-nav>li.active>a:hover {
	background:0 0;
}
*/
/* xxxx: menu-farbe scrolled: inaktiv */
/*
.probootstrap-navbar.scrolled .navbar-nav>li>a {
	color: black;
}
*/
/* xxxx: menu-farbe scrolled: inaktiv hover */
.probootstrap-navbar.scrolled .navbar-nav>li>a:hover {
	color:goldenrod!important;
}
/* xxxx: menu-farbe scrolled: aktiv */
.probootstrap-navbar.scrolled .navbar-nav>li.active>a {
	color:goldenrod!important;
}

/* ???? Funzt nicht: sollte auf Handy die Bilder in Infokarten zentrieren */
/*.probootstrap-block-image figure img {
	display:flex;
}*/

.probootstrap-block-image {
	border-radius:20px;
}
.probootstrap-block-image-transparent figure img {
	max-width:50%;
}
.probootstrap-block-image .stevie {
	min-height:8em;
}

.probootstrap-section-bg {
	background-repeat:no-repeat;
	padding:14em 0;
	height:auto;
}
@media screen and (max-width:768px) {
	.probootstrap-section-bg {
		padding:6em 0;
		height:auto;
	}
}

.probootstrap-copyright {
	color:lightgrey;
}


/* ============================== a-Referenz ============================== */
/*a {
	text-decoration: none;
}
*/
/* ============================== iFrame ============================== */
iframe.frame1 {
	box-shadow: 0px 8px 6px -6px grey;
	border: 1px solid grey;
	width: 100%;
	height: 16em;
/*	height: 300px; */
}

/* ============================== Image ============================== */
img.schatten {
	box-shadow: 0px 5px 10px grey;
}
/*
img.bild0 {
	box-shadow: 0px 5px 10px grey;
	max-width: 100%;
//	height: 18em;
	margin: 0;
}

img.bild1 {
	box-shadow: 0px 8px 6px -6px grey;
	max-width: 100%;
	margin: 0;
}
img.bild2 {
	border-radius: 5px;
	max-width: 100%;
	margin: 0;
}
*/
img.center {
	max-width: 100%;
	display: block;
	margin: auto;
}
/*
img.letter {
	max-width: 3em;
}
*/
img.rounded {
	border-radius: 25px;
	max-width: 50%;
	display: block;
	margin: auto;
}
img.rounded_small {
	border-radius: 25px;
	max-width: 30%;
	display: block;
	margin: auto;
}
img.width20em {
	max-width: 20em;
	display: block;
	margin: auto;
}

.img-wrapper {
	display: inline-block;
	overflow: hidden;
}

.img-wrapper img {
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	vertical-align: middle;
}

.img-wrapper img:hover {
	-webkit-transform:scale(1.1); /* Safari and Chrome */
	-moz-transform:scale(1.1); /* Firefox */
	-ms-transform:scale(1.1); /* IE 9 */
	-o-transform:scale(1.1); /* Opera */
	transform:scale(1.1);
}

.img_rotate {
	width: 9em;
	position: absolute;
	margin-left: -2.0em;
	margin-top: -17.3em;
	font-size: medium;
	transform: rotate(60deg);
}

.img_rotate90 {
	transform: rotate(-90deg);
}

.img_rotate2 {
	width: 9em;
	position: absolute;
	margin-left: -2.0em;
	margin-top: -17.3em;
	font-size: medium;
	transform: rotate(60deg);
}
@media screen and (max-width:768px) {
	.img_rotate2 {
		width: 6em;
		margin-left: 2.0em;
		margin-top: -31.5em;
	}
}

/* ============================== Animation ============================== */

/*
	Wie funktionierts ?
	- alle objekte werden gleichzeitig dargestellt !
	- der Animationszyklus ist bei allen gleich (-animation-duration)
	- der Ablauf im Zyklus ist definiert in 'anim_slides'
	das Entscheidende ist:
	- jedes objekt (child) beginnt seinen Zyklus verzoegert (-animation-delay),
	  wodurch der Eindruck entsteht, dass die objekte nacheinander dargestellt werden.
	
	Was ist bei Aenderung der Anzahl zu beachten ?
	- die steigende und fallende Flanke von 'anim_slides' muss mit -animation-delay zusammenpassen:
	  d.h. der erste delay bezogen auf den Gesamtzyklus entspricht den Prozentangaben in 'anim_slides'
*/

.slides1 {
	height: 300px;
	display: block;
	margin: auto;
	width: 300px;
}
.slides1 ul {
	list-style: none;
	position: relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides1 {
	  0% { opacity: 0; left: 60px;}
	  2% { opacity: 1; left:  0px;}
	 16% { opacity: 1; left:  0px;}
	 18% { opacity: 0; left:-120px;}
}
@-moz-keyframes anim_slides1 {
	  0% { opacity: 0; left: 60px;}
	  2% { opacity: 1; left:  0px;}
	 16% { opacity: 1; left:  0px;}
	 18% { opacity: 0; left:-120px;}
}
.slides1 ul li {
	opacity: 0;
	position: absolute;
	top: 0;
	-webkit-animation-name: anim_slides1;
	-webkit-animation-duration: 30.0s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: anim_slides1;
	-moz-animation-duration: 30.0s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
}
/* delay for each child */
.slides1 ul  li:nth-child(2) {
	-webkit-animation-delay: 5.0s;
	-moz-animation-delay: 5.0s;
}
.slides1 ul  li:nth-child(3) {
	-webkit-animation-delay: 10.0s;
	-moz-animation-delay: 10.0s;
}
.slides1 ul  li:nth-child(4) {
	-webkit-animation-delay: 15.0s;
	-moz-animation-delay: 15.0s;
}
.slides1 ul  li:nth-child(5) {
	-webkit-animation-delay: 20.0s;
	-moz-animation-delay: 20.0s;
}
.slides1 ul  li:nth-child(6) {
	-webkit-animation-delay: 25.0s;
	-moz-animation-delay: 25.0s;
}
.slides1 ul li img {
	display: block;
}

/* ========== Kopie des Oberen fuer versetzte Animation ========== */
.slides2 {
	height: 300px;
	display: block;
	margin: auto;
	width: 300px;
}
.slides2 ul {
	list-style: none;
	position: relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides2 {
	  0% { opacity: 0; left:-60px;}
	  2% { opacity: 1; left:  0px;}
	 16% { opacity: 1; left:  0px;}
	 18% { opacity: 0; left:120px;}
}
@-moz-keyframes anim_slides2 {
	  0% { opacity: 0; left:-60px;}
	  2% { opacity: 1; left:  0px;}
	 16% { opacity: 1; left:  0px;}
	 18% { opacity: 0; left:120px;}
}
.slides2 ul li {
	opacity: 0;
	position: absolute;
	top: 0;
	-webkit-animation-name: anim_slides2;
	-webkit-animation-duration: 30.0s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: anim_slides2;
	-moz-animation-duration: 30.0s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
}
/* delay for each child */
.slides2 ul  li:nth-child(2) {
	-webkit-animation-delay: 5.0s;
	-moz-animation-delay: 5.0s;
}
.slides2 ul  li:nth-child(3) {
	-webkit-animation-delay: 10.0s;
	-moz-animation-delay: 10.0s;
}
.slides2 ul  li:nth-child(4) {
	-webkit-animation-delay: 15.0s;
	-moz-animation-delay: 15.0s;
}
.slides2 ul  li:nth-child(5) {
	-webkit-animation-delay: 20.0s;
	-moz-animation-delay: 20.0s;
}
.slides2 ul  li:nth-child(6) {
	-webkit-animation-delay: 25.0s;
	-moz-animation-delay: 25.0s;
}
.slides2 ul li img {
	display: block;
}

/* ============================== Tabellen ============================== */
/*dd { display:none; }
.closed { background:red; }
.open { background:green; }

#StatTable {
    border-collapse: collapse;
    width: 100%;
}
#StatTable th {
    border: 1px solid black;
    padding: 2px;
    background-color: lightgrey;
    color: black;
    text-align: center;
}
#StatTable td {
    border: 1px solid black;
    padding: 2px;
}
#StatTable tr:hover {
	background-color: CadetBlue;
	color: white;
}
#StatTable col.colbots {
	color: blue;
}
#StatTable col.colattax {
	color: red;
}
#StatTable col.coldate {
	background-color: lightgrey;
}
#StatTable col.colsum {
	background-color: lightgreen;
}
#StatTable tr.rowsum {
	background-color: lightblue;
}

#IPtable table {
	border-collapse: collapse;
	margin: auto;
	text-align: left;
}
#IPtable td {
	padding: 0.5em;
	border: 1px solid blue;
}
*/

/* ============================== Listen ============================== */
#Service ul {
	font-size:large;
	line-height:2em;
/* Die Angabe der url funzt nicht, wenn css eingelesen wird ! Nur direkte style-Angabe im html geht ! 
	list-style-type:square;
	list-style-position:outside;
	list-style-image:url(pics/Krone.png);
*/
}
/*
#Service li:before  {
//  content: "\25C6 \a0";
  content: "\265B" " ";
  color: DarkGoldenRod;
  font-size: 1.4em;
}*/

/* ============================== Fehlermeldung ============================== */
/*#error {
	padding: 6px;
	text-align: center;
	font-size: x-large;
	border-radius: 5px;
	background-color: #ffcccc;
	color: black
}
*/
/* ============================== Text + Effekte ============================== */
/*.breit0 {
	font-family: "Times New Roman", Times, serif;
	letter-spacing: 0.2em;		*/	/* gestreckt */
/*	color: DarkGoldenRod;
	font-style: oblique;
}*/
.breit1 {
	letter-spacing: 0.1em;			/* gestreckt */
	font-size: x-large;
	color: DarkGoldenRod;
	line-height: 1.5em;
}
/*
.breit2 {
	letter-spacing: 0.1em;		*/	/* gestreckt */
/*	font-size: large;
	line-height: 2.5em;
}
*/
.breit3 {
	letter-spacing: 0.1em;			/* gestreckt */
	font-size: x-large;
//	color: DarkGoldenRod;
	line-height: 1.5em;
}

div.text {
	padding: 6px;
	text-align: center;
	font-size: medium;
}

div.textinfo {
	padding: 10px;
	text-align: center;
	font-size: medium;
	background-image:linear-gradient(180deg, yellow 10%, Yellowgreen 80%);
	width: 70%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:30px;
	color: DarkSlateGray;
	border-radius: 15px;
}

div.schattig {
	text-shadow: 1px 1px 1px green;
}
/*
div.textinfoFull {
	padding: 6px;
	text-align: center;
	font-size: medium;
	background-image:linear-gradient(180deg, SkyBlue 10%, GreenYellow 80%);
	display: block;
	margin-left: auto;
	margin-right: auto;
	color: DarkSlateGray;
	border-radius: 15px;
}

div.high {
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	color: white;
	letter-spacing: 0.1em;		*/	/* gestreckt */
/*	text-shadow: 2px 2px 5px black, 0 0 25px black, 0 0 5px red;*/
	/* nachfolgende Einstellungen wirken, sobald sich eine der obigen properties ändert (z.B. durch hover) */
/*	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

div.high:hover {
	color: yellow;
}

.grow:hover {
    -ms-transform: scale(1.1,1.1);	*/	/* IE 9 */
/*    -webkit-transform: scale(1.1,1.1);*/	/* Safari */
/*    transform: scale(1.1,1.1);	*/		/* Standard syntax */
/*}*/

/* ============================== Diagramm ============================== */
/*.textnormal {
	fill: black;
	font: normal 18px sans-serif;
}
.textklein {
	fill: black;
	font: normal 14px sans-serif;
}
.skala {
	stroke: grey;
	stroke-width: 1;
}
.balken0 {
	background-color: grey;	*/	/* for table */
/*	fill: grey;				*/	/* for svg */
/*	stroke: none;
}
.balken1 {
	background-color: LawnGreen;
	fill: LawnGreen;
	stroke: none;
}
.balken2 {
	background-color: DodgerBlue;
	fill: DodgerBlue;
	stroke: none;
}
.balken3 {
	background-color: Gold;
	fill: Gold;
	stroke: none;
}
.balken4 {
	background-color: orange;
	fill: orange;
	stroke: none;
}
.balken5 {
	background-color: red;
	fill: red;
	stroke: none;
}
.balken6 {
	background-color: GhostWhite;
	fill: GhostWhite;
	stroke: none;
}
.balken7 {
	background-color: Violet;
	fill: Violet;
	stroke: none;
}
.balken8 {
	background-color: DarkTurquoise;
	fill: DarkTurquoise;
	stroke: none;
}
*/

/* ============================== post it ============================== */
/*.postIt_small {
	width: 14em;
	text-align: left;
	position: absolute;
	margin-left: 0em;
	margin-top: -3em;
	background-color: yellow;
	color: red;
	font-size: medium;
}
.postIt_small_rotate {
	width: 10em;
	text-align: center;
	position: absolute;
	margin-left: 1.0em;
	margin-top: -4.5em;
	background-color: yellow;
	color: red;
	font-size: medium;
	transform: rotate(-20deg);
	opacity: 0.9;
}
*/

/*
.debug_Info {
	width: 15em;
	position: absolute;
	margin-left: 0;
	margin-top: 0;
	background-color: orange;
	color: black;
	font-size: medium;
}
*/

/* ============================== Verschiedenes ============================== */
hr.gradient {
	height: 2px;
	border: none;
	background-image: linear-gradient(to right, #424242 1%, grey 40%, #424242 100%);
}
/*
hr.gradient2 {
	height: 1px;
	border: none;
	background-image: linear-gradient(to right, white 1%, goldenrod 50%, white 100%);
}*/