/* CSS-Skript for https://www.gemmagalgani.net - Hl-Gemma (c) redesign-berlin.de, Berlin 03/2026 */

/* BLOG-TAGS */
.body.year-filter-active .jtpl-header--image {
	height: 150px !important;
}

.body.year-filter-active .button-dn {
	display: none !important;
}


/* COOKIE-BANNER
--------------------------------------------------------------*/

/* hover = Mouseover */

/* Schriftfarbe Ãœberschrift */

.cc-individual-cookie-settings.ui-dialog h2 {

	color: #999 !important;

}


/* Schriftfarbe normale Schrift */

.cc-individual-cookie-settings.ui-dialog p {

	color: #999 !important;

}


/* Links: Impressum/Datenschutz */

.cc-individual-cookie-settings.ui-dialog .links a {

	color: #999 !important;

}

.cc-individual-cookie-settings.ui-dialog .links a:hover {

	color: #808080 !important;

}


/*  Füllfarbe Buttons aktiv */

.fill {

	background-color: #999 !important;

}


/* Füllfarbe Buttons inaktiv */

.toggle {

	background-color: #808080 !important;

}


/* Hintergrund und Schriftfarbe "alle akzeptieren" */

#cookie-settings-all {

	background-color: #999 !important;

	color: #fff !important;

}

#cookie-settings-all:hover {

	background-color: #808080 !important;

	color: #fff !important;

}


/* Hintergrund und Schriftfarbe "nur Auswahl akzeptieren" */

#cookie-settings-selected {

	background-color: #999 !important;

	color: #fff !important;

}

#cookie-settings-selected:hover {

	background-color: #808080 !important;

	color: #fff !important;

}


/* Hintergrund und Schriftfarbe "Alles ablehnen" */

#cookie-settings-reject-all {

	background-color: #999 !important;

	color: #fff !important;

}

#cookie-settings-reject-all:hover {

	background-color: #808080 !important;

	color: #fff !important;

}






/* SILBENTRENNUNG
--------------------------------------------------------------*/
.cc-m-textwithimage-inline-rte p {
	hyphens: auto !important;
}








/* NAVIGATION-ANPASSUNG
--------------------------------------------------------------*/

@media(min-width:768px) {
	#cc-nav-view-2055644971 ul.cc-nav-level-1.j-nav-level-1 {
		min-width: 350px;
	}

	#cc-nav-view-2107387271 ul.cc-nav-level-1.j-nav-level-1 {
		min-width: 160px;
	}

	#cc-nav-view-2054942171 ul.cc-nav-level-1.j-nav-level-1 {
		min-width: 130px;
	}

}


.jtpl-navigation .j-nav-level-1,
.jtpl-navigation .j-nav-level-2 {
	background-color: #00000063;
}


/* TITEL-ANPASSUNG DESKTOP & MOBILE ANSICHT
--------------------------------------------------------------*/


.j-website-title-content {
	color: white !important;
}

@media(min-width:768px) {

	.jtpl-header {
		background: rgba(0, 0, 0, 0.9) !important;
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	}


	.jtpl-breadcrumb__title-navigation-gutter:before,
	.flex-background-options {
		background-color: rgba(0, 0, 0, 0.67) !important;
	}

	.jtpl-breadcrumb__title-navigation-gutter {
		background-color: rgba(0, 0, 0, 0) !important;

	}

	.jtpl-title {
		padding-left: 15px;
	}
}



@media (max-width: 767px) {

	.flex-background-options {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.j-module .j-website-title-content {
		font-size: 20px !important;
	}


}



@media(min-width:768px) {
	.jtpl-header--image {
		height: calc(100dvh);
		/* padding-top: calc(56.25% + 100px); */
		/* 16:9 */
	}
}


@media (max-width: 767px) {
	.jtpl-logo {
		max-width: 250px;
	}


	.jtpl-header {
		box-shadow: none
	}

	.jtpl-header--image {
		height: calc(100dvh - 220px);
	}

}



/* SCROLL-BUTTON 
--------------------------------------------------------------*/


.button-dn {
	background: url(https://redesign-berlin.lima-city.de/__project/kloster-stiepel/dn-button.png) center center no-repeat rgba(0, 0, 0, 0);
	background-size: 30px 30px;
	width: 32px;
	height: 32px;
	position: absolute;
	z-index: 999999;

	border-radius: 50%;
	cursor: pointer;
	opacity: 0.9;

	filter: brightness(1);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);

	/* Basis für Zentrierung */
	transform: translateX(-50%);

	transition: filter 0.2s ease, box-shadow 0.2s ease;
}

/* Hover → Bounce + Scale */
.button-dn:hover {
	transform: scale(1.08);
	filter: brightness(1.2);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}

/* Auto-Bounce beim Laden */
.button-dn.auto-bounce {
	animation: bounceScale 0.7s ease 2;
}

/* Animation */
@keyframes bounceScale {
	0% {
		transform: translate(-50%, 0) scale(1);
	}

	30% {
		transform: translate(-50%, -18px) scale(1.08);
	}

	55% {
		transform: translate(-50%, -10px) scale(1.05);
	}

	75% {
		transform: translate(-50%, -4px) scale(1.02);
	}

	100% {
		transform: translate(-50%, 0) scale(1);
	}
}


/* Mobile Scroll-Button */
/*@media (max-width:767px) {
	.button-dn {
		display: none !important;
	}
}*/