/*
 * Zentrales Q76-Layoutsystem
 * Die mobile Leistungsaufzaehlung der Startseite ist die Referenz fuer
 * Startseite, Webdesign, Printdesign und SEO-Audit.
 */
body.q76-layout-system {
  --q76-service-column-gap: 14px;
  --q76-service-number-column: 34px;
  --q76-service-row-gap: 7px;
  --q76-service-row-min-height: 112px;
  --q76-service-row-padding: 25px;
}

@media (max-width: 760px) {
  body.q76-layout-system .type-demo__service-row,
  body.q76-layout-system .q76-page__offer-list article {
    align-items: start !important;
    box-sizing: border-box !important;
    column-gap: var(--q76-service-column-gap) !important;
    min-height: var(--q76-service-row-min-height) !important;
    padding-block: var(--q76-service-row-padding) !important;
    padding-inline: 0 !important;
    row-gap: var(--q76-service-row-gap) !important;
  }

  /* WordPress setzt article global mit padding:0!important zurück. */
  body#top.q76-layout-system #main .q76-page__offer-list article {
    padding-block: var(--q76-service-row-padding) !important;
    padding-inline: 0 !important;
  }

  body.q76-layout-system .type-demo__service-row {
    grid-template-columns:
      var(--q76-service-number-column)
      minmax(0, 1fr)
      20px !important;
  }

  body.q76-layout-system .q76-page__offer-list article {
    grid-template-columns:
      var(--q76-service-number-column)
      minmax(0, 1fr) !important;
  }

  body.q76-layout-system .type-demo__service-number,
  body.q76-layout-system .q76-page__offer-number {
    align-self: start !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    padding-top: 5px !important;
  }

  body.q76-layout-system .q76-page__offer-list article > p:empty {
    display: none !important;
  }

  body.q76-layout-system .type-demo__service-title,
  body.q76-layout-system .q76-page__offer-list h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  body.q76-layout-system .type-demo__service-copy,
  body.q76-layout-system .q76-page__offer-list h3 + p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
  }

  body.q76-layout-system .type-demo__service-arrow {
    align-self: center !important;
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
  }
}