/*
 * Hexicon Font v1.0
 * Erstellt für dich, basierend auf deinen SVG-Icons.
 * ------------------------------------------------------- */

:root {
  --deep-red-black: #1c1c24;
  --menu-gold: rgb(214, 177, 97);
  --menu-gold-dark: rgb(214, 177, 97);
  --old-white: #FFFFF9;
}

@font-face {
  font-family: 'hexicons'; /* Dein eigener Font-Name */
  /* WICHTIG: Benenne die Font-Dateien von Fontello entsprechend um! */
  src: url('./hexicons.woff2') format('woff2'),
       url('./hexicons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block; /* Sorgt für schnelles Laden der Icons */
}

/*
 * 1. Basis-Klasse
 * Diese Klasse wird jedem Icon zugewiesen.
 */
.hx {
  font-family: 'hexicons';
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  
  /* Standardfarbe für alle Icons */
  color: var(--deep-red-black);

  /* Sorgt für saubere Kantenglättung */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * 2. Hilfsklassen (optional, aber nützlich)
 * Für einfache Größen- und Farbänderungen.
 */
.hx-2x { font-size: 2em; }
.hx-3x { font-size: 3em; }
.hx-4x { font-size: 4em; }

.hx-gold { color: var(--menu-gold); }
.hx-white { color: var(--old-white); }
.hx-black { color: var(--deep-red-black); }

/*
 * 3. Icon-Mapping
 * Hier wird jedem Icon-Namen der richtige Charakter-Code zugewiesen.
 * Die Codes stammen direkt aus deiner config.json.
 */
.hx-hex-x-thin:before { content: '\e800'; }
.hx-hex-x:before { content: '\e801'; }
.hx-hex-user-thin:before { content: '\e802'; }
.hx-hex-user:before { content: '\e803'; }
.hx-hex-upload-thin:before { content: '\e804'; }
.hx-hex-upload:before { content: '\e805'; }
.hx-hex-unlock-thin:before { content: '\e806'; }
.hx-hex-unlock:before { content: '\e807'; }
.hx-hex-thin:before { content: '\e808'; }
.hx-hex:before { content: '\e000'; }

.hx-hex-stop-thin:before { content: '\e80a'; }
.hx-hex-stop:before { content: '\e80b'; }
.hx-hex-star-thin:before { content: '\e80c'; }
.hx-hex-star:before { content: '\e80d'; }
.hx-hex-settings-thin:before { content: '\e80e'; }
.hx-hex-settings:before { content: '\e80f'; }
.hx-hex-search-thin:before { content: '\e810'; }
.hx-hex-search:before { content: '\e811'; }
.hx-hex-record-thin:before { content: '\e812'; }
.hx-hex-record:before { content: '\e813'; }
.hx-hex-question-thin:before { content: '\e814'; }
.hx-hex-question:before { content: '\e815'; }
.hx-hex-plus-thin:before { content: '\e816'; }
.hx-hex-plus:before { content: '\e817'; }
.hx-hex-play-thin:before { content: '\e818'; }
.hx-hex-play:before { content: '\e819'; }
.hx-hex-pause-thin:before { content: '\e81a'; }
.hx-hex-pause:before { content: '\e81b'; }
.hx-hex-minus-thin:before { content: '\e81c'; }
.hx-hex-minus:before { content: '\e81d'; }
.hx-hex-message-thin:before { content: '\e81e'; }
.hx-hex-message:before { content: '\e81f'; }
.hx-hex-lock-thin:before { content: '\e820'; }
.hx-hex-lock:before { content: '\e821'; }
.hx-hex-inner-thin:before { content: '\e822'; }
.hx-hex-inner:before { content: '\e823'; }
.hx-hex-info-thin:before { content: '\e824'; }
.hx-hex-info:before { content: '\e825'; }
.hx-hex-heart-thin:before { content: '\e826'; }
.hx-hex-heart:before { content: '\e827'; }
.hx-hex-download-thin:before { content: '\e828'; }
.hx-hex-download:before { content: '\e829'; }
.hx-hex-check-thin:before { content: '\e82a'; }
.hx-hex-check:before { content: '\e82b'; }
.hx-hex-calendar-thin:before { content: '\e82c'; }
.hx-hex-calendar:before { content: '\e82d'; }
.hx-hex-biohack-vial-thin:before { content: '\e82e'; }
.hx-hex-biohack-vial:before { content: '\e82f'; }
.hx-hex-biohack-thin:before { content: '\e830'; }
.hx-hex-biohack:before { content: '\e831'; }
.hx-hex-biohack-flask-thin:before { content: '\e832'; }
.hx-hex-biohack-flask:before { content: '\e833'; }
.hx-hex-barbell-thin:before { content: '\e834'; }
.hx-hex-barbell:before { content: '\e835'; }
.hx-hex-arrow-up-thin:before { content: '\e836'; }
.hx-hex-arrow-up:before { content: '\e837'; }
.hx-hex-arrow-right-thin:before { content: '\e838'; }
.hx-hex-arrow-right:before { content: '\e839'; }
.hx-hex-arrow-left-thin:before { content: '\e83a'; }
.hx-hex-arrow-left:before { content: '\e83b'; }
.hx-hex-arrow-down-thin:before { content: '\e83c'; }
.hx-hex-arrow-down:before { content: '\e83d'; }
.hx-hex-antiaging-thin:before { content: '\e83e'; }
.hx-hex-antiaging:before { content: '\e83f'; }
.hx-hex-antiaging-infinity-thin:before { content: '\e840'; }
.hx-hex-antiaging-infinity:before { content: '\e841'; }
.hx-hex-alert-thin:before { content: '\e842'; }
.hx-hex-alert:before { content: '\e843'; }
.hx-hex-react-extra-thin-spaced:before { content: '\e800'; } /* '' */
.hx-hex-react-ultra-thin-spaced:before { content: '\e801'; } /* '' */
.hx-hex-react-ultra-thin2:before { content: '\e802'; } /* '' */
.hx-hex-react-extra-thin3:before { content: '\e803'; } /* '' */
.icon-hex-react-thin:before { content: '\e848'; } 
.icon-hex-react-thin-spaced:before { content: '\e849'; }