/* ===================================================================
   Reports & Review.
   =================================================================== */

.steuerung { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.steuerung select {
  min-width: 160px; padding: 9px 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}

.block { margin-bottom: 34px; }
.block__titel {
  margin: 0 0 4px; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
}
.block__frage { margin: 0 0 14px; font-size: .86rem; color: var(--text-still); }

.kacheln {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr));
}

.kachel {
  padding: 15px 16px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
.kachel__wert { display: flex; align-items: baseline; gap: 9px; }
.kachel__zahl { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.kachel__name { display: block; margin-top: 3px; font-size: .78rem; color: var(--text-still); }

/* Vorher/Nachher aus dem Konzept: Eine Zahl allein sagt wenig. */
.trend { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.trend[data-richtung="hoch"]   { color: #79d1a2; }
.trend[data-richtung="runter"] { color: var(--warn); }
.trend[data-richtung="gleich"] { color: var(--text-still); font-weight: 400; }
/* Bei manchen Zahlen ist "mehr" schlecht (z. B. offene Probleme). */
.trend[data-gut="nein"][data-richtung="hoch"]   { color: var(--warn); }
.trend[data-gut="nein"][data-richtung="runter"] { color: #79d1a2; }

.kachel[data-warn="ja"] {
  border-color: rgba(255, 154, 162, .4);
  background: rgba(255, 154, 162, .07);
}
.kachel[data-warn="ja"] .kachel__zahl { color: var(--warn); }

.liste-klein { margin: 0; padding: 0; list-style: none; }
.liste-klein li {
  padding: 10px 14px; margin-bottom: 7px;
  background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  font-size: .88rem;
}
.liste-klein .klein { display: block; margin-top: 2px; font-size: .77rem; color: var(--text-still); }


/* ---------- Entscheidung ------------------------------------------------ */

.entscheidung {
  margin-top: 8px; padding: 22px 24px;
  background: linear-gradient(100deg, rgba(63, 189, 245, .09), rgba(138, 118, 255, .05));
  border: 1px solid rgba(63, 189, 245, .35);
  border-radius: var(--radius);
}
.entscheidung__titel { margin: 2px 0 6px; font-size: 1.15rem; font-weight: 700; }
.entscheidung__text { margin: 0 0 18px; font-size: .88rem; color: var(--text-leise); max-width: 62ch; }
.entscheidung__raster {
  display: grid; gap: 14px; margin-bottom: 6px;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}
.entscheidung input {
  width: 100%; padding: 11px 13px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}
.entscheidung input:focus {
  outline: none; border-color: rgba(63, 189, 245, .7);
  box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
}

@media (max-width: 620px) {
  .entscheidung__raster { grid-template-columns: 1fr; }
}