/* Der Status steht in jeder Zeile rechts und bleibt auch auf kleinen Handys lesbar. */
.report-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  column-gap: 12px;
  row-gap: 0;
}
.report-row > div {
  width: auto;
  min-width: 0;
}
.report-row strong,
.report-row span {
  overflow-wrap: anywhere;
}
.report-row .status {
  justify-self: end;
  align-self: start;
  padding: 6px 10px;
  font-size: 16px;
  line-height: 1.3;
  white-space: nowrap;
}
.report-row .status.missing { color: #a3231a; background: #fcecea; }
.report-row .status.improve { color: #805300; background: #fdf3e1; }

/* Die beiden Aussagen werden als eigenständige, ruhig getönte Flächen lesbar. */
.promise-grid {
  gap: 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.promise-grid > div {
  border: 1px solid transparent;
  border-radius: 22px;
}
.promise-grid > div:first-child {
  background: #edf6f0;
  border-color: #dbece1;
}
.promise-grid > div:last-child {
  background: #fcf0ee;
  border-color: #f3dfdc;
}
.promise-grid > div:first-child h3 { color: #19623e; }
.promise-grid > div:last-child h3 { color: #a3231a; }

/* Ruhige Flächen geben der Zugriffserklärung eine klare visuelle Hierarchie. */
.security-right {
  display: grid;
  gap: 12px;
  align-content: start;
  border: 0;
}
.security-point {
  padding: 22px 24px;
  background: #f5f7f4;
  border: 1px solid #e8eee8;
  border-radius: 18px;
}
.security-details {
  padding: 0 24px;
  background: #fff;
  border: 1px solid #e7e7e3;
  border-radius: 18px;
}
@media (max-width: 600px) {
  .report { padding-inline: 16px; }
  .report-row { grid-template-columns: minmax(0, 1fr) max-content; gap: 10px; }
  .report-row > div { width: auto; }
  .report-row .status { padding-inline: 8px; }
  .promise-grid { gap: 12px; }
  .promise-grid > div { padding: 24px 20px; }
  .security-point { padding: 20px; }
  .security-details { padding: 0 20px; }
}