/* Grid-Style */

.container {
	display: flex;   
	flex-wrap: wrap;   
	width: 1200px;
	margin: 0 auto;
	/*margin-left: -10px;  
	margin-right: -10px;*/
}

/* Grid-Spalten: Standard-Spaltenbreite wird prozentual festgelegt */
[class*="col-"] {
  padding-left: 10px; /* Innerer Abstand (Padding) für die Spalten */
  padding-right: 10px;
  box-sizing: border-box; /* Um sicherzustellen, dass Padding zum Spalteninhalt gehört */
}

/* Flexbox Spalten mit entsprechenden Prozent-Breiten */
.col-10 { flex: 0 0 10%; }
.col-20 { flex: 0 0 20%; }
.col-25 { flex: 0 0 25%; }
.col-30 { flex: 0 0 30%; }
.col-33 { flex: 0 0 33%; }
.col-40 { flex: 0 0 40%; }
.col-50 { flex: 0 0 50%; }
.col-60 { flex: 0 0 60%; }
.col-70 { flex: 0 0 70%; }
.col-80 { flex: 0 0 80%; }
.col-90 { flex: 0 0 90%; }
.col-100 { flex: 0 0 100%; }

.inner-container, .full-container{
	display: flex;   
	flex-wrap: wrap;   
	margin-left: -10px;  
	margin-right: -10px;	
}
.inner-col-50 { flex: 0 0 50%; 
	padding-left: 10px; 
  padding-right: 10px;
  box-sizing: border-box;}

/* Responsive Verhalten: Anpassung an schmalere Bildschirme */
@media (max-width: 1210px) {
	.container {width: 100%;}
}

@media (max-width: 768px) {
  .col-10, .col-20, .col-25, .col-30, .col-33, .col-40, .col-50, .col-60, .col-70, .col-80, .col-90, .col-100,.inner-col-50 {
    flex: 0 0 100%; /* Spalten nehmen die volle Breite auf kleinen Bildschirmen */
  }
}