/* Basiert auf globalem style.css – hier nur page-spezifische Ergänzungen */

/* ---- Utility (falls global .stack/.cluster nicht enthalten sind) ---- */
.stack{ display:flex; flex-direction:column; }
.stack > * + *{ margin-top: 1rem; }
.stack.gap-1 > * + *{ margin-top:.6rem; }
.stack.gap-2 > * + *{ margin-top:1.1rem; }
.cluster{ display:flex; align-items:center; gap:.75rem; }
.cluster.wrap{ flex-wrap:wrap }

/* ---- Header: integrierter Zurück-Link ---- */
.nav__left{ display:flex; align-items:center; gap:.8rem }

/* ---- Composer / Formularcontainer ---- */
.composer{
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(16px, 2.8vw, 24px);
}
.form{ max-width: 100% } /* über Contact-Styles hinaus */
.input{ /* falls global vorhanden, ergänzt nur Verhalten */
  -webkit-appearance:none; appearance:none;
}
.input--area{ min-height: 140px } /* etwas mehr Luft */
.status{ min-height:1.25rem }

/* ---- Divider ---- */
.rule{
  height:1px; background: var(--line);
  margin: clamp(10px, 2vw, 14px) 0 0 0;
  opacity:.9;
}

/* ---- Liste & Cards: mehr Abstand zwischen Kommentaren ---- */
.comment-list{
  display:grid;
  gap: clamp(18px, 2.2vw, 24px); /* <<– größerer Abstand */
}
.comment{
  padding: clamp(16px, 2.4vw, 22px);
}
.comment .meta{
  display:flex; align-items:center; gap:.5rem;
  font-size:.9rem; color: var(--fg-dim); margin-bottom:.4rem;
}
.comment .meta .dot{ opacity:.6 }
.comment .text{
  margin:0; white-space: pre-wrap; word-break: break-word; color: var(--fg);
}

/* ---- Responsive Feinheiten ---- */
@media (max-width: 560px){
  .composer .cluster > *{ flex:1 1 auto }
  .nav__back{ display:none } /* auf sehr kleinen Geräten reicht die Brand + Menü */
}