/* ==========================================================================
   Websmarty – Startseite
   ========================================================================== */

/* Hero -------------------------------------------------------------------- */

.home-hero {
	padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
}

.home-hero__grid {
	display: grid;
	gap: var(--s-12);
	align-items: center;
}

.home-hero__copy {
	display: grid;
	gap: var(--s-6);
}

.home-hero__title {
	/* Höchstens zwei Zeilen auf dem Desktop: Größe auf die Spaltenbreite abgestimmt */
	font-size: clamp(2.375rem, 1.5rem + 3vw, 4rem);
}

.home-hero__media > * {
	animation-delay: 220ms;
}

@media (min-width: 64em) {
	.home-hero__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		gap: var(--s-12);
	}
}

/* Partner-Zeile ------------------------------------------------------------ */

/* Partner-Zeile im Hero: unter den Buttons, durch eine feine Linie abgesetzt */
/* Offizielles Shopify-Partner-Logo direkt unter der Einleitung, gut sichtbar */
.home-hero .partner-line {
	justify-self: start;
	margin-top: calc(var(--s-1) * -1);
}

.home-hero .partner-line__logos img {
	height: 2.25rem;
}

/* Hauptleistungen (asymmetrisches Raster) --------------------------------- */

.home-services__bento {
	display: grid;
	gap: var(--s-4);
}

@media (min-width: 60em) {
	.home-services__bento {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		grid-template-rows: auto auto;
	}

	.home-services__item--main {
		grid-row: span 2;
	}
}

.home-teaser {
	padding: 0;
	gap: 0;
	overflow: hidden;
}

.home-teaser__media .media-slot {
	border-radius: 0;
	border-width: 0 0 1px;
}

.home-teaser__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--s-4);
	padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}

.home-services__item--main .home-teaser__title {
	font-size: var(--fs-h3);
}

.home-services__item:not(.home-services__item--main) .home-teaser {
	background:
		radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--c-accent) 6%, transparent), transparent 70%),
		var(--c-surface);
}

.home-teaser__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

/* Vorteile ---------------------------------------------------------------- */

.home-benefits__grid {
	display: grid;
	gap: var(--s-12);
}

.home-benefits__aside {
	display: grid;
	align-content: start;
	gap: var(--s-5);
}

.home-benefits__portrait {
	max-width: 24rem;
	margin-top: var(--s-4);
}

.home-benefits__portrait figcaption {
	margin-top: var(--s-3);
}

@media (min-width: 64em) {
	.home-benefits__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: var(--s-16);
		align-items: start;
	}

	.home-benefits__aside {
		position: sticky;
		top: calc(var(--header-h) + var(--header-gap) * 2 + var(--admin-bar, 0px) + 1rem);
	}
}

.home-benefits__more {
	margin-top: var(--s-8);
}

/* Zahlen ------------------------------------------------------------------ */

.home-numbers__grid {
	display: grid;
	gap: var(--s-10);
}

@media (min-width: 64em) {
	.home-numbers__grid {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: var(--s-16);
		align-items: end;
	}
}

.home-numbers__statement {
	max-width: 20em;
	color: var(--c-text-2);
	font-family: var(--ff-display);
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: var(--tracking-tight);
	text-wrap: balance;
	font-variant-numeric: tabular-nums;
}

.home-numbers__statement strong {
	color: var(--c-text);
	font-weight: 600;
}

.home-numbers__cta {
	display: grid;
	justify-items: start;
	gap: var(--s-5);
}

.home-numbers__cta .cta-note {
	margin-top: 0;
}