/* Globales Grid Container */
.g-container {
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	box-sizing: border-box;
}

.g-container-fluid {
	max-width: 100%;
}

.g-flex {
	display: flex;
	flex: auto;
}

:where(.wp-block-columns.is-layout-flex) {
	gap: 3rem;
}


/* Spalten */
.g-col {
	flex: 1 1 100%;
	box-sizing: border-box;
}
@media (max-width: 768px) {
	.g-col-4 {
		flex: 1 1 100%;
	}
}
@media (min-width: 768px) {
	.g-col-8 {
		flex: 1 0 calc(760px - (2rem / 2));
	}
	.g-col-6 {
		flex: 0 0 calc(50% - (2rem / 2))
	}
	.g-col-6-nested {
		flex: 1 0 calc(50% - (2rem / 2));
	}
	.g-col-4 {
		flex: 1 0 calc(33.3333% - 22px);
	}
	.g-col-3 {
		flex: 0 0 calc(260px - (2rem / 4));
	}
	.g-col-centered-8 {
		flex: 0 0 calc(760px - (2rem / 2));
		margin: 0 auto;
	}
}

@media (min-width: 1024px) {
	.g-col-12 {
		flex: 1 1 calc(100% - 2rem); /* Eine Spalte auf großen Bildschirmen */
	}
	.g-col-4 {
		flex: 0 0 calc(33.3333% - 22px);
	}
}


/* Zentriere Inhalte vertikal und horizontal */
.flex-center {
	display: flex;
	justify-content: center; /* Horizontal zentrieren */
	align-items: center;     /* Vertikal zentrieren */
}

/* Zentriere Inhalte nur vertikal */
.flex-vcenter {
	display: flex;
	align-items: center; /* Vertikal zentrieren */
}

.flex-end {
	align-items: flex-end;
}

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

/* Vertikale Ausrichtung */

/* Zentriert vertikal */
.align-items-center {
	display: flex;
	align-items: center; /* Vertikale Zentrierung */
}

/* Unten ausgerichtet */
.align-items-end {
	display: flex;
	align-items: flex-end; /* Unten ausgerichtet */
}

/* Oben ausgerichtet (Standard) */
.align-items-start {
	display: flex;
	align-items: flex-start; /* Oben ausgerichtet */
}

/* Horizontale Ausrichtung */

/* Zentriert horizontal */
.justify-content-center {
	display: flex;
	justify-content: center; /* Horizontale Zentrierung */
}

/* Rechts ausgerichtet */
.justify-content-end {
	display: flex;
	justify-content: flex-end; /* Rechts ausgerichtet */
}

/* Links ausgerichtet (Standard) */
.justify-content-start {
	display: flex;
	justify-content: flex-start; /* Links ausgerichtet */
}


/* Definiere die Abstandsvariablen */
:root {
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 2rem;
	--space-4: 4rem;
	--space-5: 7rem;
	--space-6: 10rem;
	--space-7: 15rem;
}

/* Margin Klassen */
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-7 { margin: var(--space-7); }

/* Margin spezifisch */
.mt-1 { margin-top: var(--space-1); }
.mr-1 { margin-right: var(--space-1); }
.mb-1 { margin-bottom: var(--space-1); }
.ml-1 { margin-left: var(--space-1); }

.mt-2 { margin-top: var(--space-2); }
.mr-2 { margin-right: var(--space-2); }
.mb-2 { margin-bottom: var(--space-2); }
.ml-2 { margin-left: var(--space-2); }

.mt-3 { margin-top: var(--space-3); }
.mr-3 { margin-right: var(--space-3); }
.mb-3 { margin-bottom: var(--space-3); }
.ml-3 { margin-left: var(--space-3); }

.mt-4 { margin-top: var(--space-4); }
.mr-4 { margin-right: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.ml-4 { margin-left: var(--space-4); }

.mt-5 { margin-top: var(--space-5); }
.mr-5 { margin-right: var(--space-5); }
.mb-5 { margin-bottom: var(--space-5); }
.ml-5 { margin-left: var(--space-5); }

.mt-6 { margin-top: var(--space-6); }
.mr-6 { margin-right: var(--space-6); }
.mb-6 { margin-bottom: var(--space-6); }
.ml-6 { margin-left: var(--space-6); }

.mt-7 { margin-top: var(--space-7); }
.mr-7 { margin-right: var(--space-7); }
.mb-7 { margin-bottom: var(--space-7); }
.ml-7 { margin-left: var(--space-7); }

/* Padding Klassen */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-7 { padding: var(--space-7); }

/* Padding spezifisch */
.pt-1 { padding-top: var(--space-1); }
.pr-1 { padding-right: var(--space-1); }
.pb-1 { padding-bottom: var(--space-1); }
.pl-1 { padding-left: var(--space-1); }

.pt-2 { padding-top: var(--space-2); }
.pr-2 { padding-right: var(--space-2); }
.pb-2 { padding-bottom: var(--space-2); }
.pl-2 { padding-left: var(--space-2); }

.pt-3 { padding-top: var(--space-3); }
.pr-3 { padding-right: var(--space-3); }
.pb-3 { padding-bottom: var(--space-3); }
.pl-3 { padding-left: var(--space-3); }

.pt-4 { padding-top: var(--space-4); }
.pr-4 { padding-right: var(--space-4); }
.pb-4 { padding-bottom: var(--space-4); }
.pl-4 { padding-left: var(--space-4); }

.pt-5 { padding-top: var(--space-5); }
.pr-5 { padding-right: var(--space-5); }
.pb-5 { padding-bottom: var(--space-5); }
.pl-5 { padding-left: var(--space-5); }

.pt-6 { padding-top: var(--space-6); }
.pr-6 { padding-right: var(--space-6); }
.pb-6 { padding-bottom: var(--space-6); }
.pl-6 { padding-left: var(--space-6); }

.pt-7 { padding-top: var(--space-7); }
.pr-7 { padding-right: var(--space-7); }
.pb-7 { padding-bottom: var(--space-7); }
.pl-7 { padding-left: var(--space-7); }