/* ==========================================================================
   Das Clubinio-Widget in den Farben des Flyers: Papier, Tinte, Bronze.

   Zwei Dinge sind zu beachten:

   1. Das Widget legt seine Variablen selbst auf `.clubinio-widget`. Eine
      Vorgabe auf einem Vorfahren verliert deshalb — der Selektor hier ist
      doppelt geschrieben, damit er spezifischer ist als der des Widgets.
   2. Das Widget hängt sonst Rubik von fonts.googleapis.com in den Kopf. Diese
      Datei trägt die id `clubinio-widget-font`; auf die prüft das Script,
      bevor es lädt. Dadurch bleibt die Seite ohne Fremd-Origin.
   ========================================================================== */

.clubinio-widget.clubinio-widget {
  --cw-bg-primary: transparent;
  --cw-bg-secondary: rgba(124, 73, 22, 0.05);
  --cw-bg-card: rgba(255, 255, 255, 0.5);
  --cw-bg-elevated: #ffffff;
  --cw-text-primary: #17120e;
  --cw-text-secondary: #4a4038;
  --cw-text-muted: #6b5f55;
  --cw-accent-color: #7c4916;
  --cw-accent-hover: #5e370f;
  --cw-accent-contrast: #ffffff;
  --cw-border-color: rgba(124, 73, 22, 0.12);
  --cw-success-color: #2f7d4f;
  --cw-warning-color: #a86400;
  --cw-error-color: #b3261e;
  --cw-radius-sm: 10px;
  --cw-radius-md: 16px;
  --cw-radius-lg: 20px;

  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Der Newsletter kommt als Karte. Auf dieser Seite steht seine Überschrift
   schon als h2 darüber, und die Karte ist das Panel selbst. */
.clubinio-widget.clubinio-widget .cw-nl {
  background: none; border: 0; padding: 0;
}
.clubinio-widget.clubinio-widget .cw-nl-heading { display: none; }

/* Der Anmeldeknopf des Newsletters nimmt die Kontrastfarbe sonst nicht an
   und stünde schwarz auf Bronze. */
.clubinio-widget.clubinio-widget button[type='submit'] { color: #fff; }

/* Der Plus-Knopf ist im Widget schwarz. Hier trägt er Bronze, der Minus-Knopf
   einen Hauch davon — sonst stechen drei schwarze Punkte aus dem Panel. */
.clubinio-widget.clubinio-widget .cw-qty-increase { background: #7c4916; color: #fff; border-color: #7c4916; }
.clubinio-widget.clubinio-widget .cw-qty-decrease { background: rgba(124, 73, 22, 0.08); border-color: transparent; }