/* icons.css */

:root {
  /* Pfade zu den SVGs */
  --home-icon: url('/assets/icons/home_white.svg');
  --contact-icon: url('/assets/icons/contact_page_white.svg');
  --calendar-clock-icon: url('/assets/icons/calendar_clock_white.svg');
  --impressum-icon: url('/assets/icons/info_white.svg');
  --privacy-icon: url('/assets/icons/shield_lock_white.svg');
  --cookies-icon: url('/assets/icons/cookie_white.svg');
  --agb-icon: url('/assets/icons/agb_white.svg');
  --dark-bright-switch: url('/assets/icons/invert_white.svg');
  --login-icon: url('/assets/icons/login.svg'); 
  --user-icon:  url('/assets/icons/user.svg');
  --logout-icon: url('/assets/icons/logout.svg');
  --icon-assignment: url('/assets/icons/assignment.svg');
  --icon-timeline: url('/assets/icons/equalizer.svg');
  --icon-cv: url('/assets/icons/article_person.svg');
  --icon-projects: url('/assets/icons/work.svg');
  --icon-about: url('/assets/icons/about.svg');
  --icon-services: url('/assets/icons/work.svg');


  
  
  --icon-size-nav:24px;      /* Größe der Menue Bar Icons */
  --icon-size-footer: 16px;   /* Größe der footer Icons */
  --icon-color: var(--text-color-menue);
  
  
  --flag-size: 24px;         /* Größe der flaggen Icons */
  --theme-switcher-btn-size: 20px; /* Größe der theme Icons */
  --login-btn-size: 24px;    /* Empfehlung: 24px statt 12px */
  --user-btn-size: 24px;     /* Empfehlung: 24px statt 12px */
}

/* Dark Mode Umschaltung */
[data-theme="light"] {
  --icon-color: var(--text-color-menue);  
}

/* Basis-Logik für alle .nav-icon Elemente */
.nav-icon {
  width: var(--icon-size-nav);
  height: var(--icon-size-nav);
  vertical-align: middle;
  position: relative;
  display: inline-block;
  background-color: var(--icon-color);
  transition: background-color 0.3s ease;
  
      transform: translateY(-1px);
  
  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Zuweisung der spezifischen Masken */
.icon-home           { -webkit-mask-image: var(--home-icon); mask-image: var(--home-icon); }
.icon-contact        { -webkit-mask-image: var(--contact-icon); mask-image: var(--contact-icon); }
.icon-calendar-clock { -webkit-mask-image: var(--calendar-clock-icon); mask-image: var(--calendar-clock-icon); }
.icon-impressum      { -webkit-mask-image: var(--impressum-icon); mask-image: var(--impressum-icon); }
.icon-privacy        { -webkit-mask-image: var(--privacy-icon); mask-image: var(--privacy-icon); }
.icon-cookies        { -webkit-mask-image: var(--cookies-icon); mask-image: var(--cookies-icon); }
.icon-agb            { -webkit-mask-image: var(--agb-icon); mask-image: var(--agb-icon); }
.icon-theme-switch   { -webkit-mask-image: var(--dark-bright-switch); mask-image: var(--dark-bright-switch); }
.icon-login          { -webkit-mask-image: var(--login-icon);  mask-image: var(--login-icon); }
.icon-user           { -webkit-mask-image: var(--user-icon);   mask-image: var(--user-icon); } 
.icon-logout         { -webkit-mask-image: var(--logout-icon); mask-image: var(--logout-icon); }
.icon-assignment	 { -webkit-mask-image: var(--icon-assignment); mask-image: var(--icon-assignment); }
.icon-timeline	 	 { -webkit-mask-image: var(--icon-timeline); mask-image: var(--icon-timeline); }
.icon-about	 		 { -webkit-mask-image: var(--icon-about); mask-image: var(--icon-about); }
.icon-projects	 	 { -webkit-mask-image: var(--icon-projects); mask-image: var(--icon-projects); }
.icon-services	 	 { -webkit-mask-image: var(--icon-services); mask-image: var(--icon-services); }




/* Hover-Effekt */
.nav-wrapper:hover .nav-icon {
    background-color: var(--link-hover);
}

/* Footer & Social Icons */
.social-icon {
    width: calc(var(--icon-size-footer) * 0.8); 
    height: calc(var(--icon-size-footer) * 0.8);
    display: inline-block;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 3px;
}

.nav-icon-footer {
  width: var(--icon-size-footer);
  height: var(--icon-size-footer);
  vertical-align: middle;
  display: inline-block;
  transform: translateY(-1px);
  background-color: var(--icon-color);
  transition: background-color 0.3s ease;
  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}