/**
 * Classes editors use in formatted text.
 *
 * In global-styling, so they work on sites with their own color-custom.css,
 * too (berlin-msa, abitur-berlin, abschluss-bw, vera8). Those sites don't set
 * --primary-color and override the colors of .bordered and .filled-col there.
 */

/* resposive tables; theme/color-custom.css extends these up to 768px. */

.table-mobile-block td, .table-mobile-block th {
  display: block;
}

.table-mobile-hide th, .table-mobile-hide td,
.table-mobile-hide-1 th:nth-child(1), .table-mobile-hide-1 td:nth-child(1),
.table-mobile-hide-2 th:nth-child(2), .table-mobile-hide-2 td:nth-child(2),
.table-mobile-hide-3 th:nth-child(3), .table-mobile-hide-3 td:nth-child(3),
.table-mobile-hide-4 th:nth-child(4), .table-mobile-hide-4 td:nth-child(4) {
    display: none;
}


@media only screen and (min-width:600px) {
    .table-mobile-hide th, .table-mobile-hide td,
    .table-mobile-hide-1 th:nth-child(1), .table-mobile-hide-1 td:nth-child(1),
    .table-mobile-hide-2 th:nth-child(2), .table-mobile-hide-2 td:nth-child(2),
    .table-mobile-hide-3 th:nth-child(3), .table-mobile-hide-3 td:nth-child(3),
    .table-mobile-hide-4 th:nth-child(4), .table-mobile-hide-4 td:nth-child(4) {
        display: table-cell;
    }

    .table-mobile-block td, .table-mobile-block th {
      display: table-cell;
    }

    .table-mobile-only {
      display: none;
    }
}

/* Startseite */
.bordered {
  border: 1px solid var(--primary-color);
  padding: 8px;
  margin-bottom: 12px;
  width: 100%;
}
.link-subtitle {
  font-weight: normal;
  color: black;
}
.d-block {
  display: block;
}
.d-flex {
  display: block;
}
.filled-col {
  background-color: var(--primary-color);
  color: white !important;
  padding: 40px 20px;
  flex: 1;
  margin: 10px 5px;
  text-align: center;
  display: block;
}
.filled-col-title,
.filled-col > strong:first-child {
  text-align: center;
  width: 100%;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .d-md-flex {
    display: flex;
  }
}

/* CKEditor (.ck-content) doesn't load the site's --primary-color; without a
   fallback, boxes lose their border and tiles show white text on white. */
.ck-content .bordered {
  border: 1px solid var(--primary-color, #e15e2b);
}
.ck-content .filled-col {
  background-color: var(--primary-color, #e15e2b);
}

/* The editor always shows every table cell; mobile-only tables get a dashed
   outline, since they are hidden on wide screens. */
.ck-content table[class*="table-mobile-hide"] th,
.ck-content table[class*="table-mobile-hide"] td {
  display: table-cell;
}
.ck-content table.table-mobile-only {
  display: table;
  outline: 2px dashed #999;
  outline-offset: 2px;
}
.ck-content table.table-bordered th,
.ck-content table.table-bordered td {
  border: 1px solid #ddd;
}
.ck-content table.w-100 {
  width: 100%;
}

p.bordered {
  clear: both;
}
p.bordered:not(.only-bottom, [class*="text-align-"]) {
  text-align: center;
}
p.bordered > a:has(> strong:first-child) {
  font-weight: normal;
  -webkit-text-fill-color: black;
}
p.bordered > a > strong:first-child {
  font-weight: bold;
  -webkit-text-fill-color: currentcolor;
}
p.bordered:not(.only-bottom) > a > strong:first-child::after {
  content: "\A";
  white-space: pre;
}

ol[type="circled"],
ol.circled {
  counter-reset: list-counter;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* The line height of the list item as a length, for the circle below; 1lh
   on the circle itself would be its own line height. */
@property --circled-line-height {
  syntax: '<length>';
  inherits: true;
  initial-value: 23px;
}
/* Not a flex container: bold text and links would each become a column. */
ol[type="circled"] li,
ol.circled li {
  --circled-line-height: 1lh;
  position: relative;
  padding-left: 35px;
  counter-increment: list-counter;
}
ol[type="circled"] li::before,
ol.circled li::before {
  content: counter(list-counter);
  position: absolute;
  left: 0;
  /* Centered on the first line of the list item. */
  top: calc((var(--circled-line-height) - 23px) / 2);
  width: 23px;
  height: 23px;
  background: var(--primary-color, #e15e2b);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  line-height: 1;
}
/* Claro's root font size (16px instead of 10px) and list indent. */
.ck-content ol[type="circled"],
.ck-content ol.circled {
  margin-left: 0;
}
.ck-content ol[type="circled"] li::before,
.ck-content ol.circled li::before {
  font-size: 16px;
}

.bordered.only-bottom {
  border: none;
  border-bottom: 1px solid #e6e6e6;
  background-color: transparent;
  padding: 0 0 27px 0;
  margin-bottom: 27px;
}

.bordered.only-bottom:last-child {
  border-bottom: none;
}

.bordered.only-bottom strong,
.bordered.only-bottom > :first-child {
  color: #3d3d3d;
  font-size: 18px;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.bordered.only-bottom a {
  font-size: 18px;
  font-weight: normal;
  color: #1f6abf;
}