/* ============================================================
   BEREICHSTYP "SPALTEN"
   ============================================================

   Mehrere kurze Inhalte nebeneinander. Die Angaben je Spalte sind
   Label-Wert-Paare und tragen drei Fälle:

     Gegenüberstellung   weg von … / hin zu …
     Konditionen         Dauer / Preis / Zahlung
     Textspalten         ganz ohne Paare

   Breite und Position des Bereichs kommen aus section-layout.css.
   ============================================================ */


/* === KOPF UND EINLEITUNG === */

.columns-section__head {
    margin-bottom: 1.75rem;
    width: 100%;
}

.columns-section__intro {
    margin-bottom: 3rem;
    width: 100%;
}


/* === DAS RASTER ===

   Feste Spaltenzahl statt auto-fit: auto-fit füllt die Zeile mit so
   vielen Spalten, wie Platz haben – bei zwei Inhalten in einem breiten
   Bereich entstünde eine dritte, leere Spalte, und der Inhalt stünde
   gedrängt auf zwei Dritteln der Fläche.

   Wie viele Spalten tatsächlich gesetzt werden, begrenzt das Template
   zusätzlich auf die Zahl der gepflegten Inhalte: eine einzelne Spalte
   in einem Zweier-Raster bekäme sonst grundlos nur die halbe Breite. */

.column-grid {
    display: grid;
    gap: 2.5rem 3rem;
    width: 100%;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .column-grid--cols-2,
    .column-grid--cols-3,
    .column-grid--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Drei und vier nebeneinander erst, wenn die Spalte nicht zu schmal
   für einen lesbaren Satz wird. */
@media (min-width: 1100px) {
    .column-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .column-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.column__head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.column__title {
    margin: 0;
    font-size: var(--headline-s);
    line-height: 1.25;
    text-wrap: balance;
}

.column__text {
    line-height: 1.7;
}

.column__text > *:first-child { margin-top: 0; }
.column__text > *:last-child { margin-bottom: 0; }
.column__text p { margin: 0 0 0.75em; }


/* === ANGABEN === */

.column__facts {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0.25rem 0 0;
}

.fact {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.fact__label {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--foreground-04);
}

.fact__value {
    margin: 0;
    line-height: 1.4;
}


/* === VARIANTE "WANDEL" ===
   Für Gegenüberstellungen: der Ausgangspunkt bleibt zurückhaltend,
   das Ziel bekommt Gewicht. Eine Linie darüber trennt die Spalte
   sichtbar vom Nachbarn, ohne einen Kasten zu zeichnen. */

.column__facts--wandel {
    gap: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid hsla(var(--foreground-01-values), 0.15);
}

.column__facts--wandel .fact__value {
    color: var(--foreground-03);
}

.column__facts--wandel .fact--ziel .fact__value {
    font-size: var(--headline-s);
    line-height: 1.3;
    color: var(--headline-color, var(--foreground-01));
}


/* Damit die Trennlinien einer Reihe auf gleicher Höhe liegen, teilen
   sich die Spalten die Zeilen des Rasters: eine Zeile für Titel und
   Text, eine für die Angaben. Ohne das säße die Linie dort höher, wo
   die Überschrift einzeilig bleibt, und die Reihe wirkte unruhig.

   Ältere Browser ohne subgrid fallen auf die Flex-Darstellung zurück –
   dann stehen die Linien wieder unterschiedlich hoch, sonst ändert
   sich nichts. */
@media (min-width: 768px) {
    .column-grid--wandel {
        grid-template-rows: auto auto;
    }

    .column-grid--wandel .column {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        align-content: start;
        gap: 1.1rem;
    }
}


/* === AKZENTFLÄCHEN ===
   Die Schriftfarbe kommt auf eingefärbten Flächen aus
   backgrounds.css; hier zieht nur die Trennlinie nach. */

.extra-section--bg-akzent .column__facts--wandel,
.mta-bg--dark .column__facts--wandel {
    border-top-color: hsla(var(--background-05-values), 0.25);
}


/* === KLEINE BILDSCHIRME === */

@media (max-width: 767px) {
    .column-grid {
        gap: 2rem;
    }

    .columns-section__intro {
        margin-bottom: 2.25rem;
    }
}