@charset "UTF-8";

/* ---------------------------------------------------------------------------
   Kachel-Layouts RB_2-Kacheln, RB_3-Kacheln, RB_4-Kacheln (DMZ-18128).

   Jede Kachel ist ein eigenes sf_colsIn und bekommt dadurch im Layout-Dialog
   ein eigenes Klassenfeld fuer die Hintergrundfarbe (color-background-*).
   Die Regeln haengen an .grid-tiles auf der .row: Klassen an der Kachel selbst
   stehen im Redakteursfeld und koennen dort geloescht werden.

   Werte wie Gutter und .section-group im UI-Kit: 16px, ab 768px 24px.
   Wird per <link> aus den Templates geladen, im Editor und im Frontend.
   --------------------------------------------------------------------------- */

/* Gleich hohe Kacheln: .grid-content ist im UI-Kit eine Flex-Spalte. */
.grid-tiles > .grid-content > .sf_colsIn {
    flex: 1 1 auto;
}

/* Innenabstand nur bei farbiger Kachel, wie bei farbigen Sektionen im UI-Kit. */
.grid-tiles > .grid-content > .sf_colsIn[class*="color-"] {
    padding: 16px;
}

/* Abstand zwischen den Widgets einer Kachel; das letzte bringt keinen
   eigenen Abstand mit, sonst waere unten mehr Platz als oben. */
.grid-tiles > .grid-content > .sf_colsIn > *:not(:last-child) {
    margin-bottom: 16px;
}

.grid-tiles > .grid-content > .sf_colsIn > *:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .grid-tiles > .grid-content > .sf_colsIn[class*="color-"] {
        padding: 24px;
    }

    .grid-tiles > .grid-content > .sf_colsIn > *:not(:last-child) {
        margin-bottom: 24px;
    }
}