/* ==========================================================================
   Grid & Utilities
   Moderner, schlanker Ersatz fuer Bootstrap 3 - gleiche Klassennamen
   (.container-fluid, .row, .col-xs-N/.col-sm-N/.col-md-N/.col-lg-N,
   .col-sm-offset-N, .hidden-xs, .visible-xs, .pull-right, .clearfix,
   .navbar-brand, .navbar-header), damit an den Twig-Templates nichts
   geaendert werden musste.

   WICHTIG: Die Templates setzen die Spalten als direkte Geschwister OHNE
   umschliessendes .row-Element (z.B. homepage.twig: .col-left.col-sm-7
   direkt neben .col-right.col-sm-3). Das funktioniert nur mit klassischem
   CSS-Float + Prozentbreite (wie im echten Bootstrap 3) - mit Flexbox
   wuerden alle Templates ein .row-Eltern-Element benoetigen, das es hier
   nicht gibt. Technik daher bewusst: Float-Grid, kein Flexbox-Grid.

   Breakpoints (identisch zur alten Bootstrap-Konfiguration):
     xs: < 768px | sm: >= 768px | md: >= 992px | lg: >= 1200px
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

.container {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.71rem;
    padding-right: 0.71rem;
}

.container-fluid {
    width: 100%;
    max-width: 1570px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.71rem;
    padding-right: 0.71rem;
}

.row {
    margin-left: -0.71rem;
    margin-right: -0.71rem;
}
.row::after {
    content: "";
    display: table;
    clear: both;
}

/* Grid-Spalten: 12-Spalten-System per Float (wie Bootstrap 3).
   WICHTIG: float/width gehoeren IMMER zusammen im selben Breakpoint (wie im
   echten Bootstrap 3) - nicht als unconditional Basis-Regel. Templates
   benutzen teils NUR .col-sm-4 ohne passendes .col-xs-12 (z.B. Bildspalten
   bei Gruppen & Initiativen) - solche Elemente sollen auf Mobile ganz normal
   als Block volle Breite einnehmen (Bootstrap-Mobile-First-Fallback), nicht
   schon vorher schweben/schrumpfen. */
[class^="col-"], [class*=" col-"] {
    position: relative;
    min-height: 1px;
    padding-left: 0.71rem;
    padding-right: 0.71rem;
}

.col-xs-1  { float: left; width: 8.3333%; }
.col-xs-2  { float: left; width: 16.6667%; }
.col-xs-3  { float: left; width: 25%; }
.col-xs-4  { float: left; width: 33.3333%; }
.col-xs-5  { float: left; width: 41.6667%; }
.col-xs-6  { float: left; width: 50%; }
.col-xs-7  { float: left; width: 58.3333%; }
.col-xs-8  { float: left; width: 66.6667%; }
.col-xs-9  { float: left; width: 75%; }
.col-xs-10 { float: left; width: 83.3333%; }
.col-xs-11 { float: left; width: 91.6667%; }
.col-xs-12 { float: left; width: 100%; }
.col-xs-offset-1  { margin-left: 8.3333%; }
.col-xs-offset-2  { margin-left: 16.6667%; }
.col-xs-offset-3  { margin-left: 25%; }
.col-xs-offset-4  { margin-left: 33.3333%; }
.col-xs-offset-5  { margin-left: 41.6667%; }
.col-xs-offset-6  { margin-left: 50%; }

@media (min-width: 768px) {
    .col-sm-1  { float: left; width: 8.3333%; }
    .col-sm-2  { float: left; width: 16.6667%; }
    .col-sm-3  { float: left; width: 25%; }
    .col-sm-4  { float: left; width: 33.3333%; }
    .col-sm-5  { float: left; width: 41.6667%; }
    .col-sm-6  { float: left; width: 50%; }
    .col-sm-7  { float: left; width: 58.3333%; }
    .col-sm-8  { float: left; width: 66.6667%; }
    .col-sm-9  { float: left; width: 75%; }
    .col-sm-10 { float: left; width: 83.3333%; }
    .col-sm-11 { float: left; width: 91.6667%; }
    .col-sm-12 { float: left; width: 100%; }
    .col-sm-offset-1  { margin-left: 8.3333%; }
    .col-sm-offset-2  { margin-left: 16.6667%; }
    .col-sm-offset-3  { margin-left: 25%; }
    .col-sm-offset-4  { margin-left: 33.3333%; }
    .col-sm-offset-5  { margin-left: 41.6667%; }
    .col-sm-offset-6  { margin-left: 50%; }
    .col-sm-offset-0  { margin-left: 0; }
}

@media (min-width: 992px) {
    .col-md-1  { float: left; width: 8.3333%; }
    .col-md-2  { float: left; width: 16.6667%; }
    .col-md-3  { float: left; width: 25%; }
    .col-md-4  { float: left; width: 33.3333%; }
    .col-md-5  { float: left; width: 41.6667%; }
    .col-md-6  { float: left; width: 50%; }
    .col-md-7  { float: left; width: 58.3333%; }
    .col-md-8  { float: left; width: 66.6667%; }
    .col-md-9  { float: left; width: 75%; }
    .col-md-10 { float: left; width: 83.3333%; }
    .col-md-11 { float: left; width: 91.6667%; }
    .col-md-12 { float: left; width: 100%; }
    .col-md-offset-1  { margin-left: 8.3333%; }
    .col-md-offset-2  { margin-left: 16.6667%; }
    .col-md-offset-3  { margin-left: 25%; }
    .col-md-offset-4  { margin-left: 33.3333%; }
}

@media (min-width: 1200px) {
    .col-lg-1  { float: left; width: 8.3333%; }
    .col-lg-2  { float: left; width: 16.6667%; }
    .col-lg-3  { float: left; width: 25%; }
    .col-lg-4  { float: left; width: 33.3333%; }
    .col-lg-5  { float: left; width: 41.6667%; }
    .col-lg-6  { float: left; width: 50%; }
    .col-lg-7  { float: left; width: 58.3333%; }
    .col-lg-8  { float: left; width: 66.6667%; }
    .col-lg-9  { float: left; width: 75%; }
    .col-lg-10 { float: left; width: 83.3333%; }
    .col-lg-11 { float: left; width: 91.6667%; }
    .col-lg-12 { float: left; width: 100%; }
}

/* Sichtbarkeits-Utilities (exakte Bootstrap-3-Klassennamen, da so in den Templates verwendet).
   !important ist hier bewusst (wie im echten Bootstrap 3), da diese Utility-
   Klassen component-spezifische Regeln wie ".nav-primary .nav-primary-row"
   (display: table-row) zuverlaessig ueberschreiben muessen. */
.visible-xs-block,
.visible-xs {
    display: none !important;
}
@media (max-width: 767px) {
    .visible-xs-block,
    .visible-xs {
        display: block !important;
    }
}
@media (max-width: 767px) {
    .hidden-xs { display: none !important; }
}

.pull-right { float: right; }
.pull-left  { float: left; }

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-brand {
    display: inline-block;
    margin: 0.24rem 0.71rem;
}