/* ==========================================================================
   richter2026yellow — yellow.css
   Minimal variant of richter2026 that brings back the yellow identity of the
   original (default) theme. Loaded AFTER richter2026's variables.css (see
   template/common/header.tpl); every other stylesheet and script is richter2026's
   own, untouched.

   Parts:
     1. Tokens       — warm yellow neutrals, darker muted text and input outlines
     2. Page canvas  — the page itself is yellow
     3. Outlines     — thin black outlines around cards and panels
     4. Classic look — yellow product cards, boxes, category text and product page
                       panels like the original theme (black outline, drop shadow,
                       framed image)
     5. Home page and Ratgeber pages
     6. Header bar   — yellow top bar (dark nav bar underneath stays as is)
     7. Footer       — yellow edge and headings

   To tune the look, change the --brand-* values below first.
   ========================================================================== */

/* ---- 1. Tokens ------------------------------------------------------------ */

:root {
  --brand-yellow:        #ffffaa;   /* the original shop yellow (#ffa) */
  --brand-yellow-canvas: #ffffdd;   /* the page background (a little lighter than cards and header) */
  --brand-yellow-soft:   #ffffe8;   /* very light tint for card headers, table heads */
  --brand-blue:          #3f77a3;   /* box-heading blue; the original #69b (#6699bb) is only 3.1:1 with white text */
  --brand-line:          #1f2329;   /* thin outlines around cards and panels */

  --color-bg-subtle:     var(--brand-yellow-soft);
  --color-bg-muted:      #fbfac8;

  /* Inner dividers (table rows, lines inside a card): soft but visible */
  --color-border:        #d9d58f;
  /* Input fields, quantity stepper, option buttons: clearly visible outline */
  --color-border-strong: #7a7742;

  /* Secondary text: a bit darker so it holds up on yellow */
  --color-text-muted:    #444b57;
}

::selection {
  background: var(--brand-yellow);
  color: var(--color-text);
}

/* ---- 2. Page canvas ---------------------------------------------------------
   richter2026 paints the page white in exactly three places (body, #container,
   #content). Making those yellow turns the whole page yellow, while everything
   that is a card, box, filter panel, buy box or form field keeps its own
   background. */

body,
#container,
#mainFrame-left,
#mainFrame-right {
  background: var(--brand-yellow-canvas);
}
#content {
  background: transparent;
}

/* ---- 3. Outlines -----------------------------------------------------------
   Only the OUTER outline of cards and panels turns black. Lines inside a card
   (row dividers, table rules) keep the softer --color-border, so the page gets
   defined edges without turning into a grid. */

.box, .box-cat,
.box-product > div, .box-product-featured > div,
.product-grid > div, .category-list > div, .product-list > div,
.category-menu-item > .category-submenu,
.search-criteria, .compare-info,
.product-info .left .image,
.richter-buybox, .richter-spec, .richter-acc, .richter-highlights li,
.richter-home-service, .richter-category-card a,
.richter-form-card, .login-content, .contact-info .content,
.content > .account_left_column, .content > .account_right_column,
.order-list, .return-list, .download-list,
.richter-cart-layout__sidebar, .checkout > div, .checkout-summary,
.cart-total table#total, #notification > *, .pagination .links a {
  border-color: var(--brand-line);
}

/* ---- 4. Classic look ---------------------------------------------------------
   What made the original theme recognisable: products sit on yellow cards with a
   black outline and a drop shadow, the product photo is framed in black, product
   names are bold blue, boxes have a blue heading strip over a yellow body, and the
   category text is a yellow block. Delete this whole section to go back to white
   cards. */

/* product cards: grid, list, "Neuigkeiten" etc. */
.box-product > div,
.box-product-featured > div,
.product-grid > div,
.category-list > div,
.product-list > div {
  background-color: var(--brand-yellow);
  border-radius: 7px;
  box-shadow: 2px 2px 2px #000;
}
.box-product > div:hover,
.box-product-featured > div:hover,
.product-grid > div:hover,
.category-list > div:hover {
  border-color: var(--brand-line);
  box-shadow: 3px 3px 3px #000;
}

/* the product photo: white, framed in black */
.box-product .image,
.box-product-featured .image,
.product-grid .image,
.category-list .image,
.product-list .image {
  background-color: #fff;
  border: 1px solid var(--brand-line);
  border-radius: 3px;
}

/* product names: bold blue, like the original */
.box-product .name a,
.box-product-featured .name a,
.product-grid .name a,
.category-list .name a,
.product-list .name a {
  color: var(--color-primary);
  font-weight: 700;
}

/* fine print on yellow needs the darker grey */
.box-product .price .price-tax,
.box-product-featured .price .price-tax,
.product-grid .price .price-tax,
.product-list .price .price-tax {
  color: var(--color-text-muted);
}

/* orange buttons with the original's dark underside */
.box-product .cart input.button,
.box-product-featured .cart input.button,
.product-grid .cart input.button,
.richter-btn--accent {
  box-shadow: 0 2px 2px #000;
}

/* boxes (filter panel, sidebar modules, "Neuigkeiten"): blue heading strip over
   a yellow body */
.box .box-heading,
.box-cat .box-heading {
  background-color: var(--brand-blue);
  color: #fff;
  border-bottom: 1px solid var(--brand-line);
}
.box .box-content,
.box-cat .box-content {
  background-color: var(--brand-yellow);
}

/* the home page modules ("Neuigkeiten", ...) have their own, more specific
   heading rule in richter2026 (no background, orange underline, gap below);
   without this the white heading text would sit on white */
#content > .box > .box-heading,
#content > div > .box > .box-heading {
  background-color: var(--brand-blue);
  color: #fff;
  border-bottom: 1px solid var(--brand-line);
  border-radius: 6px 6px 0 0;
  margin-bottom: 0;
}
.box .box-heading .category-arrow {
  border-color: #fff;
}
#profifilter_box .box-heading__active {
  color: #fff;
}
#profifilter_box .box-heading .clear_filter {
  color: #fff;
  text-decoration: underline;
}

/* category description: a yellow block */
.category-info {
  background-color: var(--brand-yellow);
  padding: var(--space-4);
  border: 1px solid var(--brand-line);
  border-radius: 7px;
}

/* product page: buy box and specification cards with drop shadow, accordions and
   highlight tiles flat. background-color only: the highlight tiles carry their
   check mark as a background image. */
.richter-buybox,
.richter-spec,
.richter-acc,
.richter-highlights li {
  background-color: var(--brand-yellow);
  border-radius: 7px;
}
.richter-buybox,
.richter-spec {
  box-shadow: 2px 2px 2px #000;
}

/* the description uses the full content width (richter2026 limits it to 75ch) */
#tab-description .richter-prose {
  max-width: none;
}

/* "faint" grey text (tax note, units, labels) is too pale on yellow: inside the
   yellow panels use a darker grey. Scoped by overriding the variable. */
.box-product > div, .box-product-featured > div,
.product-grid > div, .category-list > div, .product-list > div,
.box .box-content, .category-info,
.richter-buybox, .richter-spec, .richter-acc, .richter-highlights li {
  --color-text-faint: #5f6673;
}

/* Modules that list products ("Neuigkeiten", "Kunden kauften auch", ...): the
   product cards look exactly like in the category. For them to stand out, the
   box body takes the lighter page yellow (as the category page does) instead of
   the card yellow. Filter and other boxes keep the yellow body. */
.box .box-content:has(.box-product),
.box .box-content:has(.box-product-featured) {
  background-color: var(--brand-yellow-canvas);
}

/* ---- 5. Home page ---------------------------------------------------------- */

/* "Wir haben kein Ladengeschäft": richter2026's orange (#ff8c00) is only 2.3:1
   on yellow; this is the same hue, darker (6:1). */
.richter-home-notice {
  color: #a63f00;
}

/* the light trust strip (Familienbetrieb seit 1993 ...) gets the same outline */
.richter-trust-bar {
  border: 1px solid var(--brand-line);
}

/* brand logo tiles: a thin black outline drawn INSIDE the tile (a ring outside it
   was cut off by the carousel's own overflow clipping). It stays visible while
   hovering. */
#content [id^="carousel"] .richter-carousel__link,
#column-left [id^="carousel"] .richter-carousel__link,
#column-right [id^="carousel"] .richter-carousel__link {
  outline: 1px solid var(--brand-line);
  outline-offset: -1px;
}

/* Ratgeber pages: richter2026 hard-codes white and grey (#fff, #f4f4f4, #fafafa,
   #ddd) in ratgeber.css instead of using the colour tokens, so they need their
   own overrides. Cards and the featured block follow the product cards; tables
   get a yellow header and warm row stripes. */
.richter-ratgeber__card,
.richter-ratgeber__info-card,
.richter-ratgeber__featured {
  background-color: var(--brand-yellow);
  border-color: var(--brand-line);
}
.richter-ratgeber__card,
.richter-ratgeber__info-card {
  border-radius: 7px;
  box-shadow: 2px 2px 2px #000;
}
.richter-ratgeber__card-number {
  color: var(--color-text-muted);
}
.richter-ratgeber--article .richter-ratgeber__intro,
.richter-ratgeber__note {
  background-color: var(--brand-yellow);
}
.richter-ratgeber__conclusion,
.richter-ratgeber hr {
  border-color: #c9c580;
}
.richter-ratgeber th,
.richter-ratgeber td {
  border-color: #c9c580;
}
.richter-ratgeber th {
  background-color: #f2f27a;
}
.richter-ratgeber td {
  background-color: var(--brand-yellow-soft);
}
.richter-ratgeber tr:nth-child(even) td {
  background-color: var(--color-bg-muted);
}

/* the dark button becomes the shop's orange button */
.richter-ratgeber__button,
.richter-ratgeber__button:visited,
.richter-ratgeber__button:hover,
.richter-ratgeber__button:focus,
.richter-ratgeber__button:active {
  background-color: var(--color-accent);
  box-shadow: 0 2px 2px #000;
}

/* ---- 6. Header top bar -----------------------------------------------------
   Only .richter-header__top turns yellow. The category bar (.richter-nav) and
   the mobile drawer (#menu) stay dark graphite, exactly like the grey menu bar
   under the yellow header of the original theme. Every rule below is scoped to
   .richter-header__top so the same classes inside the dark mobile drawer
   (.richter-mobile-utility) keep their light-on-dark colours. */

.richter-header__top {
  background: var(--brand-yellow);
}

/* hotline (needs !important: richter2026 sets it with !important) */
.richter-header__top .richter-header__hotline {
  color: var(--color-text) !important;
}
.richter-header__top .richter-header__hotline:hover {
  color: var(--color-primary-dark) !important;
}
.richter-header__top .richter-header__hotline-label {
  color: var(--color-text-muted);
}
.richter-header__top .richter-header__hotline-number {
  color: var(--color-text);
}

/* account / logout */
.richter-header__top .richter-header__account {
  color: var(--color-text);
}
.richter-header__top .richter-header__account:hover {
  color: var(--color-primary-dark);
}

/* language links */
.richter-header__top .richter-lang-link {
  color: var(--color-text-muted);
}
.richter-header__top .richter-lang-link:hover,
.richter-header__top .richter-lang-link.is-active {
  color: var(--color-text);
}
.richter-header__top .richter-header__lang a + a::before {
  color: var(--color-text-faint);
}

/* language / currency pills (legacy switcher markup, kept for completeness) */
.richter-header__top #language .selected a,
.richter-header__top #currency .selected a {
  background: rgba(255, 255, 255, 0.65);
  color: var(--color-text);
}
.richter-header__top #language .selected a:hover,
.richter-header__top #currency .selected a:hover {
  background: #fff;
  color: var(--color-text);
}

/* round icon buttons: wishlist, compare, Ratgeber */
.richter-header__top .richter-header__iconlink,
.richter-header__top .richter-header__ratgeber {
  color: var(--color-text);
  border-color: rgba(31, 35, 41, 0.35);
}
.richter-header__top .richter-header__iconlink:hover,
.richter-header__top .richter-header__ratgeber:hover {
  color: var(--color-primary-dark);
  border-color: var(--color-text);
  background: rgba(255, 255, 255, 0.6);
}

/* live counters: the ring around the badge must match the bar behind it */
.richter-header__top .richter-header__badge {
  border-color: var(--brand-yellow);
}

/* ---- 7. Footer -------------------------------------------------------------- */

/* yellow edge where the dark footer starts, and yellow column headings */
#footer {
  border-top: 4px solid var(--brand-yellow) !important;
}
#footer h3,
#footer .column h3 {
  color: var(--brand-yellow) !important;
}