:root{
  --de-black:#0f0f10;
  --de-red:#8c0f1a;
  --de-gold:#c6a300;
  --btn-grad: linear-gradient(135deg, #000000 0%, var(--de-gold) 100%);
}

/* gradient buttons: black -> gold */
.btn-gradient, .button-gradient, a.btn-gradient, button.btn-gradient{
  background: var(--btn-grad) !important;
  color:#fff !important;
  border: 1px solid rgba(0,0,0,.20) !important;
}

/* transparent / outline buttons: dark red border (e.g. Angebot...) */
.btn-outline, .btn-transparent, .btn-ghost,
a.btn-outline, a.btn-transparent, a.btn-ghost,
button.btn-outline, button.btn-transparent, button.btn-ghost{
  background: transparent !important;
  border: 2px solid var(--de-red) !important;
  color: var(--de-red) !important;
}
.btn-outline:hover, .btn-transparent:hover, .btn-ghost:hover,
a.btn-outline:hover, a.btn-transparent:hover, a.btn-ghost:hover,
button.btn-outline:hover, button.btn-transparent:hover, button.btn-ghost:hover{
  background: rgba(140,15,26,.08) !important;
}

/* BSE image cards */
.bse-image-cards{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin: 18px 0;
}
.bse-image-card{
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding:12px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
}
.bse-image-card img{
  width: 30% !important;
  height: auto !important;
  display:block;
  cursor:pointer;
}

/* Catalog category thumbs (if markup contains <img>) */
.catalog-grid img, .category-grid img, .categories-grid img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* ── Buttons mit deutschen Nationalfarben (Schwarz-Rot-Gold) ─────── */

/* Primary: schwarzer Hintergrund mit goldener Schrift */
.btn-primary, a.btn-primary, button.btn-primary {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
  color: #f5c400 !important;
  border: 1px solid #f5c400 !important;
  font-weight: 700 !important;
}
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover {
  background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 100%) !important;
  box-shadow: 0 0 0 3px rgba(245,196,0,.25) !important;
}

/* Ghost/outline: transparenter Hintergrund, roter Rand */
.btn-ghost, a.btn-ghost, button.btn-ghost,
.btn-outline, a.btn-outline, button.btn-outline {
  background: transparent !important;
  border: 2px solid #b10019 !important;
  color: #b10019 !important;
  font-weight: 600 !important;
}
.btn-ghost:hover, a.btn-ghost:hover,
.btn-outline:hover, a.btn-outline:hover {
  background: rgba(177,0,25,.08) !important;
}

/* White button (on dark/gradient bg) - gold accent */
.btn-white, a.btn-white {
  background: #f5c400 !important;
  color: #111 !important;
  border: none !important;
  font-weight: 700 !important;
}
.btn-white:hover, a.btn-white:hover {
  background: #f0bb00 !important;
  box-shadow: 0 4px 12px rgba(245,196,0,.4) !important;
}

/* Ghost-white (on dark bg) - reddish tint */
.btn-ghost-white, a.btn-ghost-white {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,.6) !important;
  color: #fff !important;
}
.btn-ghost-white:hover, a.btn-ghost-white:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: #f5c400 !important;
  color: #f5c400 !important;
}

/* The DE accent stripe gradient - already in HTML, but ensure gold tip */