/* ============================================================
   BLOCK: Leistungsdetail (Text + Karte) — Design Tokens
   Datei: page-builder/components/organisms/leistungsdetail/block.css
   Nachbau der Patterns leistungs-detail-text-links-karte-rechts und
   leistungs-detail-karte-links-text-rechts (phoenixseo-Kategorie).

   Karten-Optik übernimmt das Original-CSS (.phoenixseo-card aus
   css/custom-phoenixseo.css) mit Design-Tokens:

   Original → Token:
     background #f8f9fa           → var(--as-color-light) #f8fafc
       (fast identisch — Token-Quelle bevorzugt)
     Titel-Farbe #0f5283           → var(--as-color-accent-brand) #056ab4
       (dunkleres Blau → Marken-Blau; BEWUSSTE Abweichung, Token-Quelle bevorzugt)
     border-radius 0.25rem         → var(--as-radius)
     box-shadow 0 .125rem .25rem rgba(0,0,0,.075) → var(--as-shadow)

   KEINE erfundenen Farbwerte — nur Tokens oder dokumentierte Ausnahmen.
   Tokens kommen aus der zentralen Quelle (assets/tokens.css).
   ============================================================ */
@import "../../../assets/tokens.css" layer(sdc-tokens);

/* ============================================================
   .as-leistungsdetail — Sektion (fluide Padding wie media-text)
   ============================================================ */
.as-leistungsdetail {
    padding-top: clamp(1.875rem, 1.2159rem + 2.0625vw, 3.75rem);
    padding-bottom: clamp(1.25rem, 0.7159rem + 1.6667vw, 2.5rem);
}

/* ============================================================
   Grid — 2 Spalten 7fr/5fr (Text / Karte)
   ============================================================ */
.as-leistungsdetail__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(1.875rem, 1.2159rem + 2.0625vw, 3.75rem);
    align-items: center;
}

/* Nur Text (keine Karte): Text-Spalte volle Breite */
.as-leistungsdetail--no-card .as-leistungsdetail__grid {
    grid-template-columns: 1fr;
}

/* Kartenposition links (Desktop): Karte Spalte 1, Text Spalte 2 */
.as-leistungsdetail--card-left .as-leistungsdetail__card {
    order: -1;
}

/* ============================================================
   Text-Spalte
   ============================================================ */
.as-leistungsdetail__text {
    max-width: 680px; /* Lesebreite */
}

.as-leistungsdetail__title {
    margin-bottom: 1.5rem; /* wie Pattern (mb-4) */
}

.as-leistungsdetail__body {
    font-family: var(--as-font-body);
    font-size: clamp(0.875rem, 0.8409rem + 0.1042vw, 1rem);
    letter-spacing: 0.01em;
    line-height: 1.875;
    color: var(--as-color-text);
}

.as-leistungsdetail__body p {
    margin: 0 0 1em;
}

.as-leistungsdetail__body p:last-child {
    margin-bottom: 0;
}

.as-leistungsdetail__text .as-btn {
    margin-top: 1.5rem; /* wie Pattern (mt-4) */
}

/* ============================================================
   Karte (Nachbildung .phoenixseo-card mit Design-Tokens —
   Abweichungen siehe Header-Kommentar)
   ============================================================ */
.as-leistungsdetail__card {
    background: var(--as-color-light);
    padding: 1.5rem; /* p-4 */
    border-radius: var(--as-radius);
    box-shadow: var(--as-shadow);
}

.as-leistungsdetail__card-title {
    color: var(--as-color-accent-brand);
    font-size: 1.25rem; /* h5 */
    font-weight: 700;
    margin-bottom: 1rem; /* mb-3 */
}

.as-leistungsdetail__list {
    padding-left: 1.25rem; /* pl-3 */
    line-height: 1.6;
    margin-bottom: 0; /* mb-0 */
}

.as-leistungsdetail__item {
    margin-bottom: 0.5rem; /* mb-2 */
}

/* Fettes Label hervorgehoben */
.as-leistungsdetail__item strong {
    color: var(--as-color-navy);
}

/* ============================================================
   Responsive (Bootstrap-Breakpoint: lg = 992px)
   Auf mobil (unter 992px) bricht das Grid auf 1 Spalte um;
   die order wird auf 0 neutralisiert, sodass mobil IMMER zuerst
   der Text erscheint (wie Pattern 2: order-2 order-lg-1).
   ============================================================ */
@media (max-width: 991.98px) {
    .as-leistungsdetail__grid {
        grid-template-columns: 1fr;
    }

    .as-leistungsdetail--card-left .as-leistungsdetail__card {
        order: 0;
    }
}