/* Startseite 2026: Sektionen (Basis in sfb-base.css) */

/* Hero */
.sfb-hero { padding-block: 28px 28px; }
.sfb-eyebrow {
	font: 600 13px/1.2 var(--sfb-font-body);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sfb-accent-ink);
	margin-bottom: 14px;
}
.sfb-hero__title {
	font-weight: 800;
	font-size: clamp(40px, 11.5vw, 148px);
	line-height: 0.95;
	letter-spacing: -0.035em;
	max-width: 15ch;
}
.sfb-hl { color: var(--sfb-accent); }
.sfb-hero__foot {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 2px solid var(--sfb-ink);
}
.sfb-hero__lead { font-size: 17px; line-height: 1.55; max-width: 36em; }

/* Kundenleiste */
.sfb-clients { padding-block: 8px 40px; }
.sfb-clients__inner { display: flex; flex-direction: column; gap: 12px; }
.sfb-clients__label {
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sfb-muted);
}
.sfb-clients__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}
.sfb-clients__list a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 6px 8px;
	background: var(--sfb-surface);
	border-radius: 14px;
}
.sfb-clients__list img {
	width: auto;
	max-width: 100%;
	max-height: 38px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .78;
	transition: filter .2s ease, opacity .2s ease;
}
.sfb-clients__list a:hover img { filter: none; opacity: 1; }

.sfb-h2 {
	font-weight: 800;
	font-size: clamp(34px, 7vw, 72px);
	line-height: 1;
	letter-spacing: -0.03em;
}

/* Leistungen (Bento) */
.sfb-services { padding-block: var(--sfb-section) 32px; }
.sfb-bento {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-top: 28px;
}
.sfb-tile {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px 24px;
	border-radius: var(--sfb-radius);
	min-width: 0;
}
.sfb-tile--dark { background: var(--sfb-dark); color: var(--sfb-on-dark); }
.sfb-tile--accent { background: var(--sfb-accent); color: #FFFFFF; }
.sfb-tile--light { background: var(--sfb-surface); color: var(--sfb-ink); }
.sfb-tile__label {
	font: 700 13px/1.2 var(--sfb-font-display);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sfb-accent-ink);
}
.sfb-tile--dark .sfb-tile__label { color: var(--sfb-accent-soft); }
.sfb-tile--accent .sfb-tile__label { color: #FFFFFF; }
.sfb-tile__title { font-size: 28px; line-height: 1.05; }
.sfb-tile__text { font-size: 16px; line-height: 1.6; margin-top: auto; }
.sfb-tile--dark .sfb-tile__text { color: var(--sfb-on-dark-muted); }
.sfb-tile--light .sfb-tile__text { color: var(--sfb-muted); }
.sfb-tile__link { font-weight: 500; text-underline-offset: 4px; align-self: flex-start; padding-block: 8px; }
.sfb-tile--dark .sfb-tile__link, .sfb-tile--accent .sfb-tile__link { color: #FFFFFF; }

/* Aktuelle Referenz */
.sfb-work { padding-block: var(--sfb-section); }
.sfb-work__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 12px 24px;
}
.sfb-feature {
	display: grid;
	margin-top: 28px;
	border-radius: var(--sfb-radius);
	overflow: hidden;
	background: var(--sfb-surface);
}
.sfb-feature__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--sfb-sand);
}
.sfb-feature__media img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 24px 48px -20px rgba(70, 52, 34, 0.45);
	transition: transform .4s ease;
}
.sfb-feature__media--logo img { width: auto; max-width: 70%; max-height: 220px; box-shadow: none; }
.sfb-feature:hover .sfb-feature__media img { transform: translateY(-4px); }
.sfb-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 28px 24px 32px;
}
.sfb-case__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--sfb-muted);
}
.sfb-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--sfb-ink);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 500;
}
.sfb-feature__title {
	font-weight: 800;
	font-size: clamp(36px, 8vw, 68px);
	line-height: 0.98;
	letter-spacing: -0.03em;
}
.sfb-feature__text { font-size: 17px; line-height: 1.6; color: var(--sfb-muted); max-width: 28em; }
.sfb-feature__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	margin-top: 6px;
	padding-block: 8px;
	font-weight: 600;
	color: var(--sfb-accent-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
.sfb-feature__link:hover { color: var(--sfb-ink); }

/* KI-Band */
.sfb-ai { background: var(--sfb-accent); color: #FFFFFF; padding-block: var(--sfb-section); }
.sfb-ai__inner { display: grid; gap: 32px; }
.sfb-ai__intro { display: flex; flex-direction: column; gap: 20px; }
.sfb-ai__title {
	font-weight: 800;
	font-size: clamp(32px, 7vw, 64px);
	line-height: 1;
	letter-spacing: -0.03em;
}
.sfb-ai__lead { font-size: 17px; line-height: 1.6; max-width: 34em; }
.sfb-ai__list { display: flex; flex-direction: column; }
.sfb-ai__row {
	display: grid;
	gap: 6px;
	padding-block: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.45);
}
.sfb-ai__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.45); }
.sfb-ai__row dt { font: 700 20px/1.2 var(--sfb-font-display); }
.sfb-ai__row dd { font-size: 16px; line-height: 1.6; }

/* Startup Mindset */
.sfb-mindset { padding-block: var(--sfb-section); }
.sfb-mindset__inner { display: grid; gap: 32px; }
.sfb-mindset__media { max-width: 220px; }
.sfb-mindset__portrait {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--sfb-radius);
	background: var(--sfb-surface);
}
.sfb-mindset__body { display: flex; flex-direction: column; gap: 20px; }
.sfb-mindset__text { font-size: 17px; line-height: 1.6; color: var(--sfb-muted); max-width: 36em; }
.sfb-mindset__body .sfb-actions { align-items: center; gap: 12px 24px; margin-top: 8px; }

/* Empfehlung */
.sfb-quote { background: var(--sfb-dark); color: var(--sfb-on-dark); padding-block: var(--sfb-section); }
.sfb-quote__figure { display: grid; gap: 28px; }
.sfb-quote__text p {
	font-family: var(--sfb-font-display);
	font-weight: 500;
	font-size: clamp(26px, 5.4vw, 48px);
	line-height: 1.18;
	letter-spacing: -0.015em;
	max-width: 26ch;
}
.sfb-quote__cite {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-left: 16px;
	border-left: 2px solid var(--sfb-accent-soft);
	font-size: 15px;
}
.sfb-quote__cite strong { font-weight: 500; }
.sfb-quote__cite span { color: var(--sfb-on-dark-muted); }

/* Kontakt */
.sfb-contact { padding-block: 88px 72px; }
.sfb-contact__title {
	font-weight: 800;
	font-size: clamp(44px, 11vw, 128px);
	line-height: 0.95;
	letter-spacing: -0.035em;
	max-width: 12ch;
}
.sfb-contact__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 28px; }
.sfb-contact__text { font-size: 17px; color: var(--sfb-muted); max-width: 34em; }

@media (min-width: 640px) {
	.sfb-hero__lead { font-size: 19px; }
	.sfb-clients__list { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.sfb-tile { padding: 36px; }
	.sfb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.sfb-tile--wide { grid-column: span 2; }
	.sfb-feature__media { padding: 40px; }
	.sfb-feature__body { padding: 40px; }
}

@media (min-width: 960px) {
	.sfb-hero { padding-block: 72px 40px; }
	.sfb-hero__foot {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 40px;
		margin-top: 40px;
		padding-top: 32px;
	}
	.sfb-clients { padding-block: 16px 56px; }
	.sfb-clients__inner { flex-direction: row; align-items: center; gap: 24px; }
	.sfb-clients__label { flex: 0 0 auto; }
	.sfb-clients__list { flex: 1 1 auto; }
	.sfb-clients__list a { height: 64px; }

	.sfb-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
	.sfb-tile { padding: 44px; min-height: 380px; gap: 22px; }
	.sfb-tile__title { font-size: 36px; }
	.sfb-tile__title--xl { font-size: clamp(36px, 3.6vw, 52px); max-width: 16ch; }
	.sfb-tile__text { font-size: 17px; max-width: 40em; }

	.sfb-feature { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); margin-top: 44px; }
	.sfb-feature__media { padding: 72px 64px; }
	.sfb-feature__body { padding: 64px 56px; gap: 18px; }

	.sfb-ai__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; align-items: start; }
	.sfb-ai__intro { grid-column: 1 / span 5; }
	.sfb-ai__list { grid-column: 7 / span 6; }
	.sfb-ai__lead { font-size: 19px; }
	.sfb-ai__row { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding-block: 26px; }
	.sfb-ai__row dd { font-size: 17px; }

	.sfb-mindset__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; }
	.sfb-mindset__media { grid-column: 1 / span 4; max-width: none; }
	.sfb-mindset__body { grid-column: 6 / span 7; gap: 24px; }
	.sfb-mindset__text { font-size: 19px; }

	.sfb-quote__figure { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; gap: 64px; }

	.sfb-contact { padding-block: 140px 112px; }
	.sfb-contact__foot { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-top: 40px; }
	.sfb-contact__text { font-size: 19px; }
}
/* Startseite: Headline faehrt beim Laden mit Tempo ein */
@media (prefers-reduced-motion: no-preference) {
	.sfb-hero--intro .sfb-w {
		display: inline-block;
		animation: sfb-word-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
		animation-delay: calc(80ms + var(--i, 0) * 70ms);
		will-change: transform, opacity;
	}
	.sfb-hero--intro .sfb-hero__foot { border-top-color: transparent; position: relative; }
	.sfb-hero--intro .sfb-hero__foot::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: -2px;
		height: 2px;
		background: var(--sfb-ink);
		transform-origin: left center;
		animation: sfb-line-in 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.5s both;
	}
	.sfb-hero--intro .sfb-hero__lead,
	.sfb-hero--intro .sfb-actions {
		animation: sfb-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
	}
}
@keyframes sfb-word-in {
	from { opacity: 0; transform: translateX(-0.6em) skewX(-14deg); }
	60% { opacity: 1; }
	to { opacity: 1; transform: none; }
}
@keyframes sfb-line-in {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
@keyframes sfb-fade-up {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}