@font-face {
	font-family: 'Montserrat Variable';
	src: url('../fonts/montserrat_regular_variable.woff2') format('woff2');
	font-weight: 100 900; /* Variabler Gewichtsbereich */
	font-style: normal;
	font-display: swap;
  }
  
@font-face {
	font-family: 'Montserrat Variable';
	src: url('../fonts/montserrat_italic_variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans Variable';
	src: url('../fonts/open-sans-regular-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans Variable';
	src: url('../fonts/open-sans-italic-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Farben */
	--bg-page:			#f6f6ed;
	--black:			#000000;
	--white:			#FFFFFF;
	--white-trans:		rgba(255,255,255,0.9);
	--yellow:			#f9eb18;
	--blue:				#292559;
	--blue-hover:		#1D0BFF;
	--lblue:			#64B2E3;

	--text-white:		#FFFFFF;

	--kids-1:			#f4e825;
	--kids-2:			#f6ef70;

	--youths-1:			#65b1e1;
	--youths-2:			#93c9ec;

	--parents-1:		#272459;
	--parents-2:		#394d80;

	--specialists-1:	#9866a8;
	--specialists-2:	#b389c1;

	--slider-bg:		#f8f3a2; /* f8f3a2 */
	--slider-cite:		#e4e09a;
	--slider-arrow-bg:  #f4e825;

	--footer-bg:		#272459; 
	
	--cta-bg:			#272459;
	--cta-close-bg:		#65b1e1;

	--top-bg:			#65b1e1;

	--montserrat:		"Montserrat Variable", sans-serif;
	--open-sans:		"Open Sans Variable", sans-serif;
}

html {
	color: var(--blue);
	font-family: var(--open-sans);
	font-size: 12px;
}

body {
	background-position: right top !important;
	background-repeat: no-repeat !important;
	background-size: 100% !important;
}

body#page-2 {
	background: var(--bg-page) url("../images/bg-header-kinder.svg");
}

body#page-3 {
	background: var(--bg-page) url("../images/bg-header-jugendliche.svg");
}

body#page-4 {
	background: var(--bg-page) url("../images/bg-header-eltern.svg");
}

body#page-5 {
	background: var(--bg-page) url("../images/bg-header-fachkraefte.svg");
}

.debug {
	background-color: rgba(255,0,0,0.25);
	outline: 1px solid rgba(255,0,0,0.5);
	outline-offset: -1px;
}

#jump-to-content {
	background: red;
	display: grid; place-content: center;
	padding: 1rem;
	transform: translateY(-100%);
	transition: transform 0.25s ease;
	position: fixed; left: 0; right: 0; top: 0;
}
#jump-to-content:has(> a:focus) {
	transform: translateY(0);
}

#jump-to-content a {
	color: var(--white);
	font-size: 1.25rem;
	text-decoration: none;
}



#header {
	margin-top: 6rem;
}
main {
	margin-top: 4rem;
}
footer {
	margin-top: 2rem;
}

nav {
	position: sticky;
	top: 0;
	margin-top: 2rem;
	width: auto;
	z-index: 5;
	height: 0;
}
nav .d-flex {
	box-sizing: border-box;
	padding: 0;
	height: 0;
}

nav .logo {
	transition-duration: 0.5s;
	transition-property: opacity, margin;
	opacity: 1;
	display: none;
}

nav .kipsfam-vg-logo {
	display: block;
	width: 16.875rem;
	height: auto;
}

nav .menu {
	border-radius: 0.5rem;
	position: absolute;
	right: 1rem;
	top: 0rem;
	width: auto;
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 1rem;
	gap: 1rem;
	padding-top: 2rem;
	padding-right: 0;
}



nav .menu .menu-button {
	background: var(--white);  
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 100%;
	-webkit-transition: background 400ms ease 0ms,border 400ms ease 0ms;
	transition: background 400ms ease 0ms,border 400ms ease 0ms;
}
nav .menu .menu-button {
    display: flex;
	flex-wrap: wrap;
  align-items: center;
	justify-content: center;
}
nav .menu .menu-button,
.nav-open nav .menu .menu-button {
	border: 1px solid #f6f6ed;
	background-color: #f6f6ed;
	
}
.nav-open nav .menu .menu-button {
	border: 1px solid var(--black) !important;
}
.nav-open nav .menu .menu-button {
	border: 1px solid var(--black);
}
#header.sticky #header-right .menu-button,
#header.no-banner #header-right .menu-button {
	border: 1px solid var(--black);
}
nav .menu .menu-button .icon-bar {
	display: block;
	width: 2.375rem;
	height: 3px;
	will-change: width;
	transition-duration: 0.5s;
	transition-property: opacity, margin, transform;
	opacity: 1;
	position: relative;
	margin: auto;
}
nav .menu .menu-button .icon-bar.middle,
nav .menu .menu-button .icon-bar.bottom {
	margin-top: 5px;
}
nav .menu .menu-button.btn-open .icon-bar.top {
	margin-top: 1px;
	transform: rotate(-45deg);
}
nav .menu .menu-button.btn-open .icon-bar.middle {
	margin-top: -5px;
	opacity: 0;
}
nav .menu .menu-button.btn-open .icon-bar.bottom {
	margin-top: -1px;
	transform: rotate(45deg);
}
nav .menu .menu-button .icon-bar,
nav .menu .menu-button:hover .icon-bar {
	background: var(--blue);
}

@media (hover: none) {
	nav .menu .menu-button:hover .icon-bar {
		background: var(--black);
	}
}

.nav-open nav .menu .menu-button .icon-bar {
	background: var(--black) !important;
}
.menu-button .icon-bar {
	background: var(--black);
}


nav .menu .menu-items {		
	display: none;
	background-color: var(--white-trans);
	/* border: 0.1rem solid var(--black); */
	border-radius: 1rem;
	padding: 1rem;
	padding-bottom: 0;
}
nav .menu .menu-items ul {
	display: flex;
	flex-direction: column;
	align-items: end;
	justify-content: center;
	gap: 1.5rem;
	list-style-type: none;
	padding-left: 0;
}

nav .menu .menu-items ul a {
	color: var(--blue);
	font-family: var(--montserrat);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

nav .menu .menu-items ul a.active {
	font-weight: 900;
	&:hover {
		text-shadow: unset;
	}
}

nav .menu .menu-items ul a:hover {
	text-shadow: var(--blue) 1px 0px 0px;
}
nav .menu .menu-button[aria-expanded="true"] ~ .menu-items {
	display: block;
}
nav.scrolled .logo {
	opacity: 0;
	margin-top: -105px;
}

nav .menu-items div.closer {
	width: 0;
	height: 0;
	/*opacity: 0;*/
	position: absolute;
	right: 3.75rem;
	top: 2rem;
}
nav .menu-items div.closer > button {
	width: 3.75rem;
	height: 3.75rem;
	position: absolute;
	border-radius: 50%;
	z-index: -1;
}

.section:has(> .teasers) {
	padding: 0 0.75rem;
}

main .tipps-tricks .das-kannst-du-tun > div > header > h2,
#header .title h1 {
	color: var(--lblue);
	font-family: var(--montserrat);
	font-size: 3.875rem;
	font-weight: 800;
	text-wrap: balance;
}

#header .text p {
	color: var(--blue);
	font-family: var(--open-sans);
	font-size: 2rem;
	margin-top: 1rem;
}

#header .teasers {
	grid-template-columns: 1fr;
	margin-top: 1rem;
}

#header .teasers h2 {
	font-family: var(--open-sans);
	font-size: 1.5rem;
	hyphens: auto;
}
#header .teasers p {
	font-family: var(--montserrat);
	font-size: 3rem;
	font-weight: 800;
	line-height: 1.2;
	margin-top: 3.2rem;
	text-align: center;
	line-height: 4.5rem;
}

#header .teasers > a p {
	/* max-width: calc(100vw - 16rem); */
}

#header .teasers .teaser {
	position: relative;
	text-decoration: none;
	border-radius: 2rem;
	min-height: 26rem;
	/* margin: 0; */
	padding: 2rem;
	display: block;
	text-wrap: balance;
	overflow: hidden;
}

#header .teasers .teaser img {
	display: block;
	position: absolute;
	right: 1rem;
	bottom: 0;
	height: 20rem;
	width: auto;
}

#header .teasers .teaser .arrow {
	position: absolute;
	left: 0; bottom: 0;
	border-radius: 0 100% 0 2rem;
	height: 7.5rem; width: 7.5rem;
	display: grid; place-content: center;
	font-size: 2.5rem;
	padding: 1.25rem 1.25rem 0 0;
}

#header .teasers .teaser-kids, 
#header .teasers .teaser-youths {
	color: var(--blue);   
}
#header .teasers .teaser-parents, 
#header .teasers .teaser-specialists {
	color: var(--text-white);
}

#header .teasers .teaser-kids {
	background-color: var(--kids-1);
}
#header .teasers .teaser-kids .arrow {
	background-color: var(--kids-2);
}
#header .teasers .teaser-youths {
	background-color: var(--youths-1);	 
}
#header .teasers .teaser-youths .arrow {
	background-color: var(--youths-2);
}
#header .teasers .teaser-parents {
	background-color: var(--parents-1);	 
	
}
#header .teasers .teaser-parents .arrow {
	background-color: var(--parents-2);
}
#header .teasers .teaser-specialists {
	background-color: var(--specialists-1);		 
}
#header .teasers .teaser-specialists .arrow {
	background-color: var(--specialists-2);
}

#header .questions .row h2,
#header .questions .row h3,
#header .questions .row p {
	color: var(--blue);
}

#header .questions .dl {

}
#header .questions .dl h3 {
	color: var(--blue);
	font-family: var(--montserrat);
	font-size: 2rem;
	font-weight: 800;
}
#header .questions .dl p {
	color: var(--blue);
	font-family: var(--open-sans);
	font-size: 1.5rem;
}
#header .questions .dl p:not(:last-of-type) {
	margin-bottom: 4rem;
}

main .testimonials {	
	/* margin-top: 11.875rem; */
	grid-template-columns: 1fr;
	margin-top: 2rem;
}
main .testimonials-title h2 {
	color: var(--blue);
	font-family: var(--montserrat); 
	font-size: 4rem;
	font-weight: 800;
	margin-top: 4.6rem;
	margin-top: 1.5lh;
	text-wrap: balance;
}

main .testimonials .slider-controller {
	background: var(--slider-bg);
	position: relative;
	margin-top: 4rem;
	margin-top: 3lh;
	padding-bottom: 4rem; /* Innenabstand für die Buttons*/
} 

.testimonials .slider-controller .slider-button-prev,
.testimonials .slider-controller .slider-button-next {
	background-color: var(--slider-arrow-bg);
	border: none;
	border-radius: 50%;
	box-shadow: 0 0 0.25rem rgba(9,0,0,0.5);
	outline-offset: 0.4rem; 
	color: var(--blue);
	font-size: 2rem;
	cursor: pointer;
	
	position: absolute;
	bottom: 0%;
	width: 4rem; height: 4rem;
	display: grid; place-content: center;
	padding: 1rem;

	transition: font-size 0.5s ease,  font-weight 0.25s ease;
}
main .testimonials .slider-controller .slider-button-prev:hover,
main .testimonials .slider-controller .slider-button-next:hover {
	font-size: 2.5rem;
	font-weight: bold;
}
main .testimonials .slider-controller .slider-button-prev {
	left: 1rem;
	transform: translate(0%,-25%);
}
main .testimonials .slider-controller .slider-button-next {
	right: 1rem;
	transform: translate(0%,-25%);
}

main .testimonials .testimonial {
}

main .testimonials .testimonial .wrapper {
	display: grid;
	padding: 4rem;
	gap: 2rem;
	align-items: center;
}

main .testimonial .testimonial-person {
	display: grid; place-items: center;
}

main .testimonial .testimonial-person img {
	border-radius: 50%;
	width: 13.5rem;
	height: auto;
}
main .testimonial .testimonial-person p {
	color: var(--blue);
	font-family: var(--montserrat);
	font-size: 1.5rem;
	font-weight: 800;
	margin-top: 1.75rem;	
}
main .testimonial .testimonial-person p span {
	display: block;
	color: var(--blue);
	font-family: var(--open-sans);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
}

main .testimonial .testimonial-comment .testimonial-comment {
	
}

main .testimonial .testimonial-comment .testimonial-comment-title {
	color: var(--blue);
	font-family: var(--montserrat);
	font-size: 2rem;
	font-weight: 800;
	position: relative;
	z-index: 100;
}

main .testimonial .testimonial-comment .testimonial-comment-title::before {
	position: absolute;
	left: -3.25rem; top: -2.0rem;
	content: '„';
	color: var(--blue);
	opacity: 0.13;
	font-family: var(--montserrat);
	font-size: 10rem;
	line-height: 0;
	z-index: -50;
}


main .testimonial .testimonial-person .testimonial-comment-text {
	color: var(--blue);
	font-family: var(--open-sans);
	font-size: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

main .testimonials .wrapper p {
	font-size: 1.3rem;
}

main .anwsers.container {
}

main .anwsers h2 {
	color: var(--blue);
	font-family: var(--montserrat);
	font-size: 3.0rem;
	font-weight: 800;
	margin-top: 1.5rem;
	text-wrap: balance;
}

main .anwsers .form {
	margin-top: 3rem;
	position: relative;
	height: 3.75rem;
	z-index: 0;
}
main .anwsers .form input {
	position: absolute;
	left: 0%;
	top: 0;
	height: 100%;
	background-color: var(--blue);
	border: none;
	border-radius: 2rem;
	outline-offset: 0.2rem;

	color: var(--white);
	font-family: var(--open-sans);
	font-size: 1.5rem;

	padding: 0.5rem 1rem 0.5rem 2rem;
	width: 100%;
}

main .anwsers .form button {
	position: absolute;
	right: 0%;
	top: 50%;
	transform: translate(50%,-50%);

	background-color: var(--yellow);
	border: 1rem solid var(--slider-bg);
	border-radius: 50%;
	outline-offset: 0.2rem;
	width: 6rem;
	height: 6rem;

	font-size: 2rem;
}

main .anwsers.container .search.row {
	margin-bottom: 1.5rem;
}
main .anwsers.container .question {
	margin-top: 1rem;
}
main .anwsers .question-content {
	background-color: var(--yellow);
	border: none;
	display: flex; 
	align-items: center; justify-content: space-between; gap: 1rem;
	min-height: 8rem;
	padding: 2rem 1rem 2rem 2rem;
	color: var(--blue);			
}
main .anwsers .question-content:hover {
	background-color: var(--blue);
	color: var(--yellow);
}
main .anwsers .question-content p {
	font-family: var(--montserrat);
	font-size: 1.75rem;
	font-weight: 800;
	text-align: left;
	margin-top: unset;
	margin-bottom: unset;
}
main .anwsers .question-content > div {
	display: grid;
	margin-left: 0.5rem;
	margin-right: 1rem;
}
main .anwsers .question-content span {
	background: var(--blue);
	outline: 1rem solid var(--slider-bg);
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 50%;
	display: grid; place-content: center;
	font-size: 2rem;
	color: var(--yellow);
}
main .anwsers .question-content:hover span {
	background: var(--blue);
	border: 0.2rem solid var(--white);
	border-color: var(--white);
	outline-color: var(--blue);
	display: grid; place-content: center;
}
main .anwsers .question-content span.hover {
	display: none;
}  
main .anwsers .question-content:hover span.default {
	display: none;
}		  
main .anwsers .question-content:hover span.hover {
	display: grid;
}

main .tipps-tricks {
	margin-top: 3.75rem;
}
main .tipps-tricks .tipp header > h2 {
	color: var(--blue);
	font-family: var(--montserrat);
	font-size: 2rem;
	font-weight: 800;
}
main .tipps-tricks p {
	color: var(--blue);
	font-family: var(--open-sans);
	font-size: 1.25rem;
	margin-top: 2.5rem;
}

main .tipps-tricks .tipps {
	grid-template-columns: 1fr;
	gap: 2rem;
	hyphens: auto;
}

main .tipps-tricks .row > .tipp {
	padding-left: unset;
	padding-right: unset;
}

main .tipps-tricks .tipp > div {
	background-color: var(--slider-bg);
	border-radius: 2rem;
	padding: 2rem;
	height: 100%
}
main .tipps-tricks .tipp > div h3 {
	color: var(--blue);
	font-family: var(--montserrat);
	font-size: 2rem;
	font-weight: 800;
}

main .tipps-tricks .tipp > div li,
main .tipps-tricks .tipp > div p {
	color: var(--blue);
	font-family: var(--open-sans);
	font-size: 1.5rem;
}

main .tipps-tricks .tipp > div ol,
main .tipps-tricks .tipp > div ul,
main .tipps-tricks .tipp > div p {
	margin-top: 2rem;
}

main .tipp .ce-gallery img {
	width: 100%;
	object-fit: contain;
	height: 100%;
	margin-top: 5%;
}

#c40 {
	margin-left: -10px;
	margin-right: -10px;
}
	

footer {
	color: var(--text-white);
	box-sizing: border-box;
	margin-top: 6rem;
}
footer .footer-top,
footer .footer-informations,
footer .footer-rights {
	background-color: var(--footer-bg); 
}

footer .logo-kipsfam-vg {
	display: block;
	width: auto;
	height: 5rem;
}

footer .logo-mv {
	display: block;
	width: auto;
	height: 2.5rem;
}

footer .logo-co-funded-by-eu {
	display: block;
	width: auto;
	height: 3rem;
}

footer h3 {
	font-family: var(--montserrat);
	font-weight: 800;
	color: var(--yellow);
	margin-top: 1rem;
}

footer .footer-informations .d-grid {
	grid-template-columns: 1fr;
	gap: 1rem;
}
footer .footer-informations .footer-informations-content {
	gap: 1rem;
	flex-direction: column;
}

footer .footer-informations .footer-informations-content h3,
footer .footer-informations .footer-informations-content a img,
footer .footer-informations .footer-informations-content p,
footer .footer-informations .footer-informations-content img {
	display: block;
	padding-left: 1rem;
	padding-right: 1rem;
}

footer .footer-informations .footer-informations-supporters a {
	padding-left: 1rem;
	padding-right: 1rem;
}

footer .footer-informations .footer-informations-contact p:not(:first-of-type) {
	margin-top: 2.5rem;
}
footer .footer-informations .footer-informations-contact p:first-of-type {
	margin-top: 2rem;
}

footer .footer-informations .footer-informations-supporters {

}

footer .footer-informations a {
	color: color: var(--white);
}

footer .logos {
	display: flex;
	flex-direction: row;

	row-gap: 3rem;
	list-style-type: none;
	padding-left: 0;
	padding-top: 0.5rem;
	margin-top: 2rem;
}

footer .footer-rights {
	border-top: 1px solid var(--footer-bg);
	padding-bottom: 2rem;
}
footer .footer-rights .d-flex {
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

footer .footer-rights .links {   
	display: flex; align-items: center; gap: 1.5rem;
	list-style-type: none;
	padding: 0;
}   

footer .footer-rights .links a {   
	font-size: 1.25rem;
	line-height: 1;
	color: var(--text-white);
	text-decoration: none;
}   

footer .footer-rights img.logo-jpi {
	display: block;
}

	

.footer .footer-top {
	/* background: url("../images/bg-footer.png") top center; */
	/* background: url("../images/bg-footer-top.svg") top center; */
	/* background: url("../images/bg-footer-top2.svg") top right no-repeat; */
	background: url("../images/bg-footer-top.svg") top right no-repeat;
	background-size: 100%;
	height: 200px;
}

.footer .footer-top .container {
	position: relative;
	height: 100%;
}

footer .footer-top a {
	position: absolute;
	left: 50%; bottom: 25%;
	transform: translateX(-50%);
	
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;		
}

footer .footer-top a span.text {
	color: var(--text-white);
	font-size: 1.25rem;
}

footer .footer-top a span.symbol {
	background-color: var(--top-bg);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.875rem;
	aspect-ratio: 1 / 1;
	color: var(--blue);
	font-size: 2rem;
}

.impressum-datenschutz {
	h1 {
		margin-bottom: 1.8rem;
		margin-bottom: 0.5lh;
	}
	p, ol, li {
		font-size: 1.5rem;
	}
}

.support {
	display: none;

	background-image: url("../images/bg-bubble.svg");
	background-position: right top;
	width: 400px;
	height: 700px;

	position: fixed;
	right: 0;
	top: 15rem;

	color: var(--text-white);
	z-index: 5;
}
.support .support-content {
	position: relative;

	padding-left: 3.5rem;
	padding-right: 1rem;
	padding-top: 8rem;
}


.support h3 {
	color: var(--yellow);		
	font-family: var(--montserrat);
	font-size: 1.5rem;
	font-weight: 800;
}

.support .contact {
	display: flex; 
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
}

.support .name, .support .phone {
	display: block;
}
.support .name {
	font-family: var(--montserrat);
	font-size: 1.25rem;
	font-weight: 800;
}

.support .phone {
	font-family: var(--open-sans);
	font-size: 1.25rem;
}

.support .support-close {
	position: absolute;
	left: 2.75rem; top: 2.75rem;

	display: grid; place-content: center;

	background-color: var(--cta-close-bg);
	border: none;
	border-radius: 50%;
	outline-offset: 0.2rem;
	color: var(--white);
	font-size: 4rem;
	font-weight: 100;
	width: 4rem; height: 4rem;

}

.support-open {
	display: block;
	outline-offset: 0.2rem;
	position: fixed;
	top: 18rem;
	right: 2rem;
	height: 4rem;
	width: 4rem;

	border: 0; background: transparent;

	filter: drop-shadow(0 0 0.5rem rgba(0,0,0,0.5));
	animation: filter 0.5s ease;
	z-index: 1;
}

#support-icon:hover {
	filter: drop-shadow(0 0 0.75rem rgba(0,0,0,0.75));
}

.modal-backdrop {
	background-color: var(--slider-bg) !important; /* Ändert den Hintergrund auf Gelb */
	opacity: 0.9 !important; /* Optional: Transparenz anpassen */
}

.modal {

}
.modal-header {
	margin-top: 2rem;
	padding-bottom: 2rem;
	align-items: center;
	gap: 2rem;
}

.modal-header h2  {
	color: var(--blue);
	font-family: var(--montserrat);
	font-size: 1.5rem !important;
	font-weight: 800;
	margin-left: 2rem;
}
.modal-header button.btn-close {
	border: 0.1rem solid var(--black);
	border-radius: 50%;
	margin-right: 2rem;
	min-width: 1rem;
	min-height: 1rem;
	max-width: 1rem;
	max-height: 1rem;
}

.modal-body {
	padding: 2rem;
}
.modal-body h2 {
	color: var(--blue);
	font-family: var(--open-sans);
	font-size: 1.5rem;
	margin-top: 2rem;
}
.modal-body p {
	color: var(--blue);
	font-family: var(--open-sans);
	font-size: 1.25rem;
}

.modal-body .d-grid {
	gap: 1.5rem;
	margin-top: 2rem;
}

.modal-body .d-grid .option {
	background-color: var(--yellow);
	border-radius: 1rem;
	padding: 1rem 1.5rem;
	display: flex; align-items: center;
	box-sizing: border-box;
}


.space-before-extra-small {
	margin-top: -7.5em;
}

.space-after-extra-large {
	padding-bottom: 11.5rem;
}

.space-before-extra-large {
	margin-top: 11.5rem;
}

.frame-space-after-extra-large {
	padding-bottom: 11.5rem !important;
}

.frame-space-before-extra-large {
	margin-top: 11.5rem !important;
}

.search.row > div {
	max-width: 500px;
}

.search.row input::placeholder {
	opacity: 1;
	color: var(--white);
}

aside #support > div {
	margin-left: 2rem;
}

.pageimage {
	position: absolute;
	right: 0;
	top: 0;
	opacity: 0.8;
	z-index: -1;
}


@media screen and (min-width: 480px) {
	html {
		font-size: 14px;
	}

	footer .footer-rights .d-flex {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	
	aside #support > div {
		margin-left: unset;
	}
}

		
@media screen and (min-width: 576px) {
	html {
		font-size: 16px;
	}
	nav {
		margin-top: 1rem;
	}
	#header {
		margin-top: 5rem;
	}
	main {
		margin-top: 4rem;
	}
	footer {
		margin-top: 1rem;
	}

	nav .menu {
	   right: 0rem;
	}

	#header {
		padding: 0.6rem;
	}

	#header .teasers {
		/* grid-template-columns: 1fr; */
		gap: 2rem;
	}
	
	main .tipps-tricks .das-kannst-du-tun > div > header > h2,
	#header .title h1 {
		color: var(--lblue);
		font-family: var(--montserrat);
		font-weight: 800;
	}

	#header .text p {
		color: var(--blue);
		font-family: var(--open-sans);
		/* font-size: 2rem; */
		margin-bottom: 2.5rem;
	}
	#header .teasers .teaser img {
		height: 13rem;
	}
	#header .teasers > a p {
		max-width: unset;
	}
	main .testimonials .slider-controller {
		border-radius: 2rem;
	}

	footer .footer-informations .footer-informations-contact {
		grid-column: 1 / 2 ;
	}
	footer .footer-informations .footer-informations-supporters {
		grid-column: 2 / 3 ;
	}

	footer .footer-informations .footer-informations-content {
		flex-direction: row;
	}	

	footer .footer-top a {
		left: 100%;
		transform: translateX(-100%);   
	}

	
	footer .logos {
		flex-direction: column;
		row-gap: 4rem;
	}
} 


@media screen and (min-width: 990px) {
	#header .teasers .teaser img {
		height: 10rem;
	}
} 

@media screen and (max-width: 1920px) {
	main .testimonials-title h2 {
		font-size: 3.6rem;
		margin-top: 3.8rem;
		margin-top: 1lh;
	}
}

@media screen and (max-width: 1800px) {
	#header .teasers p {
		font-size: 2.7rem;
	}
}

@media screen and (max-width: 1700px) {
	#header .teasers p {
		font-size: 2.3rem;
	}
}

@media screen and (max-width: 1600px) {
	main .testimonials-title h2 {
		font-size: 3rem;
	}
}

@media screen and (max-width: 1440px) {
	#header .teasers .teaser {
		min-height: 22rem;
	}
	
	#header .teasers p {
		font-size: 1.9rem;
		line-height: 3.2rem;
	}
}

@media screen and (max-width: 1200px) {
	#header .teasers p {
		font-size: 3rem;
		line-height: 5.5rem;
	}
	
	#header .teasers .teaser {
		min-height: 29rem;
	}
	
	.menu-mobile-open {
		width: 100% !important;
		position: fixed !important;
		top: 0 !important;
		bottom: 0;
		background: #f6f6ed;
	}
	
	
	nav .menu {
		width: clamp(18rem, 45vw, 25rem);
		
		
		.menu-items {
			width: 100%;
			background-color: #f6f6ed;
			ul {
				width: 100%;
				padding-top: 1rem;
			}
			li {
				width: 100%;
				border-bottom: 3px solid #f9eb18;
				padding-bottom: 1rem;
				text-align: center;
			}
			li:last-child {
				border-bottom: none;
			}
				
		}
	}
	
}

@media screen and (max-width: 991px) {
	main .tipps-tricks .das-kannst-du-tun > div > header > h2,
	h1 {
		font-size: 3.375rem;
	}
	main .anwsers.container {
		max-width: unset;
		margin-left: 0;
		margin-right: 0;
	}
	main .anwsers.container .question {
		margin-top: 0.5rem;
	}
	
	main .anwsers .question-content {
		padding: 1rem 1.5rem 1rem 1.5rem;
	}
	
	#header .teasers p {
		font-size: 2.8rem;
		line-height: 4.5rem;
	}
	
	main .testimonials-title h2 {
		font-size: 3.5rem;
	}
}

@media screen and (max-width: 820px) {
	#header .teasers .teaser {
		min-height: 24rem;
	}
	
	#header .teasers p {
		font-size: 2.5rem;
		line-height: 4rem;
	}
}

@media screen and (max-width: 768px) {
	main .tipps-tricks .das-kannst-du-tun > div > header > h2,
	h1 {
		font-size: 2.5rem;
	}
	main .anwsers.container .question button p {
		font-size: 1.65rem;
		font-weight: 700;
		line-height: 2.5rem;
	}
	
	#header .teasers .teaser {
		min-height: 22rem;
	}
	
	#header .title h1 {
		font-size: 3.3rem;
	}
	
	main .testimonials-title h2 {
		font-size: 2.9rem;
	}
	
	main .testimonials .slider-controller {
		margin-top: 2lh;
	}
	
	.support-open {
		top: 25rem;
	}
}
		
@media screen and (max-width: 576px) {
	.footer .footer-top {
		background-size: 1920px auto;
	}
	main .tipps-tricks .das-kannst-du-tun > div > header > h2,
	h1 {
		font-size: 2.55rem;
	}
	main .anwsers.container .question button p {
		font-size: 1.5rem;
		font-weight: 600;
		line-height: 2.25rem;
	}
	
	main .testimonials .wrapper p {
		font-size: 1.4rem;
	}
	
	#header .teasers .teaser {
		margin-left: 1rem;
		margin-right: 1rem;
	}
}

@media screen and (max-width: 410px) {
	main .tipps-tricks .das-kannst-du-tun > div > header > h2,
	h1 {
		font-size: 2.3rem;
	}
	
	#header .title h1 {
		font-size: 2.8rem;
	}
	
	main .testimonials-title h2 {
		font-size: 2.5rem;
	}
	
}

@media screen and (min-width: 768px) {
	
	nav {
		margin-top: 1rem;
	}
	#header {
		margin-top: 6rem;
	}
	main {
		margin-top: 4rem;
	}
	footer {
		margin-top: 1rem;
	}

	#header .teasers {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}

	footer .footer-informations .d-grid {
		grid-template-columns: 1fr 3fr;
	}
		main .tipps-tricks .tipp > div {
			padding: 3rem
		}
		main .tipps-tricks .tipp > div ol,
		main .tipps-tricks .tipp > div ul,
		main .tipps-tricks .tipp > div p {
			margin-top: 2.5rem;
		}
}

@media screen and (min-width: 992px) {

		
	nav {
		margin-top: 4rem;
	}
	#header {
		margin-top: 9rem;
	}
	main {
		margin-top: 4rem;
	}
	footer {
		margin-top: 4rem;
	}

	nav menu {
		padding-top: 0 !important;
	}
	
	main {
		margin-top: 5.5rem !important;
	}
	
	main .testimonials .slider-controller {
		padding-bottom: 0rem;
	}
	
	
	main .testimonials .slider-controller .slider-button-prev {
		left: 0rem;
		bottom: 50%;
		transform: translate(-50%,50%);
	}
	main .testimonials .slider-controller .slider-button-next {
		right: 0rem;
		bottom: 50%;
		transform: translate(50%,50%);
	}

	main .testimonials .testimonial .wrapper {
		display: grid;
		grid-template-columns: 1fr 3fr;
		padding: 4rem;
		gap: 8rem;
	}

	main .testimonial .testimonial-comment .testimonial-comment-title::before {
		position: absolute;
		left: -4.5rem; top: -2.5rem;
		content: '„';
		color: var(--blue);
		opacity: 0.13;
		font-family: var(--montserrat);
		font-size: 12rem;
		line-height: 0;
		z-index: -50;
	}

	main .tipps-tricks .tipps {
		gap: 3rem;
	}

	footer .logos {
		flex-direction: row;
		gap: 2rem;
	}
	
	.space-before-extra-small {
		margin-top: -4.5em;
	}
	
	.search.row {
		margin-bottom: 2rem;
	}

	main .tipps-tricks .tipps {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 576px) and (max-width: 768px) {
	#header .teaser {
		min-height: unset;
	}
	
	main #header .teasers > a p {
		font-size: 3rem;
		line-height: 4.5rem;
	}
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
	main #header .teasers > a {
		height: 30rem;
	}
}

@media screen and (min-width: 1200px) {
	.container {
		max-width: 1200px;
	}

	nav .menu {
		flex-direction: row;
	}

	nav .menu .menu-items {
		order: -1;
		background-color: transparent;
		border-color: transparent;
		
	}

	nav .menu .menu-items ul {
		flex-direction: row;
		gap: 1.2rem; 
	}
	
	/*nav.scrolled .menu .menu-items {
		background-color: var(--white-trans);
		border-color: #ccc;
	}*/
	
	nav .menu .menu-items {
		background-color: var(--white-trans);
		border-color: #ccc;
	}

	#header .teasers {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.testimonials .testimonial .wrapper {
		gap: 6rem;
	}

	footer {
		background-color: transparent;
	}  

	.footer .footer-top a {
		bottom: 25%;
	}

	.modal-header {
		margin-top: 4rem;
	}

	.modal-header h1.modal-title  {
		margin-left: 4rem;
	}
	.modal-header button.btn-close  {
		margin-right: 4rem;
	}

	.modal .modal-body {
		padding: 4rem;
	}

	.modal .modal-body .d-grid {
		grid-template-columns: 1fr 1fr 1fr;
		justify-content: space-between;
		gap: 4rem;
	}
	.modal .modal-body .d-grid .option {
		padding: 3rem 2rem;
	}
	
}

@media screen and (min-width: 1440px) {
	.container {
		max-width: 1200px;
	}

	.modal-dialog {
		max-width: 900px;
	}
}

@media screen and (min-width: 1600px) {
	.container {
		max-width: 1440px;
	}

	nav .menu .menu-items ul {
		gap: 2.5rem; 
	}

	.modal-dialog {
		max-width: 1200px;
	}
}

@media screen and (min-width: 1920px) {
	.container {
		max-width: 1600px;
	}

	.modal-dialog {
		max-width: 1440 px;
	}
}

@media screen and (max-height: 660px) {
	aside #support {
		top: unset;
		bottom: -17rem;
	}
}