/* ============ CONTENT PRODUCTION /services/content-production/ — Figma Desktop 683:4 + Mobil CP-M1 (1551:2).
   Baut auf bereich.css (Kopf, Leadbild, Text, Featured, FAQ), produktfoto.css (Brotkrume, Kontakt, More services) und fotostapel.css auf;
   hier nur Capabilities und die Abstände der Seite ============ */

/* Capabilities: 161 unter dem Foto-Stapel, Label in der Kerbe, rechts ab x 790 (620 breit) zwei Listen untereinander —
   Gruppen-Label, Linie 28 darunter, Zeilen 42 hoch (Linie + 10 + Inter 16/22 + 9), „Formats“ 57 unter der letzten Linie */
.cp-faehig{display:grid;grid-template-columns:calc(760 * var(--u)) minmax(0,1fr);align-items:start;padding:calc(161 * var(--u)) var(--rand) 0}
.cp-faehig .label.kerbe{float:none;width:auto;margin:0}
.cp-gruppe + .cp-gruppe{margin-top:calc(57 * var(--u))}
.cp-liste{list-style:none;margin-top:calc(14 * var(--u));border-top:1px solid rgba(26,26,26,.18)}
.cp-liste li{padding:calc(10 * var(--u)) 0 calc(9 * var(--u));border-bottom:1px solid rgba(26,26,26,.18);font-family:var(--font-b);font-weight:400;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);color:var(--ink)}

/* FAQ: Kontakt-Linie 133 unter der letzten FAQ-Linie */
.cp-seite .b-faq{padding-bottom:calc(133 * var(--u))}

/* ---------- Tablet (noch nicht designt): Label über den Listen ---------- */
@media (max-width:1100px){
  .cp-faehig{display:block;padding-top:100px}
  .cp-faehig .label.kerbe{margin:0 0 24px}
  .cp-seite .b-faq{padding-bottom:100px}
}

/* ---------- Mobil (CP-M1): 80 unter dem Stapel, Gruppen-Label 45 unter dem Label, Linie 28 darunter, Zeilen 42 (Inter 15/21) ---------- */
@media (max-width:760px){
  .cp-faehig{padding-top:80px}
  .cp-faehig .label.kerbe{margin:0 0 32px}
  .cp-liste{margin-top:15px}
  .cp-liste li{padding:10px 0}
  .cp-seite .b-faq{padding-bottom:80px}
}