/* PREISE PAGE STYLES */

.preise {
	background-color: var(--color-neutral-50);
}

.preise__container {
	max-width: 72rem;
	margin: 0 auto;
	padding: var(--spacing-6);
}

@media (min-width: 640px) {
	.preise__container {
		padding: var(--spacing-6);
	}
}

@media (min-width: 768px) {
	.preise__container {
		padding: var(--spacing-8);
	}
}

@media (min-width: 1024px) {
	.preise__container {
		padding: var(--spacing-12);
	}
}

@media (min-width: 1280px) {
	.preise__container {
		padding: var(--spacing-12);
	}
}

/* Hero Section */
.preise__hero--with-image {
	background-image: url('/images/preise/PreiseHero-480w.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 250px;
	position: relative;
	padding: var(--spacing-8) 0;
}

@media (min-width: 768px) {
	.preise__hero--with-image {
		background-image: url('/images/preise/PreiseHero-768w.webp');
	}
}

@media (min-width: 1024px) {
	.preise__hero--with-image {
		background-image: url('/images/preise/PreiseHero-1200w.webp');
	}
}

.preise__hero-overlay {
	background-color: var(--color-primary-500-overlay);
	padding: var(--spacing-8) 0;
	min-height: inherit;
	display: flex;
	align-items: center;
}

.preise__hero--with-image .component-headline__tagline,
.preise__hero--with-image .component-headline__heading {
	color: var(--color-neutral-white);
}

.preise__hero--with-image .component-headline__divider-svg {
	fill: var(--color-neutral-white);
}

@media (min-width: 768px) {
	.preise__hero--with-image {
		min-height: 350px;
		padding: var(--spacing-12) 0;
	}

	.preise__hero-overlay {
		padding: var(--spacing-12) 0;
	}
}

@media (min-width: 1024px) {
	.preise__hero--with-image {
		min-height: 400px;
		padding: var(--spacing-16) 0;
	}

	.preise__hero-overlay {
		padding: var(--spacing-16) 0;
	}
}

/* Pricing Cards Section */
.preise__cards-section {
	padding-top: 16px;
	padding-bottom: var(--spacing-6);
	background-color: transparent;
}

@media (min-width: 768px) {
	.preise__cards-section {
		padding-top: 20px;
		padding-bottom: var(--spacing-8);
	}
}

@media (min-width: 1024px) {
	.preise__cards-section {
		padding-top: 24px;
		padding-bottom: var(--spacing-10);
	}
}

/* PricingCtaSection Overrides */
.preise__cards-section .pricing-cta-section {
	background-color: transparent;
	padding: 0;
	width: 100%;
}

.preise__cards-section .pricing-cta-section__headline {
	display: none;
}

.preise__cards-section .pricing-cta-section__decorative-right {
	display: none;
}

.preise__cards-section .pricing-cta-section__card {
	border: var(--border-width-medium) solid var(--color-neutral-200);
	border-bottom: var(--border-width-thick) solid var(--color-primary-500);
}

.preise__cards-section .pricing-cta-section__card:hover {
	border-bottom-color: var(--color-primary-700);
}

/* Service Explanation Section */
.preise__service-explanation {
    padding-top: 48px;
    padding-bottom: 8px;
}

@media (min-width: 640px) {
    .preise__service-explanation {
        padding-top: 56px;
        padding-bottom: 12px;
    }
}

@media (min-width: 1024px) {
    .preise__service-explanation {
        padding-top: 64px;
        padding-bottom: 16px;
    }
}

.preise__service-explanation-heading {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-primary-500);
    text-align: center;
    margin-bottom: 24px;
}

@media (min-width: 1024px) {
    .preise__service-explanation-heading {
        font-size: 32px;
    }
}

.preise__service-explanation-content {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.75;
    color: var(--color-neutral-700);
    margin: 0 0 16px;
    text-align: justify;
}