@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap');

/*
  SHARE2B:GREEN - Marken-Typografie und Akzente.
  Ergaenzt base.css: Rubik Bold fuer Ueberschriften, Roboto fuer Fliesstext,
  H1/H2 dunkelblau, H3 stahlblau und der gruene Akzent.
*/

:root {
  --brand-heading: 35, 56, 78; /* #23384E */
  --brand-subheading: 70, 96, 119; /* #466077 */
  --brand-body: 16, 24, 32; /* #101820 */
  --brand-accent: 120, 190, 32; /* #78BE20 */
  --brand-shadow: 112, 116, 121; /* #707479 */
}

/* Schriftfamilien verbindlich setzen */
html body {
  font-family: 'Roboto', sans-serif;
  color: rgb(var(--color-foreground));
}

html :is(h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5, .h6, .hxl, .hxxl) {
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
}

html .rte,
html .rte p,
html .rte li {
  color: rgb(var(--color-foreground));
}

/* H1 und H2 dunkelblau */
html :is(h1, h2, .h0, .h1, .h2, .hxl, .hxxl) {
  color: rgb(var(--brand-heading));
}

/* H3 (und kleinere Zwischenueberschriften) stahlblau */
html :is(h3, h4, h5, h6, .h3, .h4, .h5, .h6) {
  color: rgb(var(--brand-subheading));
}

/* Auf dunklen bzw. gruenen Flaechen bleibt die Schrift in der Schemafarbe */
html :is(.color-scheme-3, .color-scheme-4, .color-scheme-5)
  :is(h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5, .h6, .hxl, .hxxl) {
  color: rgb(var(--color-foreground));
}

/* Gruener Akzent an den Stellen, an denen er Orientierung gibt */
html .price--on-sale .price-item--sale,
html .price__badge-sale {
  color: rgb(var(--brand-accent));
}

html .card__heading a:hover,
html .full-unstyled-link:hover {
  text-decoration-color: rgb(var(--brand-accent));
  text-underline-offset: 0.3rem;
}

/*
  Mega-Menue: ab Desktop-Breite mittig im Header.
  Logo links, Navigation in der Mitte, Icons (Suche, Konto, Warenkorb) rechts.
*/
@media screen and (min-width: 990px) {
  html .header--middle-left.header--has-menu {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    column-gap: 2rem;
  }

  html .header--middle-left.header--has-menu > .header__heading,
  html .header--middle-left.header--has-menu > .header__heading-link {
    order: 1;
    flex: 0 0 auto;
    margin-right: 0;
  }

  html .header--middle-left.header--has-menu > .header__inline-menu {
    order: 2;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }

  html .header--middle-left.header--has-menu > .header__inline-menu .list-menu--inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  html .header--middle-left.header--has-menu > .header__icons {
    order: 3;
    flex: 0 0 auto;
    margin-left: 0;
  }
}