/* ============================================
   Helden für Herzen e.V. – Listmonk Public Pages
   Farben/Fonts zentral hier anpassen:
   ============================================ */
:root {
  --hfh-primary: #c8102e;        /* Vereinsrot – TODO: echten Wert eintragen */
  --hfh-primary-dark: #9b0c23;   /* Hover/Active */
  --hfh-accent: #f2c94c;         /* Gold-Akzent */
  --hfh-text: #2b2b2b;
  --hfh-text-light: #6b6b6b;
  --hfh-bg: #faf7f5;             /* warmer, heller Hintergrund */
  --hfh-card-bg: #ffffff;
  --hfh-font: "Helvetica Neue", Arial, sans-serif;  /* TODO: Website-Font */
  --hfh-radius: 12px;
}

/* --- Grundgerüst --- */
body {
  font-family: var(--hfh-font);
  background: var(--hfh-bg);
  color: var(--hfh-text);
}

.wrap, .container {
  max-width: 680px;
}

/* --- Header / Logo --- */
.header {
  border-bottom: 3px solid var(--hfh-primary);
  padding-bottom: 15px;
  margin-bottom: 30px;
}

.header .logo img {
  max-height: 70px;
  width: auto;
}

/* --- Überschriften --- */
h1, h2, h3 {
  color: var(--hfh-primary);
  font-weight: 700;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.4rem; }

/* --- Inhaltsboxen --- */
.main {
  background: var(--hfh-card-bg);
  border-radius: var(--hfh-radius);
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* --- Buttons --- */
button, .button, input[type="submit"] {
  background: var(--hfh-primary);
  border: none;
  border-radius: 999px;           /* Pill-Form, freundlich */
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

button:hover, .button:hover, input[type="submit"]:hover {
  background: var(--hfh-primary-dark);
  transform: translateY(-1px);
}

/* --- Formularfelder --- */
input[type="text"], input[type="email"], select, textarea {
  border: 2px solid #e0dcd8;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--hfh-font);
  transition: border-color 0.2s ease;
}

input[type="text"]:focus, input[type="email"]:focus,
select:focus, textarea:focus {
  border-color: var(--hfh-primary);
  outline: none;
}

/* --- Checkboxen (Listen-Auswahl) --- */
input[type="checkbox"] {
  accent-color: var(--hfh-primary);
}

/* --- Links --- */
a {
  color: var(--hfh-primary);
}

a:hover {
  color: var(--hfh-primary-dark);
}

/* --- Footer ("Powered by listmonk") dezent --- */
.footer {
  color: var(--hfh-text-light);
  font-size: 0.85rem;
  margin-top: 30px;
}

.footer a {
  color: var(--hfh-text-light);
}

/* --- Herz-Detail unterm Titel 💛 --- */
h1::after {
  content: "❤";
  display: block;
  color: var(--hfh-primary);
  font-size: 1rem;
  margin-top: 6px;
}