/* Punktesystem page styles */
p, ul, ol, h1, h2, h3, h4, h5, h6 {
  margin: 0rem !important;
}

.screen-md, .screen-lg {
  display: none;
}

strong {
  font-weight: 400;
  /* text-decoration: underline; */
  background: rgb(255 235 59 / 50%);
}

ol {
  list-style: none;   /* entfernt Browsernummerierung */
  counter-reset: item; /* eigenen Zähler starten */
  padding: 0;
  margin: 0;
}

ol > li {
  counter-increment: item;   /* erhöht Zähler bei jedem li */
  margin-bottom: 2rem;
  position: relative;
  padding-left: 0rem;        /* damit ::before relativ zum li positioniert ist */    /* Platz für Zahl links */
}

ol > li:last-child {
  margin-bottom: 0;
}

ol > li::before {
  content: counter(item);
  position: absolute;
  left: 0rem;
  top: 0rem;
  font-size: 12rem;
  font-weight: 800;
  line-height: .8 !important;
  background-image: linear-gradient(180deg, #f4f3f1, #ECE9E6);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;  
  z-index: -1;     /* optional */            /* Farbe frei wählbar */
}

.ol-headline {
  font-size: 1.25rem;
  font-weight: 600;
}

.ul-headline {
  font-weight: 600;
  padding: .5rem 0;
}

.grid-table {
  display: grid;
  grid-template-columns: repeat(3, auto);
  padding-bottom: 1rem;
}

.grid-table > div {
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  padding: .5rem;
}

.grid-table > div:nth-child(-n+3) {
  border-top: 1px solid #e5e7eb;
  font-weight: 600;
}

.grid-column {
  display: grid;
  grid-template-columns: auto;
  grid-auto-flow: row;
}

.grid-10-column {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  padding-bottom: 1rem;
}

.grid-10-column > div {
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  padding: .5rem;
}

.grid-10-column > div:nth-child(-n+10) {
  border-top: 1px solid #e5e7eb;
  font-weight: 600;
}

.sample-remark > div:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#pseudo-li {
  padding-bottom: 0rem !important;
}

.inline-flex {
  display: inline-flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

ul > li {
  list-style: disc;
  margin-left: -1.5rem;
  padding-left: .5rem;
  padding-bottom: .5rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  ol > li {
    padding-left: 4rem;
  }
  ol > li::before {
    font-size: 14rem;
    font-weight: 700;
  }
  .grid-10-column {
    grid-template-columns: repeat(7 , max-content);
  }
  .screen-md {
    display: block;
  }
}

@media (min-width: 1024px) {
  ol > li {
    padding-left: 11em;
  }
  ol > li::before {
      font-size: 16rem;
  }
  .grid-table {
    grid-template-columns: repeat(3, max-content);
  }
  .grid-column {
    grid-template-columns: max-content;
  }
  .grid-10-column {
    grid-template-columns: repeat(10, max-content);
  }
  .screen-lg {
    display: block !important;
  }
}