/* ===========================================================================
   Gamesilo-Branding für Listmonk — ÖFFENTLICHE Seiten
   (Anmelde-Formular, Opt-in-Bestätigung, Abmeldung, Archiv).

   Einfügen in:  Listmonk → Settings → Appearance → Tab "Public" → "Custom CSS"
   (Für das Admin-Panel gibt es daneben "Admin custom CSS" — optional.)
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --gs-acc: #ff5a1f;
  --gs-acc-ink: #180a04;
  --gs-acc-sh: #7a2400;
  --gs-bg: #0a0a0c;
  --gs-s1: #0c0c10;
  --gs-s2: #0e0e12;
  --gs-tx: #f4f1ea;
  --gs-tx2: #c9c4bd;
  --gs-mut: #a39e94;
  --gs-line: rgba(255, 255, 255, 0.08);
  --gs-line2: rgba(255, 255, 255, 0.12);
}

/* ---- Grundfläche ---- */
body {
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(255, 90, 31, 0.10), transparent 60%),
    var(--gs-bg) !important;
  color: var(--gs-tx) !important;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ---- Zentrale Karte / Container (Listmonk nutzt je nach Seite .wrap/.container/.box/main) ---- */
.wrap, .container, .box, main, .content, .card {
  background: var(--gs-s2) !important;
  color: var(--gs-tx) !important;
  border: 1px solid var(--gs-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55) !important;
}

/* ---- Typografie ---- */
h1, h2, h3, .title {
  font-family: 'Anton', system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  color: var(--gs-tx) !important;
}
p, label, li, td, .field label { color: var(--gs-tx2) !important; }
.help, .muted, small, .text-muted { color: var(--gs-mut) !important; }

a { color: var(--gs-acc) !important; text-decoration: none !important; }
a:hover { text-decoration: underline !important; }

/* ---- Eingabefelder ---- */
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
textarea, select {
  background: var(--gs-s1) !important;
  color: var(--gs-tx) !important;
  border: 1px solid var(--gs-line2) !important;
  border-radius: 9px !important;
  padding: 11px 13px !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--gs-acc) !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.25) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--gs-acc) !important; }

/* ---- Buttons: „Insel"-Look mit hartem Versatzschatten (wie auf der Landing) ---- */
button, input[type="submit"], .button, .btn {
  background: var(--gs-acc) !important;
  color: var(--gs-acc-ink) !important;
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 12px 24px !important;
  box-shadow: 4px 4px 0 var(--gs-acc-sh) !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
button:hover, input[type="submit"]:hover, .button:hover, .btn:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 5px 5px 0 var(--gs-acc-sh) !important;
}
button:active, input[type="submit"]:active, .button:active, .btn:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 2px 2px 0 var(--gs-acc-sh) !important;
}

/* ---- Listmonk-Standard-Logo/Footer dezent an die Marke angleichen ---- */
.logo, .brand { font-family: 'Anton', sans-serif !important; color: var(--gs-tx) !important; }
.footer, footer { color: var(--gs-mut) !important; border-top: 1px solid var(--gs-line) !important; }

/* ---- Erfolg-/Fehlermeldungen ---- */
.success, .message.success { color: #7df0a6 !important; }
.error, .message.error { color: #ff8a4d !important; }