/*
 * custom.css – Menschlich Miteinander
 * Farben passend zur Vereins-Website (menschlich-miteinander.org)
 */

:root {
  --color-primary:      #545e65;   /* Dunkelgrau – Header, User-Bubble */
  --color-accent:       #86b300;   /* Olivgrün – Buttons, Highlights */
  --color-bg:           #fdfdfa;   /* Fast-Weiß – Seitenhintergrund */
  --color-border:       #e0e0e0;
  --color-accent-hover: #668c00;
}

/* ── Body ─────────────────────────────────────── */
body {
  background: var(--color-bg);
  font-family: 'Nunito Sans', 'Segoe UI', sans-serif;
  color: #3d453b;
}

/* ── Header ───────────────────────────────────── */
header {
  background: var(--color-primary);
  color: #ffffff;
}
header p { color: #cdd2cb; }

/* ── Nachrichten ──────────────────────────────── */
.msg.bot {
  background: #fff;
  border-color: var(--color-border);
}
.msg.bot strong { color: #2c332a; }
.msg.user {
  background: var(--color-primary);
  color: #fff;
}
.msg.typing { border-color: var(--color-border); }

/* ── Aktions-Karten ───────────────────────────── */
.aktion-card { border-color: var(--color-accent); }

/* ── Buttons (Karten) ─────────────────────────── */
.btn-gold { background: var(--color-accent); color: #fff; }
.btn-gold:hover { background: var(--color-accent-hover); }
.btn-dark { background: var(--color-primary); color: #fff; }
.btn-dark:hover { background: #3e454a; }

/* ── E-Mail Formular ──────────────────────────── */
.email-form input:focus { border-color: var(--color-accent); }
.email-form button { background: var(--color-accent); color: #fff; }

/* ── Eingabefeld ──────────────────────────────── */
#input-area { border-color: var(--color-border); }
#input-area button { background: var(--color-accent); color: #fff; }
#input-area button:hover { background: var(--color-accent-hover); }

/* ── CTA-Button (unter Eingabe) ───────────────── */
.btn-cta-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.btn-cta-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
.btn-cta-outline {
  background: transparent;
  color: var(--color-accent);
  border-color: rgba(134,179,0,.5);
}
.btn-cta-outline:hover { background: rgba(134,179,0,.1); }

/* ── Modal ────────────────────────────────────── */
.cs-box h3 { color: #2c332a; }
.cs-box input:focus { border-color: var(--color-accent); }
.cs-submit { background: var(--color-accent); color: #fff; }
.cs-submit:hover { background: var(--color-accent-hover); }