/* Start custom CSS */

:root {
	color-scheme: only dark;
}

body {
	overflow-x: hidden;
	background: linear-gradient(
	90deg,
	var(--e-global-color-primary) 15%,
	var(--e-global-color-3f12784) 90%
	);
}

.ml-3 {
	margin-left: 1rem;
}

/* Start container */

.e-con:not(.main-nav-bar) {
	--content-width: min(92%, var(--container-max-width, 1140px)) !important;
}

@media (max-width: 993px) {
	.e-con-inner:has(> .main-nav-bar-wrapper) {
	margin: 0 !important;
	max-width: 100vw !important;
	width: 100vw !important;
	}

	nav.main-nav-bar {
	padding-inline: 1rem !important;
	left: 0 !important;
	width: 100svw !important;
	}
}

.e-con,
.e-con-inner {
	padding: 0 !important;
}

.e-con-inner .e-con > .e-con-inner:not(:has(> .main-nav)) {
	margin: 0 !important;
}

section > .e-con-inner {
	padding-inline: 0 !important;
}

.section {
	padding: min(6rem, 10svmin) 0 !important;
}

.section:first-of-type {
	padding-top: 0 !important;
}

/* End container */

/* main nav */

.elementor-menu-toggle .e-font-icon-svg {
	fill: var(--e-global-color-11ca58e) !important;
}

.main-nav-section > .e-con-inner {
	padding: 0 !important;
}

.main-nav-bar {
	padding-block: 0.8em !important;
	padding-inline: 1rem !important;
	color: hsl(0, 0%, 88%) !important;
	animation: nav-bar-bg linear forwards;
	animation-timeline: view();
	animation-duration: 1ms;
	animation-range-start: exit -23px;
	animation-range-end: exit;
}

@supports not (animation-timeline: view()) {
	.top-spacer {
	display: none;
	}
}

@keyframes nav-bar-bg {
	2% {
	background: linear-gradient(
		209deg,
		hsl(0 0% 9% / 0.2),
		hsl(0 0% 12% / 0.2)
	);
	}

	4% {
	background: linear-gradient(
		209deg,
		hsl(0 0% 9% / 0.4),
		hsl(0 0% 12% / 0.4)
	);
	}

	6% {
	background: linear-gradient(
		209deg,
		hsl(0 0% 9% / 0.6),
		hsl(0 0% 12% / 0.6)
	);
	}

	8% {
	background: linear-gradient(
		209deg,
		hsl(0 0% 9% / 0.8),
		hsl(0 0% 12% / 0.8)
	);
	}

	10%,
	100% {
	background: linear-gradient(209deg, hsl(0 0% 9% / 1), hsl(0 0% 12% / 1));
	}
}

@keyframes nav-logo-visibility {
	2% {
	opacity: 0.1;
	}

	4% {
	opacity: 0.2;
	}

	6% {
	opacity: 0.3;
	}

	8% {
	opacity: 0.5;
	}

	10%,
	100% {
	opacity: 1;
	}
}

.main-nav_logo {
	position: absolute;
	opacity: 0;
	animation: nav-logo-visibility linear forwards;
	animation-timeline: view();
	animation-duration: 1ms;
	animation-range-start: exit -23px;
	animation-range-end: exit;
}

.main-nav_logo a::after {
	content: "Frau Schimpf";
	position: absolute;
	max-width: min-content;
	right: 0;
	top: 50%;
	translate: 100% -36%;
	text-align: start;
	padding-left: 0.3em;
	line-height: 1.1;
	font-weight: 500;
}

@media (max-width: 992px) {
	.main-nav_logo {
	translate: -200%;
	transform: scale(0.75);
	}
}

@media (max-width: 1549px) {
	.main-nav_logo {
	left: 53%;
	}
}

@media (min-width: 1550px) {
	.main-nav_logo {
	left: 1rem;
	}
}

.main-nav ul {
	gap: 2em;
}

.main-nav .elementor-item:after {
	background-color: var(--e-global-color-11ca58e) !important;
}

.main-nav .elementor-item:where(:hover, :focus-visible):after {
	background-color: #d1d1d1 !important;
}

.nav-socials a:where(:hover, :focus-visible) {
	font-size: 1.3rem !important;
	scale: 1.1;
}

.nav-socials svg {
	transition: fill 300ms ease;
}

.nav-socials a:focus-visible svg {
	fill: var(
	--e-global-color-secondary
	) !important; /* this custom property is set by me in the global colors of Elementor but the name is defined automatically by Elementor */
}

/* End main nav */

/* Hero */

.e-con-inner:has(> .hero-logo) {
	margin-left: 0 !important;
}

.hero-wrapper > div {
	gap: 0.8em !important;
}

.hero-logo img {
	width: auto !important;
	height: calc(var(--e-global-typography-primary-line-height) * 2.4) !important;
}

/* End Hero */

.elementor-widget-text-editor > * {
	min-width: 30ch;
	max-width: 60ch;
}

a:not(.cta-link, nav a) {
	color: inherit;
	text-decoration-line: underline !important;
	text-underline-offset: 0.1em;
	text-decoration-thickness: 1px;
	text-decoration-skip-ink: auto;
	text-decoration-color: var(--e-global-color-secondary);
	transition: all 200ms ease, opacity 300ms ease-in-out;
}

a:not(.cta-link, nav a):where(:hover, :focus-visible) {
	color: hsl(0, 0%, 100%) !important;
	text-decoration-line: underline !important;
	text-underline-offset: 0.4em;
	text-decoration-thickness: auto;
	text-decoration-skip-ink: none;
	text-decoration-style: solid;
	text-decoration-color: var(--e-global-color-accent) !important;
}

h2 {
	padding: 3rem 0 1rem 0 !important;
}

.logo-img {
	margin-right: 1rem;
}

.cta-link {
	box-shadow: inset 0px -0.6em var(--e-global-color-accent) !important;
	display: block;
	max-width: fit-content;
	padding-inline: 0.5em;
	margin-block: 1em;
	font-weight: 500 !important;
}

.cta-link:hover i {
	--fa-animation-duration: 2s;
	--fa-animation-iteration-count: infinite;
	animation: var(--fa-animation-duration) var(--fa-animation-iteration-count)
	fa-bounce;
	animation-delay: 200ms;
	animation-direction: revert;
}

.cta-link:not([href="#section-kunst"]) i {
	rotate: -90deg;
}

.fa-xs {
	vertical-align: inherit !important;
}

/* Start of button styles */

@property --box-shadow-offset {
	syntax: "<length>";
	inherits: true;
	initial-value: 3px;
}

@property --box-shadow-color {
	syntax: "<color>";
	inherits: true;
	initial-value: hsla(0, 0%, 100%, 0.8);
}

button {
	--active-transition: 100ms;
	margin: 0 !important;
	padding: 0.5em 1em !important;
	max-width: fit-content !important;
	text-shadow: none !important;
	box-shadow: var(--box-shadow-offset) var(--box-shadow-offset) 0px
	var(--box-shadow-color) !important;
	transition: color 200ms ease, box-shadow var(--active-transition) ease,
	transform var(--active-transition) ease, background-color 200ms ease;
}

button:focus {
	color: inherit !important;
	background-color: var(--e-global-color-accent) !important;
}

button:active {
	transform: translate(var(--box-shadow-offset), var(--box-shadow-offset));
	box-shadow: none !important;
	color: white !important;
}

button:where(:hover, :focus-visible, :focus) {
	color: white !important;
	background-color: var(--e-global-color-accent) !important;
	box-shadow: var(--box-shadow-offset) var(--box-shadow-offset) 0px
	hsla(0, 0%, 100%, 1) !important;
}

/* End of button styles */

/* Contact form */

.contact-form {
	max-width: 60ch !important;
}

.contact-text-form-wrapper {
	--column-gap: 6rem !important;
}

.contact-form :where(:where(input, textarea):focus-visible) {
	border-color: white !important;
}

.contact-form .elementor-message {
	padding: 0.3em 0.6em;
	border-radius: 0.3em;
	color: white;
}

.contact-form .elementor-message {
	padding: 0.3em 0.8em;
	border-radius: 0.3em;
}

.contact-form .elementor-message-danger {
	background-color: var(--e-global-color-accent);
}

.contact-form .elementor-message-success {
	background-color: var(
	--e-global-color-0eb8ac4
	); /* that is a green color. It's set up in the global colors of Elementor. The custom property name is given by Elementor. */
}

.contact-form .elementor-message:before {
	display: none;
}

.contact-form:has(:where(input, textarea):where(:blank, :invalid))
	.elementor-field-group-recaptcha {
	display: none;
}

/* End contact form */

/* Start visuals squares */

.visuals-squares {
	z-index: -1;
	width: min-content;
	--widthBlackSquare: 400px;
	right: 0;
}

@supports (animation-timeline: view()) {
	#hero-logo-red-left {
	--top-parallax: calc(var(--top) * 2);
	animation: parallax-effect linear 1ms forwards;
	animation-timeline: view();
	animation-range: contain;
	}

	#hero-logo-red-right {
	--top-parallax: calc(var(--top) - 100px);
	animation: parallax-effect linear 1ms forwards;
	animation-timeline: view();
	animation-range: contain;
	}

	@keyframes parallax-effect {
	to {
		top: var(--top-parallax);
	}
	}
}

/* End visuals squares */

/* Start Dr. Plano website plugin */

#drp-booking {
	padding: 0 !important;
}

.drp-search-field-container {
	margin-bottom: 5rem !important;
}

#drp-booking :where(h1, h2, h3, h4, h5, h6) {
	text-align: start !important;
}

#drp-booking form {
	display: flex;
	flex-direction: column;
	row-gap: 0.5rem;
}

.drp-booking-overview form {
	gap: 1.5rem;
}

.drp-course-list-group:first-of-type .drp-course-list-title {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.drp-card {
	flex-direction: column !important;
}

.drp-course-dates {
	width: min(400px, 100%);
}

.drp-course-list-item {
	max-width: none !important;
	height: auto !important;
	min-width: min(350px, 100%);
}

.drp-course-list-item-image-container {
	/* height: 400px !important; */

	padding: 0 !important;
	width: 100% !important;
	aspect-ratio: 1/1.25;
}

@media (hover: hover) {
	.drp-course-list-item-image-container::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: hsl(0deg 0% 0% / 7%);
	mix-blend-mode: luminosity;
	transition: background-color 200ms ease;
	}

	.drp-card:hover .drp-course-list-item-image-container::after {
	background-color: hsl(0deg 0% 0% / 0%);
	}
}

.drp-course-list-item-label {
	height: auto !important;
	background: hsl(0deg 0% 100% / 15%);
	padding-block: 1.5rem;
	align-items: flex-start;
}

.drp-booking-main-container .drp-course-list-item-label > :where(.drp-course-list-title, .drp-course-list-subtitle).drp-text-sm-center {
	margin-bottom: 0 !important;
	text-align: start !important;
}

.drp-course-list-item-image {
	background-position: bottom;
	background-size: contain;
}

.drp-course-list-item-id-549213849 .drp-course-list-item-image {
	background-image: url(https://frau-schimpf.de/wp-content/uploads/studienhefte.avif) !important;
}

.drp-course-list-item-id--1 .drp-course-list-item-image {
	background-image: url(https://frau-schimpf.de/wp-content/uploads/Gutschein.avif) !important;
}

.drp-course-list-item-id-554957373 .drp-course-list-item-image {
	background-image: url(https://frau-schimpf.de/wp-content/uploads/FoBi-Slides3.avif) !important;
}

.drp-course-list-item-id-568979108 .drp-course-list-item-image {
	background-image: url(https://frau-schimpf.de/wp-content/uploads/FoBi-Slides_Mal.avif) !important;
}

.drp-course-list-item-id-568977852 .drp-course-list-item-image {
	background-image: url(https://frau-schimpf.de/wp-content/uploads/FoBi-Slides_Plastik.avif) !important;
}

.drp-course-list-item-id-631411263 .drp-course-list-item-image {
	background-image: url(https://frau-schimpf.de/wp-content/uploads/studienhefte_doppelpack.avif) !important;
}

.drp-course-list-item-id-637166094 .drp-course-list-item-image {
	background-image: url(https://frau-schimpf.de/wp-content/uploads/FoBi_Studienhefte_Grundschule.avif) !important;
}

.drp-separator {
	border-bottom-color: hsl(0deg 0% 100% / 60%);
}

.drp-booking-agreements label {
	line-height: inherit;
}

.drp-closable-card {
	background-color: hsl(0, 0%, 100%);
	color: #a96425;
}

.drp-course-booking-participant-item {
	row-gap: 0.7em;
}

#drp-booking label:not(:has(> :where([type="radio"], [type="checkbox"]))) {
	display: flex;
	flex-direction: column;
	row-gap: 0.5em;
}

/* End Dr. Plano website plugin */

/* End Custom CSS */