/*
 * custom.css – Kundenspezifisches Design
 * Wird NICHT vom Cronjob überschrieben.
 * Farben und CTA-Button-Stil hier anpassen.
 *
 * Verfügbare CSS-Variablen:
 *   --color-primary    Hauptfarbe (Header-BG, User-Bubble, Buttons)
 *   --color-accent     Akzentfarbe (Gold, CTA-Button, Highlights)
 *   --color-bg         Seiten-Hintergrund
 *   --color-border     Rahmenfarbe (Karten, Inputs)
 */

:root {
  --color-primary:  #1a1a2e;   /* Dunkelblau – Thomas */
  --color-accent:   #d4af37;   /* Gold – Thomas */
  --color-bg:       #f5f0e8;   /* Warmes Beige – Thomas */
  --color-border:   #e0d8c8;
  --color-accent-hover: #b8962e;
}

/* ── Body ─────────────────────────────────────── */
body { background: var(--color-bg); }

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

/* ── Nachrichten ──────────────────────────────── */
.msg.bot {
  background: #fff;
  border-color: var(--color-border);
}
.msg.bot strong { color: var(--color-primary); }
.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: var(--color-accent); }
.btn-dark:hover { background: #2d2d4e; }

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

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

/* ── CTA-Button (unter Eingabe) ───────────────── */
.btn-cta-primary {
  background: var(--color-accent);
  color: var(--color-primary);
  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(212,175,55,.5);
}
.btn-cta-outline:hover { background: rgba(212,175,55,.1); }

/* ── Modal ────────────────────────────────────── */
.cs-box input:focus { border-color: var(--color-accent); }
.cs-submit { background: var(--color-accent); color: var(--color-primary); }
.cs-submit:hover { background: var(--color-accent-hover); }