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

/* ============================== Grundgerüst ============================== */
body {
	background-color: black;
/*	background-image: url(../pics/Hintergrund.jpg);*/
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
	color: dimgrey;
	animation: fadeIn ease 1s;
	animation-iteration-count: 1;
}


h1, h2, h3 {
	letter-spacing: 0.1em;			/* gestreckt */
	font-weight: normal;
}

/* ============================== Intro ============================== */
div.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}
div.logo {
	color:red;
	text-align: center;
	font-family: "Times New Roman", Times, serif;
	font-size: 200%;
	line-height: 1em;
	border-top: .05em solid red;
	border-bottom: .05em solid red;
	padding: .01em .2em;
}
div.anim1 {
	animation: zoomIn 2.15s ease-in;
}
@keyframes zoomIn {
	0%  { transform: translate(-50%, -100%) scale(0.1);}
	30% { color:red; transform: translate(-50%, -50%) scale(1.2);}
	31% { color:yellow; transform: translate(-50%, -50%) scale(1.2);}
	32% { color:red; transform: translate(-50%, -50%) scale(1.2);}
	35% { color:red; transform: translate(-50%, -50%) scale(1);}
	39% { transform: translate(-50%, -50%) scale(1.1);}
	43% { transform: translate(-50%, -50%) scale(1);}
	47% { transform: translate(-50%, -50%) scale(1.05);}
	51% { transform: translate(-50%, -50%) scale(1);}
	55% { transform: translate(-50%, -50%) scale(1.02);}
	59% { transform: translate(-50%, -50%) scale(1);}
	95% { transform: translate(-50%, -50%) scale(1);}
	100% { transform: translate(-50%, 0%) scale(0);}
}

@keyframes fadeIn {
	0% {	opacity: 0;}
	100% {	opacity: 1;}
}

/* ============================== Logo 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%, red 50%, white 100%) 0 0 1%;
}

/* OVERRULEN oder ERGAENZEN von style. ... .css: */
/* ==================================================================== */
.maus1 {
	/* Bildgroesse maximal 128 x 128 */
	cursor: url("http://localhost:8888/xmogt/pics/MausMixer.png") 64 55, zoom-in;
}
.maus2 {
	/* Bildgroesse maximal 128 x 128 */
	cursor: url("http://localhost:8888/xmogt/pics/MausSchneebesen.png") 64 55, zoom-in;
}

.probootstrap-section-bg {
	background-color:darkgrey;
//	height:600px;
}

/* ************ 
@media screen and (max-width:768px) {
	.probootstrap-section-bg {
		height:300px
	}
}
 ************ */

.flexslider,.flexslider .slides>li,.slider-height {
	height: 12em;
}

.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;
}

/* Infokarten link hover */
.probootstrap-custom-link:hover {
	color:#FFA33E;
}
.probootstrap-navbar .navbar-nav>li>a:active, .probootstrap-navbar .navbar-nav>li>a:focus, .probootstrap-navbar .navbar-nav>li>a:hover {
	color:red;
}
.probootstrap-navbar .navbar-nav>li.active>a {
	color:red!important;
}
.probootstrap-navbar.scrolled .navbar-nav>li>a:hover {
	color:red!important;
}
.probootstrap-navbar.scrolled .navbar-nav>li.active>a {
	color:red!important;
}
.probootstrap-block-image {
	border-radius:20px;
	background-color:wheat;
}
.probootstrap-block-image-transparent figure img {
	max-width:50%;
}
.probootstrap-block-image .stevie {
	min-height:4em;
}
.probootstrap-block-image figure img {
	max-width:100%;
}

.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;
}

/* no-print: NICHT drucken  oder  print-only: NUR drucken */
.print-only {
	display: none;
}
@media print {
	.no-print {
		display: none;
	}
	.print-only {
		display: block;
	}
}

/* ============================== 3D-Objekte ============================== */
img.stevie {
	max-width: 100%;
}
.DDDperspective{
	width: 100%;
	height: 23em;
	-webkit-perspective: 900px;
	perspective: 900px;
}
.DDDkorpus{
	height: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transition: .5s all ease;
	transition: .5s all ease;
	-webkit-transform: rotateX(45deg) scale(0.7);
	transform: rotateX(45deg) scale(0.7);
	box-shadow: 0px 20px 50px #555;
	background: linear-gradient(to bottom, darkblue 0%, lightblue 100%);
	padding: 6px;
	text-align: center;
	font-size: large;
	color: white;
	text-shadow: 0px 10px 10px darkblue;
	z-index: -1;
}
.DDDkorpus:hover {
	-webkit-transform: rotateX(0deg) scale(1);
	transform: rotateX(0deg) scale(1);
	-webkit-transition: .5s all ease;
	transition: .5s all ease;
	z-index: 2;
}
.korpusimg {
	height: 66%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateX(-25deg) scale(0.9) translateY(-50%) translateZ(20px);
	transform: rotateX(-25deg) scale(0.9) translateY(-50%) translateZ(20px);
	color:black;
	z-index: 3;
}
.DDDkorpus:hover .korpusimg {
	cursor: pointer;
	-webkit-transform: rotate(0deg) scale(1) translateZ(40px);
	transform: rotate(0deg) scale(1) translateZ(40px);
	-webkit-transition: 1s all ease;
	transition: 1s all ease;
	z-index: 4;
}
.DDDkorpus:not(:hover) .korpusimg {
	-webkit-transform: rotateX(-25deg) scale(0.9) translateY(-50%) translateZ(20px);
	transform: rotateX(-25deg) scale(0.9) translateY(-50%) translateZ(20px);
	-webkit-transition: 1s all ease;
	transition: 1s all ease;
	z-index: 4;
}
.fronttext {
	height: 10%;
	-webkit-transform: rotateX(-45deg) scale(1) translateZ(20px);
	transform: rotateX(-45deg) scale(1) translateZ(20px);
	padding: 8px;
	text-align: center;
	font-size: 2em;
	letter-spacing: 0.2em;
	color: white;
	text-shadow: 0px 5px 7px darkblue;
	z-index: 3;
}
.DDDkorpus:hover .fronttext {
	cursor: pointer;
	-webkit-transform: rotate(0deg) scale(1) translateZ(40px);
	transform: rotate(0deg) scale(1) translateZ(40px);
	-webkit-transition: 1s all ease;
	transition: 1s all ease;
	z-index: 4;
}
.DDDkorpus:not(:hover) .fronttext {
	-webkit-transform: rotateX(-45deg) scale(1) translateZ(20px);
	transform: rotateX(-45deg) scale(1) translateZ(20px);
	-webkit-transition: 1s all ease;
	transition: 1s all ease;
	z-index: 4;
}





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

/* ============================== Image ============================== */
img.schatten {
	box-shadow: 0px 5px 10px grey;
}
img.center {
	max-width: 100%;
	display: block;
	margin: auto;
}
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.width5em {
	max-width: 5em;
	display: flex;
	margin: auto;
}
img.width20em {
	max-width: 20em;
	display: block;
	margin: auto;
}

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

.img-wrappercolor {
	display: inline-block;
	overflow: hidden;
	background: lightgreen;
}

.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;
//background: linear-gradient(-45deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);
}

.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_back {
	position: absolute;
//	opacity: 0.5;
	z-index: -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;
	}
}

.image-hover {
	position: relative;
	width: 100%;
}
.image-hover img {
	display: block;
	width: 100%;
	transition: opacity 0.5s ease-in-out;
}
.image-hover img.overlay-image {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.image-hover:hover img.overlay-image {
	opacity: 1;
}

img.basis {
	--winkel: 10deg;
	transform: perspective(350px) rotate3d(1, -1, 0, var(--winkel));
}
img:hover {
	--faktor: -1;
	transform: perspective(350px) rotate3d(1, -1, 0, -var(--winkel));
}


/* Kuchenwahl */
.zoominbox img.zoomboximg
{
	transform: scale(1);
	-webkit-transition: all 1s ease;
}
.zoominbox .zoominDiv
{
	position: absolute;
	left: 60px;
	top: 60px;
	display: block;
	background-color: transparent;
//	border:3px solid grey;
	padding: 30px;
	text-align: center;
	opacity: 0;
	transform: scale(1.5);
	-webkit-transition: 0.5s ease-in-out;
}
.zoominbox .zoominDiv img
{
	width: 80%;
}
.zoominbox:hover img.zoomboximg
{
	transform: scale(1.2);
}
.zoominbox:hover .zoominDiv
{
	opacity: 1;
	transform: scale(1);
}

/* ============================== 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;
}

/* ============================== Listen ============================== */
ol.liste1 {
	list-style-type: none;			/* Verhindert das Standardstyling der Nummern */
	counter-reset: list-counter;	/* Setzt den Zähler für die nummerierten Liste zurück */
	list-style-position: outside;
}
li.liste1 {
	counter-increment: list-counter;	/* Inkrementiert den Zähler für jedes Listenelement */
	margin-bottom: 1em;
	list-style-position: outside;
}
li.liste1::before {
	content: counter(list-counter);	/* Fügt den aktuellen Wert des Zählers vor jedes Listenelement ein */
	font-size: 2em;
	font-family: "Brush Script MT", Cursive;
	margin-right: 1em;				/* Abstand zwischen Nummer und Text */
	list-style-position: outside;

//  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

ol.liste2 {
}
li.liste2 {
}
li.liste2::before {
}

/* ============================== Text + Effekte ============================== */
.breit1 {
	letter-spacing: 0.1em;			/* gestreckt */
	font-size: x-large;
	color: darkred;
	line-height: 1.5em;
}
.breit3 {
	letter-spacing: 0.1em;			/* gestreckt */
	font-size: x-large;
	line-height: 1.5em;
}
.gross1 {
	font-size: xx-large;
}
.h2 {
	letter-spacing: 0.1em;
	font-size: xx-large;
	color: darkblue;
	line-height: 1.5em;
}
.medium1 {
	display: block;
	text-align: center;
	font-size: medium;
	line-height: 2em;
}
.medium2 {
	display: block;
	text-align: center;
	font-size: medium;
	line-height: 2em;
	color: white;
}
.fsLarge {
	font-size: large;
}
.color_info {
	color:indianred;
}
div.text {
	padding: 6px;
	text-align: center;
	font-size: medium;
}

div.textinfo {
	padding: 10px;
	text-align: center;
//	align-items: bottom;
	font-size: medium;
	border: 5px solid indianred;
	border-radius: 15px;
	width: 10em;
	height: 10em;
/*
	display: flex;
*/
	margin-left: auto;
	margin-right: auto;
	margin-bottom:30px;
	color: indianred;
}

div.schattig {
	text-shadow: 1px 1px 1px green;
}

/* ========================= Auf- und Zu-klappen via details und summary ========================= */
details>summary span.icon {
	width: 24px;
	height: 24px;
	transition: all 0.3s;
	margin-left: auto;
}
details[open] summary span.icon {
	transform: rotate(90deg);
}
summary {
//	display: flex;
	cursor: ns-resize;
	outline: none;
}

/* ============================== post it ============================== */
.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;
}

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