:root {
	--gap: 40px;
	--gap-inner: 20px;
	--no-gap: 0;
}

/* =============================================
### GRID SETTINGS
================================================ */

.container-fluid-outer {
	width: 100%;
	min-height: auto;
}

.container-fluid-inner {
	max-width: 1600px;
	height: auto;
	display: block;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

.container-fluid-inner.padding-tb {
	padding-top: 75px;
	padding-bottom: 75px;
}
.container-fluid-inner.padding-t {
	padding-top: 75px;
}
.container-fluid-inner.padding-b {
	padding-bottom: 75px;
}

.equal {
	display: flex;
}

.equal > .row > [class^="col-"] {
	display: flex;
	flex-direction: column;
}

.equal .inner {
	height: 100%;
}

.row [class^="col-"] .inner,
.row [class^=" col-"] .inner {
	padding: var(--gap-inner);
	
}

.row [class^="col-"] .inner.no-gap,
.row [class^=" col-"] .inner.no-gap {
	padding: var(--no-gap);
}

/* Flexbox Row Layout */
.row {
	display: flex;
	flex-wrap: wrap; /* Ermöglicht das Umbruchverhalten */
	

}
.row.no-gap > [class^="col-"] {
    padding: var(--no-gap); !important;
}





/* Standard Flexbox Spaltenbreiten */
.row > [class^="col-"] {
	position: relative;
    flex-shrink: 0; /* Verhindert Wachstum */
	flex-basis: auto;
 	padding: calc(var(--gap) / 2); /* Horizontaler Abstand innerhalb der Spalten */
	box-sizing: border-box;
}


/* Anpassungen der Flex-Basisbreite für verschiedene Spalten */
.row .col-xs-12 { flex: 0 0 100%; max-width: 100%; }
.row .col-xs-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; }
.row .col-xs-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; }
.row .col-xs-9  { flex: 0 0 75%; max-width: 75%; }
.row .col-xs-8  { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
.row .col-xs-7  { flex: 0 0 58.33333333%; max-width: 58.33333333%; }
.row .col-xs-6  { flex: 0 0 50%; max-width: 50%; }
.row .col-xs-5  { flex: 0 0 41.66666667%; max-width: 41.66666667%; }
.row .col-xs-4  { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
.row .col-xs-3  { flex: 0 0 25%; max-width: 25%; }
.row .col-xs-2  { flex: 0 0 16.66666667%; max-width: 16.66666667%; }
.row .col-xs-1  { flex: 0 0 8.33333333%; max-width: 8.33333333%; }


/* Pull-Klassen mit `margin-right` für Flexbox */

.row .col-xs-pull-12 { margin-right: 100%; }
.row .col-xs-pull-11 { margin-right: 91.66666667%; }
.row .col-xs-pull-10 { margin-right: 83.33333333%; }
.row .col-xs-pull-9  { margin-right: 75%; }
.row .col-xs-pull-8  { margin-right: 66.66666667%; }
.row .col-xs-pull-7  { margin-right: 58.33333333%; }
.row .col-xs-pull-6  { margin-right: 50%; }
.row .col-xs-pull-5  { margin-right: 41.66666667%; }
.row .col-xs-pull-4  { margin-right: 33.33333333%; }
.row .col-xs-pull-3  { margin-right: 25%; }
.row .col-xs-pull-2  { margin-right: 16.66666667%; }
.row .col-xs-pull-1  { margin-right: 8.33333333%; }
.row .col-xs-pull-0  { margin-right: 0; }

/* Offset-Klassen für Flexbox */
.row .col-xs-offset-12 { margin-left: 100%; }
.row .col-xs-offset-11 { margin-left: 91.66666667%; }
.row .col-xs-offset-10 { margin-left: 83.33333333%; }
.row .col-xs-offset-9  { margin-left: 75%; }
.row .col-xs-offset-8  { margin-left: 66.66666667%; }
.row .col-xs-offset-7  { margin-left: 58.33333333%; }
.row .col-xs-offset-6  { margin-left: 50%; }
.row .col-xs-offset-5  { margin-left: 41.66666667%; }
.row .col-xs-offset-4  { margin-left: 33.33333333%; }
.row .col-xs-offset-3  { margin-left: 25%; }
.row .col-xs-offset-2  { margin-left: 16.66666667%; }
.row .col-xs-offset-1  { margin-left: 8.33333333%; }
.row .col-xs-offset-0  { margin-left: 0; }

/* Responsive Anpassung für Flex-Basisbreiten */
@media (max-width: 767px) {
	.row > [class^="col-"] {
		flex: 1 1 100%; } /* 100% Breite auf kleinen Bildschirmen */
}

/* Anpassungen für mittlere und größere Bildschirme */
@media (min-width: 768px) {
	.row .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
	.row .col-sm-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; }
	.row .col-sm-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; }
	.row .col-sm-9  { flex: 0 0 75%; max-width: 75%; }
	.row .col-sm-8  { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
	.row .col-sm-7  { flex: 0 0 58.33333333%; max-width: 58.33333333%; }
	.row .col-sm-6  { flex: 0 0 50%; max-width: 50%; }
	.row .col-sm-5  { flex: 0 0 41.66666667%; max-width: 41.66666667%; }
	.row .col-sm-4  { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
	.row .col-sm-3  { flex: 0 0 25%; max-width: 25%; }
	.row .col-sm-2  { flex: 0 0 16.66666667%; max-width: 16.66666667%; }
	.row .col-sm-1  { flex: 0 0 8.33333333%; max-width: 8.33333333%; }

	/* Offset-Klassen für sm */
	.row .col-sm-offset-12 { margin-left: 100%; }
	.row .col-sm-offset-11 { margin-left: 91.66666667%; }
	.row .col-sm-offset-10 { margin-left: 83.33333333%; }
	.row .col-sm-offset-9  { margin-left: 75%; }
	.row .col-sm-offset-8  { margin-left: 66.66666667%; }
	.row .col-sm-offset-7  { margin-left: 58.33333333%; }
	.row .col-sm-offset-6  { margin-left: 50%; }
	.row .col-sm-offset-5  { margin-left: 41.66666667%; }
	.row .col-sm-offset-4  { margin-left: 33.33333333%; }
	.row .col-sm-offset-3  { margin-left: 25%; }
	.row .col-sm-offset-2  { margin-left: 16.66666667%; }
	.row .col-sm-offset-1  { margin-left: 8.33333333%; }
	.row .col-sm-offset-0  { margin-left: 0; }
	
	.row .col-sm-pull-12 { margin-right: 100%; }
	.row .col-sm-pull-11 { margin-right: 91.66666667%; }
	.row .col-sm-pull-10 { margin-right: 83.33333333%; }
	.row .col-sm-pull-9  { margin-right: 75%; }
	.row .col-sm-pull-8  { margin-right: 66.66666667%; }
	.row .col-sm-pull-7  { margin-right: 58.33333333%; }
	.row .col-sm-pull-6  { margin-right: 50%; }
	.row .col-sm-pull-5  { margin-right: 41.66666667%; }
	.row .col-sm-pull-4  { margin-right: 33.33333333%; }
	.row .col-sm-pull-3  { margin-right: 25%; }
	.row .col-sm-pull-2  { margin-right: 16.66666667%; }
	.row .col-sm-pull-1  { margin-right: 8.33333333%; }
	.row .col-sm-pull-0  { margin-right: 0; }
}

@media (min-width: 992px) {
	.row .col-md-12 { flex: 0 0 100%; max-width: 100%; }
	.row .col-md-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; }
	.row .col-md-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; }
	.row .col-md-9  { flex: 0 0 75%; max-width: 75%; }
	.row .col-md-8  { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
	.row .col-md-7  { flex: 0 0 58.33333333%; max-width: 58.33333333%; }
	.row .col-md-6  { flex: 0 0 50%; max-width: 50%; }
	.row .col-md-5  { flex: 0 0 41.66666667%; max-width: 41.66666667%; }
	.row .col-md-4  { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
	.row .col-md-3  { flex: 0 0 25%; max-width: 25%; }
	.row .col-md-2  { flex: 0 0 16.66666667%; max-width: 16.66666667%; }
	.row .col-md-1  { flex: 0 0 8.33333333%; max-width: 8.33333333%; }

	/* Offset-Klassen für md */
	.row .col-md-offset-12 { margin-left: 100%; }
	.row .col-md-offset-11 { margin-left: 91.66666667%; }
	.row .col-md-offset-10 { margin-left: 83.33333333%; }
	.row .col-md-offset-9  { margin-left: 75%; }
	.row .col-md-offset-8  { margin-left: 66.66666667%; }
	.row .col-md-offset-7  { margin-left: 58.33333333%; }
	.row .col-md-offset-6  { margin-left: 50%; }
	.row .col-md-offset-5  { margin-left: 41.66666667%; }
	.row .col-md-offset-4  { margin-left: 33.33333333%; }
	.row .col-md-offset-3  { margin-left: 25%; }
	.row .col-md-offset-2  { margin-left: 16.66666667%; }
	.row .col-md-offset-1  { margin-left: 8.33333333%; }
	.row .col-md-offset-0  { margin-left: 0; }
	
	.row .col-md-pull-12 { margin-right: 100%; }
	.row .col-md-pull-11 { margin-right: 91.66666667%; }
	.row .col-md-pull-10 { margin-right: 83.33333333%; }
	.row .col-md-pull-9  { margin-right: 75%; }
	.row .col-md-pull-8  { margin-right: 66.66666667%; }
	.row .col-md-pull-7  { margin-right: 58.33333333%; }
	.row .col-md-pull-6  { margin-right: 50%; }
	.row .col-md-pull-5  { margin-right: 41.66666667%; }
	.row .col-md-pull-4  { margin-right: 33.33333333%; }
	.row .col-md-pull-3  { margin-right: 25%; }
	.row .col-md-pull-2  { margin-right: 16.66666667%; }
	.row .col-md-pull-1  { margin-right: 8.33333333%; }
	.row .col-md-pull-0  { margin-right: 0; }
}

@media (min-width: 1200px) {
	.row .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
.row .col-lg-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; }
.row .col-lg-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; }
.row .col-lg-9  { flex: 0 0 75%; max-width: 75%; }
.row .col-lg-8  { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
.row .col-lg-7  { flex: 0 0 58.33333333%; max-width: 58.33333333%; }
.row .col-lg-6  { flex: 0 0 50%; max-width: 50%; }
.row .col-lg-5  { flex: 0 0 41.66666667%; max-width: 41.66666667%; }
.row .col-lg-4  { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
.row .col-lg-3  { flex: 0 0 25%; max-width: 25%; }
.row .col-lg-2  { flex: 0 0 16.66666667%; max-width: 16.66666667%; }
.row .col-lg-1  { flex: 0 0 8.33333333%; max-width: 8.33333333%; }


	/* Offset-Klassen für lg */
	.row .col-lg-offset-12 { margin-left: 100%; }
	.row .col-lg-offset-11 { margin-left: 91.66666667%; }
	.row .col-lg-offset-10 { margin-left: 83.33333333%; }
	.row .col-lg-offset-9  { margin-left: 75%; }
	.row .col-lg-offset-8  { margin-left: 66.66666667%; }
	.row .col-lg-offset-7  { margin-left: 58.33333333%; }
	.row .col-lg-offset-6  { margin-left: 50%; }
	.row .col-lg-offset-5  { margin-left: 41.66666667%; }
	.row .col-lg-offset-4  { margin-left: 33.33333333%; }
	.row .col-lg-offset-3  { margin-left: 25%; }
	.row .col-lg-offset-2  { margin-left: 16.66666667%; }
	.row .col-lg-offset-1  { margin-left: 8.33333333%; }
	.row .col-lg-offset-0  { margin-left: 0; }
	
	.row .col-lg-pull-12 { margin-right: 100%; }
	.row .col-lg-pull-11 { margin-right: 91.66666667%; }
	.row .col-lg-pull-10 { margin-right: 83.33333333%; }
	.row .col-lg-pull-9  { margin-right: 75%; }
	.row .col-lg-pull-8  { margin-right: 66.66666667%; }
	.row .col-lg-pull-7  { margin-right: 58.33333333%; }
	.row .col-lg-pull-6  { margin-right: 50%; }
	.row .col-lg-pull-5  { margin-right: 41.66666667%; }
	.row .col-lg-pull-4  { margin-right: 33.33333333%; }
	.row .col-lg-pull-3  { margin-right: 25%; }
	.row .col-lg-pull-2  { margin-right: 16.66666667%; }
	.row .col-lg-pull-1  { margin-right: 8.33333333%; }
	.row .col-lg-pull-0  { margin-right: 0; }
}

/* ROW STYLING */
.vertical-line {
	border-left: 10px solid var(--trans);
}
.vertical-line.trans {
	border-color: var(--trans);
}
.vertical-line.white {
	border-color: var(--white);
}
.vertical-line.black {
	border-color: var(--black);
}
.vertical-line.blue {
	border-color: var(--blue);
}
.vertical-line.turq {
	border-color: var(--turq);
}



/* Sichtbarkeitseinstellungen */
@media (max-width: 767px) {
	.hidden-xs { display: none !important; }
	.row.flexx-hosting-box > [class^="col-"] {
	 	padding: 0 0; 
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.hidden-sm { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
	.hidden-md { display: none !important; }
}

@media (min-width: 1200px) {
	.hidden-lg { display: none !important; }
}