/* Öffentliche Seite „Wetter-Meldungen“ — ergänzt seite.css (Tokens und Bausteine von dort). */

.meldungen { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
.meldung { padding: 0; overflow: hidden; gap: 0; }
.meldung__foto { display: block; background: var(--karte-2); }
.meldung__foto img { display: block; width: 100%; height: auto; max-height: 28rem; object-fit: contain; background: var(--karte-2); }
.meldung__inhalt { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; }
.meldung__kopf { display: flex; align-items: center; gap: 12px; }
.meldung__kopf .wx { width: 48px; height: 48px; }
.meldung__titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meldung__text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; }
.meldung__fuss { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--tinte-2); font-size: 1rem; }
.meldung__fuss .marke { align-self: center; }
.meldung__melder { display: flex; align-items: center; gap: 10px; }
.meldung__melder .avatar { width: 40px; height: 40px; font-size: 1.05rem; border-width: 0; }
.meldung__mehr { min-height: var(--ziel); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--akzent); }
.meldung__mehr svg { width: 22px; height: 22px; }

.kommentare { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.kommentar { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r-m); background: var(--karte); border: var(--kl) solid var(--linie); }
.kommentar--antwort { margin-left: 28px; background: var(--karte-2); }
.kommentar__kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.kommentar__text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; }

.leer { align-items: center; text-align: center; padding: 32px 20px; }
.leer .wx { width: 72px; height: 72px; }

@media (min-width: 700px) {
  .meldungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meldung__foto img { height: 17rem; }
}
@media (min-width: 1050px) {
  .meldungen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-contrast: more) {
  .kommentar { border-color: var(--tinte); }
}