/* =========================================================
   VENDBAR LAYOUT CSS
   assets/css/03-layout.css
   ---------------------------------------------------------
   Globale Layout-Primitives:
   Container, Sections, Grids, Wrappers, Stacks, Splits.
   Keine Komponenten. Keine Seitenlogik.
   ========================================================= */


/* =========================================================
   CONTAINERS
   ========================================================= */

.vb-container {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: 16px;
}

.vb-container-sm {
	width: 100%;
	max-width: 980px;
	margin-inline: auto;
	padding-inline: 16px;
}

.vb-container-md {
	width: 100%;
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: 16px;
}

.vb-container-lg {
	width: 100%;
	max-width: 1380px;
	margin-inline: auto;
	padding-inline: 32px;
}

.vb-container-fluid {
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding-inline: 24px;
}


/* =========================================================
   PAGE / MAIN WRAPPERS
   ========================================================= */

.vb-main {
	background: var(--vb-bg);
}

.vb-page {
	background: var(--vb-bg);
	color: var(--vb-text);
}

.vb-page-white {
	background: var(--vb-surface);
}

.vb-page-muted {
	background: var(--vb-surface-muted);
}


/* =========================================================
   SECTIONS
   ========================================================= */

.vb-section {
	padding-block: 72px;
}

.vb-section-xs {
	padding-block: 24px;
}

.vb-section-sm {
	padding-block: 42px;
}

.vb-section-md {
	padding-block: 56px;
}

.vb-section-lg {
	padding-block: 96px;
}

.vb-section-xl {
	padding-block: 120px;
}

.vb-section-tight {
	padding-block: 32px;
}

.vb-section-no-top {
	padding-top: 0;
}

.vb-section-no-bottom {
	padding-bottom: 0;
}

.vb-section-surface {
	background: var(--vb-surface);
}

.vb-section-soft {
	background: var(--vb-surface-soft);
}

.vb-section-muted {
	background: var(--vb-surface-muted);
}


/* =========================================================
   SECTION HEADERS
   ========================================================= */

.vb-section-head {
	margin-bottom: 30px;
}

.vb-section-head-center {
	text-align: center;
}

.vb-section-head h1,
.vb-section-head h2,
.vb-section-head h3 {
	margin-bottom: 8px;
}

.vb-section-head p {
	max-width: 680px;
	margin: 0;
	color: var(--vb-text-soft);
	font-size: var(--vb-text-base);
	line-height: var(--vb-line-relaxed);
}

.vb-section-head-center p {
	margin-inline: auto;
}


/* =========================================================
   GRID SYSTEM
   ========================================================= */

.vb-grid {
	display: grid;
	gap: var(--vb-space-xl);
}

.vb-grid-sm {
	display: grid;
	gap: var(--vb-space-md);
}

.vb-grid-lg {
	display: grid;
	gap: var(--vb-space-3xl);
}

.vb-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vb-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vb-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vb-grid-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vb-grid-auto {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.vb-grid-auto-sm {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.vb-grid-auto-lg {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}


/* =========================================================
   SPLIT LAYOUTS
   ========================================================= */

.vb-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
	gap: var(--vb-space-3xl);
	align-items: center;
}

.vb-split-reverse {
	display: grid;
	grid-template-columns: minmax(320px, .8fr) minmax(0, 1fr);
	gap: var(--vb-space-3xl);
	align-items: center;
}

.vb-split-wide {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
	gap: var(--vb-space-3xl);
	align-items: center;
}

.vb-split-start {
	align-items: start;
}

.vb-split-stretch {
	align-items: stretch;
}


/* =========================================================
   STACKS
   ========================================================= */

.vb-stack {
	display: flex;
	flex-direction: column;
	gap: var(--vb-space-lg);
}

.vb-stack-xs {
	display: flex;
	flex-direction: column;
	gap: var(--vb-space-xs);
}

.vb-stack-sm {
	display: flex;
	flex-direction: column;
	gap: var(--vb-space-sm);
}

.vb-stack-md {
	display: flex;
	flex-direction: column;
	gap: var(--vb-space-md);
}

.vb-stack-lg {
	display: flex;
	flex-direction: column;
	gap: var(--vb-space-xl);
}

.vb-stack-xl {
	display: flex;
	flex-direction: column;
	gap: var(--vb-space-3xl);
}


/* =========================================================
   INLINE / ROW LAYOUTS
   ========================================================= */

.vb-row {
	display: flex;
	align-items: center;
	gap: var(--vb-space-md);
}

.vb-row-sm {
	display: flex;
	align-items: center;
	gap: var(--vb-space-sm);
}

.vb-row-lg {
	display: flex;
	align-items: center;
	gap: var(--vb-space-xl);
}

.vb-row-wrap {
	flex-wrap: wrap;
}

.vb-row-between {
	justify-content: space-between;
}

.vb-row-center {
	justify-content: center;
}


/* =========================================================
   PANELS / LAYOUT BOXES
   ========================================================= */

.vb-panel {
	background: var(--vb-surface);
	border: 1px solid var(--vb-border);
	border-radius: var(--vb-radius-lg);
	box-shadow: var(--vb-shadow-panel);
}

.vb-panel-soft {
	background: var(--vb-surface-soft);
	border: 1px solid var(--vb-border-soft);
	border-radius: var(--vb-radius-lg);
}

.vb-panel-pad {
	padding: var(--vb-space-xl);
}

.vb-panel-pad-lg {
	padding: var(--vb-space-3xl);
}


/* =========================================================
   MEDIA WRAPPERS
   ========================================================= */

.vb-media {
	overflow: hidden;
	background: var(--vb-surface-soft);
	border: 1px solid var(--vb-border-soft);
	border-radius: var(--vb-radius-lg);
}

.vb-media img,
.vb-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vb-media-contain img,
.vb-media-contain video {
	object-fit: contain;
}

.vb-aspect-1 {
	aspect-ratio: 1 / 1;
}

.vb-aspect-4-3 {
	aspect-ratio: 4 / 3;
}

.vb-aspect-16-9 {
	aspect-ratio: 16 / 9;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

	.vb-container-lg {
		padding-inline: 24px;
	}

	.vb-grid-5 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {

	.vb-section {
		padding-block: 56px;
	}

	.vb-section-lg {
		padding-block: 72px;
	}

	.vb-section-xl {
		padding-block: 88px;
	}

	.vb-grid-4,
	.vb-grid-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vb-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vb-split,
	.vb-split-reverse,
	.vb-split-wide {
		grid-template-columns: 1fr;
		gap: var(--vb-space-xl);
	}
}

@media (max-width: 640px) {

	.vb-container,
	.vb-container-sm,
	.vb-container-md {
		padding-inline: 12px;
	}

	.vb-container-lg,
	.vb-container-fluid {
		padding-inline: 12px;
	}

	.vb-section {
		padding-block: 48px;
	}

	.vb-section-sm {
		padding-block: 32px;
	}

	.vb-section-md {
		padding-block: 42px;
	}

	.vb-section-lg {
		padding-block: 64px;
	}

	.vb-section-xl {
		padding-block: 72px;
	}

	.vb-grid-2,
	.vb-grid-3,
	.vb-grid-4,
	.vb-grid-5 {
		grid-template-columns: 1fr;
	}

	.vb-panel-pad,
	.vb-panel-pad-lg {
		padding: var(--vb-space-lg);
	}

	.vb-row {
		align-items: flex-start;
	}

	.vb-row-mobile-stack {
		flex-direction: column;
		align-items: stretch;
	}
}