/* icons.css */

:root {
  /* Pfade zu den SVGs im sdt dark theme */
  --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');
  
  --icon-size-nav: 20px;      /*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 */
}

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

/* Logik: Alle Elemente mit der Klasse .nav-icon nutzen die Variablen */
.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;
  
  
  -webkit-mask-repeat: contain;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  
  -webkit-mask-position: center;
  mask-position: center;
}

/* Zuweisung der spezifischen Variablen */
/* Zuweisung der Maske statt 'content' */
.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); }



.nav-wrapper:hover .nav-icon {
    background-color: var(--link-hover);
	transition: color 0.3s ease; 
}


.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;
    position: relative;
	margin-right: 3px;
}

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