/* Spalten-Container (b13/container) — Abschnitt mit optionalem Kopf und Spalten-Grid */

/* Kopf (identisch mit ueberschrift-linie). Flex/Rechts-Link/Subheader kommen
   aus base.css: .cb-kopf, .cb-kopf-rechts, .cb-subheader */
.container__kopf { margin: 0 0 24px; }
.container__titel { gap: 24px; margin: 0; }
.container__titel .container__haupt .claim { font-weight: 600; }
.container__titel .container__haupt .kicker { display: block; }
.container__titel .container__haupt .claim { display: block; }
.container__sub { flex: none; }
.container__linie { border: 0; border-top: 1px solid var(--linie); margin: 10px 0 0; }

/* Abstand nach unten — wie nach den übrigen Elementen */
.container { margin-bottom: 2.5rem; }

/* Grid */
.container__grid { display: grid; gap: var(--container-gap, 2rem); }

.container__grid.layout-50-50       { grid-template-columns: 1fr 1fr; }
.container__grid.layout-40-60       { grid-template-columns: 2fr 3fr; }
.container__grid.layout-60-40       { grid-template-columns: 3fr 2fr; }
.container__grid.layout-33-33-33    { grid-template-columns: 1fr 1fr 1fr; }
.container__grid.layout-25-25-25-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* Spalten oben bündig: erstes Element jeder Spalte ohne Top-Margin
   (figure hat 20px, bodytext-p die Browser-Default ~16px → sonst versetzt) */
.container__spalte figure,
.container__spalte .ce-bodytext > :first-child { margin-top: 0; }

/* Responsive: bis 767 px einspaltig.
   Spezifität muss die layout-* Selektoren (zwei Klassen) erreichen,
   sonst gewinnt 1fr 1fr / 2fr 3fr trotz Media Query. */
@media (max-width: 767px) {
    .container__grid.layout-50-50,
    .container__grid.layout-40-60,
    .container__grid.layout-60-40,
    .container__grid.layout-33-33-33,
    .container__grid.layout-25-25-25-25 { grid-template-columns: 1fr; }

    /* Umkehr-Schalter (nur Zweispalter): rechte Spalte zuerst, dann links.
       column-reverse statt grid, weil das Grid hier ohnehin einspaltig ist und
       genau zwei .container__spalte enthält. gap bleibt erhalten. */
    .container__grid--reverse-mobile { display: flex; flex-direction: column-reverse; }
}

/* -------------------------------------------------------------------------
   Kasten (einspaltiger Container, optional mit Farbhintergrund)
   Werte aus Entwurf-2 (.newsletter / .serie): radius 10px, padding 32/36.
   Ohne Farb-Modifier ist .kasten transparent und ohne Innenabstand —
   optisch wie ein normaler einspaltiger Container.
   ------------------------------------------------------------------------- */
.kasten--papier,
.kasten--karton,
.kasten--rot-hauch {
    border-radius: 10px;
    padding: 32px 36px;
}

.kasten--papier    { background: var(--papier); }
.kasten--karton    { background: var(--karton); }
.kasten--rot-hauch { background: var(--rot-hauch); }

/* Letztes Element im Kasten ohne Rest-Marge, damit das Padding sauber sitzt */
.kasten--papier > :last-child,
.kasten--karton > :last-child,
.kasten--rot-hauch > :last-child,
.kasten--papier .frame:last-child > :last-child,
.kasten--karton .frame:last-child > :last-child,
.kasten--rot-hauch .frame:last-child > :last-child { margin-bottom: 0; }

@media (max-width: 767px) {
    .kasten--papier,
    .kasten--karton,
    .kasten--rot-hauch { padding: 24px 22px; }
}

/* -------------------------------------------------------------------------
   Kasten-Optionen — zwei unabhängige Hebel, frei mit jeder Farbe kombinierbar.

   schmal  Reduzierte Breite (Lesebreite), linksbündig an der Textspalte.
           max-width (kein festes width) → kollabiert auf Mobile von selbst
           auf volle Breite, keine eigene Media Query nötig.
   kante   Roter Akzentstreifen links. Zieht zugleich die linken Ecken auf
           eckig — sonst träfe der gerade Streifen auf eine runde Ecke und
           wirkte gebrochen. Werte aus Entwurf (.abo / .cta-haupt): 3px.
   ------------------------------------------------------------------------- */
.kasten--schmal { max-width: 760px; }

.kasten--kante {
    border-left: 3px solid var(--rot);
    border-radius: 0 10px 10px 0;
}