/*
 * Stapel und Fläche einer Reihe.
 *
 * Gemeinsam.
 * Die Zahl im Namen ist die Ladereihenfolge — bei CSS zählt sie.
 */

/*
 * Ein Stapel ist reine Struktur: er ordnet seine Reihen untereinander und
 * bringt selbst keinen Abstand mit — den setzen die Reihen über .spo-grid.
 * Deshalb sieht ein Stapel in einer Spalte genauso aus wie vorher die Reihe,
 * die dort unmittelbar lag; der zusätzliche Rahmen ändert nichts.
 */
.spo-group {
    width: 100%;
}

/*
 * Fläche einer Reihe. Breite und Ausrichtung kommen als Inline-CSS aus
 * ColumnsMaxWidth und ColumnsAlign, hier steht nur, was für alle gilt.
 */
/*
 * Der Abstand trennt Reihen voneinander, steht also zwischen ihnen und nicht
 * vor der ersten — sonst rückte jeder Stapel als Ganzes nach unten, und
 * verschachtelte Stapel summierten den Versatz mit jeder Ebene.
 */
.spo-columns {
    width: 100%;
    margin-top: 10px;
}

.spo-columns:first-child {
    margin-top: 0;
}

/*
 * Überschrift über einer Reihe – im Design die Zeile über der
 * Personen-Auswahl ("ICH ERLEBE ST. PETER-ORDING & EIDERSTEDT").
 */
.spo-columns-title {
    margin-top: 20px;
    font-size: calc(11px - var(--spo-text-shrink));
    font-weight: 700;
    letter-spacing: .15em;
    /*
     * Kein `text-transform`: die Großbuchstaben des Designs gehören der
     * Aufschrift. Wer die Zeile in Versalien will, tippt sie so — und wer eine
     * gemischte will, bekommt sie und nicht das Geschrei des Stylesheets.
     */
    color: var(--spo-blue-dark);
}

.spo-columns-title + .spo-grid {
    margin-top: 9px;
}