/**
 * main.css — component and layout styles for SkillBridge.
 * Uses only var(--*) tokens defined in style.css :root.
 * Populated section-by-section in Phase 3.
 */

/* === Accessibility helpers === */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 1000;
	padding: 8px 16px;
	background: var(--color-heading);
	color: var(--color-white);
}

.skip-link:focus {
	top: 0;
}

/* === Layout container (content column: 1596px centered) ===
   Box = content (1596) + 2*24 padding = 1644. At 1920 the content is exactly
   1596 wide with a 162px gutter each side (138 auto-margin + 24 padding). */
.container {
	width: 100%;
	max-width: calc(var(--content-max) + 48px);
	margin-inline: auto;
	padding-inline: 24px;
}

/* ============================================================
   SHARED / REUSABLE COMPONENTS (written before any section)
   Flat kebab-case naming. Values from figma-audit.json blueprints.
   ============================================================ */

/* === Page module scaffolding === */
.site-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.section {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Inter-module vertical rhythm — exact gaps measured between section frames
   in figma-audit.json (next.y - (this.y + this.height)). */
.section--hero         { margin-top: 155px; }
.section--logo-strip   { margin-top: 100px; }
.section--video        { margin-top: 100px; }
.section--benefits     { margin-top: 150px; }
.section--courses      { margin-top: 100px; }
.section--testimonials { margin-top: 108px; }
.section--pricing      { margin-top: 168px; }
.section--faq          { margin-top: 150px; }

/* === Buttons === */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 24px;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	background: none;
	transition: opacity var(--transition-fast);
}

.btn:hover {
	opacity: 0.85;
}

.btn-primary {
	background: var(--color-primary);
	color: var(--color-white);
}

/* white face + 1px hairline border (hero "Preise", generic secondary) */
.btn-secondary {
	background: var(--color-white);
	color: var(--color-heading);
	font-weight: var(--fw-medium);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

/* card-face outline button ("View All" / section actions) — #FCFCFD face */
.btn-outline {
	background: var(--color-card);
	color: var(--color-heading);
	font-weight: var(--fw-medium);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

/* square icon-only button (benefit / course arrows) — 74x74, arrow centered */
.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	border-radius: var(--radius-md);
	background: var(--color-card);
	box-shadow: inset 0 0 0 1px var(--color-border);
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.btn-icon:hover {
	opacity: 0.85;
}

.btn-icon img,
.btn-icon svg {
	display: block;
}

/* Arrow-up-right glyph is 17x17 (viewBox) — centered inside the 74px face. */
.icon-arrow-ur {
	width: 17px;
	height: 17px;
}

/* === Section header (heading + description  <->  right-aligned action) === */
.section-header {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	/* 300px @1920 (15.625vw); compresses in the fluid zone so the heading text
	   is never crushed against the right-hand action button. */
	gap: clamp(40px, 15.625vw, 300px);
}

.section-header__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.section-heading {
	font-family: var(--font-body);
	font-size: 48px;
	line-height: 72px;
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.section-desc {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

/* === Generic content card (borderless white block; used by benefits etc.) === */
.card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
}

/* ============================================================
   SITE HEADER (global chrome)  — Figma node 0:48
   ============================================================ */
.site-header {
	width: 100%;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 20px 24px;
}

.site-header__left {
	display: flex;
	align-items: center;
	gap: 50px;
}

.site-header__logo {
	display: flex;
	flex: none;
}

.site-header__logo img {
	width: 54px;
	height: 54px;
	border-radius: var(--radius-md);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 26px;
}

.site-nav__list a {
	display: inline-flex;
	align-items: center;
	padding: 14px 0;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: var(--fw-regular);
	color: var(--color-heading);
	white-space: nowrap;
	transition: opacity var(--transition-fast);
}

.site-nav__list a:hover {
	opacity: 0.7;
}

/* active page → grey pill (#F1F1F3), radius 8, +24px inline padding */
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
	background: var(--color-border);
	border-radius: var(--radius-md);
	padding-inline: 24px;
	opacity: 1;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 30px;
}

.site-header__link {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: var(--fw-regular);
	color: var(--color-heading);
	white-space: nowrap;
	transition: opacity var(--transition-fast);
}

.site-header__link:hover {
	opacity: 0.7;
}

/* header Login CTA uses tighter padding + regular weight (14/34) */
.site-header__cta {
	padding: 14px 34px;
	font-weight: var(--fw-regular);
}

/* mobile hamburger — hidden on desktop, shown in Phase 4 */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: none;
	border: 0;
	cursor: pointer;
}

.nav-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-heading);
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* ============================================================
   HERO  — Figma node 0:25 (965px centred column)
   ============================================================ */
.hero {
	width: 100%;
}

.hero__inner {
	width: 100%;
	max-width: 965px;
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
}

.hero__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
}

/* --- badge pill --- */
.hero__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px 14px 20px;
	background: var(--color-card);
	box-shadow: inset 0 0 0 1px var(--color-border);
	border-radius: 11px;
}

.hero__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	background: var(--color-primary-tint);
	border-radius: var(--radius-sm);
	flex: none;
}

.hero__badge-icon img {
	width: 26px;
	height: 30px;
}

.hero__badge-text {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 48px;
	line-height: 72px;
	color: var(--color-heading-2);
	white-space: nowrap;
}

.hero__badge-deco {
	position: absolute;
	left: -24px;
	top: -30px;
	display: block;
	pointer-events: none;
}

.hero__badge-deco img {
	width: 39px;
	height: 43px;
}

/* --- headline + subtitle --- */
.hero__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.hero__heading {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 38px;
	line-height: 57px;
	color: var(--color-heading);
	text-align: center;
}

.hero__subtitle {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-heading);
	text-align: center;
}

/* --- buttons --- */
.hero__buttons {
	display: flex;
	flex-direction: row;
	gap: 12px;
}

/* ============================================================
   LOGO STRIP  — Figma node 0:65
   ============================================================ */
.logo-strip__inner {
	display: flex;
	align-items: stretch;
	width: 100%;
	padding: 30px;
	background: var(--color-card);
	box-shadow: inset 0 0 0 1px var(--color-border);
	border-radius: var(--radius-lg);
}

.logo-strip__cell {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 40px;
	overflow: hidden;
}

.logo-strip__logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-strip__logo img {
	display: block;
	height: 34px;
	width: auto;
	/* keep aspect when the flex cell narrows in the fluid zone (scale down, no squash) */
	max-width: 100%;
	object-fit: contain;
}

.logo-strip__divider {
	flex: none;
	width: 1px;
	align-self: center;
	height: 94px;
	background: var(--color-border);
}

/* ============================================================
   VIDEO  — Figma node 0:44
   ============================================================ */
.video__card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 790px;
	border-radius: var(--radius-lg);
	outline: 16px solid var(--color-surface);
	overflow: hidden;
}

.video__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-video-overlay);
}

.video__play {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: var(--radius-pill);
	background: var(--color-play-bg);
	outline: 6px solid var(--color-white);
	transition: transform var(--transition-normal);
}

.video__card:hover .video__play {
	transform: scale(1.06);
}

.video__play img {
	width: 28px;
	height: 33px;
}

/* ============================================================
   BENEFITS  — Figma node 0:101
   ============================================================ */
.benefits__inner {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: start;
}

.benefit-card {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 50px;
	padding: 50px;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	min-width: 0;
}

.benefit-card__number {
	width: 100%;
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
	font-size: 80px;
	line-height: 59px;
	text-align: right;
	color: var(--color-heading);
}

.benefit-card__text {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.benefit-card__title {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 24px;
	line-height: 36px;
	letter-spacing: -0.144px;
	color: var(--color-text-dark);
}

.benefit-card__desc {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-arrow);
}

/* ============================================================
   COURSES  — Figma node 0:159
   ============================================================ */
.courses__inner {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.courses__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	align-items: stretch;
}

.course-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	padding: 50px;
	background: var(--color-white);
	box-shadow: inset 0 0 0 1px var(--color-border);
	border-radius: var(--radius-lg);
	min-width: 0;
}

.course-card__body {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.course-card__image {
	width: 100%;
	height: 380px;
	object-fit: cover;
	border-radius: var(--radius-md);
}

.course-card__info {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.course-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.course-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.course-tag {
	display: inline-flex;
	align-items: center;
	padding: 10px 16px;
	background: var(--color-white);
	box-shadow: inset 0 0 0 1px var(--color-border);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: 18px;
	line-height: 22.77px;
	color: var(--color-arrow);
	white-space: nowrap;
}

.course-card__author {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 20px;
	line-height: 25.3px;
	color: var(--color-heading);
	white-space: nowrap;
}

.course-card__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.course-card__title {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 24px;
	line-height: 36px;
	color: var(--color-heading);
}

.course-card__desc {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-arrow);
}

/* full-width surface CTA pinned to card bottom (min 30px gap above) */
.course-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 18px 24px;
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-heading);
	white-space: nowrap;
	text-decoration: none;
	transition: opacity var(--transition-fast);
}

.course-card__cta:hover {
	opacity: 0.85;
}

/* ============================================================
   TESTIMONIALS  — Figma node 0:266
   ============================================================ */
.testimonials__inner {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.testimonials__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	align-items: stretch;
}

.testimonial-card {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	box-shadow: inset 0 0 0 1px var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-width: 0;
}

.testimonial-card__quote-wrap {
	flex: 1;
	padding: 50px;
}

.testimonial-card__quote {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-arrow);
}

.testimonial-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 30px 50px;
	background: var(--color-card);
	border-top: 1px solid var(--color-border);
}

.testimonial-card__author {
	display: flex;
	align-items: center;
	gap: 15px;
	min-width: 0;
}

.testimonial-card__avatar {
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: var(--radius-md);
	object-fit: cover;
}

.testimonial-card__name {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-text-dark);
}

.testimonial-card__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 18px 24px;
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-heading);
	white-space: nowrap;
	text-decoration: none;
	transition: opacity var(--transition-fast);
}

.testimonial-card__cta:hover {
	opacity: 0.85;
}

/* ============================================================
   PRICING  — Figma node 0:316
   ============================================================ */
.pricing__inner {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.pricing__toggle {
	display: flex;
	align-items: center;
	padding: 12px;
	background: var(--color-white);
	border-radius: var(--radius-md);
	flex: none;
}

.pricing__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-arrow);
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.pricing__tab.is-active {
	background: var(--color-primary);
	color: var(--color-white);
}

.pricing__wrap {
	display: flex;
	gap: 30px;
	width: 100%;
	/* 80px @1920 (4.17vw) — shrinks so the two plan cards keep room in the fluid zone */
	padding: clamp(30px, 4.17vw, 80px);
	background: var(--color-white);
	border-radius: var(--radius-lg);
}

.plan-card {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	padding: 50px 30px 30px;
	background: var(--color-card);
	box-shadow: inset 0 0 0 1px var(--color-border);
	border-radius: var(--radius-lg);
}

.plan-card__header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	background: var(--color-primary-tint-2);
	box-shadow: inset 0 0 0 1px var(--color-primary-border);
	border-radius: var(--radius-sm);
}

.plan-card__name {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 22px;
	line-height: 37.18px;
	color: var(--color-heading);
}

.plan-card__price {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
}

.plan-card__amount {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 80px;
	line-height: 58.4px;
	color: var(--color-heading);
}

.plan-card__unit {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 20px;
	line-height: 14.6px;
	color: var(--color-arrow);
}

.plan-card__features {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.plan-card__panel {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 40px;
	background: var(--color-white);
	box-shadow: inset 0 0 0 1px var(--color-border);
	border-radius: 14px 14px 0 0;
}

.plan-card__features-title {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 20px;
	line-height: 30px;
	color: var(--color-heading);
	text-align: center;
}

.plan-card__list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 30px;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	box-shadow: inset 0 0 0 1px var(--color-border);
	border-radius: var(--radius-md);
}

.feature-item__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	background: var(--color-primary-tint);
}

.feature-item.is-unavailable .feature-item__icon {
	background: transparent;
}

.feature-item__icon img {
	display: block;
}

.feature-item__text {
	min-width: 0;
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-arrow);
}

.plan-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 20px 24px;
	background: var(--color-primary);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-white);
	white-space: nowrap;
	text-decoration: none;
	transition: opacity var(--transition-fast);
}

.plan-card__cta:hover {
	opacity: 0.9;
}

/* ============================================================
   FAQ  — Figma node 0:421
   ============================================================ */
.faq__panel {
	display: flex;
	flex-direction: row;
	/* 120px gap / 100px padding @1920 — compress in the fluid zone so the
	   intro column + accordion list keep breathing room before they stack. */
	gap: clamp(48px, 6.25vw, 120px);
	width: 100%;
	padding: clamp(40px, 5.21vw, 100px);
	background: var(--color-white);
	border-radius: var(--radius-lg);
}

.faq__intro {
	flex: none;
	align-self: flex-start;
	align-items: flex-start;
	width: 408px;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.faq__intro-text {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.faq__heading {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 48px;
	line-height: 57.6px;
	color: var(--color-heading);
}

.faq__subtext {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-text-dark);
}

.faq__more {
	align-self: flex-start;
}

.faq__list {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* --- accordion card --- */
.faq-card {
	display: flex;
	flex-direction: column;
	padding: 30px 50px;
	background: var(--color-white);
	box-shadow: inset 0 0 0 1px var(--color-border);
	border-radius: var(--radius-lg);
}

.faq-card__header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 50px;
	cursor: pointer;
}

.faq-card__question {
	flex: 1;
	min-width: 0;
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 20px;
	line-height: 30px;
	color: var(--color-heading);
}

.faq-card__toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	background: var(--color-primary-tint);
	border: 0;
	border-radius: var(--radius-md);
	cursor: pointer;
}

.faq-card__toggle img {
	width: 14px;
	height: 14px;
	transition: transform var(--transition-normal);
}

.faq-card__answer,
.faq-card__related {
	display: none;
}

/* open state */
.faq-card.is-open {
	padding: 50px;
	gap: 50px;
}

.faq-card.is-open .faq-card__header {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--color-border);
}

.faq-card.is-open .faq-card__toggle img {
	transform: rotate(45deg);
}

.faq-card__answer {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: 18px;
	line-height: 27px;
	letter-spacing: -0.108px;
	color: var(--color-arrow);
}

.faq-card.is-open .faq-card__answer {
	display: block;
}

.faq-card.is-open .faq-card__related {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 30px;
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
	border-radius: var(--radius-md);
}

.faq-card__related-label {
	flex: 1;
	min-width: 0;
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-text-dark);
}

.faq-card__related-link {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--color-white);
	border-radius: var(--radius-pill);
	transition: opacity var(--transition-fast);
}

.faq-card__related-link:hover {
	opacity: 0.8;
}

.faq-card__related-link img {
	width: 17px;
	height: 16px;
}

/* ============================================================
   SITE FOOTER (global chrome)  — Figma node 0:461
   ============================================================ */
.site-footer {
	width: 100%;
	margin-top: 142px;
	padding-block: 100px 30px;
	background: var(--color-white);
}

.site-footer .container {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.footer-top {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 30px;
}

.footer-brand {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.footer-brand__logo {
	align-self: flex-start;
	display: flex;
}

.footer-brand__logo img {
	width: 54px;
	height: 54px;
	border-radius: var(--radius-md);
}

.footer-contacts {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
	max-width: 392px;
}

.footer-contact {
	flex: 0 0 100%;
	display: flex;
}

.footer-contact__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: opacity var(--transition-fast);
}

.footer-contact__link:hover {
	opacity: 0.7;
}

.footer-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: none;
}

.footer-contact__text {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-heading);
}

.footer-cols {
	display: flex;
	flex-direction: row;
	gap: 30px;
}

.footer-col {
	/* 249px @1920 (13vw), shrinks in the fluid zone so brand + columns keep
	   fitting on one row down to the tablet stack point. */
	width: clamp(150px, 13vw, 249px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.footer-col__title {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 20px;
	line-height: 30px;
	color: var(--color-heading);
}

.footer-col__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer-link {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-text-muted);
	transition: opacity var(--transition-fast);
}

.footer-link:hover {
	opacity: 0.7;
}

.footer-social {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px;
}

.footer-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
	border-radius: var(--radius-md);
	transition: opacity var(--transition-fast);
}

.footer-social__link:hover {
	opacity: 0.75;
}

.footer-social__link img {
	width: 24px;
	height: 24px;
}

.footer-divider {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--color-border);
}

.footer-copyright {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: 18px;
	line-height: 27px;
	color: var(--color-text-light);
	text-align: center;
}

/* ============================================================
   RESPONSIVE
   Desktop fluid zone (1920 -> 1024) is handled by the centered
   .container shrinking + fr-based grids + the clamp() gaps above.
   Real layout shifts happen at three breakpoints only.
   NEVER override :root here — direct property overrides only.
   ============================================================ */

/* ----- Global responsive base ----- */
html,
body {
	min-width: 320px;
}

img {
	max-width: 100%;
}

/* long words (German compounds like "Schulungsvideos", long feature labels)
   break instead of pushing past their container on narrow screens. Inherited,
   so it also covers <span> text; never overrides an explicit white-space:nowrap. */
body {
	overflow-wrap: break-word;
}

/* social glyphs have varied native aspect ratios (some 24x20) — keep them
   undistorted inside the 24px box */
.footer-social__link img {
	object-fit: contain;
}

/* header anchors the mobile dropdown; panel hidden until a breakpoint shows it */
.site-header {
	position: relative;
	z-index: 40;
}

.nav-mobile {
	display: none;
}

/* Lock background scroll while the mobile nav panel is open. */
body.nav-open {
	overflow: hidden;
}

/* ============================================================
   TABLET  — max-width: 1024px  (first layout shift + nav collapse)
   ============================================================ */
@media (max-width: 1024px) {
	/* NAV — collapse desktop nav + action links into the hamburger */
	.site-nav,
	.site-header__actions > .site-header__link,
	.site-header__actions > .site-header__cta {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}

	/* hamburger -> X */
	.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
		transform: translateY(7px) rotate(45deg);
	}

	.nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
		opacity: 0;
	}

	.nav-toggle.is-active .nav-toggle__bar:nth-child(4) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* mobile dropdown panel */
	.nav-mobile.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 50;
		background: var(--color-white);
		border-top: 1px solid var(--color-border);
		border-bottom: 1px solid var(--color-border);
		box-shadow: 0 16px 30px rgba(17, 17, 17, 0.08);
	}

	.nav-mobile__inner {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding-block: 20px 30px;
	}

	.nav-mobile__list {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.nav-mobile__list a {
		display: block;
		padding: 12px 0;
		font-family: var(--font-body);
		font-size: 18px;
		line-height: 27px;
		color: var(--color-heading);
	}

	.nav-mobile__list .current-menu-item > a {
		color: var(--color-primary);
		font-weight: var(--fw-medium);
	}

	.nav-mobile__actions {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding-top: 20px;
		border-top: 1px solid var(--color-border);
	}

	.nav-mobile__actions .site-header__link {
		padding: 6px 0;
	}

	.nav-mobile__actions .btn {
		width: 100%;
	}

	/* SECTION HEADER — stack heading over its right-hand action */
	.section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	/* BENEFITS 3 -> 2 */
	.benefits__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* COURSES 2 -> 1 */
	.courses__grid {
		grid-template-columns: 1fr;
	}

	/* TESTIMONIALS 2 -> 1 (stack here, not at 768, so the footer row + long
	   quote never get squeezed in the 1024->768 band) */
	.testimonials__grid {
		grid-template-columns: 1fr;
	}

	/* PRICING — stack the two plan cards (feature labels need the full width) */
	.pricing__wrap {
		flex-direction: column;
	}

	/* FAQ panel row -> column */
	.faq__panel {
		flex-direction: column;
	}

	.faq__intro {
		width: 100%;
	}

	/* LOGO STRIP — wrap, drop the vertical dividers */
	.logo-strip__inner {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 10px;
	}

	.logo-strip__cell {
		flex: 1 1 140px;
	}

	.logo-strip__divider {
		display: none;
	}

	/* FOOTER — brand over columns (avoids the row overflowing in the
	   1024->768 band where brand + 3 columns no longer fit side by side) */
	.footer-top {
		flex-direction: column;
		gap: 40px;
	}

	.footer-cols {
		flex-wrap: wrap;
		gap: 30px 40px;
	}

	.footer-col {
		width: auto;
		flex: 1 1 160px;
		max-width: 249px;
	}
}

/* ============================================================
   MOBILE  — max-width: 768px  (single-column stacking)
   ============================================================ */
@media (max-width: 768px) {
	/* Inter-section rhythm — tighten the large desktop gaps */
	.section--hero,
	.section--logo-strip,
	.section--video,
	.section--benefits,
	.section--courses,
	.section--testimonials,
	.section--pricing,
	.section--faq {
		margin-top: 80px;
	}

	.site-footer {
		margin-top: 80px;
		padding-block: 60px 30px;
	}

	/* Inner header-to-content gap */
	.benefits__inner,
	.courses__inner,
	.testimonials__inner,
	.pricing__inner {
		gap: 40px;
	}

	/* Shared section headings */
	.section-heading {
		font-size: 34px;
		line-height: 44px;
	}

	/* HERO */
	.hero__inner {
		gap: 40px;
	}

	.hero__badge-icon {
		width: 48px;
		height: 48px;
	}

	.hero__badge-text {
		font-size: 32px;
		line-height: 44px;
	}

	.hero__heading {
		font-size: 28px;
		line-height: 40px;
	}

	/* LOGO STRIP */
	.logo-strip__cell {
		flex: 1 1 33%;
		padding: 20px;
	}

	/* VIDEO */
	.video__card {
		height: 420px;
		outline-width: 10px;
	}

	/* BENEFITS 2 -> 1 */
	.benefits__grid {
		grid-template-columns: 1fr;
	}

	.benefit-card {
		padding: 40px;
	}

	/* COURSES */
	.course-card {
		padding: 30px;
	}

	.course-card__image {
		height: 300px;
	}

	.course-card__meta {
		flex-wrap: wrap;
		row-gap: 14px;
	}

	/* TESTIMONIALS (already single-column from 1024) — tighter padding */
	.testimonial-card__quote-wrap {
		padding: 40px;
	}

	.testimonial-card__footer {
		padding: 24px 40px;
	}

	/* FAQ */
	.faq__heading {
		font-size: 34px;
		line-height: 44px;
	}

	.faq-card {
		padding: 30px;
	}

	.faq-card.is-open {
		padding: 40px;
		gap: 30px;
	}

	.faq-card__header {
		gap: 20px;
	}
}

/* ============================================================
   SMALL MOBILE  — max-width: 480px  (typography + spacing tweaks)
   ============================================================ */
@media (max-width: 480px) {
	/* Inter-section rhythm */
	.section--hero,
	.section--logo-strip,
	.section--video,
	.section--benefits,
	.section--courses,
	.section--testimonials,
	.section--pricing,
	.section--faq {
		margin-top: 60px;
	}

	.site-footer {
		margin-top: 60px;
	}

	/* HERO — allow the long badge label to wrap, stack buttons full-width */
	.hero__badge {
		flex-wrap: wrap;
		padding: 12px 20px;
	}

	.hero__badge-icon {
		width: 42px;
		height: 42px;
	}

	.hero__badge-text {
		font-size: 26px;
		line-height: 36px;
		white-space: normal;
	}

	.hero__heading {
		font-size: 24px;
		line-height: 34px;
	}

	.hero__buttons {
		flex-direction: column;
		width: 100%;
	}

	.hero__buttons .btn {
		width: 100%;
	}

	/* Section headings */
	.section-heading,
	.faq__heading {
		font-size: 28px;
		line-height: 38px;
	}

	/* Cards — tighter padding */
	.benefit-card,
	.course-card,
	.plan-card {
		padding: 24px;
	}

	.benefit-card__number,
	.plan-card__amount {
		font-size: 54px;
	}

	.plan-card__panel {
		padding: 24px;
	}

	.plan-card__list {
		padding: 0;
	}

	.testimonial-card__quote-wrap {
		padding: 30px;
	}

	.testimonial-card__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 24px 30px;
	}

	.faq-card {
		padding: 24px;
	}

	.faq-card.is-open {
		padding: 30px;
	}

	.faq-card__header {
		gap: 16px;
	}

	.faq-card.is-open .faq-card__related {
		flex-direction: column;
		align-items: flex-start;
	}

	/* LOGO STRIP — two per row */
	.logo-strip__cell {
		flex: 1 1 50%;
	}

	/* FOOTER */
	.footer-contacts {
		max-width: none;
	}

	.footer-cols {
		gap: 24px 30px;
	}

	.footer-col {
		flex: 1 1 45%;
	}
}

/* ==========================================================================
   SHARED MODULE: Page Intro (`page_intro` layout)
   Two-column page title + intro paragraph with a 1px bottom divider. Used by
   Kurs-Detailseite (0:835), Über uns (0:1051), Preise (0:1221), Kontakt
   (0:1451). Global module CSS lives here so the module renders correctly on
   ANY page. Per-page deltas (e.g. Kontakt's tighter top gap) live in that
   page's conditionally-loaded CSS, which overrides these by source order.
   ========================================================================== */
.site-main:has(.page-intro) {
	background: var(--color-surface); /* #F7F7F8 grey field for title pages */
}
/* The shared footer carries a top-margin from the home rhythm; cancel it here
   so each title page's last module supplies the exact module→footer gap. */
.site-main:has(.page-intro) + .site-footer {
	margin-top: 0;
}

.page-intro {
	width: 100%;
	margin-top: 164px; /* header-bottom → title-top */
}

/* Outer 1860 wide (30px page margins) with fluid 132px side padding → the two
   text columns line up with the 1596 content column below. Divider is an inset
   shadow so the 1px bottom rule never adds layout height. */
.page-intro__row {
	width: calc(100% - 48px);
	max-width: 1860px;
	margin-inline: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 100px;
	padding: 0 clamp(24px, 6.875vw, 132px) 50px;
	box-shadow: inset 0 -1px 0 var(--color-divider, #E4E4E7);
}

.page-intro__heading {
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--font-body);
	font-size: 48px;
	line-height: 72px;
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.page-intro__text {
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
}

/* Below ~1024 the two 48px-heading columns get too narrow; stack them so the
   heading word never overflows (the classic 375px h-scroll source). */
@media (max-width: 1024px) {
	.page-intro__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding-bottom: 40px;
	}
}
@media (max-width: 768px) {
	.page-intro { margin-top: 100px; }
	.page-intro__heading { font-size: 32px; line-height: 44px; }
}
@media (max-width: 480px) {
	.page-intro__row { gap: 20px; padding-bottom: 30px; }
	.page-intro__heading { font-size: 28px; line-height: 38px; }
	.page-intro__text { font-size: 16px; line-height: 24px; }
}