/* Fehler in Rezepten melden (Winki, 27.09.2026) - Farben nur ueber Theme-Tokens. */

/* Melde-Dialog */
.rr-reasons{display:flex; flex-direction:column; gap:.35rem;}
.rr-reason{
  display:flex; gap:.6rem; align-items:flex-start; padding:.5rem .7rem; cursor:pointer;
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
  transition:border-color .15s ease, background-color .15s ease;
}
.rr-reason:hover{background:var(--surface-hover);}
.rr-reason:has(input:checked){border-color:var(--accent-strong); background:var(--accent-soft);}
.rr-reason input{margin-top:.2rem; flex:none;}
.rr-comment{
  width:100%; resize:vertical; font:inherit; font-size:.92rem; padding:.6rem;
  border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface); color:var(--ink);
}

/* Danke-Popup */
.rr-thanks{text-align:center;}
.rr-thanks > h3:first-of-type{padding-right:0;}
.rr-thanks-img{display:block; width:min(200px, 60%); aspect-ratio:1; height:auto; margin:.25rem auto 1rem;
  border-radius:50%; background:#fff; border:3px solid var(--accent-soft); object-fit:cover;}
.rr-thanks .modal-actions{justify-content:center;}

/* Backend: Gemeldete Rezepte */
.rr-filter{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem;}
.rr-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1rem;}
.rr-tile{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--radius-card, 14px); background:var(--surface);
}
.rr-tile-photo{aspect-ratio:16/10; background:var(--surface-hover); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.rr-tile-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.rr-tile-photo svg{width:3rem; height:3rem; opacity:.5;}
.rr-tile-body{padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.45rem; flex:1;}
.rr-tile-body h4{margin:0; font-size:1rem; line-height:1.3;}
.rr-tile-reasons{display:flex; flex-wrap:wrap; gap:.3rem;}
.rr-tile-comment{margin:0; font-size:.9rem; color:var(--ink); font-style:italic;}
.rr-tile-actions{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:.4rem;}
@media (max-width:640px){ .rr-grid{grid-template-columns:1fr;} }