/*
  Tropfwerk · Custom CSS für Listmonks ÖFFENTLICHE Seiten
  (Opt-in-Bestätigung, Abmeldung, Abo-Verwaltung, Archiv).

  Einbau: Listmonk → Settings → Appearance → Tab "Public" → Feld "Custom CSS"
  einfügen → Save. Wird vom Layout über <link href="/public/custom.css"> geladen
  (NACH style.css), überschreibt also die Defaults. Kein File-Editing nötig.

  v6.1.0-Selektoren (style.css). Ziel: gleicher Look wie Website + Mails —
  warmes Sandbeige, helle Karte, grüne Pills, echte Tropfen-Marke + Inter-Wortmarke.
*/

/* Inter wie auf der Website — über Bunny Fonts (DSGVO-freundlich, kein Google) */
@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700');

/* Seite + Grundfarben + Schrift */
body {
  background: #ece6d5;
  color: #3e3d32;
  font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
input, button, select, textarea, .button {
  font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* Inhaltskarte (Element hat class="container wrap") */
.container.wrap {
  background: #faf6ed;
  border: 1px solid #ddd6bf;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(74, 68, 42, 0.06);
}

/* Überschriften – kräftiger + CI-Farbe (Default ist font-weight:400) */
h1, h2, h3, h4 {
  color: #23271c;
  font-weight: 700;
}

/* Links */
a {
  color: #15803d;
  text-decoration-color: rgba(21, 128, 61, 0.4);
}
a:hover {
  color: #166534;
}

/* Buttons als grüne Pills, weißer fetter Text (Default: blau, eckig) */
.button,
button,
input[type="submit"] {
  background: #15803d;
  color: #ffffff;
  font-weight: 600;
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.button:hover,
button:hover,
input[type="submit"]:hover {
  background: #166534;
  color: #ffffff;
}

/* Formularfelder */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  border-color: #ddd6bf;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #15803d;
}

/* Kopf/Trennlinie */
.header {
  border-bottom-color: #e6dfca;
}

/* ── Logo wie auf der Website ──────────────────────────────────────
   listmonk-Logo ausblenden; auf dem <a> die echte Tropfen-Marke als
   Hintergrund (inline SVG, kein Hosting nötig); Wortmarke "Tropfwerk"
   als echter Text in Inter (Tropf dunkel, werk grün) über ::before/::after. */
.header .logo img {
  display: none;
}
.header .logo a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
  min-height: 28px;
  padding-left: 32px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%2386efac'/><stop offset='1' stop-color='%2316a34a'/></linearGradient></defs><path d='M16 2.6C16 2.6 26.4 14.2 26.4 21A10.4 10.4 0 1 1 5.6 21C5.6 14.2 16 2.6 16 2.6Z' fill='url(%23g)'/><g fill='%2306121b' fill-opacity='.92'><rect x='14.8' y='12.2' width='2.4' height='3.5' rx='.5'/><rect x='14.8' y='12.2' width='2.4' height='3.5' rx='.5' transform='rotate(45 16 19.6)'/><rect x='14.8' y='12.2' width='2.4' height='3.5' rx='.5' transform='rotate(90 16 19.6)'/><rect x='14.8' y='12.2' width='2.4' height='3.5' rx='.5' transform='rotate(135 16 19.6)'/><rect x='14.8' y='12.2' width='2.4' height='3.5' rx='.5' transform='rotate(180 16 19.6)'/><rect x='14.8' y='12.2' width='2.4' height='3.5' rx='.5' transform='rotate(225 16 19.6)'/><rect x='14.8' y='12.2' width='2.4' height='3.5' rx='.5' transform='rotate(270 16 19.6)'/><rect x='14.8' y='12.2' width='2.4' height='3.5' rx='.5' transform='rotate(315 16 19.6)'/><circle cx='16' cy='19.6' r='4.6'/></g><circle cx='16' cy='19.6' r='1.9' fill='%2386efac'/></svg>") left center / 24px 24px no-repeat;
}
.header .logo a::before {
  content: "Tropf";
  font-size: 20px;
  font-weight: 600;
  color: #23271c;
  letter-spacing: -0.02em;
}
.header .logo a::after {
  content: "werk";
  font-size: 20px;
  font-weight: 600;
  color: #15803d;
  letter-spacing: -0.02em;
}

/* Footer ("powered by listmonk") ausblenden – enthält nur die Attribution */
footer.container {
  display: none;
}