*{
margin	: 0px;
padding	: 0px;
}



#page {
	max-width			: 1040px;
	width				: 100%;
	height				: 1%;
	height				: auto;
	padding				: 0px;
	background			: var(--color-background);
	position			: relative;
	margin-left			: auto;
	margin-right		: auto;
	box-shadow			: 10px 10px 10px -10px rgb(from var(--color-text-inactive) r g b / 0.75);
	border-radius		: 0 0 15px 15px;
}

#cover {
	background-image	: url(https://www.schattenzeilen.de/images/cover.jpg);
	background-size		: cover;
	background-position : right;
	width				: 100%;
	height				: 200px;
	overflow			: hidden;
	top					: 0px;
	-moz-filter			: var(--moz-filter-img);
	-webkit-filter		: var(--webkit-filter-img);
	filter				: var(--filter-img);
}

#main {
	height			: 1%;
	height			: auto;
	background		: var(--color-background);
}

#content_nest
{
	background	: var(--color-background);
	padding		: 4px;
	position	: relative;
}

#overlay_box
{
	opacity			: 1.0;
	width			: 230px;
	max-width		: 230px;
	display 		: block;
	position		: fixed;
	z-index			: 10001;
	top				: 130px;
	max-height		: calc( 100vh - 140px);
	overflow		: auto;
	
}

/* Größe: Desktop */
@media (min-width:768px) {
	#overlay_box {
		display 	: block;
		position	: fixed;
	}
}

/* Größe: Tablet */
@media (min-width:768px) and (max-width:991px) {
	#overlay_box {
		display 	: block;
		position	: fixed;
	}
}

/* Größe: Mobilgerät */
@media (max-width:767px) {
	#overlay_box {
		display 	: block;
		position	: fixed;
	}
}

#chattextwrapper
{
	width		: 100%;
	max-height	: calc( 100vh - 170px);
	overflow-y	: scroll;
	
}

#overlay_chat
{
	opacity			: 1.0;
	width			: 230px;
	max-width		: 230px;
	display 		: block;
	position		: fixed;
	z-index			: 10001;
	top				: 150px;
	overflow		: auto;
}

/* Größe: Desktop */
@media (min-width:768px) {
	#overlay_chat {
		display 	: block;
		position	: fixed;
	}
}

/* Größe: Tablet */
@media (min-width:768px) and (max-width:991px) {
	#overlay_chat {
		display 	: block;
		position	: fixed;
	}
}

/* Größe: Mobilgerät */
@media (max-width:767px) {
	#overlay_chat {
		display 	: block;
		position	: fixed;
	}
}

#content
{
	background			: var(--color-background);
	margin-left			: 10px;
	margin-right		: 10px;
	border				: 0px solid var(--color-text);
	z-index				: 100;
}

@media screen and (max-width: 767px) {
	#content {
		margin-right: 10px;
	}
}


#footer{
	border-top			: 1px solid var(--color-text-inactive);
	background			: var(--color-background-inactive);
	background-image	: url(https://www.schattenzeilen.de/images/footer.png);
	background-repeat	: no-repeat;
	background-position	: top right;
	padding-left		: 10px;
	border-radius		: 0 0 15px 15px;
	-moz-filter			: var(--moz-filter-img);
	-webkit-filter		: var(--webkit-filter-img);
	filter				: var(--filter-img);
}



.comment {
	position				: relative;
	border					: 1px solid var(--color-text);
	border-radius			: 10px;
	-webkit-border-radius	: 10px;
	-moz-border-radius		: 10px;	
	box-shadow				: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
	margin-left				: 20px;
	margin-right			: 10px;
	padding					: 10px;
	padding-bottom			: 10px;
	background-color		: var(--color-background);
}


/* Größe: Desktop */
@media (min-width:768px) {
	.comment {
		margin-left		: 45px;
	}
}

/* Größe: Tablet */
@media (min-width:768px) and (max-width:991px) {
	.comment {
		margin-left		: 40px;
	}
}

/* Größe: Mobilgerät */
@media (max-width:767px) {
	.comment {
		margin-left		: 20px;
	}
}



.comment:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 13px;
	top: -15px;
	border-left: 2px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 15px solid var(--color-text);
}

.comment:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 14px;
	top: -14px;
	border-left: 1px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 15px solid var(--color-background);
}




#pagetime-warningwrapper {
	display				: none;
	position			: fixed;
	width				: 100%;
	height				: 100%;
	top					: 0px;
	left				: 0;
	right				: 0;
	bottom				: 0;
	background-color	: rgba(0,0,0,0.5);
	z-index				: 99999;
	cursor				: pointer;
}


#pagetime-warning {
	display				: none;
	padding				: 5px;
	width				: 500x;
	border				: 1px solid var(--color-text);
	background-color	: var(--color-background);
	box-shadow			: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
	z-index				: 99999;
	margin				: 0 auto;
}

#pagetime-warning h2 {
   text-align: center;
}
#pagetime-warning p {
   text-align: center;
}



form {
	/* width-Angabe im Eltern-Element (BOX-Model!) für dynamische Breite [textarea] */
	width: 100%;
}



.flex-container, .flex-container-reverse {
	display			: flex;
	flex-direction	: row;
	justify-content	: center;
	align-content	: center;
	align-items		: center;
	justify-self	: center;
	margin-bottom	: 1em;
}

.flex-container {
	flex-wrap		: wrap;
}

.flex-container-reverse {
	flex-wrap		: wrap-reverse;
}




/* Größe: Tablet */
@media (min-width:768px) and (max-width:991px) {
	
	.flex-container, .flex-container-reverse {
		flex-direction	: row;
	}
	
	.flex-item-background, .flex-item-background-accent {
		min-width	: 100%;
	}
}

/* Größe: Mobilgerät */
@media (max-width:767px) {
	
	.flex-container, .flex-container-reverse {
		flex-direction	: row;
	}
	
	.flex-item-background, .flex-item-background-accent {
		min-width	: 100%;
	}
}



.flex-item-background, .flex-item-background-accent {
	display			: flex;
	justify-content	: center;
	align-content	: center;
	align-items		: center;
	justify-self	: center;
	width			: 100%;
	margin			: 0em;
	flex-basis		: 40%;
	flex-grow		: 1;
	flex-shrink		: 1;
	align-self		: stretch;	
}

.flex-item-background {
	padding-left	: 1.5em;
	padding-right	: 1.5em;
}

.flex-item-background-accent {
	padding			: 0.2em;
	background		: var(--color-background);
}

.flex-item-innerdiv {
	height		: 100%;
	width		: 100%;
	display		: contents;
}

.flex-item-innerdivbanner {
	position		: absolute;
	top				: 0px;
	left			: 0em;
	width			: 100%;
	height			: 100%;
	display			: flex; 
	flex-direction	: column; 
	justify-content	: center;
	align-items		: center;
}

.flex-item-innerdivbannerfontright, .flex-item-innerdivbannerfontleft {
	color			: var(--color-background);
	width			: 100%;
	padding-block	: 0.3em;
}

.flex-item-innerdivbannerfontright {
	padding-left	: 0.9em;
	text-align		: left;
	background-image: linear-gradient(42deg, var(--color-background-accent), transparent);
}

.flex-item-innerdivbannerfontleft {
	padding-right	: 0.9em;
	text-align		: right;
	background-image: linear-gradient(42deg, transparent, var(--color-background-accent));
}

.flex-item-innerimg {
	width					: 100%;
	border-radius			: 10px;
	-webkit-border-radius	: 10px;
	-moz-border-radius		: 10px;	
	aspect-ratio			: 1/1;
	object-fit				: cover;
}


.popupbox {
	position			: absolute;
	z-index				: 199;
	border				: 1px solid var(--color-text);
	background-color	: var(--color-background);
	box-shadow			: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}


.notebox {
	background			: var(--color-background);
	border				: 1px solid var(--color-background-inactive);
	padding				: 5px;
	margin-bottom		: 10px;
	box-shadow			: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}


.textbox {
	background				: var(--color-background);
	border					: 1px solid var(--color-background-inactive);
	border-radius			: 0.5em;
	-webkit-border-radius	: 0.5em;
	-moz-border-radius		: 0.5em;
	padding					: 10px;
	margin-top				: 10px;
	margin-bottom			: 10px;
	box-shadow				: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
	overflow				: auto;
}


.magazine {
	display					: flex;
	flex-wrap				: wrap;
	flex-direction			: row;
	align-items				: stretch;
	align-content			: stretch;
	justify-content			: space-evenly;
	width					: 100%;
	background				: var(--color-background-inactive);
	border-radius			: 0.5em;
	-webkit-border-radius	: 0.5em;
	-moz-border-radius		: 0.5em;
	margin-top				: 2em;
	overflow				: hidden;
}

.magazinebox {
	flex-grow				: 1;	
	background				: var(--color-background);
	border					: 1px solid var(--color-background-inactive);
	border-radius			: 0.5em;
	-webkit-border-radius	: 0.5em;
	-moz-border-radius		: 0.5em;
	box-sizing				: border-box;
	padding					: 1em;
	margin					: 1em;
	box-shadow				: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
	max-width				: 300px;
	transform				: scale(1);
	transition				: transform .5s;
}

.magazinebox > * {
	flex				: 1 1 calc(300px + 1em));
	flex-grow			: 1;
	flex-shrink			: 1;
	flex-basis			: 300px;
}

.magazinebox:hover {
	transform			: scale(1.03);
	transition			: transform .5s;
}



.listbox,.listbox_inactive,.listbox_alert {
	min-height				: 120px;
	height					: auto !important;
	height					: 120px;
	margin-top				: 6px;
	margin-bottom			: 15px;
	padding					: 5px;
	padding-bottom			: 15px;
	border					: none;
	border-right			: none;
	border-bottom			: none;
	border-radius			: 5px;
	-webkit-border-radius	: 5px;
	-moz-border-radius		: 5px;	
}

.listbox {
	background-color	: transparent;
}

.listbox_inactive {
	background-image	: linear-gradient(120deg, var(--color-background-inactive) 0%, transparent 32%);
}

.listbox_alert {
	background-image	: linear-gradient(120deg, var(--color-alert) 0%, transparent 32%);
}



.paperbox {
	min-height			: 120px;
	height				: auto !important;
	height				: 120px;
	margin-top			: 6px;
	margin-bottom		: 15px;
	padding				: 5px;
	padding-left		: 24px;
	padding-bottom		: 10px;
	padding-right		: 20px;
	border				: 1px solid var(--color-background-inactive);
	overflow			: auto;
	overflow-x			: hidden;
	background-color	: transparent;
	background-image	: linear-gradient(150deg, var(--color-background) 50%, var(--color-background-inactive) 100%);
	background-position	: top left;
	background-size		: 100%;
	background-repeat	: repeat-y;
	box-shadow			: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}


.quotebox {
	min-height			: 120px;
	height				: auto !important;
	height				: 120px;
	margin-top			: 6px;
	margin-bottom		: 15px;
	margin-left			: 50px;
	padding				: 5px;
	padding-left		: 50px;
	padding-bottom		: 10px;
	padding-right		: 20px;
	border				: none;
	border-right		: none;
	border-bottom		: none;
	background-color	: transparent;
}


.hintbox{
	border-width	: 3px;
	border-style	: solid;
	border-image	: linear-gradient(
						  to bottom right, 
						  var(--color-background-accent), 
						  rgba(255, 255, 255, 0),
						  rgba(255, 255, 255, 0),
						  var(--color-background-accent)
						) 1 35%;
	padding			: 10px;
	padding			: 10px;
	margin-top		: 10px;
	margin-bottom	: 10px;
}


.ripbox{
	border-width	: 3px;
	border-style	: solid;
	border-image	: linear-gradient(
						  to bottom right, 
						  var(--color-text), 
						  rgba(255, 255, 255, 0),
						  rgba(255, 255, 255, 0),
						  var(--color-text)
						) 1 35%;
	padding			: 10px;
	padding			: 10px;
}


.userpic{
	margin		: 5px;
	width		: 100px;
	min-width	: 100px;
	height		: 100px;
	min-height	: 100px;
	font-size	: 0; 
}



.polaroid {
	background	: var(--color-background);
	border		: 1px solid var(--color-background-inactive);
	padding		: 1rem;
	box-shadow	: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}

.polaroid > img{
	width: auto;
	height: auto;
}

.polaroid-caption {
	font-size: 1.8rem;
	text-align: center;
	line-height: 2em;
}

.polaroid-item .polaroid:before {
	content: '';
	position: absolute;
	z-index: -1;
	transition: all 0.40s;
}

.polaroid-item:nth-child(2n) {
	transform: scale(0.8, 0.8) rotate(5deg);
	transition: all 0.35s;
}

.polaroid-item:nth-child(2n) .polaroid:before {
	transform	: rotate(6deg);
	height		: 20%;
	width		: 27%;
	bottom		: 30px;
	right		: 12px;
	box-shadow	: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}

.polaroid-item:nth-child(2n+1) {
	transform	: scale(0.8, 0.8) rotate(2deg);
	transition	: all 0.35s;
}

.polaroid-item:nth-child(2n+1) .polaroid:before {
	transform	: rotate(3deg);
	height		: 20%;
	width		: 27%;
	bottom		: 30px;
	right		: 12px;
	box-shadow	: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}

.polaroid-item:nth-child(3n) {
	transform	: scale(0.8, 0.8) rotate(-5deg);
	transition	: all 0.35s;
}

.polaroid-item:nth-child(3n) .polaroid:before {
	transform	: rotate(-6deg);
	height		: 20%;
	width		: 27%;
	bottom		: 30px;
	left		: 12px;
	box-shadow	: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}

.polaroid-item:nth-child(3n+1) {
	transform	: scale(0.8, 0.8) rotate(7deg);
	transition	: all 0.35s;
}

.polaroid-item:nth-child(3n+1) .polaroid:before {
	transform	: rotate(8deg);
	height		: 20%;
	width		: 27%;
	bottom		: 30px;
	left		: 12px;
	box-shadow	: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}

.polaroid-item:nth-child(7n+1) {
	transform	: scale(0.8, 0.8) rotate(-7deg);
	transition	: all 0.35s;
}

.polaroid-item:nth-child(7n+1) .polaroid:before {
	transform	: rotate(-8deg);
	height		: 20%;
	width		: 27%;
	bottom		: 30px;
	left		: 12px;
	box-shadow	: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}

.polaroid-item:hover {
	filter		: none;
	transform	: scale(1, 1) rotate(0deg);
	transition	: all 0.40s;
}
.polaroid-item:hover .polaroid:before {
	content		: '';
	position	: absolute;
	z-index		: -1;
	transform	: rotate(0deg);
	height		: 60%;
	width		: 30%;
	bottom		: 0%;
	right		: 10%;
	box-shadow	: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
	transition	: all 0.35s;
}

#votesquare {
	width		: 100px;
	height		: 5px;
	border		: 1px solid var(--color-background-inactive);
	background	: var(--color-background);
	line-height	: 3px;
	font-size	: 0; 
}

#votesquare p {
	height		: 5px;
	display		: block;
	background	: #C90101;
	margin		: 0px;
}

#votesquare span {
	position	: left;
	margin		: 0px 0px 0px 65px;
}



div.tooltip {
	z-index				: 200;
	display				: none;
	margin-top			: 6px;
	margin-bottom		: 6px;
	padding				: 5px;
	border				: 1px solid var(--color-background-inactive);
	border-right		: 1px solid var(--color-background);
	border-bottom		: 1px solid var(--color-background);
	background-color	: var(--color-background);
	box-shadow			: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}


.y-scrollable {
	width				: 100%;
	overflow-y			: auto;
	cursor				: grabbing;
	border				: 1px solid var(--color-background-inactive);
	box-shadow			: inset -5px 0px 5px 0px rgb(from var(--color-text) r g b / 0.25);
}

.y-scrollable::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 0px;
	height: 0px;
}

.y-scrollable::-webkit-scrollbar-thumb {
	border-radius			: 0px;
	-webkit-border-radius	: 0px;
	-moz-border-radius		: 0px;
	border: 0px solid var(--color-background);
	background-color: rgba(0, 0, 0, .3);
}


.nofloat {
	overflow	: hidden;
	width		: 100%;
	clear		: both;
}


.floatblock {
	display		: inline-block;
	width		: 100%;
}


#album {
	float				: left;
	width				: 320px; 
	height				: auto; 
	background-image	: url(https://www.schattenzeilen.de/images/background_box_left.jpg);
	background-repeat	: repeat-y;
	background-position	: left;
	border				: 1px solid var(--color-text);
	margin				: 10px 10px 10px 0;
}



.overlay-wrapper{
	display				: none;
	position			: absolute;
	top					: 0px;
	left				: 0px;
	width				: 100%;
	height				: 100%;
	z-index				: 99999;
	background			: rgba(0,0,0,0.5);
}

.overlay{
	position			: relative;
	overflow			: auto;
	z-index				: 10001;
	padding				: 5px;
	padding-top			: 20px;
	height				: calc( 100vh - 190px);
	max-height			: calc( 100vh - 190px);
	margin-top			: 150px;
	margin-left			: 10px;
	margin-right		: 10px;
	border				: 1px solid var(--color-text);
	background-color	: var(--color-background);
	box-shadow			: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}



.lexicon {
	display				: none;
	position			: fixed;
	left				: 25px;
	bottom				: 20px;
	padding				: 5px;
	width				: 360px;
	border				: 1px solid var(--color-text);
	background-color	: var(--color-background);
	box-shadow			: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
	z-index				: 101;
}

/* Größe: Desktop */
@media (min-width:768px) {
	#lexicon {
		width			: 360px;
	}
}

/* Größe: Tablet */
@media (min-width:768px) and (max-width:991px) {
	#lexicon {
		width				: 360px;
	}
}

/* Größe: Mobilgerät */
@media (max-width:767px) {
	#lexicon {
		width				: 150px;
		left				: 1px;
		padding				: 1px;
	}
}




.togglelamp_radio{
	position				: relative;
	background				: var(--color-background);
	overflow				: hidden;
	border-radius			: 50px;
	-webkit-border-radius	: 50px;
	-moz-border-radius		: 50px;
	height					: 1.8em;
	width					: 1.8em;
}

.togglelamp_radio > * {
	float	: left;
}

.togglelamp_radio input[type=radio]{
	display	: none;
}

.togglelamp_radio label{
	color					: var(--color-text);
	z-index					: 0;
	display					: block;
	width					: 1.5em;
	height					: 1.5em;
	margin					: 1px 1px;
	border-width			: 1px;
	border-style			: solid;
	border-color			: var(--color-button-border);
	border-radius			: 50px;
	-webkit-border-radius	: 50px;
	-moz-border-radius		: 50px;
	cursor					: pointer;
	z-index					: 1;
	text-align				: center;
}

.togglelamp_option_slider{
	width					: 1.5em;
	height					: 1.5em;
	position				: absolute;
	top						: 1px;
	border-width			: 1px;
	border-style			: solid;
	border-color			: var(--color-button-border);
	border-radius			: 50px;
	-webkit-border-radius	: 50px;
	-moz-border-radius		: 50px;
	-webkit-transition		: all .4s ease;
	-moz-transition			: all .4s ease;
	-o-transition			: all .4s ease;
	-ms-transition			: all .4s ease;
	transition				: all .4s ease;
}

.togglelamp_label_left{
	background-color		: #ffc7c7;
}

.togglelamp_label_middle{
	background-color		: #fffec7;
}

.togglelamp_label_right{
	background-color		: #c8ffc7;
}


input[type=radio][id^="togglelamp_left_"]:checked ~ .togglelamp_option_slider{
	background	: rgba(0,0,0,.2);
	left		: 0em;
}
input[type=radio][id^="togglelamp_middle_"]:checked ~ .togglelamp_option_slider{
	background	: rgba(0,0,0,.2);
	left		: 1.8em;
}
input[type=radio][id^="togglelamp_right_"]:checked ~ .togglelamp_option_slider{
	background	: rgba(0,0,0,.2);
	left		: 3.6em;
}



input[type=radio][id^="togglelamp_"]:checked ~ .togglelamp_option_slider::before {
	position							: absolute;
	font-size							: 18px;
	left								: 5px;
	top									: -5px;
	font-weight							: 700;
	content								: '\02714';
	-webkit-animation-name				: glowchecked;
    -webkit-animation-duration			: 1s;
    -webkit-animation-iteration-count	: 1;
    -webkit-animation-timing-function	: linear;
    -webkit-animation-delay				: 0s;
}

@-webkit-keyframes glowchecked {
	0% {
		}
	10%,14% {
		text-shadow:	-2px -5px 10px #ff0000,
						-5px 0px 10px #950000,
						-5px 5px 10px #000000;
	}
	12%,16% {
		text-shadow:	2px 5px 10px #ff0000,
						5px 0px 10px #950000,
						5px -5px 10px #000000;
	}
	20% {
		text-shadow: none;
	}
}




input[type=submit] { 
	display					: inline-block;
	border-radius			: 4px;
	-webkit-border-radius	: 4px;
	-moz-border-radius		: 4px;
	background				: none repeat scroll 0 0 var(--color-button);
	border					: 1px solid var(--color-button-border);
	cursor					: pointer;
	padding					: 4px;
	margin					: 2px;
	color					: var(--color-text);
	text-decoration			: none;
	transition				: 0.5s;
}

input[type=submit]:hover { 
	background	: var(--color-button-hover);
	transform	: scale(1.1);
	transition	: 0.5s;
}


input[type=button] { 
	background				: var(--color-button);
	cursor					: pointer;
	border					: 1px solid var(--color-button-border);
	border-radius			: 4px;
	-webkit-border-radius	: 4px;
	-moz-border-radius		: 4px;
	padding					: 4px;
	margin					: 2px;
	transition				: 0.5s;
}

input[type=button]:hover { 
	background	: var(--color-button-hover);
	transform	: scale(1.1);
	transition	: 0.5s;
	z-index		: 50;
}



button { 
	background				: var(--color-button);
    cursor					: pointer;
	border					: 1px solid var(--color-button-border);
	border-radius			: 4px;
    -webkit-border-radius	: 4px;
    -moz-border-radius		: 4px;
    padding					: 4px;
	margin					: 2px;
	transition				: 0.5s;
}

button:hover { 
	background	: var(--color-button-hover);
	transform	: scale(1.1);
	transition	: 0.5s;
}




span.starvote {
 float: left;
}

span.starvote:not(:checked) > input {
 display: none;
}

span.starvote:not(:checked) > label {
 float		: right;
 width		: 0.8em;
 padding	: 0.1em;
 overflow	: hidden;
 white-space: nowrap;
 cursor		: Pointer;
 font-size	: 200%;
 line-height: 1.2;
 xcolor		: #D0D0D0;
 color		: #f1f1f1;
 text-shadow: 1px 1px #B0B0B0, 2px 2px #606060, .1em .1em .2em rgba(0,0,0,.5);
 transition	: all .5s;
}

span.starvote:not(:checked) > label:before {
 content: "\2605 ";
}

span.starvote > input:checked ~ label {
 color		: #FFD700;
 text-shadow: 1px 1px #C06000, 2px 2px #904000, .1em .1em .2em rgba(0,0,0,.5);
}

span.starvote:not(:checked) > label:hover,
span.starvote:not(:checked) > label:hover ~ label {
	color		: #FFD700;
	text-shadow	: 1px 1px #F29E02, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

span.starvote > input:checked + label:hover,
span.starvote > input:checked + label:hover ~ label,
span.starvote > input:checked ~ label:hover,
span.starvote > input:checked ~ label:hover ~ label,
span.starvote > label:hover ~ input:checked ~ label {
	color		: #F9B500;
	text-shadow	: 1px 1px #F8BA01, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}




.responsive-video iframe {
position	: absolute;
top			: 0;
left		: 0;
width		: 100%;
height		: 100%;
}

.responsive-video {
position		: relative;
padding-bottom	: 56.25%; /* Default für Videos 16:9 ratio*/
padding-top		: 0px;
height			: 0;
overflow		: hidden;
}



/* Progressbar Klasse für jquery.lineProgressbar */
.progressbar {
    width			: 100%;
	margin-top		: 5px;
	margin-bottom	: 35px;
	position		: relative;
	text-align		: left;
	align			: left;
	background-color: var(--color-background);
	box-shadow		: inset 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}

.progressbarprogress{
	height			: 8px;
	width			: 10px;
	background-color: var(--color-background-accent);
}

.percentCount{
	float			: right;
	margin-top		: 3px;
	clear			: both;
}

.text-progress-wrapper {
	position		: sticky;
	position		: -webkit-sticky;
	top				: 90px;
	margin-top		: 10px;
	margin-bottom	: 10px;
	max-width		: 100%;
}

.text-progress {
	position		: relative;
	height			: 10px;
	z-index			: 99999;
	max-width		: 100%;
}

.text-progress > .text-progress-bar {
	position		: relative;
	height			: 10px;
	width			: 0px;
	background-color: var(--color-background-accent);
	z-index			: 99999;
	max-width		: 100%;
}


/* Größe: Mobilgerät */
@media (max-width:767px) {
	.text-progress-wrapper {
		top		: 95px;
	}
}




.badge {
	position				: relative;
	width					: 4em;
	height					: 6.2em;
	border-radius			: 10px;
	-webkit-border-radius	: 10px;
	-moz-border-radius		: 10px;
	display					: inline-block;
	top						: 0;
	transition				: all 0.5s ease;
	transform				: scale(0.5);
	box-shadow				: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}

.badge:before, .badge:after {
	position		: absolute;
	width			: inherit;
	height			: inherit;
	border-radius	: inherit;
	background		: inherit;
	content			: "";
	top				: 0;
	left			: 0;
	right			: 0;
	bottom			: 0;
	margin			: auto;
}

.badge:before {
	transform	: rotate(60deg);
}

.badge:after {
	transform	: rotate(-60deg);
}

.badge:hover {
	top			: -4px;
	transform	: scale(1.0);
	z-index		: 11;
}

.badge .badgecircle {
	width					: 80px;
	height					: 80px;
	position				: absolute;
	background				: var(--color-background);
	color					: var(--color-text);
	z-index					: 10;
	border-radius			: 50%;
	-webkit-border-radius	: 50%;
	-moz-border-radius		: 50%;
	top						: 0;
	left					: -8px;
	right					: 0;
	bottom					: 0;
	margin					: auto;
}

.badge .badgecircle {
	font-size		: 37px;
	color			: var(--color-text);
	margin-top		: 10px;
	text-align		: center;
}



.badge .badgeribbon {
	position				: absolute;
	border-radius			: 4px;
	-webkit-border-radius	: 4px;
	-moz-border-radius		: 4px;
	width					: 100px;
	z-index					: 11;
	bottom					: 12px;
	left					: 50%;
	margin-left				: -55px;
	box-shadow				: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
	text-shadow				: 0px 2px 2px 0px rgb(from var(--color-text) r g b / 0.1);
	background				: linear-gradient(to bottom right, var(--color-background-inactive) 0%, var(--color-background) 100%);
	text-align				: center;
	cursor					: default;
}

.badgeribbon {
	height			: 30px;
	padding			: 0px 5px 0px;
	font-size		: 20px;
	color			: var(--color-text);
	opacity			: 0.7;
	transition		: height 0.5s, opacity 0.5s, font-size 0.5s;
	overflow		: hidden;
}

.badgeribbon:hover {
	height		: 70px;
	font-size	: 12px;
	opacity		: 0.9;
	box-shadow	: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}


.badgeribbon:hover:after {
	content	: " " attr(title);
	display	: block;
}


.badgebronze {
	background	: linear-gradient(to bottom right, #875941 0%, #b67d62 100%);
	color		: #9e9e9e;
}

.badgesilver {
	background	: linear-gradient(to bottom right, #E0E0E0 0%, #BDBDBD 100%);
	color		: #9e9e9e;
}

.badgegold {
	background	: linear-gradient(to bottom right, #ffeb3b 0%, #fbc02d 100%);
	color		: #ffb300;
}


.badgered {
	background	: linear-gradient(to bottom right, #f4511e 0%, #b71c1c 100%);
	color		: #c62828;
}


.animated-progress {
	width					: 100%;
	height					: 20px;
	border-radius			: 5px;
	-webkit-border-radius	: 5px;
	-moz-border-radius		: 5px;
	border					: 1px solid rgb(189, 113, 113);
	overflow				: hidden;
	position				: relative;
}

.animated-progress span {
	height			: 100%;
	display			: block;
	width			: 0;
	color			: rgb(255, 251, 251);
	line-height		: 20px;
	position		: absolute;
	text-align		: end;
	padding-right	: 5px;
    background		: linear-gradient(to bottom right, var(--color-background-accent) 0%, var(--color-background-inactive) 100%);
	color			: var(--color-text);
}


.horizontal-carousel-wrapper {
	display			: flex;
	align-items		: center;
	justify-content	: space-evenly;
}

.horizontal-carousel {
	width			: 90vw;
	display			: flex;
	overflow-x		: scroll;
	scroll-behavior	: smooth;
	scrollbar-width	: none;
}

.horizontal-carousel::-webkit-scrollbar {
	display			: none;
}

.horizontal-carousel-item {
	flex-basis				: 50%;
	flex-shrink				: 0;
	margin					: 0.5rem;
	padding					: 0.5rem;
	max-width				: 300px;
	background				: var(--color-background);
	border					: 1px solid var(--color-background-inactive);
	border-radius			: 2%;
	-webkit-border-radius	: 2%;
	-moz-border-radius		: 2%;
	box-shadow				: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
}

.horizontal-carousel-left,
.horizontal-carousel-right {
	border			: none;
	background-color: transparent;
	cursor			: pointer;
	color			: var(--color-text-link);
	z-index			: 100;
}
.horizontal-carousel-left {
	padding-right	: 10px;
}
.horizontal-carousel-right {
	padding-left	: 10px;
}



.postit {
	margin						: 20px;
	padding						: 25px 15px;
	background					: #fefabc;
	background-color			: #fefabc;
	background-image			: linear-gradient(150deg, var(--color-background) 0%, var(--color-background-inactive) 100%);
	border						: 1px solid #cccccc;
	box-shadow					: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
	border-bottom-right-radius	: 60px 5px;
	transform					: rotate(0deg);
}

.postit-left {
	transform		: rotate(2deg);
}

.postit-right {
	transform		: rotate(-2deg);
}


.postit::after {
  content			: "";
  position			: absolute;
  bottom			: 0;
  right				: -4px;
  width				: 100%;
  height			: 140px;
  background-image	: linear-gradient(173deg, rgba(0,0,0,0) 92%, rgba(0,0,0,0.4) 100%);
  transform			: rotate(0deg);
  z-index			: -1;
  filter			: blur(2px);
}

.postit p {
	font-family		: Open Sans;
	font-size		: 0.9em;
}

.postit h4 {
	font-family		: Euphoria Script;
	font-size		: 1em;
	text-align		: right;
}

.postit:hover {
	transform		: scale(1.1, 1.1) rotate(0deg);
	transition		: all 0.40s;
}




.sms {
	padding						: 25px 15px;
	background					: var(--color-background);
	background-color			: var(--color-background);
	background-image			: linear-gradient(150deg, var(--color-background) 0%, var(--color-background-inactive) 100%);
	border						: 1px solid var(--color-text);
	box-shadow					: 5px 5px 5px rgb(from var(--color-text) r g b / 0.25);
	border-bottom-right-radius	: 60px 5px;
	transform					: rotate(0deg);
}



.sms::after {
  content			: "";
  position			: absolute;
  bottom			: 0;
  right				: -4px;
  width				: 100%;
  height			: 140px;
  background-image	: linear-gradient(173deg, rgba(0,0,0,0) 92%, rgba(0,0,0,0.4) 100%);
  transform			: rotate(0deg);
  z-index			: -1;
  filter			: blur(2px);
}



.fa-user-slash::before {
	color	: var(--color-text-inactive) !important;
}




.pagebrowse-inline-custom-select {
	display			: inline-block;
	position		: relative;
	vertical-align	: middle;
	margin			: 0 4px;
	font-size		: 0.95em;
}

.pagebrowse-inline-icon-dropdown {
	display			: inline-block;
	position		: relative;
	vertical-align	: baseline;
	color			: var(--color-text-accent);
}

/* Klickbares Icon ohne Rahmen, Pfeil oder Button-Styling */
.pagebrowse-icon-trigger {
	background		: none;
	border			: none;
	padding			: 0;
	margin			: 0;
	cursor			: pointer;
	font-size		: 1em;
	color			: inherit;
	line-height		: inherit;
	transition		: opacity 0.2s ease, transform 0.15s ease;
}

.pagebrowse-icon-trigger:hover {
	opacity		: 0.7;
	transform	: scale(1.1);
}

/* Aufklappmenü für die Zahlen */
.pagebrowse-icon-dropdown-menu {
	display			: none;
	position		: absolute;
	top				: 100%;
	left			: 50%;
	transform		: translateX(-50%);
	min-width		: 50px;
	max-height		: 180px;
	overflow-y		: auto;
	background		: var(--color-background);
	border			: 1px solid var(--color-inactive);
	border-radius	: 6px;
	box-shadow		: 0 4px 12px rgba(0, 0, 0, 0.15);
	list-style		: none;
	padding			: 4px 0;
	margin			: 4px 0 0 0;
	z-index			: 1000;
}

.pagebrowse-icon-dropdown-menu.open {
	display	: block;
}

.pagebrowse-icon-dropdown-menu li {
	cursor		: pointer;
	color		: var(--color-text);
	text-align	: center;
	font-size	: 0.9em;
	transition	: background 0.15s ease;
}

.pagebrowse-icon-dropdown-menu li:hover {
	background-color: var(--color-background);
}