/*
 * custom.css – Kundenspezifisches Design: Clavis Tech LLC
 * Wird NICHT vom Cronjob überschrieben.
 * Farben und Schriften wie die Website clavistech.solutions (style.css).
 *
 * Verfügbare CSS-Variablen:
 *   --color-primary    Hauptfarbe (Header-BG, User-Bubble, Buttons)
 *   --color-accent     Akzentfarbe (CTA-Button, Highlights)
 *   --color-bg         Seiten-Hintergrund
 *   --color-border     Rahmenfarbe (Karten, Inputs)
 */

/* ── Schriften (liegen neben dieser Datei unter fonts/) ── */
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --color-primary:      #0C263C;   /* Navy – Website */
  --color-primary-2:    #173A57;   /* Navy hell – Website */
  --color-accent:       #D8922A;   /* Amber – Website */
  --color-accent-hover: #9A5A0C;   /* Amber dunkel – Website */
  --color-bg:           #F5F7FB;   /* Papier – Website */
  --color-border:       #CBD5E3;   /* Linie – Website */
  --color-tinte:        #14212B;
  --font-text: "Barlow", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-kopf: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
}

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

/* ── Header ───────────────────────────────────── */
header {
  background: var(--color-primary);
  color: #fff;
}
header h1 { font-family: var(--font-kopf); font-weight: 600; font-size: 1.35rem; letter-spacing: .005em; color: #fff; }
header p { color: #c9d4e0; }

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

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

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

/* ── 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);
  color: #fff;
}
.btn-cta-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-cta-outline:hover { background: rgba(12,38,60,.06); }

/* ── Modal ────────────────────────────────────── */
.cs-box h3 { font-family: var(--font-kopf); font-weight: 600; font-size: 1.35rem; color: var(--color-primary); }
.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); color: #fff; }