/* ColorusKopfleiste 1.0.1 (06.10.2026) – nur Darstellung. Aktiv mit html.kx-kopf (setzt das Plugin im <head>).
   Warenkorb/Konto beschriftet, Artikelzahl sichtbar, Merkzettel-Knopf aus, Handy: eine Zeile + Suchfeld sichtbar. */
.kx-kopf { --kx-gruen: #7abb11; --kx-gruen-dunkel: #5e8f00; --kx-text: #2b3136; --kx-grau: #6b7680; }

/* ---------- gemeinsame Bausteine ---------- */
.kx-kopf .header-actions-btn { color: var(--kx-text); }
.kx-kopf .kx-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.kx-kopf .kx-klein { font-size: 12px; color: var(--kx-grau); font-weight: 400; white-space: nowrap; }
.kx-kopf .kx-gross { font-size: 14px; font-weight: 700; color: var(--kx-text); white-space: nowrap; }

/* Merkzettel-Knopf im Kopf aus (Betreiber 06.10.; Herzen auf Produktseiten und /wishlist bleiben) */
.kx-kopf .header-actions-col .col-auto:has(> .header-wishlist), .kx-kopf .header-wishlist { display: none !important; }

/* Warenkorb: Tasche + Zahl + Wort "Warenkorb" + Betrag */
.kx-kopf .header-cart-btn { display: inline-flex !important; align-items: center; gap: 16px; padding: 6px 14px 6px 12px !important; border-radius: 8px; background: #f3f8ea; border: 1px solid #dcebc4 !important; }
.kx-kopf .header-cart-btn:hover { background: #e9f3d8; }
.kx-kopf .header-cart-icon { position: relative; display: inline-flex !important; width: auto !important; }
.kx-kopf .header-cart-icon .icon { width: 26px; height: 26px; color: var(--kx-gruen-dunkel) !important; }
.kx-kopf .header-cart-icon .icon svg { width: 26px; height: 26px; top: 0; }
.kx-kopf .kx-tasche, .kx-kopf .kx-tasche path { fill: none !important; stroke: currentColor !important; }
.kx-kopf .header-cart-total { display: none !important; }
.kx-kopf .kx-badge { position: absolute; top: -7px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--kx-gruen); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.kx-kopf .kx-badge.kx-null { display: none; }
.kx-kopf .header-cart-btn .kx-kern { display: none !important; }
.kx-kopf .header-cart-btn .kx-gross { color: var(--kx-gruen-dunkel); }

/* Konto: Figur + "Anmelden" / "Mein Konto" */
.kx-kopf .account-menu-btn { display: inline-flex !important; align-items: center; gap: 8px; padding: 6px 10px !important; }
.kx-kopf .account-menu-btn .icon { width: 24px; height: 24px; }
.kx-kopf .account-menu-btn .icon svg { width: 24px; height: 24px; top: 0; }

/* ---------- Rechner ---------- */
@media (min-width: 992px) {
  .kx-kopf .header-main .header-actions-col > .row { align-items: center; gap: 6px; flex-wrap: nowrap; }
  .kx-kopf .header-main .header-search { max-width: 520px; width: 100%; }
}

/* ---------- Handy / schmal ---------- */
@media (max-width: 575.98px) {
  /* eine Zeile: Menü | Logo | Konto | Warenkorb, darunter immer sichtbare Suche */
  .kx-kopf header.header-main .header-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 2px; padding: 6px 12px 8px; margin: 0; }
  .kx-kopf header.header-main .header-actions-col,
  .kx-kopf header.header-main .header-actions-col > .row { display: contents !important; }
  .kx-kopf header.header-main .header-row > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .kx-kopf header.header-main .header-actions-col > .row > * { width: auto !important; padding: 0 !important; }
  .kx-kopf header.header-main .header-actions-col .col:has(.menu-button) { grid-column: 1; grid-row: 1; }
  .kx-kopf header.header-main .header-logo-col { grid-column: 2; grid-row: 1; }
  .kx-kopf header.header-main .header-logo-main { text-align: left !important; padding-left: 4px; }
  .kx-kopf header.header-main .header-logo-main-link { display: inline-block; }
  .kx-kopf header.header-main .header-logo-main-img { max-height: 34px !important; width: auto; margin: 0 !important; }
  .kx-kopf header.header-main .header-logo-picture { margin: 0 !important; }
  .kx-kopf header.header-main .header-actions-col .col-auto:has(.account-menu) { grid-column: 3; grid-row: 1; }
  .kx-kopf header.header-main .header-actions-col .col-auto:has(.header-cart) { grid-column: 4; grid-row: 1; }
  .kx-kopf header.header-main .header-actions-col .col-auto:has(.search-toggle),
  .kx-kopf header.header-main .header-actions-col .col-auto:has(.language-menu) { display: none !important; }
  .kx-kopf header.header-main .header-search-col { grid-column: 1 / -1; grid-row: 2; margin-top: 6px !important; }
  .kx-kopf header.header-main .header-search-col .collapse { display: block !important; height: auto !important; visibility: visible !important; }
  .kx-kopf header.header-main .header-search-col .row, .kx-kopf header.header-main .header-search-col .col { margin: 0 !important; padding: 0 !important; }
  .kx-kopf header.header-main .header-search-col .nav-main-toggle-btn,
  .kx-kopf header.header-main .header-search-col .header-close-btn { display: none !important; }
  .kx-kopf header.header-main .header-search { margin: 0 !important; max-width: none; }
  .kx-kopf header.header-main .header-search-form .input-group { flex-wrap: nowrap; width: 100%; }
  .kx-kopf header.header-main .header-search-input { height: 42px; border-radius: 8px 0 0 8px !important; font-size: 16px; }
  .kx-kopf header.header-main .header-search-btn { height: 42px; border-radius: 0 8px 8px 0 !important; }

  /* Symbole mit Wort darunter */
  .kx-kopf header.header-main .nav-main-toggle-btn,
  .kx-kopf header.header-main .account-menu-btn,
  .kx-kopf header.header-main .header-cart-btn { flex-direction: column; gap: 1px !important; padding: 4px 8px !important; min-width: 52px; background: none; border: 0 !important; }
  .kx-kopf header.header-main .kx-wort { display: block; font-size: 11px; line-height: 1.1; color: var(--kx-text); font-weight: 600; }
  .kx-kopf header.header-main .kx-text { display: none; }
  .kx-kopf header.header-main .header-cart-icon .icon,
  .kx-kopf header.header-main .header-cart-icon .icon svg { width: 24px; height: 24px; }
  .kx-kopf header.header-main .kx-badge { top: -6px; right: -10px; }

  /* Mitlaufender Kopf beim Scrollen (.navigation-sticky, seit 1.0.1): gleiche Symbole mit Wort, alles in einer Zeile.
     In 1.0.0 standen dort Rechner-Beschriftung + Wort nebeneinander, der Warenkorb rutschte in eine zweite Zeile. */
  .kx-kopf .navigation-sticky .header-row:not(:has(.collapse.show, .collapsing)) { flex-wrap: nowrap !important; }
  /* leerer Suchbereich (Suche zu) nahm die halbe Zeile ein; mit "Suche" geoeffnet erscheint er wie bisher */
  .kx-kopf .navigation-sticky .header-search-col:not(:has(.collapse.show, .collapsing)) { display: none !important; }
  .kx-kopf .navigation-sticky .header-actions-col > .row { width: 100% !important; }
  .kx-kopf .navigation-sticky .header-actions-col { flex: 1 1 auto !important; width: auto !important; }
  .kx-kopf .navigation-sticky .header-actions-col > .row { flex-wrap: nowrap !important; align-items: center; justify-content: space-between; }
  .kx-kopf .navigation-sticky .header-actions-col > .row > * { flex: 1 1 0 !important; width: auto !important; display: flex; justify-content: center; }
  .kx-kopf .navigation-sticky .header-actions-col > .row > *:has(.language-menu),
  .kx-kopf .navigation-sticky .header-actions-col > .row > *:has(.header-wishlist) { display: none !important; }
  .kx-kopf .navigation-sticky .header-actions-btn .icon { height: 22px; display: inline-flex; }
  .kx-kopf .navigation-sticky .header-actions-btn .icon svg { top: 0 !important; }
  .kx-kopf .navigation-sticky .nav-main-toggle-btn,
  .kx-kopf .navigation-sticky .search-toggle-btn,
  .kx-kopf .navigation-sticky .account-menu-btn,
  .kx-kopf .navigation-sticky .header-cart-btn { display: inline-flex !important; flex-direction: column; align-items: center; gap: 1px !important; padding: 2px 8px !important; min-width: 52px; background: none; border: 0 !important; }
  .kx-kopf .navigation-sticky .kx-wort { display: block; font-size: 11px; line-height: 1.1; color: var(--kx-text); font-weight: 600; }
  .kx-kopf .navigation-sticky .kx-text { display: none !important; }
  .kx-kopf .navigation-sticky .header-cart-icon .icon,
  .kx-kopf .navigation-sticky .header-cart-icon .icon svg,
  .kx-kopf .navigation-sticky .account-menu-btn .icon,
  .kx-kopf .navigation-sticky .account-menu-btn .icon svg { width: 22px; height: 22px; }
  .kx-kopf .navigation-sticky .kx-badge { top: -6px; right: -10px; }
}
@media (min-width: 576px) {
  .kx-kopf .kx-wort { display: none; }
}