/* Schlankes Raster (Ersatz für Bootstrap 4, nur genutzte Klassen).
   Enthält zusätzlich eine kleine Kompatibilitätsschicht für Bootstrap-Klassen,
   die in bestehenden Seiteninhalten oder Widgets vorkommen können. */
.container, .container-fluid, .container-xl { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container, .container-xl { max-width: 1140px; } }

.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.row > [class*="col-"], .row > .col { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.col { flex: 1 0 0%; max-width: 100%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
	.col-sm-6  { flex: 0 0 50%;  max-width: 50%; }
	.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 768px) {
	.col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-md-6  { flex: 0 0 50%;        max-width: 50%; }
	.col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}
@media (min-width: 992px) {
	.col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
	.col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
	.col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-lg-9  { flex: 0 0 75%;        max-width: 75%; }
	.col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* Kompatibilität: häufige Bootstrap-Helfer */
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }
.img-fluid   { max-width: 100%; height: auto; }
.d-none      { display: none !important; }
.d-block     { display: block !important; }
@media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-block { display: block !important; } }