/*
 * Stufen der Wertschoepfungskette — mitgelieferte Grundstile.
 *
 * Reines CSS, kein Build noetig. Alle Werte ueber var() mit Rueckfallwert,
 * damit Projektangaben immer gewinnen — unabhaengig von der Ladereihenfolge.
 */

.cb-kette-innen {
    padding-block: var(--cb-kette-padding-block, clamp(2.5rem, 6vw, 4.25rem));
}

/* Kopfzeile: zwei Dachzeilen, aussen ausgerichtet. */
.cb-kette-kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .3rem 1rem;
    padding-bottom: 1.25rem;
}

/* ⚠ Die Klasse muss unabhaengig vom Element wirken.
 *
 * Seit dem 28.08.2026 traegt die Kopfzeile ein <h2> statt eines <p> — sonst
 * sprang die Gliederung der Startseite von h1 auf h3. Bootstrap gibt
 * Ueberschriften aber font-weight und line-height mit, ein <p> nicht. Ohne die
 * beiden Zeilen unten waere die Dachzeile mit dem Tagwechsel fett geworden.
 *
 * Deshalb setzt die Klasse beides ausdruecklich, statt sich auf die
 * Voreinstellung des Elements zu verlassen. */
.cb-kette-dachzeile {
    margin: 0;
    font-weight: var(--cb-kette-dachzeile-weight, 400);
    line-height: var(--cb-kette-dachzeile-line-height, 1.4);
    font-family: var(--cb-kette-mono, var(--bs-font-monospace));
    font-size: var(--cb-kette-dachzeile-size, .7rem);
    letter-spacing: var(--cb-kette-dachzeile-spacing, .14em);
    text-transform: uppercase;
    color: var(--cb-kette-dachzeile-color, var(--bs-tertiary-color));
}

/* Eine Spalte, ab md zwei, ab lg vier. */
.cb-kette-liste {
    display: grid;
    gap: var(--cb-kette-gap, 1.5rem);
}

@media (min-width: 48em) {
    .cb-kette-liste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--cb-kette-gap-md, 1.75rem);
    }
}

@media (min-width: 62em) {
    .cb-kette-liste {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.cb-kette-stufe {
    display: grid;
    gap: .75rem;
    align-content: start;
}

.cb-kette-bild {
    position: relative;
    display: block;
}

.cb-kette-bild :is(img, picture) {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--cb-kette-rule, var(--bs-border-color));
}

/*
 * Nummer und Bezeichnung als Schild an der unteren linken Bildkante.
 *
 * aria-hidden waere falsch: die Angabe steht so nirgends sonst. Sie
 * wiederholt zwar den Titel darunter, nennt aber zusaetzlich die Stufe in
 * der Reihenfolge — und genau das traegt die Aussage des Abschnitts.
 */
.cb-kette-nummer {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: .35rem .65rem;
    background: var(--cb-kette-schild-bg, #083A2D);
    color: var(--cb-kette-schild-color, #FFFFFF);
    font-family: var(--cb-kette-mono, var(--bs-font-monospace));
    font-size: .86rem;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
}

.cb-kette-titel {
    margin: 0;
    font-size: var(--cb-kette-titel-size, 1.22rem);
}

.cb-kette-text {
    margin: 0;
    font-size: var(--cb-kette-text-size, .95rem);
    color: var(--cb-kette-text-color, var(--bs-secondary-color));
}