/* Uwe Höll — Listmonk PUBLIC PAGES im Website-Look ("Midnight Navy & Gold").
 *
 * WO EINFÜGEN: Listmonk → Settings → Appearance → Public → "Custom CSS".
 * Den ganzen Inhalt dieser Datei dort hineinkopieren und speichern.
 *
 * WARUM DORT UND NICHT ALS DATEI: Listmonk liefert dieses CSS aus der eigenen
 * Datenbank aus (/public/custom.css). Es überlebt damit jedes Update — anders
 * als die System-Mail-Vorlage, die nach jedem Listmonk-Upgrade neu über
 * --static-dir untergeschoben werden muss.
 *
 * WELCHE SEITEN: alles, was Besucher von Listmonk zu sehen bekommen — die
 * Bestätigungsseite nach dem Opt-in-Klick, das Abmelden, die Verwaltung der
 * Newsletter-Einstellungen und das öffentliche Archiv.
 *
 * LOGO: Das Bild im Kopf kommt aus Settings → General → "Logo URL". Ist es
 * leer, zeigt Listmonk sein EIGENES Logo. Auf
 * https://uwehoell.de/images/logo-uwehoell.png setzen — die Wortmarke ist hell
 * und steht hier wie in den Mails auf navy Grund.
 */

/* --- Grundfläche: warmes Elfenbein wie die Website ------------------------ */
html,
body {
  background: #f4f1e9; /* paper */
  color: #15213b; /* ink */
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

/* --- Die Karte ----------------------------------------------------------- */
.container.wrap {
  background: #fcfaf4; /* card */
  border: 1px solid #e6e0d2;
  border-radius: 18px;
  overflow: hidden;
  padding: 0 0 36px;
  margin-top: 28px;
  box-shadow: 0 18px 40px rgba(21, 33, 59, 0.06);
}

/* Inhalt der Karte einrücken — der Kopf bleibt bewusst randlos. */
.container.wrap > *:not(.header) {
  padding-left: 44px;
  padding-right: 44px;
}

/* --- Kopf: navy Block mit Wortmarke, darunter die goldene Linie ---------- */
.header {
  background: #15213b; /* ink */
  border-bottom: 4px solid #e8a33d; /* gold-bright */
  margin: 0 0 32px;
  padding: 30px 24px 26px;
  text-align: center;
}
.header .logo img {
  max-height: 56px;
  width: auto;
}

/* --- Typografie ---------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  color: #15213b;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.3px;
}
h2 {
  font-size: 23px;
}

/* gold-deep: erfüllt AA (4.5:1) auf hellem Grund — wie auf der Website. */
a {
  color: #8a5f12;
}
a:hover {
  color: #15213b;
}

.small,
footer.container {
  color: #6b6f7d; /* muted */
}

/* --- Formulare ----------------------------------------------------------- */
input[type='text'],
input[type='email'],
input[type='password'],
select {
  background: #f4f1e9;
  border: 1px solid rgba(21, 33, 59, 0.15);
  border-radius: 10px;
  color: #15213b;
  padding: 12px 14px;
}
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
select:focus {
  border-color: #b8801c;
  outline: none;
}

/* Primäraktion wie auf der Website: gold gefüllt, navy Schrift, Pillenform. */
.button {
  background: #e8a33d; /* gold-bright */
  border: 2px solid #e8a33d;
  border-radius: 999px;
  color: #15213b;
  font-weight: 700;
  padding: 12px 30px;
}
.button:hover {
  background: #b8801c;
  border-color: #b8801c;
  color: #15213b;
}
.button.button-outline {
  background: transparent;
  border-color: #15213b;
  color: #15213b;
}
.button.button-outline:hover {
  background: #15213b;
  color: #fbfaf4;
}

/* --- Fusszeile ("powered by listmonk") ----------------------------------- */
footer.container {
  font-size: 12px;
  padding-top: 18px;
  text-align: center;
}

@media only screen and (max-width: 620px) {
  .container.wrap > *:not(.header) {
    padding-left: 22px;
    padding-right: 22px;
  }
}