/* ═══════════════════════════════════════════════════════════════════════
   Das Clubinio-Widget im ZWO3ZWO-Look.

   Zwei Dinge sind dabei zu wissen, beide sind keine Stilfragen:

   1. Das Widget legt seine CSS-Variablen auf `.clubinio-widget` selbst. 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.
      Es überspringt das, wenn im Dokument schon ein Element mit der id
      `clubinio-widget-font` steht — die trägt diese Datei in index.html.
      **Wird die id entfernt, holt das Widget die Schrift bei Google**, die IP
      jedes Besuchers geht dorthin, bevor irgendein Banner greift, und die
      Datenschutzerklärung dieser Seite stimmt nicht mehr.

   Das Widget steht hier auf weißem Grund, nicht auf dem Himmel: Preise und
   Mengenwähler müssen lesbar sein, und Weiß ist im Flyer ohnehin die dritte
   Farbe neben Blau und Gelb.
   ═══════════════════════════════════════════════════════════════════════ */

.clubinio-widget.clubinio-widget {
  --cw-bg-primary: transparent;
  --cw-bg-secondary: rgb(32 52 206 / 4%);
  --cw-bg-card: transparent;
  --cw-bg-elevated: rgb(32 52 206 / 7%);
  --cw-text-primary: #0c1455;
  --cw-text-secondary: rgb(12 20 85 / 72%);
  --cw-text-muted: rgb(12 20 85 / 48%);
  --cw-accent-color: #2034ce;
  --cw-accent-hover: #141f82;
  --cw-accent-contrast: #ffffff;
  --cw-border-color: rgb(32 52 206 / 20%);
  --cw-success-color: #1d9a5c;
  --cw-warning-color: #b47400;
  --cw-error-color: #cb2033;

  /* Der Flyer kennt keine Rundungen: harte Rechtecke, harte Kanten. */
  --cw-radius-sm: 0px;
  --cw-radius-md: 0px;
  --cw-radius-lg: 0px;

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

/* Die eigene Überschrift des Widgets entfällt — über ihm steht schon ein h2,
   und zwei Überschriften übereinander liest niemand. `hide-heading` kennt nur
   clubinio-faq, deshalb der Weg über CSS. */
.clubinio-widget.clubinio-widget .cw-fm,
.clubinio-widget.clubinio-widget .cw-nl {
  padding: 0;
  border: 0;
  background: none;
}

.clubinio-widget.clubinio-widget .cw-fm-heading,
.clubinio-widget.clubinio-widget .cw-nl-heading {
  display: none;
}

/* „powered by clubinio.de“ als Textzeile — unter dem Widget steht
   stattdessen das Logo (.shop__powered in style.css). */
.clubinio-widget.clubinio-widget .cw-powered-by {
  display: none;
}

/* ── Ticketkasten auf der Startseite ─────────────────────────────────────
   Wünsche vom 29.10.2026. Das Widget setzt mehrere Farben fest im eigenen
   Stylesheet statt über seine Variablen — deshalb hier ausdrücklich. */

/* Ticketnamen kräftiger. */
.clubinio-widget.clubinio-widget .cw-ticket-name {
  font-weight: 800;
}

/* Plus-Knopf: im Widget fest Schwarz, hier im Blau der Seite. */
.clubinio-widget.clubinio-widget .cw-qty-increase {
  background: #2034ce;
  border-color: #2034ce;
  color: #fff;
}

.clubinio-widget.clubinio-widget .cw-qty-increase:hover:not(:disabled) {
  background: #141f82;
}

/* Gutschein: ganz leichter Hintergrund, damit es als eigener Bereich
   lesbar ist. */
.clubinio-widget.clubinio-widget .cw-coupon {
  background: rgb(32 52 206 / 5%);
}

/* „Weiter zur Kasse": Das Widget setzt die Schrift fest auf fast Schwarz
   und übergeht `--cw-accent-contrast` — auf Blau unlesbar. */
.clubinio-widget.clubinio-widget .cw-checkout-btn {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}