/* 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; }
}

/* Beispielwebsite: eine ruhige Vorschau im Stil der tatsächlichen Salonseite. */
@font-face {
  font-family: 'Beispiel Display';
  src: url('../beispiel/fonts/bodoni-moda-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.website-example { margin: 64px 0 56px; }
.website-example-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background: transparent;
  text-decoration: none;
}
.website-example-screen {
  width: min(100%, 720px);
  overflow: hidden;
  background: #f2f1ee;
  border-radius: 8px;
  color: #161412;
  border: 1px solid #e1dfda;
  box-shadow: 0 10px 28px rgba(22, 20, 18, .07);
  transition: transform .35s ease;
}
.website-example-stage:hover .website-example-screen { transform: translateY(-4px); }
.website-example-stage:focus-visible, .website-example-link:focus-visible { outline: 3px solid #d52b1e; outline-offset: 4px; }
.website-example-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #d0cdc8;
}
.website-example-header span:first-child { font: 400 clamp(12px, 1.5vw, 18px)/1 'Beispiel Display', Georgia, serif; white-space: nowrap; }
.website-example-header span:last-child { font-size: clamp(7px, .65vw, 9px); white-space: nowrap; color: #514b46; }
.website-example-body { padding: clamp(16px, 3vw, 35px) clamp(16px, 3vw, 35px) 0; }
.website-example-location { display: block; margin-bottom: 10px; color: #5a4433; font-size: clamp(7px, .75vw, 10px); font-weight: 600; }
.website-example-headline { font: 400 clamp(27px, 4vw, 52px)/.91 'Beispiel Display', Georgia, serif; letter-spacing: -.055em; }
.website-example-line { margin-top: 12px; color: #514b46; font-size: clamp(8px, .8vw, 11px); }
.website-example-button { display: inline-block; margin-top: 10px; padding: 6px 10px; background: #5a4433; color: #fff; border-radius: 2px; font-size: clamp(7px, .7vw, 9px); font-weight: 600; }
.website-example-body img { display: block; width: 100%; height: auto; aspect-ratio: 2.15; object-fit: cover; margin-top: clamp(16px, 2.5vw, 28px); border-radius: 3px 3px 0 0; }
.website-example-caption { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 24px 2px 0; }
.website-example-caption h3 { margin: 4px 0; font-size: clamp(23px, 3vw, 30px); line-height: 1.2; letter-spacing: -.035em; }
.website-example-caption p { margin: 0; color: #60636a; }
.website-example-caption .website-example-kicker { color: #b0261b; font-size: 14px; font-weight: 700; }
.website-example-link { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 11px 18px; border: 1px solid #d5d6d2; border-radius: 12px; color: #b0261b; background: #fff; text-decoration: none; font-weight: 700; transition: background-color .2s ease, border-color .2s ease; }
.website-example-link:hover { background: #f9f3f2; border-color: #d6a7a2; }
@media (max-width: 600px) {
  .website-example { margin: 44px 0; }
  .website-example-screen { width: 78%; }
  .website-example-header { padding: 7px 12px; }
  .website-example-header span:first-child { font-size: 10px; }
  .website-example-header span:last-child { font-size: 6px; }
  .website-example-body { padding: 12px 12px 0; }
  .website-example-location { margin-bottom: 7px; font-size: 6px; }
  .website-example-headline { font-size: 21px; }
  .website-example-line { margin-top: 8px; font-size: 7px; }
  .website-example-button { margin-top: 7px; padding: 5px 8px; font-size: 6px; }
  .website-example-body img { margin-top: 11px; }
  .website-example-caption { display: block; padding-top: 20px; }
  .website-example-caption p { font-size: 15px; }
  .website-example-link { margin-top: 18px; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .website-example-screen, .website-example-link { transition: none; } }