/* ============================================================
   CKStudio – Seitenmodul: E-Commerce Agentur Wien
   Nur Bausteine, die system.css nicht abdeckt.
   ============================================================ */

/* ---- Breadcrumb im Hero ---- */
.crumbs { margin-bottom: 1.6rem; }
.crumbs ol {
    list-style: none;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font-size: var(--fs-0);
    color: var(--ink-4);
}
.crumbs a { color: var(--ink-3); text-decoration: none; transition: color .35s var(--ease); }
.crumbs a:hover { color: var(--accent); }
.crumbs .here { color: var(--ink-2); }

/* ---- Hero-Ueberschrift: laengerer Satz braucht eine ruhigere Stufe ---- */
.hero h1 { font-size: clamp(2.35rem, 1.5rem + 3.4vw, 4.35rem); }

/* ---- Kennzahlen (eigene Stufe, kein Kachelraster) ---- */
.points.metrics .point .num {
    font-size: var(--fs-4);
    color: var(--ink);
    line-height: 1;
    margin-bottom: 1rem;
}
.points.metrics .point p { color: var(--ink-2); max-width: 34ch; }

/* ---- Lead-in am Absatzanfang statt Label ueber der Section ---- */
.sec-head p .lead-in { color: var(--ink); font-weight: 500; }

/* ---- Zwischenueberschrift innerhalb einer Section ---- */
.sub-h {
    font-size: var(--fs-3);
    margin-bottom: clamp(1.6rem, 3.5vh, 2.4rem);
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--line);
}
.sub-h.is-spaced { margin-top: clamp(3.5rem, 8vh, 6rem); }
/* Zwischenueberschrift direkt nach dem Projektbild braucht Luft */
.wide-media + .sub-h { margin-top: clamp(3rem, 7vh, 5rem); }

/* ---- Breites Belegbild unter dem Vergleich ---- */
.wide-media {
    margin: clamp(2.5rem, 6vh, 4rem) auto 0;
    max-width: 76%;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-lg);
    background: var(--card);
}
.wide-media img { width: 100%; height: auto; }
@media (max-width: 879px) { .wide-media { max-width: 100%; } }

/* ---- Leistungszeilen: Haken-Liste statt Tag-Reihe ---- */
.svc-body .check-list { margin-top: -.4rem; }

/* ---- Tag-Reihe in den Spalten der Leistungsuebersicht ---- */
.services3 .service .svc-tags { margin-bottom: 0; }

/* ---- Tags auf dunklem Grund ---- */
.svc-tags.on-dark li {
    color: rgba(255, 255, 255, .82);
    border-color: rgba(255, 255, 255, .26);
}

/* ---- Zurueckgenommene Zeile ueber der Ueberschrift im dunklen Band ---- */
.dark-band .band-label {
    color: rgba(255, 255, 255, .55);
    font-size: var(--fs-1);
    margin-bottom: .7rem;
}
.dark-band .dark-split { align-items: start; }

/* ---- Bildunterschrift am einzelnen Projektbild ---- */
.wide-media figcaption {
    padding: 1rem clamp(1.1rem, 2vw, 1.5rem);
    font-size: var(--fs-0);
    color: var(--ink-3);
    border-top: 1px solid var(--line-soft);
}

/* ---- Plattformvergleich: Haken-Liste in den Spalten ---- */
.duo-card .check-list { margin-top: 1.2rem; }
.duo-card .check-list li { border-top-color: rgba(12, 12, 14, .12); }