/* F197 / F186: the How it works sample report, the sample checklist and the
   preview list stay on one line at 320 and 393. Text stays at least 16px.
   Side padding is in px so a larger text size does not eat the line.
   The checklist count sits on its own chip. A photo caption is a title
   line plus a short meta line. */

html body main #tracker details.tracker-report,
html body main #tracker .tracker-report-body {
  padding-left: 0;
  padding-right: 0;
}

/* Padding stays in px so a larger text size does not steal the line. */
html body main .container.how-layout,
html body main .how-layout > .card {
  padding-left: 8px;
  padding-right: 8px;
}

html body main .sample-report .sr-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 6px;
  letter-spacing: normal;
  text-transform: none;
  font-size: max(1rem, 16px);
  line-height: 1.25;
}

html body main .sample-report .sr-h-t,
html body main .sample-report .sr-count {
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.25;
}

html body main .sample-report .sr-count {
  flex: none;
  font-weight: 800;
}

html body main .sample-report .sr-badge {
  letter-spacing: normal;
  text-transform: none;
  font-size: max(1rem, 16px);
  line-height: 1.25;
  padding: 4px 10px;
}

html body main .sample-report .sr-title {
  font-size: max(1rem, 16px);
  line-height: 1.25;
  letter-spacing: normal;
}

html body main .sample-report .sr-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0 0 12px;
  min-width: 0;
  max-width: 100%;
}

html body main .sample-report,
html body main .sample-report .sr-head,
html body main .sample-report .sr-info,
html body main .sample-report .sr-info-row,
html body main .sample-report .sr-checks,
html body main .sample-report .sr-mats,
html body main .sample-report .sr-photos,
html body main .sample-report .sr-photo,
html body main #tracker .tracker-list,
html body main #tracker .tracker-list li,
html body main #tracker .tracker-list label,
html body main .how-layout .price-list,
html body main .sample-report .sr-badge,
html body main .sample-report .sr-title,
html body main .sample-report .sr-h,
html body main .sample-report .sr-meta-a,
html body main .sample-report .sr-meta-b,
html body main .sample-report .sr-info dt,
html body main .sample-report .sr-info dd,
html body main .sample-report .sr-checks li,
html body main .sample-report .sr-mats li,
html body main .sample-report .sr-cap-t,
html body main .sample-report .sr-cap-m,
html body main .sample-report .sr-sign {
  min-width: 0;
  max-width: 100%;
}

/* F200: column + wrap put the value beside the label, and a long permit
   line (de "Genehmigung PL-0000 (Beispiel)") widened the page. Stack the
   label over the value. Each stays one line and ellipsizes inside the card. */
html body main .sample-report .sr-info-row.sr-info-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  column-gap: 0;
  row-gap: 2px;
}

html body main .sample-report .sr-info-row > dt,
html body main .sample-report .sr-info-row > dd {
  flex: 0 1 auto;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-wrap: nowrap;
  text-align: start;
}

/* At a big text size the value stays 16px so a permit line still fits. */
html.ff-tw-s body main .sample-report .sr-info-row > dt,
html.ff-tw-s body main .sample-report .sr-info-row > dd {
  font-size: 16px !important;
  line-height: 1.3;
}

html body main #tracker .tracker-list label > span {
  flex: 1 1 auto;
  min-width: 0;
}

html body main .sample-report .sr-meta-a,
html body main .sample-report .sr-meta-b {
  display: block;
  max-width: 100%;
}

html body main .sample-report .sr-meta-a,
html body main .sample-report .sr-meta-b,
html body main .sample-report .sr-sign,
html body main .sample-report .sr-info dt,
html body main .sample-report .sr-info dd,
html body main .sample-report .sr-checks li,
html body main .sample-report .sr-mats li,
html body main .sample-report .sr-cap-t,
html body main .sample-report .sr-cap-m,
html body main #tracker .tracker-list label > span,
html body main .how-layout .price-list li {
  font-size: max(1rem, 16px);
  line-height: 1.3;
  letter-spacing: normal;
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

html body main .sample-report .sr-photos {
  grid-template-columns: 1fr;
}

@media (min-width: 521px) {
  html body main .sample-report .sr-photos {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}

html body main .sample-report .sr-photo figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px;
  font-size: max(1rem, 16px);
}

html body main .sample-report .sr-cap-t,
html body main .sample-report .sr-cap-m {
  display: block;
}

@media (max-width: 520px) {
  html body main .how-layout .price-list li {
    padding-left: 22px;
    min-height: 44px;
    max-width: 100%;
    box-sizing: border-box;
  }
}