/* Redaktion „Taube der Woche“ (#2586). Nur Bausteine-Tokens; Mindestgröße Schrift 1rem, Tippflächen --tippflaeche. */

.rd { --rd-foto-b: 15rem; }

.rd-kopf { align-items: flex-end; gap: var(--abstand-md); }
.rd-kopf p { max-inline-size: 60ch; }

.rd-woche {
  margin: 0 0 var(--abstand-lg);
  color: var(--farbe-text-gedaempft);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

/* Filter als Reiter-Leiste, auf dem Handy waagerecht wischbar */
.rd-filter {
  display: flex;
  gap: var(--abstand-sm);
  margin-block-end: var(--abstand-lg);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block-end: 2px;
}
.rd-filter::-webkit-scrollbar { display: none; }
.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-sm);
  flex: 0 0 auto;
  min-block-size: var(--tippflaeche);
  padding: 0 var(--abstand-md);
  border: 2px solid var(--farbe-linie);
  border-radius: var(--radius-rund);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font: 700 var(--schrift-text) / 1 var(--schriftart-text);
  cursor: pointer;
  transition: background var(--dauer-uebergang) var(--kurve), border-color var(--dauer-uebergang) var(--kurve);
}
.rd-chip:hover { border-color: var(--farbe-link); }
.rd-chip[aria-pressed="true"] { background: var(--farbe-marke); border-color: var(--farbe-marke); color: var(--farbe-text-auf-marke); }
.rd-chip__zahl {
  min-inline-size: 1.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-rund);
  background: var(--farbe-neutral-bg);
  color: var(--farbe-neutral-text);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.rd-chip[aria-pressed="true"] .rd-chip__zahl { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }

/* Karte: Foto und Geschichte nebeneinander, auf dem Handy untereinander */
.rd-liste { display: grid; gap: var(--abstand-lg); }
.rd-karte {
  display: grid;
  grid-template-columns: var(--rd-foto-b) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-karte);
  animation: rd-rein var(--dauer-einblenden, 240ms) cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rd-rein { from { opacity: 0.4; transform: translateY(6px); } }

.rd-foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--farbe-hell);
}
.rd-foto img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.rd-foto--leer { display: grid; place-items: center; }
.rd-foto__ohne { color: var(--farbe-text-gedaempft); }
.rd-foto[data-bild]:not(.rd-foto--leer):empty::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--farbe-flaeche) 60%, transparent) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: rd-schimmer var(--dauer-skeleton, 1.4s) linear infinite;
}
@keyframes rd-schimmer { to { background-position: -200% 0; } }

.rd-karte__koerper { padding: var(--abstand-lg); display: flex; flex-direction: column; gap: var(--abstand-sm); min-inline-size: 0; }
.rd-karte__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--abstand-sm); flex-wrap: wrap; }
.rd-karte__name {
  margin: 0;
  font-size: var(--schrift-gross, 1.5rem);
  line-height: 1.15;
  color: var(--farbe-marke);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.rd-karte__meta { margin: 0; color: var(--farbe-text-gedaempft); }
.rd-karte__text {
  margin: var(--abstand-xs) 0 0;
  max-inline-size: 65ch;
  line-height: 1.55;
  white-space: pre-line;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.rd-hinweis { margin: 0; color: var(--farbe-text-gedaempft); }
.rd-hinweis--warn { color: var(--farbe-warn); font-weight: 700; }

.rd-kuerzen textarea, .rd-neu textarea { inline-size: 100%; min-block-size: 9rem; }

/* Zustimmung: ganze Zeile tippbar */
.rd-zustimmung {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-sm);
  min-block-size: var(--tippflaeche);
  margin-block-start: var(--abstand-sm);
  padding: var(--abstand-sm) var(--abstand-md);
  border: 2px solid var(--farbe-akzent);
  border-radius: var(--radius-feld, 8px);
  background: var(--farbe-warn-bg);
  cursor: pointer;
  line-height: 1.4;
}
.rd-zustimmung input {
  flex: 0 0 auto;
  inline-size: 1.5rem; block-size: 1.5rem;
  margin: 0.0625rem 0 0;
  accent-color: var(--farbe-marke);
}
.rd-zustimmung:has(input:checked) { border-color: var(--farbe-ok-rand); background: var(--farbe-ok-bg); }

.rd-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-sm); margin-block-start: var(--abstand-sm); }
.rd-aktionen .knopf { min-block-size: var(--tippflaeche); }
.rd-knopf-still { border-color: transparent; }
.rd-knopf-still:hover { border-color: var(--farbe-link); }

.rd-online { margin: var(--abstand-xs) 0 0; font-weight: 700; color: var(--farbe-ok); }
.rd-online a { color: var(--farbe-link); text-underline-offset: 0.2em; }

.rd-meldung { margin: var(--abstand-sm) 0 0; padding: var(--abstand-sm) var(--abstand-md); border-radius: var(--radius-feld, 8px); background: var(--farbe-info-bg); }
.rd-meldung--ok { background: var(--farbe-ok-bg); color: var(--farbe-ok); }
.rd-meldung--fehler { background: var(--farbe-fehler-bg); color: var(--farbe-fehler); }
.rd-meldung textarea { inline-size: 100%; margin-block-start: var(--abstand-sm); }

.rd-karte--abgelehnt, .rd-karte--zurueckgezogen { box-shadow: none; }
.rd-karte--abgelehnt .rd-foto, .rd-karte--zurueckgezogen .rd-foto { filter: grayscale(0.7); opacity: 0.8; }

.rd-leer, .rd-laden { padding: var(--abstand-xl) var(--abstand-lg); border: 2px dashed var(--farbe-linie); border-radius: var(--radius-karte); color: var(--farbe-text-gedaempft); text-align: center; text-wrap: pretty; }
.rd-fuss { margin-block-start: var(--abstand-lg); color: var(--farbe-text-gedaempft); }
.rd-klein { margin: var(--abstand-xs) 0 0; color: var(--farbe-text-gedaempft); }

/* Neue Geschichte */
.rd-neu {
  margin-block-end: var(--abstand-xl);
  padding: var(--abstand-lg);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-karte);
}
.rd-neu h2 { margin-block-start: 0; }
.rd-neu input[type="search"] { inline-size: 100%; min-block-size: var(--tippflaeche); }
.rd-treffer { display: grid; gap: var(--abstand-xs); margin-block-start: var(--abstand-sm); }
.rd-treffer__knopf {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem;
  min-block-size: var(--tippflaeche);
  padding: var(--abstand-sm) var(--abstand-md);
  border: 2px solid var(--farbe-linie);
  border-radius: var(--radius-feld, 8px);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font: var(--schrift-text) / 1.3 var(--schriftart-text);
  text-align: start;
  cursor: pointer;
}
.rd-treffer__knopf span { color: var(--farbe-text-gedaempft); }
.rd-treffer__knopf[aria-pressed="true"] { border-color: var(--farbe-marke); background: var(--farbe-info-bg); }
.rd-neu-vorschau { display: block; max-inline-size: 12rem; margin-block-start: var(--abstand-sm); border-radius: var(--radius-feld, 8px); }

.rd ::selection { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }

@media (max-width: 40rem) {
  .rd-karte { grid-template-columns: 1fr; }
  .rd-foto { aspect-ratio: 4 / 3; }
  .rd-karte__koerper { padding: var(--abstand-md); }
  .rd-aktionen .knopf { flex: 1 1 auto; }
  .rd-aktionen .rd-frei { flex-basis: 100%; }
  .rd-kopf { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-karte { animation: none; }
  .rd-foto[data-bild]:empty::after { animation: none; }
}

.rd-karte--ohne-foto { grid-template-columns: minmax(0, 1fr); }