/*
 * Fünftes Navigationsicon "Märkte" - vorerst nur Desktop.
 *
 * Die vier bestehenden Icons kommen aus der Icon-Schrift cash-20220919-icons.
 * Für "Märkte" existiert dort keine Glyphe, daher wird das Icon hier als
 * SVG-Maske eingesetzt. Über `background-color: currentColor` erbt es die
 * Farbe genauso wie ein Schriftglyph - inklusive der weißen Kopfzeilenfarbe
 * und etwaiger Hover-/Aktiv-Zustände.
 *
 * Motiv: Font Awesome "chart-line-up" (Thin), nachgezeichnet als Strichpfad,
 * damit die Strichstärke zu den vorhandenen Linien-Icons passt.
 *
 * Der Menüpunkt trägt die Klasse .nav-item--desktop-only:
 *   - Desktop-Kopfzeile und Slideout      -> sichtbar
 *   - Offcanvas-Menü (Hamburger, mobil)   -> hier ausgeblendet
 *   - Mobile Sticky-Leiste                -> in setMobileMenu() übersprungen
 */

/* ---- Icon: Desktop-Kopfzeile und Slideout ---- */

#navigation-primary-header > li.nav-item--desktop-only > a > .icon-Maerkte_white:before,
#navigation-primary-header-slideout > li.nav-item--desktop-only > a > .icon-Maerkte_white:before {
  content: "";
  /*
   * Gleiche Boxmasse wie die Schrift-Icons (font-size/line-height 65px),
   * damit der Beschriftungstext exakt auf derselben Linie sitzt wie bei den
   * anderen vier Eintraegen. Die sichtbare Zeichnungsgroesse steuert
   * ausschliesslich mask-size.
   */
  display: block;
  width: 65px;
  height: 65px;
  background-color: currentColor;
  -webkit-mask-image: var(--nav-maerkte-icon);
  mask-image: var(--nav-maerkte-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /*
   * Leicht nach unten gerueckt: die vier Schrift-Icons stehen optisch auf
   * einer gemeinsamen Grundlinie. Rein zentriert saesse die kleinere
   * Zeichnung sichtbar hoeher als ihre Nachbarn.
   */
  -webkit-mask-position: center 86%;
  mask-position: center 86%;
  /*
   * Groesse und Strichstaerke sind an den vier Schrift-Icons ausgemessen,
   * damit das Icon als Teil derselben Familie liest:
   *
   *   Nachbar-Icons  Zeichnungshoehe ~49.5px, Strich ~1.6px
   *   dieses Icon    Zeichnungshoehe ~43.5px, Strich ~1.6px
   *
   * Die etwas geringere Hoehe entspricht dem Entwurf (nav2) - ein rein
   * geometrisches Motiv wirkt bei gleicher Hoehe schwerer als die
   * detaillierten Objektzeichnungen daneben.
   *
   * Die Strichstaerke im SVG ist gegengerechnet: 1.8 x 58/64 = 1.63px.
   */
  -webkit-mask-size: 58px 58px;
  mask-size: 58px 58px;
}

/*
 * Vorschlag 2 (Liniendiagramm mit Pfeil auf Achsen) - aktiv.
 * Für Vorschlag 1 (Balken in der Lupe) genügt es, die Variable unten
 * auf --nav-maerkte-icon-lupe umzustellen.
 */
:root {
  --nav-maerkte-icon: var(--nav-maerkte-icon-chart);

  --nav-maerkte-icon-chart: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 7 v45 a3 3 0 0 0 3 3 h44"/><polyline points="17,45 29,31 39,39 53,19"/><polyline points="43,19 53,19 53,29"/></svg>');

  --nav-maerkte-icon-lupe: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="28" cy="28" r="20"/><line x1="42" y1="42" x2="57" y2="57"/><line x1="21" y1="34" x2="21" y2="26"/><line x1="28" y1="34" x2="28" y2="19"/><line x1="35" y1="34" x2="35" y2="23"/></svg>');
}

/*
 * Der Span uebernimmt Groesse und Zeilenhoehe unveraendert von den
 * bestehenden Regeln (65px). Hier wird bewusst nichts ueberschrieben - jede
 * Abweichung verschiebt die Beschriftung gegenueber den Nachbareintraegen.
 */

/* ---- Vorerst nicht auf Mobil ---- */

/*
 * Offcanvas-Menü: derselbe WordPress-Menüeintrag wird dort ebenfalls
 * ausgegeben. Bis die mobile Variante entschieden ist, bleibt er verborgen.
 */
#navigation-primary-offcanvas > li.nav-item--desktop-only,
.menu-primary--mobile > li.nav-item--desktop-only {
  display: none;
}