@charset "utf-8";
/* CSS Document */

/* fuer ICONS in NAVI */
/*@font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot?od5i8f');
	src: url('fonts/icomoon.eot?od5i8f#iefix') format('embedded-opentype'),
		url('fonts/icomoon.ttf?od5i8f') format('truetype'),
		url('fonts/icomoon.woff?od5i8f') format('woff'),
		url('fonts/icomoon.svg?od5i8f#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}*/

/* fuer Logo */
/*@font-face {
    font-family: 'Indie Flower';
    src: url('fonts/IndieFlower.eot');
    src: url('fonts/IndieFlower.eot?#iefix') format('embedded-opentype'),
        url('fonts/IndieFlower.woff2') format('woff2'),
        url('fonts/IndieFlower.woff') format('woff'),
        url('fonts/IndieFlower.ttf') format('truetype'),
        url('fonts/IndieFlower.svg#IndieFlower') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Indie Flower';
    src: url('fonts/IndieFlower_1.eot');
    src: url('fonts/IndieFlower_1.eot?#iefix') format('embedded-opentype'),
        url('fonts/IndieFlower_1.woff2') format('woff2'),
        url('fonts/IndieFlower_1.woff') format('woff'),
        url('fonts/IndieFlower_1.ttf') format('truetype'),
        url('fonts/IndieFlower_1.svg#IndieFlower') format('svg');
    font-weight: normal;
    font-style: normal;
}*/

/* latin 
@font-face {
	font-family: 'Indie Flower';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Indie Flower'), local('IndieFlower'), 
		url(https://fonts.gstatic.com/s/indieflower/v11/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}*/

/*@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');*/


/* latin 
@font-face {
	font-family: 'Literata';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/literata/v14/or38Q6P12-iJxAIgLa78DkTtAoDhk0oVpaLlbJ5W.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}*/

/*@import url('https://fonts.googleapis.com/css?family=Literata&display=swap');*/


/* fuer Ueberschriften */
/* latin */
/*@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
	src: local('Literata'),
  		local('Literata'),
		url('fonts/Literata-Regular.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}*/


/* fuer Logo */
/* latin */
@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
	src: local('Indie Flower'),
  		local('IndieFlower'),
		url('https://my-gaestebuch.de/fonts/IndieFlower.woff2') format('woff2'),
		url('https://my-gaestebuch.de/fonts/IndieFlower_1.eot?#iefix') format('embedded-opentype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


nav {
	margin: 0;
	padding: 0;
	font-size: 1.2em;
}


#logo {
	display: block;
	float: left;
	padding: 0;
	margin: 0 0 0.5em; /* 1em 0 0.5em; */
}

#logo h2 {
	font-size: 1.5rem;
	margin: 0.8em 0 0;
	padding: 0;
}
#logo a {
	color: #525252;
	font-family: 'Indie Flower', cursive;
	text-decoration: none;
	/*font-weight: 800;
	font-style: italic;*/
}
/* ------------------------------------------------ */
/*#logo h2 span.regenbogen {
	font-size: 3.3rem;
	color: #525252;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(
		to right,
		violet 14%,
		red 14%,
		red 25%,
		orange 25%,
		orange 37%,
		gold 37%,
		gold 45%,
		palegreen 45%,
		palegreen 56%,
		green 56%,
		green 68%,
		turquoise 68%,
		turquoise 80%,
		blue 80%,
		blue 89%,
		purple 89%
	);*/
	/*background-image: linear-gradient(90deg,blue,yellow,red,purple);*/
	/*background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);*/
/*}*/

/*@media all and (-ms-high-contrast:none) {
     #logo h2 span.regenbogen { background-image: none; }*/ /* IE10 */
     /**::-ms-backdrop, #logo h2 span.regenbogen {background-image: none; }*/ /* IE11 */
/*}*/
/* ------------------------------------------------ */
#logo h2 span.regenbogen {
	animation-duration: 3.115s;
}

#logo h2 span.regenbogen {
	font-size: 3.3rem;
	/*background: #525252 linear-gradient(40deg, red 0, orange 16.65%, yellow 33.3%, green 50%, blue 66.65%, indigo 83.3%, violet 100%);*/
	background: #525252 linear-gradient(53.13deg, #FFD33D 0, #FB8532 16.02%, #EA4A5A 28.06%, #8A63D2 56.92%, #2188FF 72.93%, #34D058 84%, #FFD33D 100%);
	background-size: auto;
	background-clip: border-box;
	background-clip: text;
	display: inline-block;
	color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	animation: shine 6.5s alternate infinite;
	animation-duration: 6.5s;
	background-size: 300%;
}
@media all and (-ms-high-contrast:none) {
     #logo h2 span.regenbogen {color: #525252; background: transparent;} /* IE10 */
     *::-ms-backdrop, #logo h2 span.regenbogen {color: #525252; background: transparent;} /* IE11 */
}
@keyframes shine {
	0% {
		background-position: 200% center
	}
	50% {
		background-position: 100% center
	}
	100% {
		background-position: 200% center
	}
}
/* ------------------------------------------------ */

/* Gluehende Neon Buchstaben */
/*#logo h2 span.regenbogen {
	color: #525252;
	font-size: 3.3rem;
	background-color: transparent;
	animation: neonGlow 3s infinite alternate cubic-bezier(0.455, 0.030, 0.515, 0.955);
}

@keyframes neonGlow {
	0% {
		text-shadow: 0 0 10px rgba(51, 51, 51, 0.3), 0 0 40px rgba(51, 51, 51, 0.3),
		0 0 22px rgba(51, 51, 51, 0.3), 0 0 40px rgba(255, 255, 255, 0.3),
		0 0 60px rgba(255, 255, 255, 0.3), 0 0 80px rgba(255, 255, 255, 0.1),
		0 0 100px rgba(255, 255, 255, 0.1), 0 0 140px rgba(255, 255, 255, 0.1),
		0 0 200px rgba(255, 255, 255, 0.1);
	}
	100% {
		text-shadow: 0 0 2px rgba(51, 51, 51, 0.2), 0 0 1px rgba(51, 51, 51, 0.2),
		0 0 10px rgba(51, 51, 51, 0.2), 0 0 20px rgba(255, 255, 255, 0.2),
		0 0 30px rgba(255, 255, 255, 0.2), 0 0 40px rgba(255, 255, 255, 0.2),
		0 0 50px rgba(255, 255, 255, 0.9), 0 0 80px rgba(255, 255, 255, 0.9);
	}
}*/
/* ------------------------------------------------ */

#logo .motto {
	font-size: 0.9rem;
	display: block;
	margin: 0;
	padding: 0;
	text-align: right;
	font-weight: lighter;
	color: #525252;
}
#logo h2 + .motto {
	margin-top: -0.9em;
}

.caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px dashed;
    display: inline-block;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    width: 0;
}
.caret {
    /*border-color: #000;*/
	border-color: currentcolor;
    border-style: none solid solid none;
    border-width: medium 2px 2px medium;
    height: 6px;
    margin-left: 3px;
    margin-top: -3px;
    width: 6px;
	text-align: right;
}
.pfo {margin-left: 10px; transform: rotate(225deg); /* nach oben */}
.pfr {margin-left: 10px; transform: rotate(315deg); /* nach rechts */}
.pfu {margin-left: 10px; transform: rotate(45deg); /* nach unten */}
.pfl {margin-left: 10px; transform: rotate(135deg); /* nach links */}

nav::after {
	content: "";
	display: table;
	clear: both;
}

ul.menu {
	margin-top: 2.2em; /* abstand noch oben */
	padding-right: 0; /* 15px */
	/*border: 1px dotted #F00;*/
}
ul.menu > li:last-child {
	padding-right: 0;
}
nav ul {
	float: right;
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}
nav ul li {
	margin: 0;
	line-height: 2.3em;/**/
	display: inline-block;
	float: left;
	font-weight: normal;
}
nav ul li a.nav-submenu {
	cursor: default;
}
nav ul a {
	display: block;
	padding: 0 0.7em;
	color: #525252;
	font-size: 1rem;
	text-decoration: none;
}

nav ul a:hover {
	text-decoration: none;
	color: #161616;
}

nav ul li ul li {
	margin-top: 0;
	margin-bottom: 0;
	border-bottom: 1px solid #e9e9e9;
	background: #fff;
	box-shadow: 2px 2px 4px darkgray;
	opacity: unset;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* Hack IE 10 fuer Submenue */
	nav ul li ul li {
		z-index: 90;
	}
}

nav ul li ul li:hover {
	color: #161616;
	background: #f0f0f0;
	transition: all 0.15s ease-in-out 0.15s;
}

nav ul ul {
	display: none;
	position: absolute;
	top: 2.3em;
}

nav ul li:hover > ul {
	display: inherit;
}

nav ul ul li {
	width: auto; /* 170px; */
	float: none;
	display: list-item;
	position: relative;
}

nav ul ul ul li {
	position: relative;
	top: -2.3em;
	left: 170px;
}
nav ul li > a::after {
	content: '';
}

/* Plus Zeichen einfuegen wenn Menue Unterpunkte hat */
/*nav ul li li > a::after {
	float: right;
	font-size: 1.2em;
	content: '›';*/
		/*content: '»';*/
		/*content: ' \ea42';
		font-family: 'icomoon' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;*/
/*}*/
.toggle, [id^=drop] {
	display: none;
}
/* Plus Zeichen bei ohne Unterpunkte entfernen */
/*li > a:only-child::after { 
	content: '';
}*/

/* schalte Interaktionen beim Submenu ab (beim Desktop) */
nav ul.menu li > a.nav-submenu {
	pointer-events: none;
	cursor: default;
}
nav ul.menu li.anker {
	display: none;
}


@media all and (max-width: 1000px) {
	#logo h2 a {
		font-size: 1.2rem;
		margin-top: 0;
		margin-bottom: 0;
		/*border: 1px dotted #FF0;*/
	}
	#logo h2 a span.regenbogen {
		font-size: 2.1rem;
	}
	#logo .motto {
		font-size: 0.8rem;
		text-align: left;
	}
	#logo h2 + .motto {
		margin-top: -0.3em;
	}

	nav { margin: 0; }

	ul.menu {
		margin-top: 0;
		padding: 0;
		/*color: #3F0; #525252;*/
	}
	nav ul.menu li.anker {
		display: block;
	}
	/*ul.menu a {
		color: #525252;
	}*/
	.toggle + a, .menu { display: none; } /* entfernt zusätzliche Hauptpunkt der weiteren Stufen */

	.toggle {
		display: inline-block;/*block*/
		padding: 0;
		font-size: 1rem;
		line-height: 2.5em;
		text-decoration: none;
		float: right;
		cursor: pointer;
		margin-top: 15px;
		margin-bottom: 8px;
	}
	.menu li .toggle { /* fuer erste ebene der Navi nach der Überschrift */
		padding: 0 0.5em 0 1em;
		margin: 0;
	}

	.navbar-toggle {
		background-color: transparent;
		background-image: none;
		border: 1px solid transparent;
		border-radius: 4px;
		/*float: right;
		position: relative;*/
		margin-top: 1.4em;
		margin-right: 1em;
		padding: 9px 10px;
		cursor: pointer;
	}
	.navbar-toggle:focus {
		outline: 0 none;
	}
	.navbar-toggle {
		border-color: #ddd;
		transition: all 0.5s ease 0s;
	}
	.navbar-toggle:focus, .navbar-toggle:hover {
		background-color: #e8e8e8;
	}
	.navbar-toggle span.icon-bar {
		border-radius: 1px;
		display: block;
		height: 2px;
		width: 22px;
		background-color: #888;
	}
	.navbar-toggle span.icon-bar + span.icon-bar {
		margin-top: 4px;
	}

	ul.menu a {
		color: #525252;
	}
	ul.menu li .toggle { /* fuer die weiteren Navi Stufe */
		display: block;
		float: none;
		margin-top: 0;
		color: #525252;
	}
	ul.menu li.homezeichen:nth-child(1) > a, ul.menu li:nth-child(1) > label.toggle {
		border-top: 1px dotted #656574; /* solid #e9e9e9; */
	}
	.menu li > a {
		border-bottom: 1px dotted #656574; /* solid #e9e9e9; */
	}
	.menu li > .toggle {
		border-bottom: 1px dotted #656574; /* solid #e9e9e9; */
		padding: 0 0.5em 0 1.5em;
	}
	.menu li li .toggle { /* fuer zweite ebene der Navi nach der Überschrift */
		padding: 0 0.5em 0 3em;
	}

	[id^=drop]:checked + ul {
		display: block;
	}

	nav ul {
		float: left;
		width: 100%;
		background-color: #fff; /* #28323D; */
	}

	nav ul li {
		display: block;
		width: 100%;
		
		/*position: relative;
		-webkit-transition: -webkit-transform 3000ms ease-in;
		transition: -webkit-transform 3000ms ease-in;
		transition: transform 3000ms ease-in;
		transition: transform 3000ms ease-in, -webkit-transform 3000ms ease-in;*/
	}

	nav ul li a {
		/*background-color: #525252;  der Hintergrund der ersten Elemente */
		color: #000;
	}

	nav ul li ul li {
		border-bottom: 0;
		box-shadow: none;
	}

	nav ul .toggle, nav ul a { padding: 0 0.5em 0 1.5em; }

	nav ul ul .toggle, nav ul ul a { padding: 0 0.5em 0 3em; }

	nav ul ul ul a { padding: 0 0.5em 0 4.5em; }

	nav a:hover, nav ul ul ul a { /*background-color: #3CA4FF;*/ } /* der Hintergrund der letzten (dritte) Elemente */

	nav ul li ul li .toggle, nav ul ul a { background-color: #fff; } /* #28323D; der Hintergrund der zweiten Elemente */

	nav ul ul {
		float: none;
		position: static;
		color: #000;
	}

	nav ul ul li:hover > ul, nav ul li:hover > ul {
		display: none;
	}

	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
	}

	nav li:last-child {
		margin-bottom: 0.3em;
	}

	nav label .iconrechts {
		float: right;
		padding-right: 10px;
		font-style: normal;
		font-size: 0.7rem;
	}
}

@media all and (max-width: 400px) {
	/*#logo {
		width: 100%;
		max-width: 191px;
		background: #fff url('logo-klein2.png') no-repeat left center;
		margin: 15px 0 8px 15px;
	}
	#logo h2 a {
		min-height: 46px;
	}*/
	#logo h2 {
		margin-top: 5px;
	}
	#logo {
		margin-bottom: 1px;
	}
	#logo .motto {
		display: none;
	}
	.navbar-toggle {
		margin-top: 0.5em;
		margin-bottom: 0;
	}
}