/* CSS-RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* CSS Custom Properties */
:root {
	--flieder: #EFEDF4;
	--dunkellila: #2E1042;
	--lila: #532766;
	--tuerkis: #D0F9F9;
	--gray: #848484;
	--gelb: #E3FF00;
	--weiss: #FFF;
	--text-hover: #753690;
	--button-active: var(--weiss);
	--gray-2: #e3e1e9;
	--round-button: 50em;
	--round-elements: 16px;
	--round-elements-small: 8px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 40px;
	--space-9: 48px;
	--space-10: 64px;
	--space-11: 80px;
	--space-12: 128px;
	--font-family: apfel_grotezk;
	--line-height-headline: 1;
	--line-height-text: 1.2;
	--type-2xl: 64px;
	--type-xl: 48px;
	--type-l: 34px;
	--type-m: 24px;
	--type-s: 20px;
	--type-xs: 16px;
	--font-weight-headline: 700;
	--font-weight-text: 400;
	--font-regular: "apfel_grotezk";
	--font-bold: "apfel_grotezk";
	--fontname-akm-bold: "apfel_grotezk";
	--fontname-akm-regular: "apfel_grotezk";
	--font-sans-serif: "apfel_grotezk";
	--bde-section-vertical-padding: var(--space-11);
	--bde-section-horizontal-padding: var(--space-7);

}

:root * {
	/* --- Settings für Engagementfinder --- */
	--font-regular: "apfel_grotezk" !important;
	--font-bold: "apfel_grotezk" !important;
	--fontname-akm-bold: "apfel_grotezk" !important;
	--fontname-akm-regular: "apfel_grotezk" !important;
	--font-sans-serif: "apfel_grotezk" !important;

	--font-family: "apfel_grotezk";
	--line-height-headline: 1;
	--line-height-text: 1.2;
	--type-2xl: 64px;
	--type-xl: 48px;
	--type-l: 34px;
	--type-m: 24px;
	--type-s: 20px;
	--type-xs: 16px;
	--font-weight-headline: 700;
	--font-weight-text: 400;
	--bde-section-vertical-padding: var(--space-11);
	--bde-section-horizontal-padding: var(--space-7);
    --bde-background-color: var(--flieder);
    --bde-body-text-color: var(--lila);    

}

	@media (max-width: 768px) { 
		:root * {
			--mobile-scale: 1.25;
			--type-2xl: calc(64px/var(--mobile-scale)*0.8) !important;
			--type-xl: calc(48px/var(--mobile-scale)) !important;
			--type-l: calc(34px/var(--mobile-scale)) !important;
			--type-m: calc(24px/var(--mobile-scale)) !important;
			--type-s: calc(20px/1.1) !important;
			--type-xs: calc(16px/1.1) !important;

			--space-1: calc(4px);
			--space-2: calc(8px);
			--space-3: calc(12px);
			--space-4: calc(16px);
			--space-5: calc(20px/var(--mobile-scale)/1.5) !important;
			--space-6: calc(24px/var(--mobile-scale)/1.5) !important;
			--space-7: calc(32px/var(--mobile-scale)/1.5) !important;
			--space-8: calc(40px/var(--mobile-scale)/1.5) !important;
			--space-9: calc(48px/var(--mobile-scale)/1.5) !important;
			--space-10: calc(64px/var(--mobile-scale)/1.5) !important;
			--space-11: calc(80px/var(--mobile-scale)/1.5) !important;
			--space-12: calc(128px/var(--mobile-scale)/1.5) !important;
		
			}

			.cta-secondary-alternative-hover svg, .cta-primary-invert svg, .cta-secondary-invert svg, .cta-primary svg {
				margin-top: -5px;
			}
			.cta-secondary-alternative-hover, .cta-primary-invert, .cta-secondary-invert, .cta-primary {
				padding-right: 17px !important;
				text-overflow: ellipsis !important;
			}

			.cta-primary-icon-left-invert {
				text-overflow: ellipsis !important;	
				overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    
    /* WICHTIG FÜR FLEXBOX: Damit das Element kleiner als sein Inhalt werden darf */
        min-width: 0 !important; 
    
    /* Begrenzung der Breite auf den verfügbaren Platz */
    max-width: 100%; 
			}
	}

a { 
	text-decoration: none;
} 

/* •••••• Typografie•••••••••••••••••••••••••••••••••••••••••••••• */


.container-default-page :is(h1, h2, h3, h4, h5, h6) {
	color: unset;
	line-height: var(--line-height-headline);
	margin-bottom: var(--space-4);	
	font-weight: var(--font-weight-headline);
	margin: 0 auto;
}

body {
	font-family: var(--bde-body-font-family);
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 100%;
	margin: 0; 
	padding: 0;
}

*, ::before, ::after { box-sizing: border-box; } 

p {
	margin: 0px;
	margin-bottom: 12px;
}

.container-default-page, .container-default-page p {
	font-size: var(--type-s);
	line-height: var(--line-height-text);
}


.container-default-page h1 {
	font-size: var(--type-xl)
}

.container-default-page h2 {
	font-size: var(--type-l);
}

.container-default-page h3 {
	font-size: var(--type-m);
}

.container-default-page h4 {
	font-size: var(--type-s);
	margin-top: 24px;
	margin-bottom: 2px;	
}

.container-default-page h5 {
	font-size: var(--type-xs);
}

/* •••••• Listen  •••••••••••••••••••••••••••••••••••••••••••••• */

ul {
	padding: 0px 0px 0px 19px;
	margin: 16px 0px 16px 0px;
	list-style-position: outside;
	list-style-type: "—";

}

#impressum ul, #datenschutz ul {
	margin: 8px 0px 0px 0px;
}

li {
	padding-left: 8px !important;
	margin-bottom: 8px;
} 


/* •••••• Full Width Breakout •••••••••••••••••••••••••••••••••••••••••••••• */

.full-width {
	width: 100vw !important;
	margin-left: 0 !important;
}

/* •••••• Swiper Settings •••••••••••••••••••••••••••••••••••••••••••••• */

.swiper {
	width: 100%;
}

.width-271 {
	width: 271px;
	max-width: 271px;
	min-width: 271px;
	overflow: hidden;
	border-radius: var(--round-elements);
}

.swiper-button-next, .swiper-button-prev {
	position:unset !important;
	top: unset !important;
	left: unset !important;
	width: 24px !important;
	height: 24px !important;
	margin-top: unset !important;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:right;
	justify-content:right;
	color:var(--lila);
	margin-bottom: 2px;
}

.swiper-navigation {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 8px !important;
	margin-bottom: 8px;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
	opacity:1 !important;
	cursor:auto;
	pointer-events:none
}

.swiper-button-prev {
	right: unset !important;
	top: unset !important;
}

.swiper-button-next {
	right: unset !important;
	top: unset !important;
}

.swiper-navigation-icon {
	display: none;
}

.swiper-button-next:after {
	content: '' !important;
	height: 24px;
	width: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cg class='frame-container-wrapper'%3E%3Cg class='frame-container-blur'%3E%3Cg class='frame-container-shadows'%3E%3Cg class='fills'%3E%3Crect width='24' height='24' class='frame-background' rx='0' ry='0'/%3E%3C/g%3E%3Cg class='frame-children'%3E%3Cpath d='M5 12h14' class='fills' style='fill:none'/%3E%3Cg stroke-linecap='round' stroke-linejoin='round' class='strokes'%3E%3Cpath d='M5 12h14' class='stroke-shape' style='fill:none;stroke-width:2;stroke:%23532766;stroke-opacity:1'/%3E%3C/g%3E%3Cpath d='m12 5 7 7-7 7' class='fills' style='fill:none'/%3E%3Cg stroke-linecap='round' stroke-linejoin='round' class='strokes'%3E%3Cpath d='m12 5 7 7-7 7' class='stroke-shape' style='fill:none;stroke-width:2;stroke:%23532766;stroke-opacity:1'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.swiper-button-prev:after {
	content:'' !important;
	height: 24px;
	width: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cg class='frame-container-wrapper'%3E%3Cg class='frame-container-blur'%3E%3Cg class='frame-container-shadows'%3E%3Cg class='fills'%3E%3Crect width='24' height='24' class='frame-background' rx='0' ry='0'/%3E%3C/g%3E%3Cg class='frame-children'%3E%3Cpath d='m12 19-7-7 7-7' class='fills' style='fill:none'/%3E%3Cg stroke-linecap='round' stroke-linejoin='round' class='strokes'%3E%3Cpath d='m12 19-7-7 7-7' class='stroke-shape' style='fill:none;stroke-width:2;stroke:%23532766;stroke-opacity:1'/%3E%3C/g%3E%3Cpath d='M19 12H5' class='fills' style='fill:none'/%3E%3Cg stroke-linecap='round' stroke-linejoin='round' class='strokes'%3E%3Cpath d='M19 12H5' class='stroke-shape' style='fill:none;stroke-width:2;stroke:%23532766;stroke-opacity:1'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	bottom: unset;
	top: 14px;
	left: unset;
	width: unset;
	right: 12px;
	position: unset !important;
}


.swiper-pagination-bullet {
	width: 16px !important;
	height: 16px !important;
	display: inline-block;
	border-radius: 16px !important;
	background: var(--lila) !important;
	opacity: 1 !important;
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0px 3px 0px 0px !important;
}  

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet:last-of-type {
	margin: 0px  !important;
}  


/* Wrapper darf NICHT umbrechen */
.swiper-wrapper {
	display: flex;       /* sicherstellen, dass es flex ist */
	flex-wrap: nowrap;   /* WICHTIG: kein Zeilenumbruch */
}

/* Slides dürfen nicht wachsen / umbrechen, sondern als einzelne „Karten" laufen */
.swiper-slide {
	flex: 0 0 auto;      /* Breite durch Inhalt / CSS gesteuert, nicht automatisch gestreckt */
}


.swiper.swiper-veranstaltungen, .swiper {
	width: 100%;
	max-width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.ehrenamt-videos-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.ehrenamt-videos-wrapper .swiper-navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 8px;
}

.swiper-ehrenamtliche-geschichten .swiper {
	width: 100%;
	max-width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.swiper-ehrenamtliche-geschichten {
    display: flex;
    width: 100%;
}

/* Ehrenamt Video Slide */
.ehrenamt-video-slide {
    display: flex;
    width: 271px !important;
    flex-shrink: 0;
	overflow: hidden;
	border-radius: var(--round-elements);
}

.ehrenamt-video-slide video {
    width: 100%;
	overflow: hidden;
	border-radius: var(--round-elements);
}

/* Ehrenamt Geschichten: Desktop - statisches Grid, kein Slider */
@media (min-width: 769px) {
    .ehrenamt-videos-wrapper .swiper-navigation {
        display: none !important;
    }
    .swiper-ehrenamtliche-geschichten .swiper-wrapper {
        flex-wrap: wrap !important;
        justify-content: center !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Ehrenamt Geschichten: Mobile - Slider sichtbar, Navigation ausgeblendet */
@media (max-width: 768px) {
    .ehrenamt-videos-wrapper .swiper-navigation {
        display: none !important;
    }
    .swiper-ehrenamtliche-geschichten {
        padding-left: 20px;
        padding-right: 20px;
    }
    .swiper-ehrenamtliche-geschichten .swiper-slide {
        width: 271px !important;
    }
    .ehrenamt-video-slide {
        width: 100% !important;
    }
}

/* •••••• Burger Menu •••••••••••••••••••••••••••••••••••••••••••••• */

.menuItem {
	display: block;
	color: #532766;
	font-size: 48px;
	font-weight: 700;
	text-decoration: none;
	padding-top: 8px;
	padding-bottom: 16px;
	transition: all 0.25s ease-in-out;
}

.menuItem:hover  {
	 display: flex;
	 flex-direction:row;
	 transition: all 0.25s ease-in-out;
}

.menuItem:before {
	content: url('../../uploads/2023/06/icon-arrow-menu.svg');
	margin-left: -40px;
	opacity: 0;
	margin-right: 8px;
	transition: all 0.25s ease-in-out;
}

.menuItem:hover:before {
	margin-left: 24px;
	content: url('../../uploads/2023/06/icon-arrow-menu.svg');
	margin-right: 8px;
	opacity: 1;
}

.menu li {
	border-bottom: 1px solid black;
	padding: 0px !important;
} 

.hamburger, .sticky {
	margin-left: 40px;
	position: relative;
	z-index: 100;
	padding: 4px;
	cursor: pointer;
	border: 0px;
	background: none;
}

.closeIcon {
	position: fixed; 
	top: 32px;
	right: 52px;
	display: none;
}

.menu {
	position: fixed;
	transform: translateX(100%);
	transition: transform 0.2s;
	top: 0;
	right: 0;
	bottom: 0;
	margin: 0px;
	z-index: 99;
	background: #D0F9F9;
	color: #532766;
	list-style: none;
	width: 50%;
	padding: 32px 64px 32px 32px;
}

.showMenu {
	transform: translateX(0);
	box-shadow: 0 2px 32px 0 rgba(0,0,0,0.34);
}

@media screen and (max-width: 1200px) { 
	.menu {
		width: 100%;
		padding: 16px 16px 16px 16px;
	}
	.menuItem {
		font-size: 36px;
	}   
	
	.menuItem:before {
		content: none;
		margin-left: 0;
		opacity: 0;
		margin-right: 8px;
		transition: all 0.25s ease-in-out;
	}

	.menuItem:hover:before {
		margin-left: 0px;
		content: none;
		margin-right: 8px;
		opacity: 1;
	}
	
	.closeIcon {
		position: fixed; 
		top: 16px;
		right: 16px;
		display: none;
	}
	
}


/* •••••• Formulare •••••••••••••••••••••••••••••••••••••••••••••• */

form h3 {
	font-size: var(--type-s);
	font-weight: 700;
	margin-bottom: var(--space-2);
}

label {
	font-size: var(--type-xs);
} 

input, textarea {
	font-size: var(--type-s);
	color: var(--lila);
	padding: 8px 12px;
	background: var(--weiss);
	border: 1px solid var(--lila);
	border-radius: var(--round-elements-small);
	margin: var(--space-2) 0 var(--space-3) 0; 
}

input:focus {
	border: 1px solid var(--dunkellila);
	outline: none;
}

[type="checkbox"], [type="radio"] {
	margin-right: 2px;
}


.wpcf7-not-valid-tip {
	margin-bottom: var(--space-6);
}

.wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.sent .wpcf7-response-output {
	border: 0px none;
	background: var(--lila);
	border-radius: var(--round-elements);
	color: var(--weiss);
	padding: 8px 12px;
	font-size: var(--type-xs);
} 

.wpcf7-list-item {
	margin: 0px var(--space-3) 0 0;
}   

.wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: var(--space-2);
}

.wpcf7-list-item input[type="checkbox"], input[type="radio"] {
	margin-top: 4px;
	flex-shrink: 0;
}

.wpcf7-list-item label span,
.wpcf7-list-item label {

}


/* •••••• Marquee •••••••••••••••••••••••••••••••••••••••••••••• */

.marquee {
    width: 100%;
    overflow: hidden;             /* Versteckt den Teil des Textes, der rausläuft */
    white-space: nowrap;          /* Text darf NICHT umbrechen */
    position: relative;
}

.marquee__content {
    display: inline-block;        /* Wichtig für scrollWidth-Berechnung */
    will-change: transform;       /* Performance-Optimierung */
}

/* •••••• Event Filter Dropdown •••••••••••••••••••••••••••••••••••••••••••••• */

#filter-wrapper {
    margin-bottom: 20px;
}

/* Custom Dropdown */
.custom-event-dropdown {
    width: 100%;
    max-width: 370px;
    padding: 8px 12px;
    font-size: var(--type-s);
    color: var(--lila);
    border: 1px solid var(--weiss);
    border-radius: var(--round-button);
    background-color: var(--weiss);
    cursor: pointer;

    /* Standard Pfeil entfernen */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* SVG Pfeil */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="%23532766" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
}

/* Hover 
.custom-event-dropdown:hover {
}*/

/* Focus */
.custom-event-dropdown:focus {
    outline: none;
}


/* •••••• Akkordion  •••••••••••••••••••••••••••••••••••••••••••••• */


.bde-accordion__button {
  background-color: transparent !important;
  padding: var(--space-5) var(--space-4) !important;
}

.bde-accordion__panel-content .bde-loop-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-5) !important;
  padding: var(--space-4) var(--space-4) !important;
}


/* •••••• Video  •••••••••••••••••••••••••••••••••••••••••••••• */


.video video.hover-video { 
    border-radius: var(--round-elements) !important;
    overflow: hidden !important;
}


/* Generated from selectors.json — do not edit manually */

.nav-meta {
    display: flex;
    flex-flow: row;
    justify-content: end;
    align-items: start;
    gap: var(--space-2);
}

.header {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    margin-top: var(--space-7);
    margin-right: var(--space-7);
    margin-bottom: var(--space-4);
    margin-left: var(--space-7);
}

body {
    font-family: var(--font-family);
    font-weight: var(--font-weight-text);
    color: var(--lila);
    background-color: var(--flieder);
}

body, html {
  overflow-x: hidden;
}

.logo-default {
    width: 340px;
    height: 92px;
}

.cta-secondary-invert {
    display: flex;
    flex-flow: row;
    justify-content: start;
    align-items: center;
    padding-top: var(--space-2);
    padding-right: var(--space-2);
    padding-bottom: var(--space-2);
    padding-left: var(--space-4);
    width: fit-content;
    border-radius: var(--round-button);
    border-top: 1px solid var(--weiss);
    border-right: 1px solid var(--weiss);
    border-bottom: 1px solid var(--weiss);
    border-left: 1px solid var(--weiss); 
}
	
	/* Generated from selectors.json — do not edit manually */

.nav-meta {
    display: flex;
    flex-flow: row;
    justify-content: end;
    align-items: start;
    gap: var(--space-2);
}

.header {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    margin-top: var(--space-7);
    margin-right: var(--space-7);
    margin-bottom: var(--space-4);
    margin-left: var(--space-7);
}

body {
    font-family: custom_font_apfel_grotezk;
    font-weight: var(--font-weight-text);
    color: var(--lila);
    background-color: var(--flieder);
}

body, html {
  overflow-x: hidden;
}

.logo-default {
    width: 340px;
    height: 92px;
}

.cta-secondary-invert {
    display: flex;
    flex-flow: row;
    justify-content: start;
    align-items: center;
    padding-top: var(--space-2);
    padding-right: var(--space-2);
    font-size: var(--type-s);
    line-height: var(--line-height-headline);
    color: var(--weiss);
}

.cta-secondary-invert svg path {
	stroke: var(--weiss) !important;
}

.center {
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: center;
    text-align: center;
}

.section-intro {
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: center;
    gap: var(--space-3);
    max-width: 940px;
}

.section {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-right: var(--space-7);
    margin-left: var(--space-7);
    padding-top: var(--space-11);
    padding-bottom: var(--space-11);
}

.intro-headline {
    max-width: 762px;
}

.video-ehrenamtliche-geschichten {
    max-height: 482px;
    min-height: 482px;
}

.hover-video {
    cursor: pointer;
}

.oktvmainz-logo {
    margin-bottom: 2px;
    width: 146px;
    height: 24px;
}

.t6-xs {
    font-weight: 400;
    font-size: var(--type-xs);
    line-height: var(--line-height-headline);
}

.video-coop {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: end;
    text-align: end;
}

.full-width {
    width: 100%;
}

.flex-column-4 {
    display: block;
    flex-flow: column;
    gap: var(--space-1);
}

.d5-s {
    font-family: var(--font-family);
    font-weight: var(--font-weight-headline);
    font-size: var(--type-s);
    line-height: var(--line-height-headline);
}

.card-event {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    padding-top: var(--space-5);
    padding-right: var(--space-5);
    padding-bottom: var(--space-5);
    padding-left: var(--space-5);
    min-height: 320px;
    border-radius: var(--round-elements);
    background-color: var(--tuerkis);
}

.card-event .show-on-hover {
  display: none;
}
.card-event:hover .show-on-hover {
  display: block;
}

.card-event:hover {
    color: var(--lila);
    background-color: var(--weiss);
}

.left-align {
    text-align: start;
}

.highlight-bullet {
    padding-top: var(--space-1);
    padding-right: var(--space-2);
    padding-bottom: var(--space-1);
    padding-left: var(--space-2);
    border-radius: var(--round-button);
    color: var(--weiss);
    background-color: var(--lila);
}

.optischer-ausgleich-left-top-4 {
    margin-top: -4px;
    margin-left: -4px;
}

.line-height-1 {
    line-height: var(--line-height-headline);
}

.no-margin {
	margin: -32px !important;
}

.flex-column-8 {
    display: flex;
    flex-flow: column;
    gap: 8px;
}

.text-filter {
    max-width: 234px;
}

.flex-column-64 {
    display: flex;
    flex-flow: column;
    gap: var(--space-10);
}

.image-event-activities {
    display: block;
    margin-top: -213px;
    margin-right: -907px;
    margin-bottom: -180px;
    width: 400px;
    position: relative;
    z-index: -100;
}

.card-teaser {
    display: flex;
    flex-flow: column;
    gap: 32px;
    margin-top: 192px;
    padding-top: var(--space-7);
    padding-right: var(--space-7);
    padding-bottom: var(--space-7);
    padding-left: var(--space-7);
    max-width: 832px;
    border-radius: var(--round-elements);
    background-color: var(--tuerkis);
    position: relative;
    z-index: 1;
}

.engangementfinder-teaser-image {
    display: block;
    margin-top: -659px;
    max-width: 1076px;
    position: relative;
    z-index: -100;
}

.center-center {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.flex-row-16 {
    display: flex;
    flex-flow: wrap;
    gap: 16px;
}

.cta-secondary {
    display: flex;
    flex-flow: row;
    justify-content: start;
    align-items: center;
    padding-top: var(--space-2);
    padding-right: var(--space-2);
    padding-bottom: var(--space-2);
    padding-left: var(--space-4);
    width: fit-content;
    border-radius: var(--round-button);
    border-top: 1px solid var(--lila);
    border-right: 1px solid var(--lila);
    border-bottom: 1px solid var(--lila);
    border-left: 1px solid var(--lila);
    font-size: var(--type-s);
    line-height: var(--line-height-headline);
    color: var(--lila);
}

.cta-secondary svg path {
	stroke: var(--lila) !important;
}

.cta-secondary:hover svg path {
	stroke: var(--turkis) !important;
}

.cta-secondary:hover {
    border-top: 1px solid var(--tuerkis);
    border-right: 1px solid var(--tuerkis);
    border-bottom: 1px solid var(--tuerkis);
    border-left: 1px solid var(--tuerkis);
    color: var(--tuerkis);
}

.ehrenamtskarte-teaser {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 818px;
    max-width: 1198px;
    color: var(--weiss);
    background-image: url(https://ehrenamtsbuero-mainz.de/wp-content/uploads/2025/07/ehrenamtskarte_teaser@2x.png);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.ehrenamtskarte-teaser-text {
    padding-right: var(--space-7);
    padding-left: var(--space-7);
    width: 100vw;
    max-width: 845px;
}

.card-news {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    padding-top: var(--space-5);
    padding-right: var(--space-5);
    padding-bottom: var(--space-5);
    padding-left: var(--space-5);
    height: 391px;
    border-radius: var(--round-elements);
    background-color: var(--tuerkis);
}

.card-news .show-on-hover {
opacity: 0;
  display: none;
}

.card-news:hover .show-on-hover {
opacity: 1;
    display: block;
}

.card-news:hover {
    background-color: var(--weiss);
}

.flex-column-40 {
    display: flex;
    flex-flow: column;
    gap: 40px;
}

.flex-column-12 {
    display: flex;
    flex-flow: column;
    gap: 12px;
}

.cta-secondary-alternative-hover {
    display: flex;
    flex-flow: row;
    justify-content: start;
    align-items: center;
    padding-top: var(--space-2);
    padding-right: var(--space-2);
    padding-bottom: var(--space-2);
    padding-left: var(--space-4);
    width: fit-content;
    border-radius: var(--round-button);
    border-top: 1px solid var(--lila);
    border-right: 1px solid var(--lila);
    border-bottom: 1px solid var(--lila);
    border-left: 1px solid var(--lila);
    font-size: var(--type-s);
    line-height: var(--line-height-headline);
    color: var(--lila);
    text-wrap: nowrap;
}

.cta-secondary-alternative-hover svg path {
	stroke: var(--lila) !important;
}

.cta-secondary-alternative-hover:hover svg path {
	stroke: var(--weiss) !important;
}

.cta-secondary-alternative-hover:hover {
    border-top: 1px solid var(--lila);
    border-right: 1px solid var(--lila);
    border-bottom: 1px solid var(--lila);
    border-left: 1px solid var(--lila);
    color: var(--weiss);
    background-color: var(--lila);
}

.footer {
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: start;
    margin-right: var(--space-7);
    margin-left: var(--space-7);
    padding-top: var(--space-6);
    padding-right: var(--space-6);
    padding-bottom: var(--space-6);
    padding-left: var(--space-6);
    border-top-left-radius: var(--round-elements);
    border-top-right-radius: var(--space-4);
    background-color: var(--weiss);
}

.footer a {
    text-decoration: none;
}

.logo-footer {
    width: 221px;
}

.flex-row-32 {
    display: flex;
    flex-flow: row;
    justify-content: start;
    align-items: start;
    gap: 32px;
}

.card-team-large {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: start;
    gap: var(--space-4);
    padding-top: var(--space-6);
    padding-right: var(--space-6);
    padding-bottom: var(--space-6);
    padding-left: var(--space-6);
    max-width: 573px;
    min-height: 330px;
    border-radius: var(--round-elements);
    background-color: var(--weiss);
}

.profil-image-m {
    width: 96px;
    height: 96px;
    overflow: clip;
    object-fit: cover;
    object-position: 50% 50%;
    aspect-ratio: 1;
    border-radius: var(--round-button);
}

.optischer-ausgleich-top-right-4 {
    margin-top: -4px;
    margin-right: -4px;
}

.card-team {
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: start;
    padding-top: var(--space-6);
    padding-right: var(--space-6);
    padding-bottom: var(--space-6);
    padding-left: var(--space-6);
    max-width: 573px;
    min-height: 220px;
    border-radius: var(--round-elements);
    background-color: var(--weiss);
}

.center-wrap {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: start;
}

.flex-column-spacebetween {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.full-height {
    height: 100%;
}

.faq-top {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
    padding-top: var(--space-6);
    padding-right: var(--space-6);
    padding-bottom: var(--space-6);
    padding-left: var(--space-6);
    border-top-left-radius: var(--round-elements);
    border-top-right-radius: var(--round-elements);
    background-color: var(--weiss);
}

.faq-wrapper {
    width: 944px;
    overflow: clip;
    border-radius: var(--round-elements);
}

.faq-content {
    margin-top: -24px;
    padding-top: 0px;
    padding-right: 64px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.icon-l {
    width: 37px;
    height: 37px;
}

.footer-social-media {
    display: flex;
    justify-content: start;
    align-items: start;
    margin-right: 54px;
}

.logo-diakonie {
    width: 288px;
}

.footer-bottom {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: start;
    gap: var(--space-7);
    margin-top: 143px;
    width: 100%;
}

.flex-column-24 {
    display: flex;
    flex-flow: column;
    gap: var(--space-6);
}

.flex-row-32-bottom-left {
    display: flex;
    flex-flow: wrap;
    justify-content: start;
    align-items: end;
    gap: var(--space-7);
}

.logo-mainz {
    width: 190px;
    height: 84.55px;
}

.logo-rlp-staatskanzlei {
    width: 191px;
    height: 63px;
}

.ehrenamt-wird-gefoerdert {
    margin-right: var(--space-12);
}

.footer-top {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: start;
    gap: var(--space-7);
    width: 100%;
}

.footer-large-monitor-space {
    margin-left: var(--space-9);
}

.nach-oben {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-top: var(--space-4);
    margin-right: var(--space-10);
    margin-bottom: var(--space-4);
    margin-left: var(--space-7);
}

.anmelde-formular {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-6);
    padding-right: var(--space-6);
    padding-bottom: var(--space-6);
    padding-left: var(--space-6);
    width: 800px;
    border-radius: var(--round-elements);
    background-color: var(--weiss);
}

.ehrenamtskarte-intro {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1190px;
    max-height: 793px;
    min-height: 793px;
    color: var(--weiss);
    background-image: url(https://ehrenamtsbuero-mainz.de/wp-content/uploads/2025/07/ehrenamtskarte_teaser@2x.png);
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
	margin: auto;
}



.ehrenamtskarte-content {
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: start;
    gap: var(--space-4);
    padding-top: var(--space-6);
    padding-right: var(--space-6);
    padding-bottom: var(--space-6);
    padding-left: var(--space-6);
    max-width: 967px;
    border-radius: var(--round-elements);
    background-color: var(--button-active);
}

.ehrenamtskarte-image-card {
    display: flex;
    width: 450px;
    transform: translate3d(420px,206px,0px);
    position: absolute;
    z-index: 10;
}

.section-zero {
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: center;
}

.cta-primary-icon-left-invert {
    display: flex;
    flex-flow: row;
    justify-content: start;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-2);
    padding-right: var(--space-3);
    padding-bottom: var(--space-2);
    padding-left: var(--space-3);
    width: fit-content;
    border-radius: var(--round-button);
    text-wrap: nowrap;
    background-color: var(--weiss);
}

.flex-center {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.container-content {
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: center;
}

.section-zero-uplifted {
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: center;
    gap: var(--space-6);
    transform: translate3d(0px,-136px,0px);
}

.ehrenamtskarte-downloads {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: start;
    gap: var(--space-6);
    margin-top: var(--space-8);
    max-width: 967px;
}

.ehrenamtskarte-image-examples {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
    max-width: 1083px;
}

.footer-infos {
    display: flex;
    flex-flow: wrap;
    justify-content: start;
    align-items: start;
    gap: var(--space-7);
}

.footer-telefonsprechstunde {
    width: 320px;
}

.footer-logo-infos-container {
    display: flex;
    flex-flow: wrap;
    justify-content: start;
    align-items: start;
    gap: var(--space-12);
}

.sticky {
    display: block;
    position: fixed;
    top: 32px;
    right: 32px;
}

.swiper-navigation-container {
    display: flex;
    flex-flow: row;
    justify-content: end;
    align-items: start;
    margin-right: var(--space-7);
}

.width-500 {
    display: block;
    flex-flow: column;
    max-width: 500px;
    min-width: 500px;
}

.container-1 {
    display: flex;
    flex-flow: column;
    justify-content: start;
    align-items: start;
    gap: var(--space-3);
}

.disable {
    display: none;
}

.container-team-auflistung {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
}

.profil-text {
    max-width: 413px;
}

.header-social-media {
    display: flex;
    gap: var(--space-1);
}

.overflow-hidden {
    overflow: hidden;
}

.ehrenamtskarte-teaser-positionierung {
    margin-top: -230px;
}

.margin-32 {
    margin-right: var(--space-7);
    margin-left: var(--space-7);
}

.swiper-veranstaltungen {
    display: block;
    flex-flow: row;
}

.padding-32 {
    display: flex;
}

.container-default-page {
    margin-top: var(--space-7);
    margin-right: var(--space-7);
    margin-bottom: var(--space-7);
    margin-left: var(--space-7);
    padding-top: var(--space-7);
    padding-right: var(--space-7);
    padding-bottom: var(--space-7);
    padding-left: var(--space-7);
    border-radius: var(--round-elements);
    background-color: var(--weiss);
}

.card-event-modal {
    display: flex;
    flex-flow: column;
    gap: var(--space-6);
    padding-top: var(--space-6);
    padding-right: var(--space-6);
    padding-bottom: var(--space-6);
    padding-left: var(--space-6);
    max-width: 935px;
    border-radius: var(--space-6);
    background-color: var(--weiss);
    box-shadow: 4px 4px 15px 5px #00000024;
}

.card-event-modal-headline {
    max-width: 631px;
}

.card-event-modal-description {
    max-width: 639px;
}

.card-event-modal-location {
    display: flex;
    flex-flow: wrap;
    justify-content: start;
    align-items: start;
    row-gap: 0px;
    column-gap: 5px;
    max-width: 339px;
}

.flex-row-24 {
    display: flex;
    flex-flow: row;
    gap: var(--space-6);
}

.card-event-modal-bottom {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: end;
    gap: var(--space-7);
}

.card-event-modal-date-location {
    display: flex;
    flex-flow: wrap;
    gap: var(--space-6);
}

.card-event-modal-top-container {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: start;
}

.card-event__modal-template {
    display: none;
}

.content_area {
    max-width: 900px;
}

.card-event-modal-webinar {
    display: flex;
    flex-flow: column;
    justify-content: end;
    align-items: end;
    gap: var(--space-1);
    text-align: end;
}

.marquee__content {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.marquee {
    display: block;
    margin-bottom: -8px;
    width: 100%;
    border-bottom: 1px solid var(--gray-2);
}

.stage-frontpage-introtext {
    max-width: 760px;
}

.ehrenamtskarte-download-items {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
}

.swiper-wrapper-centered {
    width: 100%;
}

.t4-m {
    font-size: var(--type-m);
    line-height: var(--line-height-text);
}

.d1-2xl {
    font-family: var(--font-family);
    font-weight: var(--font-weight-headline);
    font-size: var(--type-2xl);
    line-height: var(--line-height-headline);
}

.d4-m {
    font-weight: 700;
    font-size: var(--type-m);
    line-height: var(--line-height-headline);
}

.d2-xl {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: var(--type-xl);
    line-height: var(--line-height-headline);
}

.t5-s {
    font-size: var(--type-s);
    line-height: var(--line-height-text);
}

.d3-l {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: var(--type-l);
    line-height: var(--line-height-headline);
}

.headline-m {
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
}

.text-s {
    font-size: var(--type-s);
}

.dachzeile-highlight {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    padding-top: var(--space-2);
    padding-right: var(--space-3);
    padding-bottom: var(--space-2);
    padding-left: var(--space-3);
    width: fit-content
;
    border-radius: var(--round-button);
    font-weight: 700;
    font-size: var(--type-s);
    background-color: var(--weiss);
}

.introtext {
    max-width: 859px;
}

.no-link-underline a {
  text-decoration: none;
}

.substage {
    padding-top: var(--space-7);
    padding-right: var(--space-7);
    padding-bottom: var(--space-7);
    padding-left: var(--space-7);
    border-radius: var(--round-elements);
    background-color: var(--weiss);
}

.ehrenamtsmesse-intro {
    width: 838px;
}

.stage_default_page {
    padding-top: var(--space-7);
    padding-right: var(--space-7);
    padding-bottom: var(--space-7);
    padding-left: var(--space-7);
    height: 531px;
    border-radius: var(--round-elements);
    background-color: #FFFFFFFF;
    background-image: url(https://ehrenamtsbuero-mainz.de/wp-content/uploads/2025/11/stage-fuerfreiwillige-hero@2x-scaled.jpg);
    background-size: cover;
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

.card-slider-aufzaehlung {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    padding-top: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: var(--space-4);
    padding-left: var(--space-4);
    min-height: 503px;
    border-radius: var(--round-elements);
    background-color: var(--weiss);
}

.stage_organisationen {
    display: flex;
    justify-content: space-between;
    padding-top: var(--space-7);
    padding-right: var(--space-7);
    padding-bottom: var(--space-7);
    padding-left: var(--space-7);
    height: 531px;
    min-height: 531px;
    border-radius: var(--round-elements);
    color: var(--weiss);
    background-image: url(https://ehrenamtsbuero-mainz.de/wp-content/uploads/2025/07/stage-feuer-organisationen@2x-scaled.jpg);
    background-size: cover;
    background-position: 100% 50%;
}

.quote {
    max-width: 1046px;
}

.card-slider-aufzaehlung-inner {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    max-height: 110%;
    min-height: 100%;
}

.card-header-text {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: start;
    padding-top: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: var(--space-4);
    padding-left: var(--space-4);
    min-height: 375px;
    border-radius: var(--round-elements);
    background-color: var(--tuerkis);
}

.card-slider-intro {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    padding-top: var(--space-4);
    padding-right: var(--space-7);
    padding-bottom: var(--space-4);
    padding-left: var(--space-4);
    min-height: 500px;
    border-radius: var(--round-elements);
    background-color: var(--tuerkis);
}

.card-steps {
    padding-top: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: var(--space-4);
    padding-left: var(--space-4);
    width: 352px;
    height: 100%;
    max-height: 100%;
    min-height: 300px;
    border-radius: var(--round-elements);
    background-color: var(--weiss);
}

.content {
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--space-7);
    padding-left: var(--space-7);
}

.card-slider-aufzaehlung-tipp {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    padding-top: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: var(--space-4);
    padding-left: var(--space-4);
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    border-radius: var(--round-elements);
    background-color: var(--tuerkis);
}

.stage {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: start;
    gap: var(--space-6);
    margin-right: var(--space-7);
    margin-left: var(--space-7);
    padding-top: var(--space-7);
    padding-right: var(--space-7);
    padding-bottom: var(--space-7);
    padding-left: var(--space-7);
    border-radius: var(--round-elements);
    background-color: var(--dunkellila);
}

.stage-frontpage-image {
    min-height: 531px;
    background-image: url(https://ehrenamtsbuero-mainz.de/wp-content/uploads/2025/06/stage-frontpage-hero@2x-scaled.jpg);
    background-size: cover;
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

.stage-frontpage-text {
    max-width: 683px;
}

.stage-ehrenamtsmesse-image {
    height: 531px;
    background-image: url(https://ehrenamtsbuero-mainz.de/wp-content/uploads/2025/07/stage-ehrenamtsmesse-hero@2x-scaled.jpg);
    background-size: cover;
    background-position: 0% 50%;
}

.card-links {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: start;
    padding-top: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: var(--space-4);
    padding-left: var(--space-4);
    width: 100%;
    height: 372px;
    border-radius: var(--round-elements);
    color: var(--weiss);
    text-align: start;
    background-color: #532766;
}

.card-links:hover {
    color: var(--lila);
    background-color: var(--weiss);
}

.card-links:hover svg path {
  stroke: var(--lila) !important;
}

.flex-center-center {
    justify-content: center;
    align-items: center;
}

.flex-center-top {
    display: flex;
    justify-content: center;
    align-items: start;
}

.flex-item-center {
    display: flex;
    justify-content: center;
    align-items: start;
    align-self: center;
}

.flex-column-32 {
    display: flex;
    flex-flow: column;
    gap: var(--space-7);
}

.flex-column-16 {
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.flex-column-6 {
    display: flex;
    flex-flow: column;
    gap: 6px;
}

.flex-row {
    display: flex;
    flex-flow: row;
}

.flex-middle {
    display: flex;
    justify-content: start;
    align-items: center;
}

.flex-row-4 {
    display: flex;
    flex-flow: row;
    gap: var(--space-1);
}

.flex-row-48 {
    display: flex;
    flex-flow: wrap;
    gap: var(--space-9);
}

.flex-row-32-spaceinbetween {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: start;
    gap: var(--space-7);
}

.flex-row-8 {
    display: flex;
    flex-flow: wrap;
    gap: var(--space-2);
}

.flex-row-40 {
    display: flex;
    flex-flow: row;
    gap: var(--space-8);
}

.flex-gap-l {
    display: flex;
    gap: var(--space-6);
}

.flex-column {
    display: flex;
    flex-flow: column;
}

.flex-row-6 {
    display: flex;
    flex-flow: row;
    gap: 6px;
}

.icon-burger {
    width: var(--space-9);
}

.icon-m {
    width: var(--space-6);
    height: var(--space-6);
}

.icon-s {
    width: var(--space-5);
    height: var(--space-5);
}

.card-wide {
    padding-top: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: var(--space-4);
    padding-left: var(--space-4);
    max-width: 658px;
    border-radius: var(--round-elements);
    background-color: var(--weiss);
}

.invert {
    color: var(--weiss);
}

.line {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
    margin-right: 19px;
    margin-left: 19px;
    height: 1px;
    border-bottom: 1px solid var(--dunkellila);
}

.bullet {
    margin-top: 6px;
    width: 12px;
    height: 12px;
    max-width: 12px;
    max-height: 12px;
    aspect-ratio: 1;
    border-radius: var(--round-button);
    background-color: var(--lila);
}

.width-410 {
    width: 410px;
    max-width: 410px;
    min-width: 410px;
}

.width-600 {
    max-width: 600px;
}

.width-372 {
    width: 372px;
}

.form_group {
    margin-bottom: var(--space-7);
}

.cta-third-invert {
    color: var(--weiss);
}

.cta-third-invert:hover {
    color: var(--weiss);
}

.cta-primary-invert {
    display: flex;
    flex-flow: row;
    justify-content: start;
    align-items: center;
    padding-top: var(--space-2);
    padding-right: var(--space-2);
    padding-bottom: var(--space-2);
    padding-left: var(--space-4);
    width: fit-content;
    border-radius: var(--round-button);
    font-size: var(--type-s);
    line-height: var(--line-height-headline);
    color: var(--lila);
    background-color: var(--weiss);
}

.switch {
    display: flex;
    border-radius: var(--round-button);
    background-color: var(--weiss);
}

.button-xs {
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    align-items: center;
    gap: 34px;
    padding-top: var(--space-2);
    padding-right: var(--space-2);
    padding-bottom: var(--space-2);
    padding-left: var(--space-2);
    width: 37px;
    height: 37px;
    overflow: visible;
    border-radius: var(--round-button);
    background-color: var(--weiss);
}

.button-s {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
    padding-top: var(--space-2);
    padding-right: var(--space-4);
    padding-bottom: var(--space-2);
    padding-left: var(--space-4);
    border-radius: var(--round-button);
}

.button-s:hover svg path {
	stroke: #fff;
}

.button-s:hover {
    color: var(--weiss);
    background-color: var(--lila);
}

.cta-primary {
    display: flex;
    flex-flow: row;
    justify-content: start;
    align-items: center;
    padding-top: var(--space-2);
    padding-right: var(--space-2);
    padding-bottom: var(--space-2);
    padding-left: var(--space-4);
    width: fit-content;
    border-radius: var(--round-button);
    font-size: var(--type-s);
    line-height: var(--line-height-headline);
    color: var(--weiss);
    text-wrap: nowrap;
    background-color: var(--lila);
}

.active {
    background-color: var(--lila);
}

.advanced-slide-1 {
    max-width: 4px;
}

.slider .swiper-wrapper {
  padding-left: 256px; /* gewünschter Offset links */
  margin-right: 128px;
}


@media (max-width: 479px) {
    .header {
        margin-top: var(--space-1);
        margin-bottom: var(--space-1);
    }
    
    .section {
        overflow: visible;
    }
    
    .card-teaser {
        flex-flow: column;
        margin-top: 0px;
    }
    
    .ehrenamtskarte-teaser-positionierung {
        margin-top: 340px;
    }
    
    .container {
        overflow: hidden;
    }
    
    .stage_default_page {
        overflow: hidden;
    }
    
    .content {
        overflow: hidden;
    }
}


@media (max-width: 767px) {
    .nav-meta {
        display: none;
    }
    
    .header {
        align-items: center;
        margin-right: var(--space-3);
        margin-left: var(--space-3);
    }
    
    .logo-default {
        width: 230px;
    }
    
    .ehrenamtskarte-image-card {
        transform: translate3d(-40px,180px,0px);
    }
    
    .swiper-navigation-container {
        display: flex;
        height: var(--space-6);
    }
    
    .width-500 {
        width: calc(100vw - 48px);;
        max-width: calc(100vw - 48px);;
        min-width: calc(100vw - 48px);;
    }
    
    .header-social-media {
        display: none;
    }
    
    .ehrenamtskarte-teaser-positionierung {
        margin-top: 253px;
    }
    
    .padding-32 {
        padding-right: var(--space-7);
        padding-left: var(--space-7);
    }
    
    .card-event-modal-bottom {
        flex-flow: wrap;
    }
    
    .content {
        overflow: visible;
    }
    
    .stage-frontpage-image {
        min-height: 513px;
        background-image: url(https://ehrenamtsbuero-mainz.de/wp-content/uploads/2025/07/stage-frontpage-hero@2x-scaled.jpg);
        background-position: 0% 50%;
    }
    
    .width-410 {
        width: calc(100vw - 48px);;
        max-width: calc(100vw - 48px);;
        min-width: calc(100vw - 48px);;
    }
}


@media (max-width: 1023px) {
    .header {
        margin-right: var(--space-4);
        margin-left: var(--space-4);
    }
    
    .logo-default {
        width: 290px;
    }
    
    .footer {
        margin-right: var(--space-3);
        margin-left: var(--space-3);
    }
    
    .faq-wrapper {
        width: unset;
        max-width: 944px;
    }
    
    .ehrenamtskarte-intro {
        justify-content: center;
        align-items: center;
        background-image: url(https://ehrenamtsbuero-mainz.de/wp-content/uploads/2025/07/ehrenamtskarte_teaser@2x.png);
        background-size: cover;
        background-position: 50% 50%;
    }
    
    .ehrenamtskarte-image-card {
        transform: translate3d(220px,210px,0px);
    }
    
    .section-zero-uplifted {
        padding-right: var(--space-3);
        padding-left: var(--space-3);
    }
    
    .ehrenamtskarte-teaser-positionierung {
        margin-top: 9px;
    }
    
    .stage_default_page {
        background-color: var(--weiss);
    }
    
    .stage_organisationen {
        flex-flow: column;
        gap: var(--space-7);
        height: fit-content
    ;
    }
    
    .card-steps {
        width: 100%;
        height: 173px;
        max-width: 100%;
    }
    
    .stage-frontpage-image {
        background-image: url(https://ehrenamtsbuero-mainz.de/wp-content/uploads/2025/07/stage-frontpage-hero@2x-scaled.jpg);
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    
    .flex-row-8 {
        flex-flow: wrap;
    }
}


@media (max-width: 1119px) {
    .header {
        margin-right: var(--space-6);
        margin-left: var(--space-6);
    }
    
    .image-event-activities {
        display: none;
    }
    
    .ehrenamt-wird-gefoerdert {
        order: custom;
    }
    
    .ehrenamtskarte-image-card {
        transform: translate3d(339px,200px,0px);
    }
    
    .overflow-hidden {
        overflow: clip;
    }
    
    .stage-frontpage-introtext {
        max-width: 461px;
    }
    
    .stage_default_page {
        height: 600px;
    }
    
    .stage_organisationen {
        background-image: url(https://ehrenamtsbuero-mainz.de/wp-content/uploads/2025/07/stage-feuer-organisationen@2x-scaled.jpg);
    }
    
    .card-steps {
        justify-content: space-between;
        width: 33%;
        max-width: 352px;
    }
    
    .flex-row-8 {
        flex-flow: row;
        justify-content: start;
        align-items: start;
    }
    
    .switch {
        display: none;
    }
}