/* KH Black Deal (Black Friday 2026, Auftrag Fatih 07.11.2026)
   Regel, wann ein Artikel Black Deal ist: custom/kh_black_deal.tpl.
   Schwarz ist hier ausdruecklich gewuenscht ("schwarzes Black Deal"-Band) —
   Ausnahme von der Hausregel "hell, kein Schwarz", nur fuer diese Aktion.
   Farbe = --color-text (#111827), weisse Schrift: Kontrast 17,7:1 (WCAG AAA).
   Nach dem 01.12.2026 kann die Datei samt Einbindung wieder raus. */

/* 1. Karte (Kategorie, Suche, Startseite, Querverkauf): gleiche Pille wie SALE,
      Form/Hoehe/Schrift kommen aus .kh-pill bzw. #product-list .kh-pill (custom.css). */
.kh-pill--blackdeal,
#product-list .kh-pill--blackdeal {
  background: var(--color-text, #111827);
  color: #fff;
  text-transform: uppercase;
}

/* 2. Artikelseite, Bildfolie oben links (Platz der Promo-Baender auf der Karte).
      Steht "Kostenlose Lieferung" schon dort, sitzt das Band darunter:
      Versand-Hinweis ist 32 px hoch (7+16+7 + 2 Rand) bzw. 30 px am Handy. */
body #product-offer .kh-gallery-blackdeal {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 7px;
  background: var(--color-text, #111827);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(17, 24, 39, .16);
  pointer-events: none;
}
body #product-offer .kh-gallery-blackdeal--below {
  top: 52px;
}
@media (max-width: 767.98px) {
  body #product-offer .kh-gallery-blackdeal {
    top: 11px;
    left: 11px;
    height: 24px;
    padding: 0 10px;
    font-size: 11.5px;
  }
  body #product-offer .kh-gallery-blackdeal--below {
    top: 46px;
  }
}

/* 3. Artikelseite, direkt unter dem Preis: schwarzer Kasten
      "BLACK DEAL – nur bis 30.11. · endet in X Tagen". Serverseitig im HTML,
      darum kein Layoutsprung. */
body .kh-bd-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 10px 0 4px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--color-text, #111827);
  color: #fff;
  font-family: var(--font-body, 'Lato', sans-serif);
  font-size: 14px;
  line-height: 1.3;
}
body .kh-bd-hint__tag {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body .kh-bd-hint__txt {
  font-weight: 700;
}
/* Handy: bewusst zwei Zeilen (Marke oben, Datum darunter) statt eines
   zufaelligen Umbruchs mit dem Strich am Zeilenanfang. */
@media (max-width: 767.98px) {
  body .kh-bd-hint {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  body .kh-bd-hint__sep {
    display: none;
  }
  body .kh-bd-hint__txt {
    display: block;
  }
  body .kh-bd-hint__txt::first-letter {
    text-transform: uppercase;
  }
}