/*
 * Leistungszeile — mitgelieferte Grundstile.
 *
 * Reines CSS, kein Build noetig. Alle Werte ueber var() mit Rueckfallwert,
 * damit Projektangaben immer gewinnen — unabhaengig von der Ladereihenfolge.
 * Deshalb hier KEINE Variablen auf der Wurzel.
 *
 * Die Trennlinien entstehen aus der Nachbarschaft: jede Zeile bekommt eine
 * Linie oben, die letzte zusaetzlich eine unten. So bleibt die Liste
 * richtig, egal wie viele Zeilen die Redaktion setzt oder umsortiert.
 */

.cb-service-row {
    position: relative;          /* Bezug fuer die Sprungmarke, siehe unten */
    display: grid;
    gap: var(--cb-service-row-gap, .7rem);
    padding-block: var(--cb-service-row-padding-block, 1.6rem);
    border-top: 1px solid var(--cb-service-row-rule, var(--bs-border-color));
}

/*
 * Jede Zeile bekommt ihre Linie oben, die letzte zusaetzlich eine unten.
 * Dadurch stimmt die Liste, egal wie viele Zeilen die Redaktion setzt,
 * sortiert oder loescht — ohne dass ein Element wissen muss, ob es das
 * letzte ist.
 */
.cb-service-row:last-child {
    border-bottom: 1px solid var(--cb-service-row-rule, var(--bs-border-color));
}

/*
 * ⚠ Die Sprungmarke MUSS aus dem Raster heraus.
 *
 * Das SiteKit setzt als erstes Kind ein leeres <span class="anchor"> fuer
 * die Sprungziele. Als Rasterkind belegt es eine Zelle — und dann verschiebt
 * sich alles dahinter. Gemessen 19.08.2026 auf der Startseite:
 *
 *   Verweis   x=447   statt in der Textspalte (x=730) — er lag in der
 *                     SYMBOLspalte, unter dem Symbol
 *   Symbolspalte      259 px statt 46 px, und je Zeile verschieden breit,
 *                     weil "auto" sich am breitesten Kind ausrichtet
 *
 * position: absolute nimmt es aus dem Fluss, ohne es zu verstecken. Mit
 * display: none waere es kein zuverlaessiges Sprungziel mehr.
 */
.cb-service-row > .anchor {
    position: absolute;
    top: 0;
    left: 0;
}

@media (min-width: 40em) {
    .cb-service-row {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--cb-service-row-column-gap, 1.5rem);
    }

    /*
     * Ausdrueckliche Platzierung statt automatischer. Die automatische haengt
     * an der Zahl und Reihenfolge der Kinder — kommt eines dazu, rutscht die
     * ganze Zeile. Genau daran ist die erste Fassung gescheitert.
     */
    .cb-service-row-icon {
        grid-column: 1;
        grid-row: 1 / span 3;
    }

    .cb-service-row-heading,
    .cb-service-row-text,
    .cb-service-row-link {
        grid-column: 2;
    }
}

.cb-service-row-icon {
    display: grid;
    place-items: center;
    width: var(--cb-service-row-icon-size, 46px);
    height: var(--cb-service-row-icon-size, 46px);
    border-radius: var(--cb-service-row-radius, 2px);
    background: var(--cb-service-row-icon-bg, var(--bs-secondary-bg));
    color: var(--cb-service-row-icon-color, var(--bs-link-color));
    font-size: var(--cb-service-row-icon-glyph, 1.35rem);
    line-height: 1;
}

.cb-service-row-heading {
    margin: 0;
    font-size: var(--cb-service-row-heading-size, 1.28rem);
}

.cb-service-row-text {
    color: var(--cb-service-row-text-color, var(--bs-secondary-color));
    font-size: var(--cb-service-row-text-size, .99rem);
    max-width: var(--cb-service-row-measure, 54ch);
}

.cb-service-row-text > :last-child {
    margin-bottom: 0;
}

.cb-service-row-link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 24px;
    color: var(--cb-service-row-link-color, var(--bs-link-color));
    font-family: var(--cb-service-row-sans, var(--bs-font-sans-serif));
    font-size: var(--cb-service-row-link-size, .9rem);
    font-weight: 600;
    text-decoration: none;
}

.cb-service-row-link::after {
    /* Pfeil als Maske, damit er die Schriftfarbe uebernimmt und den
       Farbmodus mitmacht. Beide Schreibweisen aus DERSELBEN Quelle —
       zwei getippte Pfade laufen auseinander, und genau das war beim
       ersten Versuch passiert. */
    content: "";
    width: .8em;
    height: .8em;
    background-color: currentColor;
    mask-image: var(--cb-service-row-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='black'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E"));
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: var(--cb-service-row-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='black'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E"));
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.cb-service-row-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}