/* STIQ24 – home.css (Startseite) */
.s24-hero { border-bottom: 1px solid var(--s24-border); overflow: hidden; }
.s24-hero__grid { display: grid; gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
@media (min-width: 1024px) { .s24-hero__grid { grid-template-columns: 1fr 1fr; padding-top: 80px; padding-bottom: 80px; } }
.s24-hero__text h1 { margin-bottom: 24px; }
.s24-hero__text .s24-lead { margin-bottom: 32px; }
.s24-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; }
.s24-hero__stage {
	position: relative; aspect-ratio: 16 / 11; border: 1px solid var(--s24-border);
	border-radius: var(--s24-r-md); background: var(--s24-surface-low); overflow: hidden;
}
.s24-hero__stage img { width: 100%; height: 100%; object-fit: cover; }

.s24-benefits { border-bottom: 1px solid var(--s24-border); }
.s24-benefits__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding-top: 40px; padding-bottom: 40px; }
@media (min-width: 900px) { .s24-benefits__grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.s24-benefit { display: flex; gap: 16px; align-items: flex-start; }
.s24-benefit__icon {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 48px; height: 48px; border: 1px solid var(--s24-border);
	border-radius: var(--s24-r); background: var(--s24-surface-container);
}
.s24-benefit h3 { margin: 0; font-family: var(--s24-font-body); font-size: 14px; line-height: 20px; }
.s24-benefit p { margin: 2px 0 0; font-size: 12px; line-height: 18px; color: var(--s24-on-variant); }

.s24-home-head { margin-bottom: 48px; }
.s24-home-head h2 { margin-bottom: 4px; }

.s24-catgrid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .s24-catgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .s24-catgrid { grid-template-columns: repeat(5, 1fr); } }

.s24-catcard {
	position: relative; display: flex; flex-direction: column; text-decoration: none;
	background: var(--s24-surface); border: 1px solid var(--s24-border);
	border-radius: var(--s24-r-md); overflow: hidden; transition: border-color 0.2s;
}
.s24-catcard:hover { border-color: var(--s24-primary); }
.s24-catcard__badge { position: absolute; top: 12px; right: 12px; z-index: 2; }
.s24-catcard__img { display: block; aspect-ratio: 1; background: var(--s24-surface-low); }
.s24-catcard__body {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 20px; border-top: 1px solid var(--s24-border); flex: 1;
}
.s24-catcard__body strong { display: block; font-family: var(--s24-font-head); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--s24-primary); }
.s24-catcard__body small { display: block; margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--s24-on-variant); }
.s24-catcard__arrow {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 32px; height: 32px; border: 1px solid var(--s24-border); border-radius: 50%;
	transition: transform 0.2s, border-color 0.2s;
}
.s24-catcard:hover .s24-catcard__arrow { border-color: var(--s24-primary); transform: translateX(4px); }

.s24-process { background: var(--s24-surface-bright); }
.s24-process h2 { margin-bottom: 32px; }

.s24-tiers { overflow: hidden; margin: 24px 0 12px; }
.s24-tiers table { width: 100%; border-collapse: collapse; text-align: left; }
.s24-tiers th { padding: 14px 24px; background: var(--s24-surface-low); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s24-secondary); }
.s24-tiers th:last-child, .s24-tiers td:last-child { text-align: right; }
.s24-tiers td { padding: 16px 24px; border-top: 1px solid var(--s24-border); font-weight: 600; }