/* Artikl Frontend-Forms — Gate + Newsletter. Alle variablen Werte als
   --artikl-* Custom Properties (Defaults = Plugin-Look). Designer ueberschreiben
   ohne !important. Einzige dynamische Inline-Quelle: --artikl-accent (Tenant). */
.artikl-gate,
.artikl-newsletter-form {
  --artikl-accent: #e91e63;
  --artikl-accent-contrast: #fff;
  --artikl-font-size: 14px;
  --artikl-field-bg: #fff;
  --artikl-field-fg: inherit;
  --artikl-field-border: #d4d4d8;
  --artikl-field-radius: 8px;
  --artikl-field-pad: 10px 14px;
  --artikl-btn-pad: 10px 20px;
  --artikl-gap: 8px;
  --artikl-success-color: #16a34a;
  --artikl-error-color: #ef4444;
}

/* ---- gemeinsame Controls ---- */
.artikl-gate input[type="email"],
.artikl-newsletter-form input[type="email"] {
  padding: var(--artikl-field-pad);
  border: 1px solid var(--artikl-field-border);
  border-radius: var(--artikl-field-radius);
  background: var(--artikl-field-bg);
  color: var(--artikl-field-fg);
  font-size: var(--artikl-font-size);
  box-sizing: border-box;
}
.artikl-gate button[type="submit"],
.artikl-newsletter-form button[type="submit"] {
  padding: var(--artikl-btn-pad);
  background: var(--artikl-accent);
  color: var(--artikl-accent-contrast);
  border: none;
  border-radius: var(--artikl-field-radius);
  font-size: var(--artikl-font-size);
  font-weight: 600;
  cursor: pointer;
}
.artikl-nl-msg,
.artikl-gate-msg { margin-top: var(--artikl-gap); font-size: 13px; }
.artikl-nl-msg.is-success,
.artikl-gate-msg.is-success { color: var(--artikl-success-color); }
.artikl-nl-msg.is-error,
.artikl-gate-msg.is-error { color: var(--artikl-error-color); }

/* ---- Newsletter-Layout (Feld + Button nebeneinander) ---- */
.artikl-newsletter-form form {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--artikl-gap);
}
.artikl-newsletter-form input[type="email"] { flex: 1 1 240px; max-width: 340px; }
.artikl-newsletter-form .artikl-nl-msg { flex-basis: 100%; margin: 0; }

/* ---- Gate-Karte ---- */
.artikl-gate {
  --artikl-card-bg: #fafafa; --artikl-card-border: #e4e4e7;
  --artikl-card-radius: 14px; --artikl-card-pad: 20px 22px; --artikl-card-max: 520px;
  --artikl-title-color: #18181b; --artikl-teaser-color: #52525b;
  --artikl-consent-color: #a1a1aa;
  max-width: var(--artikl-card-max); margin: 24px auto; padding: var(--artikl-card-pad);
  border: 1px solid var(--artikl-card-border); border-radius: var(--artikl-card-radius);
  background: var(--artikl-card-bg);
}
.artikl-gate-title  { font-size: 17px; font-weight: 700; color: var(--artikl-title-color); margin-bottom: 6px; }
.artikl-gate-teaser { font-size: 14px; line-height: 1.55; color: var(--artikl-teaser-color); margin-bottom: 14px; }
.artikl-gate-form   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--artikl-gap); }
.artikl-gate-form input[type="email"] { flex: 1 1 240px; max-width: 340px; }
.artikl-gate-consent { margin-top: var(--artikl-gap); font-size: 11px; line-height: 1.5; color: var(--artikl-consent-color); }
.artikl-gate-consent, .artikl-gate-msg { flex-basis: 100%; }
.artikl-gate-success { font-size: 14px; color: var(--artikl-success-color); }

/* Honeypot — fuer Menschen unsichtbar */
.artikl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }