/*
Theme Name: Hello Speinshart
Template: hello-elementor
Description: Hello Speinshart is based on Hello Elementor
Version: 1.0
Author: Daniel Heim - bytesystems ITS GmbH
*/

main#content {
    max-width: 1440px;
    margin: 0 auto;
    background-color: #fff;
}

.author-social-icons {
	display: flex;
	flex-direction: row;
	gap: 15px;
}

.author-social-icons .social-icon {
	color: #808080;
	transition: color 0.3s ease;
}

.author-social-icons .social-icon:hover {
	color: #000;
}

.author-social-icons .social-icon svg {
	height: 30px;
	width: 30px;
}

.generated-toc {
	--toc-border-color: #707070;
	--toc-spacing: 15px;
}

.generated-toc .generated-toc__heading {
	color: var(--e-global-color-text);
    font-family: var(--e-global-typography-055ecca-font-family), Sans-serif;
    font-size: var(--e-global-typography-055ecca-font-size);
    line-height: var(--e-global-typography-055ecca-line-height);
	margin-bottom: 0;
	padding-bottom: var(--toc-spacing);
	border-bottom: 1px solid var(--toc-border-color);
}

.generated-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.generated-toc li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--toc-border-color);
}

.generated-toc a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    padding: var(--toc-spacing) 0;
    color: var(--e-global-color-text);
    transition: all 0.2s ease;
	position: relative;
}

.generated-toc a::after {
	position: absolute;
	content: "";
	display: block;
	height: 16px;
	width: 16px;
	right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.203 15.203'%3E%3Cpath fill='none' stroke='gray' stroke-width='1.5' d='m7.071 14.672 7.071-7.071L7.072.53' data-name='Pfad 5315'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.generated-toc a:hover {
	font-weight: bold;
}

.popular-posts {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.sp-excerpt {
    font-family: var( --e-global-typography-4559150-font-family ), Sans-serif;
    font-size: var( --e-global-typography-4559150-font-size );
    line-height: var( --e-global-typography-4559150-line-height );
}

.sp-excerpt__more {
	color: #808080;
	font-weight: bold;
}

.sp-read-more-button {
  	display: block;
  	position: absolute;
  	top: 70px;
	right: 30px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4); 
	box-shadow: 0 0 6px rgba(0,0,0,0.75);
	border: none;
	cursor: pointer;
	transition: background 0.3s ease;
	overflow: hidden;
}

.sp-read-more-button.elementor-widget-button .elementor-button {
	background: transparent;
	display: block;
	height: 100px;
	width: 100px;
	margin: 0;
	padding: 0;
}

.sp-read-more-button.elementor-widget-button .elementor-button-icon svg {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 16px;
	width: 16px;
    transform: translateX(-50%) translateY(-50%);
	stroke: white;
	transition: stroke 0.3s ease;
}


.sp-read-more-button .elementor-button-text {
	display: none;
}

.sp-read-more-button:hover {
	background: #55FF00;
}

.sp-read-more-button.elementor-widget-button:hover .elementor-button-icon svg {
	stroke: #000;
}

.sp-event {
	background-color: #000;
}

.sp-post {
	background-color: #F2F2F2;
}

.sp-event-date {
	font-family: var( --e-global-typography-c9dd8c7-font-family ), Sans-serif;
    font-size: var( --e-global-typography-c9dd8c7-font-size );
    font-weight: var( --e-global-typography-c9dd8c7-font-weight );
    line-height: var( --e-global-typography-c9dd8c7-line-height );
	position: relative;
}

.sp-event-date::after {
	content: "";
	position: absolute;
	display: block;
	background-color: #fff;
	height: 1px;
	width: 145px;
	bottom: -20px;
}

.sp-featured .sp-read-more-button {
	top: 177px;
	right: 45px;
}

.sp-featured .sp-event-date::after {
	content: none;
	display: none;
}

.sp-social-static-icons {
	display: flex;
	flex-direction: row;
	gap: 15px;
	align-items: center;
}

.sp-static-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: all 0.3s ease;
	color: #808080;
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.sp-static-btn svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
}

/* Hover Effects */
.sp-static-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 8px rgba(255,255,255,0.3);
	color: #fff;
}
.sp-social-static-icons.black-to-olive .sp-static-btn {
	color: #000;
}

.sp-social-static-icons.black-to-olive .sp-static-btn:hover {
	color: #7F7F00;
}

.sp-arrow-button.sp-arrow-button.elementor-widget-button .elementor-button,
.sp-arrow-button.sp-arrow-button.elementor-widget-mf-button .metform-btn.metform-btn {
	background: none;
	margin: 0;
	padding: 0 0 0 55px;
	position: relative;
	display: flex;
    flex-direction: row;
    height: 40px;
    align-items: center;
	transition: padding 0.3s ease, color 0.3s ease, font-weight 0.3s ease;
	box-shadow: none;
}

.sp-arrow-button.sp-arrow-button.elementor-widget-button .elementor-button:hover,
.sp-arrow-button.sp-arrow-button.elementor-widget-mf-button .metform-btn.metform-btn:hover {
	padding-left: 60px;
	font-weight: 600;
}

.sp-arrow-button.sp-arrow-button.sp-arrow-button.elementor-widget-mf-button:hover .elementor-widget-container {
	box-shadow: none; !important;
}

.sp-arrow-button.sp-arrow-button.elementor-widget-button .elementor-button:before,
.sp-arrow-button.sp-arrow-button.elementor-widget-mf-button .metform-btn.metform-btn:before {
	position: absolute;
	content: "";
	width: 40px;
    height: 40px;
    background-color: var(--sp-button-fg, #000);
    border-radius: 50%;
	top: 0;
	left: 0;
	display: block;
	margin: 0;
	opacity: 1;
	box-shadow: none;
	transition: background-color 0.3s ease;
}

.sp-arrow-button.sp-arrow-button.elementor-widget-button .elementor-button:after,
.sp-arrow-button.sp-arrow-button.elementor-widget-mf-button .metform-btn.metform-btn:after {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background-color: var(--sp-button-bg, #fff);
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="none" stroke="black" stroke-width="2" d="m17.071 27.352 7.071-7.07-7.071-7.072"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    top: 0;
    left: 0;
    display: block;
	transition: background-color 0.3s ease;
	margin: 0;
	opacity: 1;
	animation: none;
}

.sp-arrow-button.sp-arrow-button.elementor-widget-button .elementor-button:hover,
.sp-arrow-button.sp-arrow-button.elementor-widget-mf-button .metform-btn.metform-btn:hover {
	background-color: transparent;
}

.sp-arrow-button.sp-arrow-button.elementor-widget-button .elementor-button:hover:before,
.sp-arrow-button.sp-arrow-button.elementor-widget-mf-button .metform-btn.metform-btn:hover:before {
	background-color: var(--sp-button-hover-fg,var(--sp-button-fg,#000));
}

.sp-arrow-button.sp-arrow-button.elementor-widget-button .elementor-button:hover:after,
.sp-arrow-button.sp-arrow-button.elementor-widget-mf-button .metform-btn.metform-btn:hover:after {
	background-color: var(--sp-button-hover-bg,var(--sp-button-bg,#fff));
}

/* .elementor-button-info - for 25px smaller buttons we use button type: info */

.sp-arrow-button.elementor-button-info.elementor-widget-button .elementor-button {
	background-color: transparent;
	margin: 0;
	padding: 0 0 0 40px;
	position: relative;
	display: flex;
    flex-direction: row;
    height: 25px;
    align-items: center;
	transition: padding 0.3s ease, color 0.3s ease, font-weight 0.3s ease;
	text-align: left;
}

.sp-arrow-button.elementor-button-info.elementor-widget-button .elementor-button:hover {
	padding-left: 45px;
	font-weight: normal;
}

.sp-arrow-button.elementor-button-info.elementor-widget-button .elementor-button:before {
	position: absolute;
	content: "";
	width: 25px;
    height: 25px;
    background-color: transparent; /* oder deine gewünschte Farbe */
    border-radius: 50%;
	top: 0;
	left: 0;
	display: block;
	border: 1px solid var(--sp-button-fg, #000);
	transition: border 0.3s ease, background 0.3s ease;
}

.sp-arrow-button.elementor-button-info.elementor-widget-button .elementor-button:after {
    position: absolute;
    content: "";
    width: 25px;
    height: 25px;
    background-color: var(--sp-button-fg, #000); 
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="none" stroke="black" stroke-width="2" d="m17.071 27.352 7.071-7.07-7.071-7.072"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    top: 0;
    left: 0;
    display: block;
	transition: background-color 0.3s ease;
}
.sp-arrow-button.elementor-button-info.elementor-widget-button .elementor-button:hover:before {
	background-color: var(--sp-button-hover-fg,var(--sp-button-fg,#000));
	border: 1px solid var(--sp-button-hover-fg,var(--sp-button-fg,#000));
}

.sp-arrow-button.elementor-button-info.elementor-widget-button .elementor-button:hover:after{
	background-color: var(--sp-button-hover-bg,var(--sp-button-bg,#fff));
}

/* .elementor-button-success - for 25px smaller buttons with mail icon we use button type: success */

.sp-arrow-button.elementor-button-success.elementor-widget-button .elementor-button {
	background-clip: text;
	margin: 0;
	padding: 0 0 0 40px;
	position: relative;
	display: flex;
    flex-direction: row;
    height: 25px;
    align-items: center;
	transition: padding 0.3s ease, color 0.3s ease, font-weight 0.3s ease;
	text-align: left;
}

.sp-arrow-button.elementor-button-success.elementor-widget-button .elementor-button:hover {
	padding-left: 45px;
	font-weight: normal;
}

.sp-arrow-button.elementor-button-success.elementor-widget-button .elementor-button:before {
	position: absolute;
	content: "";
	width: 26px;
    height: 18px;
    background-color: currentColor;
    border-radius: 0;
	top: 4px;
	left: 0;
	display: block;
	border: none;
	mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS42NSIgaGVpZ2h0PSIxNy4wNzgiPjxnIGRhdGEtbmFtZT0iR3J1cHBlIDQ4NTUiPjxnIGRhdGEtbmFtZT0iR3J1cHBlIDQ4NTMiPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkYXRhLW5hbWU9IkdydXBwZSA0ODU0Ij48cGF0aCBkPSJtMjIuODQ2IDIuNDAzLTkuODk1IDguMzg1YS43MzcuNzM3IDAgMCAxLTEuMDQzIDBMNC45ODEgMi40MDMiIGRhdGEtbmFtZT0iUGZhZCA1NjI5Ii8+PHBhdGggZD0ibTIuODI1IDE0LjcwMSA3LjE1OS02LjA4OCIgZGF0YS1uYW1lPSJMaW5pZSA1NCIvPjxwYXRoIGQ9Im0xNS42NTkgOC42MTMgNC45ODIgNi4wODciIGRhdGEtbmFtZT0iTGluaWUgNTUiLz48L2c+PC9nPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMy4wOSAxLjIxM0EuODM3LjgzNyAwIDAgMSAzLjgzNy41aDIwLjhhLjU1MS41NTEgMCAwIDEgLjUuNzEzTDIyLjkzIDEzLjc2MmwtLjM3IDIuMWEuODM4LjgzOCAwIDAgMS0uNzQ3LjcxM2gtMjAuOGEuNTUzLjU1MyAwIDAgMS0uNS0uNzE2bC4yMjktMS4zTDMuMDkgMS4yMTMiIGRhdGEtbmFtZT0iUGZhZCA1NjMwIi8+PC9nPjwvc3ZnPg==');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.sp-arrow-button.elementor-button-success.elementor-widget-button .elementor-button:after {
    display: none;
    content: none;
}

@media (max-width: 767px) { 
	.sp-arrow-button.sp-arrow-button.elementor-widget-button .elementor-button {
		text-align: left;
	}
}

.sp-close-button.elementor-widget-button .elementor-button {
	background: none;
	padding: 0;
	margin: 0;
}
.sp-close-button.elementor-widget-button .elementor-button .elementor-button-icon,
.sp-close-button.elementor-widget-button .elementor-button .elementor-button-icon svg {
	height: 22px;
	width: 22px;
}

.sp-close-button.elementor-widget-button .elementor-button .elementor-button-text {
	display: none;
}

/* 25 circle arrow tab */
#sp-media-tabs .e-n-tab-title {
	margin: 0;
	padding: 15px 0 15px 40px;
	border-bottom: 1px solid black;
	position: relative;
	transition: padding 0.3s ease, color 0.3s ease, font-weight 0.3s ease;
	justify-content: flex-start;
	background: none;
}

#sp-media-tabs .e-n-tab-title:last-child {
	border: none;
}

#sp-media-tabs .e-n-tab-title:hover {
	padding-left: 45px;
}

#sp-media-tabs .e-n-tab-title .e-n-tab-title-text {
	text-align: left;
}

#sp-media-tabs .e-n-tab-title:before {
	position: absolute;
	content: "";
	width: 25px;
    height: 25px;
    background-color: transparent; /* oder deine gewünschte Farbe */
    border-radius: 50%;
	top: 15px;
	left: 0;
	display: block;
	border: 1px solid #000;
	transition: background-color 0.3s ease, border-color: 0.3s ease;
}

#sp-media-tabs .e-n-tab-title:after {
    position: absolute;
    content: "";
    width: 25px;
    height: 25px;
    background-color: #000; 
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="none" stroke="black" stroke-width="2" d="m17.071 27.352 7.071-7.07-7.071-7.072"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    top: 15px;
    left: 0;
    display: block;
	transition: background-color 0.3s ease;
}
#sp-media-tabs .e-n-tab-title:hover:before,
#sp-media-tabs .e-n-tab-title[aria-selected=true]:before
{
	background-color: #007FFF;
	border-color: #007FFF;
}

#sp-media-tabs .e-n-tab-title:hover:after,
#sp-media-tabs .e-n-tab-title[aria-selected=true]:after
{
	background-color: #fff;
}

@media (max-width: 767px) {
	#sp-media-tabs .e-n-tab-title[aria-selected=true] {
		border-bottom: 0;
		
	}
}

@media (min-width: 768px) {

	#sp-contact-tabs .e-n-tabs-heading {
		padding: 0;
		display: grid;
		grid-template-columns: 120px 1fr 1fr 1fr 1fr 1fr 120px;       
		gap: 0;
	}

	#sp-contact-tabs .e-n-tab-title {
		margin: 0 0 0 0;
		padding: 15px 15px 25px 15px;
		display: block;
		height: 212px;
		position: relative;
		transition: padding 0.3s ease, color 0.3s ease, font-weight 0.3s ease, background 0.3s ease, border 0.3s ease;
		justify-content: flex-start;
		background: none;
		border-bottom: 1px solid #000;
	}

	#sp-contact-tabs .e-n-tab-title:before {
		display: block;
		content: "";
		position: absolute;
		width: 1px;
		height: 187px;
		background: #000;
		top: unset;
		top: 0px;
		left: 0px;
		transition: height 0.3s ease;
	}

	/* Erstes Element überspannt erste zwei Spalten */
	#sp-contact-tabs .e-n-tab-title:first-child {
		grid-column: 1 / 3; /* von Spalte 1 bis 3 */
		padding-left: 120px;
	}

	/* Mittlere Elemente in normalen Spalten */
	#sp-contact-tabs .e-n-tab-title:nth-child(2) { grid-column: 3; }
	#sp-contact-tabs .e-n-tab-title:nth-child(3) { grid-column: 4; }
	#sp-contact-tabs .e-n-tab-title:nth-child(4) { grid-column: 5; }

	/* Letztes Element überspannt letzte zwei Spalten */
	#sp-contact-tabs .e-n-tab-title:last-child {
		grid-column: 6 / 8; /* von Spalte 6 bis 8 */
		padding-right: 120px;
		border-right: none;
	}

	#sp-contact-tabs .e-n-tab-title:first-child:before {
		content: unset;
		display: none;
	}

	#sp-contact-tabs .e-n-tab-title .e-n-tab-title-text {
		text-align: left;
		align-items: flex-start;
		flex-direction: column;
		color: #000;
		height: 100%;
		width: 100%;
		flex: 1;
		position: relative;
	}
	
	#sp-contact-tabs .e-n-tab-title .e-n-tab-title-text h3 {
	
		font-family: var( --e-global-typography-055ecca-font-family ), Sans-serif;
		font-size: 26px;
		font-weight: var( --e-global-typography-055ecca-font-weight );
		line-height: var( --e-global-typography-055ecca-line-height );
	}

	#sp-contact-tabs .e-n-tab-title .e-n-tab-title-text h3, 
	#sp-contact-tabs .e-n-tab-title .e-n-tab-title-text p {
		text-align: left;
		color: inherit;
	}

	#sp-contact-tabs .e-n-tab-title-text:before {
		position: absolute;
		content: "";
		width: 25px;
		height: 25px;
		background-color: transparent; /* oder deine gewünschte Farbe */
		border-radius: 50%;
		top: 147px;
		left: 0;
		display: block;
		border: 1px solid #000;
		transition: background-color 0.3s ease, border-color 0.3s ease, top 0.3s ease;
	}

	#sp-contact-tabs .e-n-tab-title-text:after {
		position: absolute;
		content: "";
		width: 25px;
		height: 25px;
		background-color: #000; 
		mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="none" stroke="black" stroke-width="2" d="m12.928 17.071 7.071 7.071 7.071-7.071"/></svg>');
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: contain;
		top: 147px;
		left: 0;
		display: block;
		transition: background-color 0.3s ease, top 0.3s ease;
	}
	#sp-contact-tabs .e-n-tab-title:hover .e-n-tab-title-text:before,
	#sp-contact-tabs .e-n-tab-title[aria-selected=true] .e-n-tab-title-text:before
	{
		background-color: #FF007F;
		border-color: #FF007F;
		top: 152px;
	}

	#sp-contact-tabs .e-n-tab-title:hover .e-n-tab-title-text:after,
	#sp-contact-tabs .e-n-tab-title[aria-selected=true] .e-n-tab-title-text:after
	{
		background-color: #fff;
		top: 152px;
	}

	#sp-contact-tabs .e-n-tab-title[aria-selected=true] {
		background: #F8F8F8;
		border-bottom: 1px solid #F8F8F8;
	}

	#sp-contact-tabs .e-n-tab-title[aria-selected=true] .e-n-tab-title-text {
		color: #FF007F;
	}

	#sp-contact-tabs .e-n-tab-title[aria-selected=true]:before {
		height: 212px;
	}

	#sp-contact-tabs .e-n-tab-title[aria-selected="true"] + .e-n-tab-title:before {
		height: 212px;
	}
	
}

@media (max-width: 767px) {
#sp-contact-tabs .e-n-tab-title {
	margin: 0;
	padding: 12px 20px;
	border-bottom: 1px solid black;
	position: relative;
	transition: padding 0.3s ease, color 0.3s ease, font-weight 0.3s ease;
	justify-content: flex-start;
	background: none;
	color: #000;
}

#sp-contact-tabs .e-n-tab-title:last-child {
	border: none;
}

#sp-contact-tabs .e-n-tab-title .e-n-tab-title-text {
	text-align: left;
}

#sp-contact-tabs .e-n-tab-title:before {
	position: absolute;
	content: "";
	width: 25px;
    height: 25px;
    background-color: transparent; /* oder deine gewünschte Farbe */
    border-radius: 50%;
	top: 15px;
    right: 20px;
	display: block;
	border: 1px solid #000;
	transition: background-color 0.3s ease, border-color: 0.3s ease;
}

#sp-contact-tabs .e-n-tab-title:after {
    position: absolute;
    content: "";
    width: 25px;
    height: 25px;
    background-color: #000; 
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="none" stroke="black" stroke-width="2" d="m17.071 27.352 7.071-7.07-7.071-7.072"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    top: 15px;
    right: 20px;
    display: block;
	transition: background-color 0.3s ease;
}
#sp-contact-tabs .e-n-tab-title:hover:before,
#sp-contact-tabs .e-n-tab-title[aria-selected=true]:before
{
	background-color: #ff007f;
	border-color: #ff007f;
}

#sp-contact-tabs .e-n-tab-title:hover:after,
#sp-contact-tabs .e-n-tab-title[aria-selected=true]:after
{
	background-color: #fff;
}
	
	#sp-contact-tabs .e-n-tab-title .e-n-tab-title-text {
		flex-direction: column;
		align-items: flex-start;
	}
	
	#sp-contact-tabs .e-n-tab-title .e-n-tab-title-text h3 {
		color: #000;
		display: block;
		margin: 0;
		padding: 0;
	}
	#sp-contact-tabs .e-n-tab-title .e-n-tab-title-text p {
		color: #000;
		margin: 0;
		padding: 0;
	}
	
#sp-contact-tabs .elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tabs-content>.e-con {
	order: 1000;
	}
	
}


/* Base arrow list styles */
.sp-arrow-list ul {
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
}

.sp-arrow-list li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 10px;
}

.sp-arrow-list li:last-child {
    margin-bottom: 0;
}

/* Black arrow variant */
.sp-arrow-list li::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0px;
    width: 25px;
    height: 10px;	
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025.707%209.483%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20d%3D%22M20.612%209.13%2025%204.743%2020.612.354%22%20%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20d%3D%22M0%204.854h24.724%22%20%2F%3E%3C%2Fsvg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sp-arrow-list.sp-arrow-white li::before
{	
    background-image: 	url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025.707%209.483%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20d%3D%22M20.612%209.13%2025%204.743%2020.612.354%22%20%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20d%3D%22M0%204.854h24.724%22%20%2F%3E%3C%2Fsvg%3E");
}


/* accordion / more style */
/* Accordion Toggle Styling */
.e-n-accordion-item-title {
    position: relative;
    cursor: pointer;
	padding-right: 120px;
	--sp-a-icon-right: 0px;
	--sp-a-icon-top: 35px;
	--sp-a-bg: transparent;
	--sp-a-fg: #000;
	--sp-a-bg-hover: #007F7F;
	--sp-a-fg-hover: #FFF;
}

.sp-accordion-variant-white-pink .e-n-accordion-item-title {
	--sp-a-bg: transparent;
	--sp-a-fg: #FFF;
	--sp-a-bg-hover: #FF7FFF;
	--sp-a-fg-hover: #FFF;
}

/* Circle background and border */
.e-n-accordion-item-title::before {
    position: absolute;
    content: "";
    display: block;
    width: 25px;
    height: 25px;
	top: var(--sp-a-icon-top);
	right: var(--sp-a-icon-right);
    background-color: var(--sp-a-bg, transparent);
    border: 1px solid var(--sp-a-fg, #000);
    border-radius: 50%;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    z-index: 1;
}

/* Arrow */
.e-n-accordion-item-title::after {
    position: absolute;
    content: "";
    display: block;
    width: 25px;
    height: 25px;
	top: var(--sp-a-icon-top);
	right: var(--sp-a-icon-right);
    transform: rotate(0deg); /* Arrow down (collapsed) */
    background-color: var(--sp-a-fg, #000);
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 2;
    
    /* Arrow shape using mask */
    mask-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3AtdC13LXRvZ2dsZS1jYXJldCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPgo8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTguMjIzIDEwLjU5NCA0LjM4OSA0LjM4OEwxNyAxMC41OTQiPjwvcGF0aD4KPC9zdmc+");
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3AtdC13LXRvZ2dsZS1jYXJldCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPgo8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZD0ibTguMjIzIDEwLjU5NCA0LjM4OSA0LjM4OEwxNyAxMC41OTQiPjwvcGF0aD4KPC9zdmc+");
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
}

/* Expanded state - Arrow up */
.e-n-accordion-item-title[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Hover effects */
.e-n-accordion-item-title:hover::before {
    background-color: var(--sp-a-bg-hover, #007F7F);
    border-color: var(--sp-a-bg-hover, #007F7F);
}

.e-n-accordion-item-title:hover::after {
    background-color: var(--sp-a-fg-hover, #FFF);
}

.mf-checkbox-option input[type=checkbox]+span {
	padding-left: 40px;
	position: relative;
	display: block;
}
.mf-checkbox-option input[type=checkbox]+span::before {
	content: "";
	position: absolute;
	left: 0;
	top: -2px;
	border: 1px solid #000;
	border-radius: 50%;
	display: block;
	height: 25px;
	width: 25px;
	background-color: #F2F2F2;
}

.mf-checkbox-option input[type=checkbox]:checked+span::before {
	content: "";
	background: radial-gradient(
    circle,
    black 45%,
    #F2F2F2 55%
);
	
	border: 1px solid #000;
}

/* ARROW LINKS CSS */
        .has-arrow-links p a:not(.sp-t-w-moreless) {
            /* Layout */
            display: inline-flex;
            align-items: center;
            position: relative;
            
            /* Spacing & Sizing */
            padding: 0 0 0 40px;
            height: 25px;
            margin: 0;
            
            /* Text Styling */
            color: #000;
            text-decoration: none;
            font-weight: normal;
            
            /* Reset */
            background: none;
            border: none;
            
            /* Transitions */
            transition: padding-left 0.3s ease, color 0.3s ease;
        }

        .has-arrow-links p a:not(.sp-t-w-moreless):hover {
            padding-left: 45px;
            color: #7F00FF;
        }

        /* KREIS (::before) */
        .has-arrow-links p a:not(.sp-t-w-moreless)::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            
            /* Größe */
            width: 25px;
            height: 25px;
            
            /* Styling */
            background-color: #000;
            border: 1px solid #000;
            border-radius: 50%;
            
            /* Transition */
            transition: background-color 0.3s ease, border-color 0.3s ease;
            
            /* Z-Index */
            z-index: 1;
        }

        .has-arrow-links p a:not(.sp-t-w-moreless):hover::before {
            background-color: #7F00FF;
            border-color: #7F00FF;
        }

        /* PFEIL (::after) */
        .has-arrow-links p a:not(.sp-t-w-moreless)::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            
            /* Größe */
            width: 25px;
            height: 25px;
            
            /* Pfeil über Mask */
            background-color: #fff;
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="none" stroke="black" stroke-width="2" d="m17.071 27.352 7.071-7.07-7.071-7.072"/></svg>');
            -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="none" stroke="black" stroke-width="2" d="m17.071 27.352 7.071-7.07-7.071-7.072"/></svg>');
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            -webkit-mask-size: contain;
            
            /* Z-Index */
            z-index: 2;
        }

        /* Hover bleibt weiß */
        .has-arrow-links p a:hover::after {
            background-color: #fff;
        }

/* Next Event Shortcode Styles */
.sp-next-event {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-top: 30px;
    position: relative;
    max-width: 505px;
}

.sp-header-container {
    position: relative;
    padding-left: 156px; /* 94px + 62px */
    padding-top: 15px;
}

.sp-whats-new-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 94px;
    height: 94px;
    background-color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.sp-whats-new-circle span {
    color: #fff;
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    padding: 0 8px;
}

.sp-pulse-title h1 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 140px;
    font-weight: 100;
    line-height: 200px;
    color: var(--e-global-color-text);
    margin: 0;
    padding: 0;
}

.sp-pulse-title p {
    font-family: 'Noto Serif', serif;
    font-size: 28px;
    font-weight: 300;
    line-height: 36px;
    color: var(--e-global-color-text);
    margin: -15px 0 0 12px;
    padding: 0;
}

.sp-next-event-info {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 15px;
    padding-left: 20px;
}

.sp-next-event-info .sp-next-event-date {
    font-family: 'Noto Sans', sans-serif;
    font-size: 35px;
    font-weight: 700;
    line-height: 45px;
    color: #000;
    position: relative;
    padding-bottom: 45px;
    width: 112px;
    flex-shrink: 0;
}

.sp-next-event-info .sp-next-event-title {
    font-family: 'Noto Serif', serif;
    font-size: 35px;
    font-weight: 300;
    line-height: 45px;
    color: var(--e-global-color-text);
    margin: 0;
	padding-left: 20px;
	border-left: 1px solid #000;
}

.sp-next-event-info .sp-next-event-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.sp-next-event-info .sp-next-event-title a:hover {
    color: var(--e-global-color-text);
}

.sp-next-event-none,
.sp-next-event-error {
    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    color: var(--e-global-color-text);
    padding: 15px 0;
    text-align: center;
    font-style: italic;
}

.sp-next-event .sp-arrow-button .elementor-button-text {
    color: #000;
}

.sp-next-event .sp-arrow-button {
    padding-left: 167px; /* 112px + 15px + 20px + 20px */
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
}

.elementor.e-loop-item.type-post,
.elementor.e-loop-item.type-event {
	--page-title-display: block;
}